├── .browserslistrc
├── public
    ├── icon.ico
    ├── icon1.ico
    ├── favicon.ico
    └── index.html
├── src
    ├── imgs
    │   ├── R.jpg
    │   ├── RR.jpg
    │   ├── OIP.jpg
    │   ├── OIPP.jpg
    │   ├── RRR.jpg
    │   ├── OIPPP.jpg
    │   ├── not-found.jpg
    │   └── nature-images.jpg
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── App.vue
    ├── router.js
    ├── pages
    │   ├── NotFound.vue
    │   ├── FormPage.vue
    │   ├── PhotoPage.vue
    │   └── MainPage.vue
    └── components
    │   ├── TheSpinner.vue
    │   └── TheForm.vue
├── babel.config.js
├── vue.config.js
├── .gitignore
├── jsconfig.json
├── .eslintrc.js
├── package.json
└── README.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | not ie 11
5 | 


--------------------------------------------------------------------------------
/public/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/public/icon.ico


--------------------------------------------------------------------------------
/src/imgs/R.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/src/imgs/R.jpg


--------------------------------------------------------------------------------
/src/imgs/RR.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/src/imgs/RR.jpg


--------------------------------------------------------------------------------
/public/icon1.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/public/icon1.ico


--------------------------------------------------------------------------------
/src/imgs/OIP.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/src/imgs/OIP.jpg


--------------------------------------------------------------------------------
/src/imgs/OIPP.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/src/imgs/OIPP.jpg


--------------------------------------------------------------------------------
/src/imgs/RRR.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/src/imgs/RRR.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/imgs/OIPPP.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/src/imgs/OIPPP.jpg


--------------------------------------------------------------------------------
/src/imgs/not-found.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/src/imgs/not-found.jpg


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/imgs/nature-images.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asmaaadel0/Photo-Album/HEAD/src/imgs/nature-images.jpg


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router.js';
4 | 
5 | const app = createApp(App);
6 | app.use(router);
7 | 
8 | app.mount('#app');


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 |   name: 'App',
 9 | }
10 | </script>
11 | 
12 | <style>
13 | #app {
14 |   font-family: Avenir, Helvetica, Arial, sans-serif;
15 |   -webkit-font-smoothing: antialiased;
16 |   -moz-osx-font-smoothing: grayscale;
17 |   text-align: center;
18 |   color: #2c3e50;
19 |   margin-top: 60px;
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: '@babel/eslint-parser'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "photo-album",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.8.3",
12 |     "vue": "^3.2.13",
13 |     "vue-router": "^4.1.6"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/core": "^7.12.16",
17 |     "@babel/eslint-parser": "^7.12.16",
18 |     "@vue/cli-plugin-babel": "~5.0.0",
19 |     "@vue/cli-plugin-eslint": "~5.0.0",
20 |     "@vue/cli-service": "~5.0.0",
21 |     "eslint": "^7.32.0",
22 |     "eslint-plugin-vue": "^8.0.3"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router';
 2 | 
 3 | import FormPage from './pages/FormPage.vue';
 4 | import MainPage from './pages/MainPage.vue';
 5 | import NotFound from './pages/NotFound.vue';
 6 | 
 7 | import PhotoPage from './pages/PhotoPage.vue';
 8 | 
 9 | const router = createRouter({
10 |     history: createWebHistory(),
11 |     routes: [
12 |         { path: '/', redirect: '/main' },
13 |         {
14 |             path: '/main',
15 |             component: MainPage,
16 |         },
17 |         { path: '/form', component: FormPage },
18 |         { path: '/photo/:category/:id/', component: PhotoPage },
19 |         { path: '/:notFound(.*)', component: NotFound },
20 |     ],
21 | });
22 | 
23 | export default router;


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <link rel="icon" href="<%= BASE_URL %>icon.ico">
 9 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
10 |     <title>
11 |         Album
12 |     </title>
13 | </head>
14 | 
15 | <body>
16 |     <noscript>
17 |         <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
18 |                 Please enable it to continue.</strong>
19 |     </noscript>
20 |     <div id="app"></div>
21 |     <!-- built files will be auto injected -->
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/src/pages/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="not-found-user-page-container">
 3 |     <div class="not-found-user-page-box">
 4 |       <div class="not-found-logo">
 5 |         <img src="../imgs/not-found.jpg" alt="" />
 6 |       </div>
 7 |       <div>
 8 |         <button
 9 |           class="btn"
10 |           id="go-home"
11 |           @click="$router.push('/')"
12 |         >
13 |           Go Home
14 |         </button>
15 |       </div>
16 |     </div>
17 |   </div>
18 | </template>
19 | <script>
20 | export default {};
21 | </script>
22 | <style>
23 | .not-found-user-page-container {
24 |   display: flex;
25 |   align-items: center;
26 |   justify-content: center;
27 |   width: 100%;
28 |   min-height: 100vh;
29 | }
30 | .not-found-user-page-box {
31 |   display: flex;
32 |   flex-direction: column;
33 |   align-items: center;
34 |   justify-content: center;
35 | }
36 | .btn {
37 |   background-color: #9b3333;
38 |   color: #fff;
39 |   border: none;
40 |   border-radius: 2px;
41 |   font-family: "Josefin Sans", sans-serif;
42 |   font-size: 1rem;
43 |   text-transform: uppercase;
44 |   padding: 0.3rem 2rem;
45 |   cursor: pointer;
46 |   transition: all 0.2s;
47 | }
48 | .btn:hover,
49 | .add-photo:hover,
50 | .btnn:hover {
51 |   background-color: #bc3131;
52 |   color: #fff;
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/pages/FormPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="loading">
 4 |       <the-spinner
 5 |         style="position: absolute; left: 50%; top: 50%"
 6 |       ></the-spinner>
 7 |     </div>
 8 |     <TheForm :categories="categories" />
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import TheForm from "../components/TheForm.vue";
14 | import TheSpinner from "../components/TheSpinner.vue";
15 | export default {
16 |   components: {
17 |     TheSpinner,
18 |     TheForm,
19 |   },
20 |   async beforeMount() {
21 |     this.loading = true;
22 |     await this.loadCategories();
23 |     this.loading = false;
24 |   },
25 |   data() {
26 |     return {
27 |       categories: [],
28 |       errorResponse: "",
29 |       loading: false,
30 |     };
31 |   },
32 |   methods: {
33 |     async loadCategories() {
34 |       await fetch(
35 |         "https://photo-album-2fcd4-default-rtdb.firebaseio.com/categories.json"
36 |       )
37 |         .then((response) => {
38 |           if (response.ok) {
39 |             return response.json();
40 |           }
41 |         })
42 |         .then((data) => {
43 |           const results = [];
44 |           for (const id in data) {
45 |             results.push({
46 |               id: id,
47 |               category: data[id].category,
48 |             });
49 |           }
50 |           this.categories = results;
51 |         })
52 |         .catch((error) => {
53 |           this.errorResponse =
54 |             "Failed to fetch data - please try again later" || error;
55 |         });
56 |     },
57 |   },
58 | };
59 | </script>
60 | 
61 | <style>
62 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 📝 Table of Contents
 2 | 
 3 | - [About <a name = "about"></a>](#about-)
 4 | - [Website link <a name = "link"></a>](#website-link-)
 5 | - [Screen Video <a name = "screen-video"></a>](#screen-video-)
 6 | - [Project setup <a name = "Project-setup"></a>](#project-setup-)
 7 | - [Compiles and hot-reloads for development <a name = "Compiles-and-hot-reloads-for-development"></a>](#compiles-and-hot-reloads-for-development-)
 8 | - [Contributors <a name = "Contributors"></a>](#contributors-)
 9 | 
10 | ## About <a name = "about"></a>
11 | - Simple photo gallery to Upload your media images and store them with description and then you will be able to search images by categories, I use firebase to store  data, add some animation for the website, and there is a spinner when the data are loading . I implement the website using Vue js, and deploy it using vercel.
12 | - I add some validation to the input when anyone try to add new image:
13 |   - If category already exists, you cann't create new one with same name.
14 |   - you cann't submit the form without description, category, or upload image
15 |   - you can choose existing category or create new one with different name.
16 | 
17 | ## Website link <a name = "link"></a>
18 | - https://photo-album-one.vercel.app/
19 | 
20 | ## Screen Video: <a name = "screen-video"></a>
21 | 
22 | https://user-images.githubusercontent.com/88618793/233878410-50f7a040-f6a0-43d0-b2f4-3af824857f0f.mp4
23 | 
24 | 
25 | ## Project setup <a name = "Project-setup"></a>
26 | - npm install
27 | 
28 | ## Compiles and hot-reloads for development <a name = "Compiles-and-hot-reloads-for-development"></a>
29 | - npm run serve
30 | 
31 | ## Contributors <a name = "Contributors"></a>
32 | 
33 | <table>
34 |   <tr>
35 |     <td align="center">
36 |     <a href="https://github.com/asmaaadel0" target="_black">
37 |     <img src="https://avatars.githubusercontent.com/u/88618793?s=400&u=886a14dc5ef5c205a8e51942efe9665ed8fd4717&v=4" width="150px;" alt="Asmaa Adel"/>
38 |     <br />
39 |     <sub><b>Asmaa Adel</b></sub></a>
40 |     
41 |   </tr>
42 |  </table>
43 | 


--------------------------------------------------------------------------------
/src/components/TheSpinner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<div class="lds-roller">
  4 | 			<div></div>
  5 | 			<div></div>
  6 | 			<div></div>
  7 | 			<div></div>
  8 | 			<div></div>
  9 | 			<div></div>
 10 | 			<div></div>
 11 | 			<div></div>
 12 | 		</div>
 13 | 	</div>
 14 | </template>
 15 | <style scoped>
 16 | .lds-roller {
 17 | 	display: inline-block;
 18 | 	position: relative;
 19 | 	width: 80px;
 20 | 	height: 80px;
 21 | }
 22 | .lds-roller div {
 23 | 	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 24 | 	transform-origin: 40px 40px;
 25 | }
 26 | .lds-roller div:after {
 27 | 	content: ' ';
 28 | 	display: block;
 29 | 	position: absolute;
 30 | 	width: 7px;
 31 | 	height: 7px;
 32 | 	border-radius: 50%;
 33 | 	background: #7c7c7c;
 34 | 	margin: -4px 0 0 -4px;
 35 | }
 36 | .lds-roller div:nth-child(1) {
 37 | 	animation-delay: -0.036s;
 38 | }
 39 | .lds-roller div:nth-child(1):after {
 40 | 	top: 63px;
 41 | 	left: 63px;
 42 | }
 43 | .lds-roller div:nth-child(2) {
 44 | 	animation-delay: -0.072s;
 45 | }
 46 | .lds-roller div:nth-child(2):after {
 47 | 	top: 68px;
 48 | 	left: 56px;
 49 | }
 50 | .lds-roller div:nth-child(3) {
 51 | 	animation-delay: -0.108s;
 52 | }
 53 | .lds-roller div:nth-child(3):after {
 54 | 	top: 71px;
 55 | 	left: 48px;
 56 | }
 57 | .lds-roller div:nth-child(4) {
 58 | 	animation-delay: -0.144s;
 59 | }
 60 | .lds-roller div:nth-child(4):after {
 61 | 	top: 72px;
 62 | 	left: 40px;
 63 | }
 64 | .lds-roller div:nth-child(5) {
 65 | 	animation-delay: -0.18s;
 66 | }
 67 | .lds-roller div:nth-child(5):after {
 68 | 	top: 71px;
 69 | 	left: 32px;
 70 | }
 71 | .lds-roller div:nth-child(6) {
 72 | 	animation-delay: -0.216s;
 73 | }
 74 | .lds-roller div:nth-child(6):after {
 75 | 	top: 68px;
 76 | 	left: 24px;
 77 | }
 78 | .lds-roller div:nth-child(7) {
 79 | 	animation-delay: -0.252s;
 80 | }
 81 | .lds-roller div:nth-child(7):after {
 82 | 	top: 63px;
 83 | 	left: 17px;
 84 | }
 85 | .lds-roller div:nth-child(8) {
 86 | 	animation-delay: -0.288s;
 87 | }
 88 | .lds-roller div:nth-child(8):after {
 89 | 	top: 56px;
 90 | 	left: 12px;
 91 | }
 92 | @keyframes lds-roller {
 93 | 	0% {
 94 | 		transform: rotate(0deg);
 95 | 	}
 96 | 	100% {
 97 | 		transform: rotate(360deg);
 98 | 	}
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/pages/PhotoPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="">
  3 |     <!-- <img src="../imgs/OIP.jpg" alt="photo" class="rounded float-end" /> -->
  4 |     <!-- <h5 class="home__name">
  5 |       Description:
  6 |       photo.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphotophoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categorycategoryphoto.categoryphoto.category
  7 |     </h5> -->
  8 | 
  9 |     <!-- <figure>
 10 |       <img src="../imgs/R.jpg" class="figure-img img-fluid rounded" alt="..." />
 11 |       <figcaption class="figure-caption">
 12 |         Description:
 13 |         photo.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphotophoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categoryphoto.categorycategoryphoto.categoryphoto.category
 14 |       </figcaption>
 15 |     </figure> -->
 16 |     <div v-if="loading">
 17 |       <the-spinner
 18 |         style="position: absolute; left: 50%; top: 50%"
 19 |       ></the-spinner>
 20 |     </div>
 21 |     <div v-else class="common slidedown">
 22 |       <img :src="photo.file" alt="Image Caption Slidedown" />
 23 |       <div class="pic-caption">Description: {{ photo.description }}</div>
 24 |     </div>
 25 |     <button class="btn home__btn" @click="$router.push('/main')">
 26 |       Go Back
 27 |     </button>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import TheSpinner from "../components/TheSpinner.vue";
 33 | export default {
 34 |   components: {
 35 |     TheSpinner,
 36 |   },
 37 |   data() {
 38 |     return {
 39 |       photo: [],
 40 |       loading: false,
 41 |     };
 42 |   },
 43 |   computed: {
 44 |     category() {
 45 |       return this.$route.params.category;
 46 |     },
 47 |     id() {
 48 |       return this.$route.params.id;
 49 |     },
 50 |   },
 51 |   async beforeMount() {
 52 |     this.loading = true;
 53 |     await this.loadPhoto();
 54 |     this.loading = false;
 55 |   },
 56 |   methods: {
 57 |     async loadPhoto() {
 58 |       let result = [];
 59 |       await fetch(
 60 |         "https://photo-album-2fcd4-default-rtdb.firebaseio.com/" +
 61 |           this.category +
 62 |           ".json"
 63 |       )
 64 |         .then((response) => {
 65 |           if (response.ok) {
 66 |             return response.json();
 67 |           }
 68 |         })
 69 |         .then((data) => {
 70 |           for (const id in data) {
 71 |             if (this.id == id) {
 72 |               result = {
 73 |                 id: id,
 74 |                 description: data[id].description,
 75 |                 category: data[id].category,
 76 |                 file: data[id].file,
 77 |               };
 78 | 
 79 |               this.photo = result;
 80 |               return;
 81 |             }
 82 |           }
 83 |           this.$router.push("/error");
 84 |         })
 85 |         .catch((error) => {
 86 |           this.errorResponse =
 87 |             "Failed to fetch data - please try again later" || error;
 88 |         });
 89 |     },
 90 |   },
 91 | };
 92 | </script>
 93 | 
 94 | <style scoped>
 95 | /* General Style */
 96 | .common {
 97 |   margin: 0;
 98 |   padding: 0;
 99 |   display: inline-block;
100 |   position: relative;
101 |   overflow: hidden;
102 | }
103 | 
104 | .common::before,
105 | .common::after {
106 |   content: "";
107 |   width: 100%;
108 |   height: 100%;
109 |   background: black;
110 |   position: absolute;
111 |   opacity: 0.3;
112 |   top: 0;
113 |   left: 0;
114 |   -moz-transform: translate3d(0, -100%, 0);
115 |   -webkit-transform: translate3d(0, -100%, 0);
116 |   transform: translate3d(0, -100%, 0);
117 |   -moz-transition: all 0.5s;
118 |   -webkit-transition: all 0.5s;
119 |   transition: all 0.5s;
120 | }
121 | 
122 | .pic-caption {
123 |   position: absolute;
124 |   text-align: center;
125 |   background: lightyellow;
126 |   z-index: 999;
127 |   width: 100%;
128 |   max-height: 100%;
129 |   overflow: hidden;
130 |   top: 50%;
131 |   -webkit-transform: translate3d(-100%, -50%, 0);
132 |   transform: translate3d(-100%, -50%, 0);
133 |   -webkit-transition: all 0.5s;
134 |   transition: all 0.5s;
135 |   line-height: 30px;
136 |   font-size: 16px;
137 |   padding: 2rem 0;
138 | }
139 | 
140 | img {
141 |   display: block;
142 | }
143 | 
144 | /* Slidedown Caption */
145 | .slidedown:hover::before {
146 |   -moz-transform: translate3d(0, 0, 0);
147 |   -webkit-transform: translate3d(0, 0, 0);
148 |   transform: translate3d(0, 0, 0);
149 | }
150 | 
151 | .slidedown:hover .pic-caption {
152 |   opacity: 1;
153 |   -moz-transform: translate3d(0, -50%, 0);
154 |   -webkit-transform: translate3d(0, -50%, 0);
155 |   transform: translate3d(0, -50%, 0);
156 |   -moz-transition: all 0.5s;
157 |   -webkit-transition: all 0.5s;
158 |   transition: all 0.5s;
159 |   -moz-transition-delay: 0.5s;
160 |   -webkit-transition-delay: 0.5s;
161 |   transition-delay: 0.5s;
162 | }
163 | 
164 | img {
165 |   border: 1px solid #ddd;
166 |   border-radius: 4px;
167 |   padding: 5px;
168 |   transition: all 0.2s;
169 |   height: auto;
170 |   display: block;
171 |   margin: auto;
172 |   width: 50%;
173 | }
174 | img:hover {
175 |   background-color: rgb(238, 233, 233);
176 |   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
177 |     0 17px 50px 0 rgba(0, 0, 0, 0.19);
178 | }
179 | .section {
180 |   display: grid;
181 |   grid-template-columns: repeat(2, 1fr);
182 |   grid-row-gap: 1rem;
183 | }
184 | </style>


--------------------------------------------------------------------------------
/src/components/TheForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <form @submit.prevent="handleSubmit()">
  3 |     <label for="description">description:</label>
  4 |     <input
  5 |       type="text"
  6 |       name="description"
  7 |       id="description"
  8 |       v-model="description"
  9 |     />
 10 |     <div v-if="!description & error" class="error">Add description!</div>
 11 | 
 12 |     <label for="category" v-if="categories.length != 0"
 13 |       >Select a category:</label
 14 |     >
 15 |     <select
 16 |       name="category"
 17 |       id="category"
 18 |       v-model="choosenCategory"
 19 |       @change="newCategory = ''"
 20 |       v-if="categories.length != 0"
 21 |     >
 22 |       <option :value="category" v-for="category in categories" :key="category">
 23 |         {{ category.category }}
 24 |       </option>
 25 |     </select>
 26 | 
 27 |     <label for="newCategory" v-if="categories.length != 0"
 28 |       >Or Create new one:</label
 29 |     >
 30 |     <label for="newCategory" v-else>Create new Category:</label>
 31 |     <input
 32 |       type="text"
 33 |       name="newCategory"
 34 |       id="newCategory"
 35 |       v-model="newCategory"
 36 |       @input="onChangeInput"
 37 |     />
 38 |     <div v-if="sameCategory" class="error">
 39 |       There exist category with same name .
 40 |     </div>
 41 |     <div v-if="!choosenCategory & !newCategory & error" class="error">
 42 |       Choose Category or add new one...
 43 |     </div>
 44 |     <label for="image">Image file:</label>
 45 |     <input
 46 |       type="file"
 47 |       accept="image/jpg, image/jpeg, image/png, image/JPG"
 48 |       name="image"
 49 |       id="image"
 50 |       @change="onChangeFile"
 51 |     />
 52 |     <div v-if="!fileUrl & error" class="error">Choose file</div>
 53 |     <div class="submit">
 54 |       <button class="btn">Submit</button>
 55 |     </div>
 56 |     <div v-if="errorResponse" class="error">{{ errorResponse }}</div>
 57 |   </form>
 58 | </template>
 59 | <script>
 60 | export default {
 61 |   name: "TheForm",
 62 |   data() {
 63 |     return {
 64 |       description: "",
 65 |       error: false,
 66 |       fileUrl: "",
 67 |       choosenCategory: "",
 68 |       newCategory: "",
 69 |       errorResponse: null,
 70 |       sameCategory: false,
 71 |     };
 72 |   },
 73 |   methods: {
 74 |     onChangeFile(event) {
 75 |       const file = event.target.files[0];
 76 |       const reader = new FileReader();
 77 |       reader.onload = () => {
 78 |         this.fileUrl = reader.result;
 79 |       };
 80 |       reader.readAsDataURL(file);
 81 |       // const files = event.target.files;
 82 |       // // this.file = URL.createObjectURL(event.target.files[0]);
 83 |       // const fileReader = new FileReader();
 84 |       // fileReader.addEventListener(
 85 |       //   "load",
 86 |       //   () => {
 87 |       //     // convert image file to base64 string
 88 |       //     this.fileUrl = fileReader.result;
 89 |       //   },
 90 |       //   false
 91 |       // );
 92 | 
 93 |       // if (this.fileUrl) {
 94 |       //   fileReader.readAsDataURL(this.fileUrl);
 95 |       // }
 96 |       // fileReader.readAsDataURL(files[0]);
 97 |       // this.file = files[0];
 98 |       // console.log(this.fileUrl);
 99 |       // // this.$emit("update:modelValue", event.target.files[0]);
100 |     },
101 |     onChangeInput() {
102 |       this.choosenCategory = "";
103 |       for (let i = 0; i < this.categories.length; i++) {
104 |         if (this.categories[i].category == this.newCategory) {
105 |           this.sameCategory = true;
106 |         } else {
107 |           this.sameCategory = false;
108 |         }
109 |       }
110 |     },
111 |     async handleSubmit() {
112 |       if (!this.description || !this.fileUrl || this.sameCategory) {
113 |         this.error = true;
114 |         return;
115 |       } else if (!this.choosenCategory & !this.newCategory) {
116 |         this.error = true;
117 |         return;
118 |       }
119 |       this.error = true;
120 |       let category = "";
121 |       if (this.newCategory) {
122 |         category = this.newCategory;
123 |         await fetch(
124 |           "https://photo-album-2fcd4-default-rtdb.firebaseio.com/categories.json",
125 |           {
126 |             method: "POST",
127 |             headers: {
128 |               "Content-Type": "application/json",
129 |             },
130 |             body: JSON.stringify({
131 |               category: category,
132 |             }),
133 |           }
134 |         )
135 |           .then((response) => {
136 |             if (response.ok) {
137 |               //
138 |             } else {
139 |               throw new Error("could not save data!");
140 |             }
141 |           })
142 |           .catch((error) => {
143 |             this.errorResponse = error.message;
144 |           });
145 |       } else {
146 |         category = this.choosenCategory.category;
147 |       }
148 |       await fetch(
149 |         "https://photo-album-2fcd4-default-rtdb.firebaseio.com/" +
150 |           category +
151 |           ".json",
152 |         {
153 |           method: "POST",
154 |           headers: {
155 |             "Content-Type": "application/json",
156 |           },
157 |           body: JSON.stringify({
158 |             description: this.description,
159 |             category: category,
160 |             file: this.fileUrl,
161 |           }),
162 |         }
163 |       )
164 |         .then((response) => {
165 |           if (response.ok) {
166 |             this.$router.push("/");
167 |           } else {
168 |             throw new Error("could not save data!");
169 |           }
170 |         })
171 |         .catch((error) => {
172 |           this.errorResponse = error.message;
173 |         });
174 |     },
175 |   },
176 |   props: ["categories"],
177 | };
178 | </script>
179 | 
180 | <!-- Add "scoped" attribute to limit CSS to this component only -->
181 | <style scoped>
182 | form {
183 |   max-width: 420px;
184 |   margin: 30px auto;
185 |   background: white;
186 |   text-align: left;
187 |   padding: 40px;
188 |   border-radius: 10px;
189 | }
190 | 
191 | label,
192 | .add {
193 |   color: #aaa;
194 |   display: inline-block;
195 |   margin: 25px 0 15px;
196 |   font-size: 0.6em;
197 |   text-transform: uppercase;
198 |   letter-spacing: 1px;
199 |   font-weight: bold;
200 | }
201 | 
202 | input,
203 | select {
204 |   display: block;
205 |   padding: 10px 6px;
206 |   box-sizing: border-box;
207 |   width: 100%;
208 |   border: none;
209 |   border-bottom: 1px solid #ddd;
210 |   color: #555;
211 | }
212 | input:focus {
213 |   border: none;
214 |   outline: none;
215 |   border-bottom: 1px solid #ddd;
216 | }
217 | 
218 | .pill {
219 |   display: inline-block;
220 |   margin: 20px 10px 0 0;
221 |   padding: 6px 12px;
222 |   background: #eee;
223 |   border-radius: 20px;
224 |   font-size: 12px;
225 |   letter-spacing: 1px;
226 |   font-weight: bold;
227 |   color: #777;
228 |   cursor: pointer;
229 | }
230 | 
231 | .btn {
232 |   border: 0;
233 |   padding: 10px 20px;
234 |   margin-top: 20px;
235 |   color: white;
236 |   border-radius: 20px;
237 | }
238 | 
239 | .submit {
240 |   text-align: center;
241 | }
242 | 
243 | .error {
244 |   color: red;
245 |   margin-top: 10px;
246 |   font-size: 0.8em;
247 |   font-weight: bold;
248 | }
249 | 
250 | select:disabled {
251 |   cursor: not-allowed;
252 |   opacity: 1;
253 | }
254 | </style>


--------------------------------------------------------------------------------
/src/pages/MainPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="loading">
  4 |       <the-spinner
  5 |         style="position: absolute; left: 50%; top: 50%"
  6 |       ></the-spinner>
  7 |     </div>
  8 |     <div v-else-if="categories.length == 0">
  9 |       <div class="no-images">No Photos Yet</div>
 10 |       <button class="btn" @click="$router.push('/form')">Add photos</button>
 11 |     </div>
 12 |     <div v-else>
 13 |       <div class="container text-center">
 14 |         <div class="row">
 15 |           <div class="col-3">
 16 |             <div class="categories">Categories</div>
 17 |             <div class="list-group">
 18 |               <button
 19 |                 type="button"
 20 |                 class="list-group-item list-group-item-action"
 21 |                 aria-current="true"
 22 |                 :class="{
 23 |                   active: choosenCategory == 'All',
 24 |                   buttons: choosenCategory != 'All',
 25 |                 }"
 26 |                 @click="changeCategory('All')"
 27 |               >
 28 |                 All
 29 |               </button>
 30 |               <button
 31 |                 type="button"
 32 |                 class="list-group-item list-group-item-action"
 33 |                 aria-current="true"
 34 |                 :class="{
 35 |                   active: choosenCategory == category.category,
 36 |                   buttons: choosenCategory != category.category,
 37 |                 }"
 38 |                 v-for="category in categories"
 39 |                 :key="category"
 40 |                 @click="changeCategory(category.category)"
 41 |               >
 42 |                 {{ category.category }}
 43 |               </button>
 44 |               <button class="btn margin-top" @click="$router.push('/form')">
 45 |                 Add Photo
 46 |               </button>
 47 |             </div>
 48 |           </div>
 49 |           <div class="col-9 homes">
 50 |             <div v-if="loading">
 51 |               <the-spinner
 52 |                 style="position: absolute; left: 50%; top: 50%"
 53 |               ></the-spinner>
 54 |             </div>
 55 | 
 56 |             <div class="home" v-for="photo in listOfPhotos" :key="photo">
 57 |               <!-- <img :src="photo.file" alt="photo" class="home__img" />
 58 |               <h5 class="home__name">Category: {{ photo.category }}</h5> -->
 59 | 
 60 |               <!-- <button class="btn home__btn">View</button> -->
 61 |               <div class="card" style="width: 18rem">
 62 |                 <img :src="photo.file" class="card-img-top" alt="photo" />
 63 |                 <div class="card-body">
 64 |                   <h5 class="card-title">Category:</h5>
 65 |                   <p class="card-text">
 66 |                     {{ photo.category }}
 67 |                   </p>
 68 |                   <button
 69 |                     class="btn home__btn"
 70 |                     @click="
 71 |                       $router.push('/photo/' + photo.category + '/' + photo.id)
 72 |                     "
 73 |                   >
 74 |                     View
 75 |                   </button>
 76 |                 </div>
 77 |               </div>
 78 |             </div>
 79 |           </div>
 80 |         </div>
 81 |       </div>
 82 |     </div>
 83 |     <div class="no-messages" v-if="errorResponse">
 84 |       {{ errorResponse }}
 85 |     </div>
 86 |   </div>
 87 | </template>
 88 | 
 89 | <script>
 90 | import TheSpinner from "../components/TheSpinner.vue";
 91 | export default {
 92 |   components: {
 93 |     TheSpinner,
 94 |   },
 95 |   data() {
 96 |     return {
 97 |       errorResponse: null,
 98 |       listOfPhotos: [],
 99 |       choosenCategory: "All",
100 |       categories: [],
101 |       arrayResults: [],
102 |       allPhotos: [],
103 |       loading: false,
104 |     };
105 |   },
106 |   async beforeMount() {
107 |     this.loading = true;
108 |     await this.loadCategories();
109 |     await this.loadListOfPhotos();
110 |     this.loading = false;
111 |   },
112 |   methods: {
113 |     changeCategory(category) {
114 |       this.loading = true;
115 |       this.choosenCategory = category;
116 |       if (this.choosenCategory == "All") {
117 |         this.listOfPhotos = this.allPhotos;
118 |       } else {
119 |         for (let i = 0; i < this.categories.length; i++) {
120 |           if (this.arrayResults[i][0].category == category) {
121 |             this.listOfPhotos = this.arrayResults[i];
122 |           }
123 |         }
124 |       }
125 |       this.loading = false;
126 |     },
127 |     async loadListOfPhotos() {
128 |       let results = [];
129 |       for (let i = 0; i < this.categories.length; i++) {
130 |         await fetch(
131 |           "https://photo-album-2fcd4-default-rtdb.firebaseio.com/" +
132 |             this.categories[i].category +
133 |             ".json"
134 |         )
135 |           .then((response) => {
136 |             if (response.ok) {
137 |               return response.json();
138 |             }
139 |           })
140 |           .then((data) => {
141 |             results = [];
142 |             for (const id in data) {
143 |               results.push({
144 |                 id: id,
145 |                 description: data[id].description,
146 |                 category: data[id].category,
147 |                 file: data[id].file,
148 |               });
149 |               this.allPhotos.push({
150 |                 id: id,
151 |                 description: data[id].description,
152 |                 category: data[id].category,
153 |                 file: data[id].file,
154 |               });
155 |             }
156 |             this.arrayResults.push(results);
157 |           })
158 |           .catch((error) => {
159 |             this.errorResponse =
160 |               "Failed to fetch data - please try again later" || error;
161 |           });
162 |         this.listOfPhotos = this.allPhotos;
163 |       }
164 |     },
165 |     async loadCategories() {
166 |       await fetch(
167 |         "https://photo-album-2fcd4-default-rtdb.firebaseio.com/categories.json"
168 |       )
169 |         .then((response) => {
170 |           if (response.ok) {
171 |             return response.json();
172 |           }
173 |         })
174 |         .then((data) => {
175 |           const results = [];
176 |           for (const id in data) {
177 |             results.push({
178 |               id: id,
179 |               category: data[id].category,
180 |             });
181 |           }
182 |           this.categories = results;
183 |         })
184 |         .catch((error) => {
185 |           this.errorResponse =
186 |             "Failed to fetch data - please try again later" || error;
187 |         });
188 |     },
189 |   },
190 | };
191 | </script>
192 | 
193 | <style>
194 | .no-images {
195 |   font-size: 7rem;
196 |   margin-top: 10rem;
197 | }
198 | .categories {
199 |   font-size: 1.4rem;
200 |   color: rgb(18, 17, 16);
201 |   margin-bottom: 1rem;
202 | }
203 | .buttons:hover {
204 |   background-color: rgb(238, 233, 233);
205 |   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
206 |     0 17px 50px 0 rgba(0, 0, 0, 0.19);
207 | }
208 | .active {
209 |   background-color: black !important;
210 |   color: white;
211 |   border-radius: 0rem;
212 |   border: none;
213 |   outline: none;
214 | }
215 | .active:hover {
216 |   background-color: black;
217 | }
218 | .homes {
219 |   grid-column: center-start / center-end;
220 | 
221 |   display: grid;
222 |   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
223 |   grid-gap: 2rem;
224 | }
225 | 
226 | .home {
227 |   display: grid;
228 |   grid-template-columns: repeat(2, 1fr);
229 |   grid-row-gap: 1rem;
230 | }
231 | .home__img {
232 |   width: 100%;
233 | 
234 |   grid-row: 1 / 2;
235 |   grid-column: 1 / -1;
236 | 
237 |   z-index: 1;
238 | }
239 | 
240 | .home__name {
241 |   grid-row: 1 / 2;
242 |   grid-column: 1 / -1;
243 |   justify-self: center;
244 |   align-self: end;
245 |   z-index: 3;
246 | 
247 |   width: 80%;
248 |   font-family: "Josefin Sans", sans-serif;
249 |   font-size: 1rem;
250 |   text-align: center;
251 |   padding: 1rem;
252 |   background-color: #101d2c;
253 |   color: #fff;
254 |   font-weight: 400;
255 |   transform: translateY(50%);
256 | }
257 | .margin-top {
258 |   margin-top: 5rem;
259 | }
260 | </style>


--------------------------------------------------------------------------------