├── README.md
├── images
    ├── beats.webp
    ├── logo.png
    ├── nikon.webp
    ├── sofa.webp
    ├── Capture.JPG
    ├── airpods.webp
    ├── banner-1.jpg
    ├── dummyimg.jpg
    ├── favicon.png
    ├── location.png
    ├── oneplus.webp
    ├── ordino.webp
    ├── fortuner.webp
    ├── logo-blue.png
    ├── ninjabmw.webp
    ├── noresults.png
    ├── product-1.jpg
    └── homefinishing.webp
├── sw.js
├── css
    ├── responsive.css
    └── style.css
├── 404.html
├── index.html
└── js
    └── app.js


/README.md:
--------------------------------------------------------------------------------
1 | # basic-olx-clone
2 | 
3 | Visit site: https://olx-app-d4585.firebaseapp.com/
4 | 


--------------------------------------------------------------------------------
/images/beats.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/beats.webp


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/logo.png


--------------------------------------------------------------------------------
/images/nikon.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/nikon.webp


--------------------------------------------------------------------------------
/images/sofa.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/sofa.webp


--------------------------------------------------------------------------------
/images/Capture.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/Capture.JPG


--------------------------------------------------------------------------------
/images/airpods.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/airpods.webp


--------------------------------------------------------------------------------
/images/banner-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/banner-1.jpg


--------------------------------------------------------------------------------
/images/dummyimg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/dummyimg.jpg


--------------------------------------------------------------------------------
/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/favicon.png


--------------------------------------------------------------------------------
/images/location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/location.png


--------------------------------------------------------------------------------
/images/oneplus.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/oneplus.webp


--------------------------------------------------------------------------------
/images/ordino.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/ordino.webp


--------------------------------------------------------------------------------
/images/fortuner.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/fortuner.webp


--------------------------------------------------------------------------------
/images/logo-blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/logo-blue.png


--------------------------------------------------------------------------------
/images/ninjabmw.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/ninjabmw.webp


--------------------------------------------------------------------------------
/images/noresults.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/noresults.png


--------------------------------------------------------------------------------
/images/product-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/product-1.jpg


--------------------------------------------------------------------------------
/images/homefinishing.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaig54/basic-olx-clone/HEAD/images/homefinishing.webp


--------------------------------------------------------------------------------
/sw.js:
--------------------------------------------------------------------------------
 1 | let appVersion = '1.0';
 2 | 
 3 | const files = [
 4 |     './',
 5 |     './css/style.css',
 6 |     './css/responsive.css',
 7 |     './js/app.js',
 8 |     './images/logo.png',
 9 |     './images/favicon.png',
10 |     './images/noresults.png',
11 |     './images/banner-1.jpg',
12 | ];
13 | 
14 | self.addEventListener('install', async e => {
15 |     const cache = await caches.open(appVersion);
16 |     cache.addAll(files);
17 | })
18 | 
19 | self.addEventListener('fetch', e => {
20 |     const req = e.request;
21 |     const url = new URL(req.url);
22 |     if(url.origin === location.origin){
23 |         e.respondWith(cacheFirst(req));
24 |     }else{
25 |         e.respondWith(networkFirst(req));
26 |     }
27 | })
28 | 
29 | async function cacheFirst(req){
30 |     const cachedResponse = await caches.match(req);
31 |     return cachedResponse || fetch(req);
32 | }
33 | 
34 | async function networkFirst(req){
35 |     const cache = await caches.open('dynamic');
36 |     try{
37 |         const res = await fetch(req);
38 |         cache.put(req, res.clone());
39 |         return res;
40 |     }catch(error){
41 |         return await cache.match(req);
42 |     }
43 | }


--------------------------------------------------------------------------------
/css/responsive.css:
--------------------------------------------------------------------------------
 1 | @media (max-width: 900px){
 2 |     header .top .left {
 3 |         width: auto;
 4 |     }
 5 |     .location{
 6 |         display: none;
 7 |     }
 8 |     /* #signinBtn{
 9 |          display: none;
10 |     } */
11 |     header .top .right{
12 |         position: fixed;
13 |         bottom: 20px;
14 |         width: 89%;
15 |     }
16 |     .signinBtnDiv .dropdown{
17 |         position: fixed;
18 |         top: 77px;
19 |         right: 38px;
20 |         background: #fff;
21 |     }
22 |     .signinBtnDiv #signinBtn {
23 |         padding: 5px !important;
24 |         margin: 0 !important;
25 |     }
26 |     .sellBtnDiv{
27 |         width: 100%;
28 |         float: none;
29 |         display: flex;
30 |     }
31 |     #sellBtn{
32 |         margin: auto;
33 |     }
34 |     #signinPopupContainer, #signupPopupContainer, #categoryPopupContainer, #sellPopupContainer{
35 |         margin: 200px auto;
36 |     }
37 |     #signinPopup, #signupPopup, #categoryPopup, #sellPopup{
38 |         overflow-x: hidden;
39 |     }
40 |     .oneThird, .oneFourth, .oneFifth{
41 |         width: 100%;
42 |         float: none;
43 |     }
44 |     .popularCategories .oneThird{
45 |         border-right: solid 1px #ccc;
46 |     }
47 |     footer .bottom .left, footer .bottom .right {
48 |         float: none;
49 |         width: 100%;
50 |         text-align: center;
51 |     }
52 |     footer .bottom .right{
53 |         border-top: solid 1px #ccc;
54 |         margin: 10px 0;
55 |         padding: 10px 0;
56 |     }
57 | 
58 | 
59 |     /* ad.html */
60 |     #adDetailsPopup .left{
61 |         width: 100%;
62 |         float: none;
63 |     }
64 |     #adDetailsPopup .right{
65 |         width: 100%;
66 |         float: none;
67 |     }
68 |     #adDetailsPopupContainer .left #showAdImage img {
69 |         width: 100%;
70 |         height: auto;
71 |     }
72 | }


--------------------------------------------------------------------------------
/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     transition: .3s;
  3 |     box-sizing: border-box;
  4 | }
  5 | body{
  6 |     padding: 0;
  7 |     margin: 0;
  8 |     font-family: 'Open Sans', sans-serif;
  9 |     font-size: small
 10 | }
 11 | .container{
 12 |     max-width: 1250px;
 13 |     margin: auto;
 14 |     overflow: hidden;
 15 |     padding: 0 20px;
 16 | }
 17 | a{
 18 |     color: #333;
 19 |     text-decoration: none;
 20 |     text-transform: uppercase;
 21 |     font-weight: 700;
 22 | }
 23 | input{
 24 |     padding: 12px 25px;
 25 |     border:  none;
 26 |     background:  rgb(228, 228, 228);
 27 |     border: solid 1px rgb(228, 228, 228);
 28 |     border-radius: 20px;
 29 |     width: 100%;
 30 |     font-family: 'Open Sans', sans-serif;
 31 |     font-weight: 700;
 32 | }
 33 | input:focus{
 34 |     outline: none;
 35 |     background: #fff;
 36 |     border: solid 1px #ccc;
 37 | }
 38 | ::placeholder, ::-webkit-input-placeholder{
 39 |     color: #999;
 40 | }
 41 | input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
 42 |     -webkit-appearance: none;
 43 |     margin: 0;
 44 | }
 45 | input[type="number"] {
 46 |     -moz-appearance: textfield;
 47 | }
 48 | button{
 49 |     padding: 12px 25px;
 50 |     color: #fff;
 51 |     border: none;
 52 |     margin: 12px 5px;
 53 |     border-radius: 20px;
 54 |     text-transform: uppercase;
 55 |     font-family: 'Open Sans', sans-serif;
 56 |     font-weight: 700;
 57 |     display: inline-block;
 58 | }
 59 | button:focus{
 60 |     outline: none;
 61 | }
 62 | hr{
 63 |     height: 2px;
 64 |     background: #333;
 65 |     border: none;
 66 |     width: 10%;
 67 | }
 68 | .oneThird{
 69 |     width: 33.33%;
 70 |     float: left;
 71 | }
 72 | .oneFourth{
 73 |     width: 25%;
 74 |     float: left;
 75 | }
 76 | .oneFifth{
 77 |     width: 20%;
 78 |     float: left;
 79 | }
 80 | #warning, #signinWarning, #signupWarning{
 81 |     color: red;
 82 |     display: none;
 83 | }
 84 | ::-webkit-scrollbar{
 85 |     width:10px;
 86 | }
 87 | ::-webkit-scrollbar-track
 88 | {
 89 |     background:#d4d3d3;
 90 | }
 91 | ::-webkit-scrollbar-thumb
 92 | {
 93 |     background:#888;
 94 | }
 95 | ::-webkit-scrollbar-thumb:hover
 96 | {
 97 |     background:#2A65EA;
 98 | }
 99 | 
100 | 
101 | #main{
102 |     width: 100%;
103 | }
104 | header{
105 |     width: 100%;
106 |     position: fixed;
107 |     background: #fff;
108 |     z-index: 2;
109 | }
110 | 
111 | /* header top */
112 | header .top{
113 |     width: 100%;
114 | }
115 | header .top .left{
116 |     width: 75%;
117 |     float: left;
118 | }
119 | header .top .right{
120 |     width: 25%;
121 |     float: right;
122 | }
123 | .mainLogo, .location, .search{
124 |     float: left;
125 |     margin: 12px;
126 | }
127 | .location{
128 |     width: 20%;
129 |     display: none;
130 | }
131 | .search{
132 |     width: 50%;
133 | }
134 | .search input{
135 |     width: 100%;
136 |     border-top-right-radius: 0;
137 |     border-bottom-right-radius: 0;
138 | }
139 | .searchFieldDiv{
140 |     width: 90%;
141 |     float: left;
142 |     position: relative;
143 | }
144 | .searchBtnDiv{
145 |     width: 10%;
146 |     float: left;
147 | }
148 | #searchBtn{
149 |     margin: 0;
150 |     background: rgb(228, 228, 228);
151 |     color: #555;
152 |     border-top-left-radius: 0;
153 |     border-bottom-left-radius: 0;
154 |     border: solid 1px rgb(228, 228, 228);
155 | }
156 | #searchBtn:hover{
157 |     /* background: rgb(72, 123, 243); */
158 |     cursor: pointer;
159 | }
160 | .mainLogo{
161 |     margin: 18px;
162 | }
163 | .mainLogo img{
164 |     width: 55px;
165 | }
166 | .signinBtnDiv{
167 |     width: 65%;
168 |     float: left;
169 |     text-align: right;
170 | }
171 | #signinBtn{
172 |     color: #2A65EA;
173 |     background: transparent;
174 | }
175 | #signinBtn:hover{
176 |     background: #e4e4e4;
177 |     cursor: pointer;
178 | }
179 | #signoutBtnHover{
180 |     display: none;
181 |     background-color: #fff;
182 |     min-width: 160px;
183 |     /* box-shadow: 0px 5px 10px rgba(0,0,0,0.2); */
184 |     padding: 12px 16px;
185 |     margin-top: -10px;
186 |     margin-right: -20px;
187 | }
188 | #signoutBtnHover a{
189 |     display: block;
190 |     padding: 8px;
191 |     margin: 5px 0;
192 |     border-bottom: solid 1px #ccc;
193 |     text-align: left;
194 | }
195 | 
196 | 
197 | #dropdownContent{
198 |     display: none;
199 |     pointer-events: none;
200 | }
201 | .signinBtnDiv .dropdown{
202 |     /* position: relative; */
203 |     display: inline-block;
204 | }
205 | .signinBtnDiv .dropdown .dropdownContent {
206 |     display: none;
207 |     position: absolute;
208 |     background-color: #fff;
209 |     min-width: 160px;
210 |     box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
211 |     padding: 12px 16px;
212 | }
213 | .signinBtnDiv .dropdown:hover .dropdownContent {
214 |     display: block;
215 |     text-align: left;
216 | }
217 | .signinBtnDiv .dropdown .dropdownContent a{
218 |     display: block;
219 |     padding: 8px;
220 |     margin: 5px 0;
221 |     border-bottom: solid 1px #ccc;
222 | }
223 | .signinBtnDiv .dropdown .dropdownContent a:hover{
224 |     color: #2A65EA;
225 |     border-bottom: solid 1px #2A65EA;
226 | }
227 | 
228 | 
229 | 
230 | .sellBtnDiv{
231 |     width: 35%;
232 |     float: left;
233 | }
234 | #sellBtn{
235 |     background: #2A65EA;
236 |     color: #fff;
237 | }
238 | #sellBtn:hover{
239 |     background: rgb(72, 123, 243);
240 |     cursor: pointer;
241 | }
242 | 
243 | /* bottom header */
244 | header .bottom{
245 |     width: 100%;
246 |     padding: 10px 0;
247 |     border-top: solid 1px #ccc;
248 |     border-bottom: solid 1px #ccc;
249 | }
250 | /* header .bottom .container{
251 |     padding: 0 20px;
252 | } */
253 | header .bottom .dropdown{
254 |     /* position: relative; */
255 |     display: inline-block;
256 | }
257 | header .bottom .dropdown .dropdownContent {
258 |     display: none;
259 |     position: absolute;
260 |     background-color: #fff;
261 |     min-width: 160px;
262 |     box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
263 |     padding: 12px 16px;
264 | }
265 | header .dropdown:hover .dropdownContent {
266 |     display: block;
267 | }
268 | header .bottom .dropdown .dropdownContent a{
269 |     display: block;
270 |     padding: 8px;
271 |     margin: 5px 0;
272 |     border-bottom: solid 1px #ccc;
273 | }
274 | header .bottom .dropdown .dropdownContent a:hover{
275 |     color: #2A65EA;
276 |     border-bottom: solid 1px #2A65EA;
277 | }
278 | 
279 | 
280 | 
281 | 
282 | /* banner */
283 | .mainBanner img{
284 |     width: 100%;
285 |     margin-top: 107px;
286 | }
287 | 
288 | 
289 | 
290 | 
291 | /* popular categories */
292 | .popularCategories .heading{
293 |     text-align: center;
294 | }
295 | .popularCategories .categories .oneThird .top{
296 |     font-size: 16px;
297 | }
298 | .popularCategories .categories .oneThird .top, .popularCategories .categories .oneThird .bottom{
299 |     border: solid 1px #ccc;
300 |     padding: 30px;
301 |     border-bottom: none;
302 |     border-right: none;
303 | }
304 | .popularCategories .categories .oneThird:nth-child(3n+3){
305 |     border-right: solid 1px #ccc;
306 |     margin-right: 0;
307 | }
308 | .popularCategories .categories .oneThird:nth-child(n+4){
309 |     border-bottom: solid 1px #ccc;
310 | }
311 | .popularCategories .categories .bottom{
312 |     display: none;
313 | }
314 | .popularCategories .categories .bottom a{
315 |     display: block;
316 |     margin: 10px 0;
317 | }
318 | .popularCategories .categories .bottom a:hover{
319 |     text-decoration: underline;
320 | }
321 | 
322 | 
323 | 
324 | 
325 | /* popular categories */
326 | .topPicks .heading{
327 |     text-align: center;
328 | }
329 | .topPicks .picks figure{
330 |     border: solid 1px #ccc;
331 |     border-bottom: solid 5px #ccc;
332 |     padding: 15px;
333 |     margin: 0 5px;
334 | }
335 | .topPicks .picks figure:hover{
336 |     cursor: pointer;
337 |     opacity: 0.9;
338 |     border-bottom: solid 5px #2A65EA;
339 | }
340 | .topPicks .picks figure .productImage{
341 |     display: flex;
342 |     justify-content: center;
343 |     align-items: center;
344 |     width: 100%;
345 |     height: 158px;
346 | }
347 | .topPicks .picks figure img{
348 |     display: block;
349 |     max-width:221px;
350 |     max-height:158px;
351 |     width: auto;
352 |     height: auto;
353 | }
354 | .topPicks .picks div{
355 |     padding: 5px 0;
356 | }
357 | .topPicks .picks .first{
358 |     overflow: hidden;
359 | }
360 | .topPicks .picks .first .addToFvrt{
361 |     float: right;
362 |     font-size: 20px;
363 | }
364 | .topPicks .picks .first .price{
365 |     font-size: 20px;
366 |     font-weight: 700;
367 |     color: #333;
368 | }
369 | .topPicks .picks .second .adTitle{
370 |     text-transform: uppercase;
371 | }
372 | .productID{
373 |     display: none;
374 | }
375 | 
376 | 
377 | 
378 | 
379 | /* footer */
380 | footer .top{
381 |     overflow: hidden;
382 |     padding: 18px 0;
383 |     margin-top: 20px;
384 |     background: rgb(235, 235, 235);
385 |     opacity: 0.7;
386 | }
387 | footer h3{
388 |     text-transform: uppercase;
389 | }
390 | footer .top a{
391 |     text-transform: capitalize;
392 |     font-weight: normal;
393 |     line-height: 2;
394 | }
395 | footer .top a:hover{
396 |     text-decoration: underline;
397 | }
398 | footer .footerSocial a{
399 |     font-size: 20px;
400 |     display: inline-block;
401 |     margin: 0 8px;
402 | }
403 | footer .footerSocial a:hover{
404 |     color: #2A65EA;
405 | }
406 | footer .bottom{
407 |     padding: 15px 0;
408 |     background: #333;
409 |     color: #fff;
410 | }
411 | footer .bottom .left{
412 |     float: left;
413 | }
414 | footer .bottom .left a{
415 |     color: #fff;
416 |     font-weight: normal;
417 |     margin: 0 5px;
418 |     text-transform: capitalize;
419 | }
420 | footer .bottom .left a:hover{
421 |     text-decoration: underline;
422 | }
423 | footer .bottom .right{
424 |     float: right;
425 | }
426 | 
427 | 
428 | 
429 | 
430 | /* signin popup */
431 | #signinPopup{
432 |     display: none;
433 |     justify-content: center;
434 |     align-items: center;
435 |     position: fixed;
436 |     width: 100%;
437 |     height: 100vh;
438 |     background: rgba(0, 28, 46, 0.6);
439 |     z-index: 3;
440 | }
441 | #signinPopup a:hover{
442 |     text-decoration: underline;
443 | }
444 | #signinPopup .headingDiv{
445 |     margin-bottom: 25px;
446 | }
447 | #signinPopup .heading{
448 |     text-transform: uppercase;
449 |     font-size: 24px;
450 |     font-weight: 700;
451 |     color: #333;
452 | }
453 | #signinPopupContainer{
454 |     background: #fff;
455 |     padding: 20px;
456 |     max-width: 350px;
457 |     margin: auto;
458 |     border-radius: 5px;
459 | }
460 | #signinPopup input{
461 |     margin: 8px 0;
462 | }
463 | #signinPopup input[type="submit"]{
464 |     background: #2A65EA;
465 |     color: #fff;
466 | }
467 | #signinPopup input[type="submit"]:hover{
468 |     cursor: pointer;
469 |     background: rgb(72, 123, 243);
470 | }
471 | .closeSigninPopupDiv{
472 |     overflow: hidden;
473 | }
474 | #closeSigninPopup{
475 |     float: right;
476 |     font-size: 24px;
477 |     line-height: 1;
478 | }
479 | #closeSigninPopup:hover{
480 |     cursor: pointer;
481 |     color: red;
482 | }
483 | 
484 | 
485 | 
486 | 
487 | /* signup popup */
488 | #signupPopup{
489 |     display: none;
490 |     justify-content: center;
491 |     align-items: center;
492 |     position: fixed;
493 |     width: 100%;
494 |     height: 100vh;
495 |     background: rgba(0, 28, 46, 0.6);
496 |     z-index: 3;
497 | }
498 | #signupPopup a:hover{
499 |     text-decoration: underline;
500 | }
501 | #signupPopup .headingDiv{
502 |     margin-bottom: 25px;
503 | }
504 | #signupPopup .heading{
505 |     text-transform: uppercase;
506 |     font-size: 24px;
507 |     font-weight: 700;
508 |     color: #333;
509 | }
510 | #signupPopupContainer{
511 |     background: #fff;
512 |     padding: 20px;
513 |     max-width: 350px;
514 |     margin: auto;
515 |     border-radius: 5px;
516 | }
517 | #signupPopup input{
518 |     margin: 8px 0;
519 | }
520 | #signupPopup input[type="submit"]{
521 |     background: #2A65EA;
522 |     color: #fff;
523 | }
524 | #signupPopup input[type="submit"]:hover{
525 |     cursor: pointer;
526 |     background: rgb(72, 123, 243);
527 | }
528 | .closeSignupPopupDiv{
529 |     overflow: hidden;
530 | }
531 | #closeSignupPopup{
532 |     float: right;
533 |     font-size: 24px;
534 |     line-height: 1;
535 | }
536 | #closeSignupPopup:hover{
537 |     cursor: pointer;
538 |     color: red;
539 | }
540 | 
541 | 
542 | 
543 | 
544 | /* signup popup */
545 | #sellPopup{
546 |     display: none;
547 |     justify-content: center;
548 |     align-items: center;
549 |     position: fixed;
550 |     width: 100%;
551 |     height: 100vh;
552 |     /* background: rgba(0, 28, 46, 0.6); */
553 |     background: #fff;
554 |     z-index: 3;
555 | }
556 | #sellPopup a:hover{
557 |     text-decoration: underline;
558 | }
559 | #sellPopup .headingDiv{
560 |     margin-bottom: 25px;
561 | }
562 | #sellPopup .heading{
563 |     text-transform: uppercase;
564 |     font-size: 24px;
565 |     font-weight: 700;
566 |     color: #333;
567 | }
568 | #sellPopupContainer{
569 |     background: #fff;
570 |     padding: 20px;
571 |     max-width: 500px;
572 |     margin: auto;
573 |     height: 100vh;
574 |     border-radius: 5px;
575 | }
576 | #sellPopup input{
577 |     margin: 8px 0;
578 | }
579 | #sellPopup input[type="submit"]{
580 |     background: #2A65EA;
581 |     color: #fff;
582 | }
583 | #sellPopup input[type="submit"]:hover{
584 |     cursor: pointer;
585 |     background: rgb(72, 123, 243);
586 | }
587 | .closeSellPopupDiv{
588 |     overflow: hidden;
589 |     margin-bottom: 10px;
590 | }
591 | #closeSellPopup{
592 |     float: right;
593 |     font-size: 24px;
594 |     line-height: 1;
595 | }
596 | #closeSellPopup:hover{
597 |     cursor: pointer;
598 |     color: red;
599 | }
600 | 
601 | 
602 | 
603 | 
604 | /* category popup */
605 | #categoryPopup{
606 |     display: none;
607 |     justify-content: center;
608 |     align-items: center;
609 |     position: fixed;
610 |     width: 100%;
611 |     height: 100vh;
612 |     /* background: rgba(0, 28, 46, 0.6); */
613 |     background: #fff;
614 |     z-index: 3;
615 | }
616 | #categoryPopup a:hover{
617 |     text-decoration: underline;
618 | }
619 | #categoryPopup .headingDiv{
620 |     margin-bottom: 25px;
621 | }
622 | #categoryPopup .heading{
623 |     text-transform: uppercase;
624 |     font-size: 24px;
625 |     font-weight: 700;
626 |     color: #333;
627 | }
628 | #categoryPopupContainer{
629 |     background: #fff;
630 |     padding: 20px;
631 |     width: 400px;
632 |     margin: auto;
633 |     height: 100vh;
634 |     border-radius: 5px;
635 | }
636 | #categoryPopup input{
637 |     margin: 8px 0;
638 | }
639 | #categoryPopup input[type="submit"]{
640 |     background: #2A65EA;
641 |     color: #fff;
642 | }
643 | #categoryPopup input[type="submit"]:hover{
644 |     cursor: pointer;
645 |     background: rgb(72, 123, 243);
646 | }
647 | #categoryName{
648 |     text-transform: uppercase;
649 | }
650 | .closeCategoryPopupDiv{
651 |     overflow: hidden;
652 | }
653 | #closeCategoryPopup{
654 |     float: right;
655 |     font-size: 24px;
656 |     line-height: 1;
657 | }
658 | #backCategoryPopup{
659 |     float: left;
660 |     font-size: 24px;
661 |     line-height: 1;
662 | }
663 | #backCategoryPopup:hover{
664 |     cursor: pointer;
665 |     color: #2A65EA;
666 | }
667 | #closeCategoryPopup:hover{
668 |     cursor: pointer;
669 |     color: red;
670 | }
671 | .radioContainer {
672 |     display: block;
673 |     position: relative;
674 |     padding: 10px;
675 |     padding-left: 35px;
676 |     cursor: pointer;
677 |     font-size: 16px;
678 |     border: solid 1px #ccc;
679 |     border-bottom: 0;
680 | }
681 | .radioContainer:last-of-type{
682 |     border-bottom: solid 1px #ccc;
683 | }
684 | .radioContainer input {
685 |     position: absolute;
686 |     opacity: 0;
687 |     cursor: pointer;
688 | }
689 | #categoryForm input[type="submit"]{
690 |     font-weight: 700;
691 |     text-transform: uppercase;
692 |     margin: 20px 0;
693 | }
694 | .radioCheck {
695 |     position: absolute;
696 |     top: 15px;
697 |     left: 10px;
698 |     height: 15px;
699 |     width: 15px;
700 |     background-color: #eee;
701 |     border-radius: 50%;
702 | }
703 | .radioContainer:hover input ~ .radioCheck {
704 |     background-color: #ccc;
705 | }
706 | .radioContainer input:checked ~ .radioCheck {
707 |     background-color: #2A65EA;
708 | }
709 | .radioCheck:after {
710 |     content: "";
711 |     position: absolute;
712 |     display: none;
713 | }
714 | .radioContainer input:checked ~ .radioCheck:after {
715 |     display: block;
716 | }
717 | .radioContainer .radioCheck:after {
718 |     top: 6px;
719 |     left: 6px;
720 |     width: 4px;
721 |     height: 4px;
722 |     border-radius: 50%;
723 |     background: white;
724 | }
725 | 
726 | 
727 | 
728 | 
729 | /* ad details popup */
730 | #adDetailsPopup{
731 |     display: none;
732 |     position: fixed;
733 |     width: 100%;
734 |     height: 100vh;
735 |     /* background: rgba(0, 28, 46, 0.6); */
736 |     background: #fff;
737 |     z-index: 3;
738 |     overflow: auto;
739 | }
740 | #adDetailsPopupContainer{
741 |     background: #fff;
742 |     padding: 20px;
743 |     max-width: 1250px;
744 |     margin: auto;
745 |     /* height: 100vh; */
746 |     border-radius: 5px;
747 |     overflow: hidden;
748 | }
749 | .closeAdDetailsPopupDiv{
750 |     overflow: hidden;
751 |     margin-bottom: 10px;
752 | }
753 | #closeAdDetailsPopup{
754 |     float: right;
755 |     font-size: 24px;
756 |     line-height: 1;
757 | }
758 | #closeAdDetailsPopup:hover{
759 |     cursor: pointer;
760 |     color: red;
761 | }
762 | 
763 | 
764 | #adDetailsPopupContainer .inLeft, #adDetailsPopupContainer .inRight #price, #adDetailsPopupContainer .inRight .sellerInfo{
765 |     margin: 10px;
766 |     overflow: hidden;
767 |     border: solid 1px #ccc;
768 |     border-radius: 5px;
769 |     padding: 20px;
770 | }
771 | #deleteAdBtn{
772 |     margin: 10px;
773 |     color: red;
774 | }
775 | #deleteAdBtn:hover{
776 |     cursor: pointer;
777 | }
778 | #adDetailsPopupContainer .left{
779 |     width: 65%;
780 |     float: left;
781 | }
782 | #adDetailsPopupContainer .left #showAdImage{
783 |     width: 100%;
784 |     text-align: center;
785 | }
786 | #adDetailsPopupContainer .left #showAdImage img{
787 |     width: auto;
788 |     border-radius: 5px;
789 |     height: 350px;
790 | }
791 | #adDetailsPopupContainer .right{
792 |     width: 35%;
793 |     float: left;
794 | }
795 | #adDetailsPopupContainer .right #price{
796 |     font-size: 44px;
797 |     font-weight: 700;
798 | }
799 | #adDetailsPopupContainer .right .sellerInfo{
800 |     font-size: 16px;
801 |     line-height: 2;
802 | }
803 | #adDetailsPopupContainer .right .sellerInfo h2{
804 |     margin: 0;
805 | }
806 | #adDetailsPopupContainer .right .sellerInfo button{
807 |     background: #2A65EA;
808 |     margin:10px 0;
809 |     width: 100%;
810 | }
811 | #adDetailsPopupContainer .right .sellerInfo button:hover{
812 |     cursor: pointer;
813 |     background: rgb(72, 123, 243);
814 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <title>OLX - Buy and sell for free</title>
  9 |     <link rel="icon" href="./images/favicon.png">
 10 |     <!-- google fonts -->
 11 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet">
 12 |     <!-- stylesheets -->
 13 |     <link rel="stylesheet" href="./css/style.css">
 14 |     <link rel="stylesheet" href="./css/responsive.css">
 15 |     <!-- jquery -->
 16 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 17 |     <!-- fontawesome -->
 18 |     <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
 19 |     <!-- firebase -->
 20 |     <script src="https://www.gstatic.com/firebasejs/5.8.3/firebase.js"></script>
 21 | </head>
 22 | 
 23 | <body>
 24 |     <!-- signin popup -->
 25 |     <div id="signinPopup">
 26 |         <div id="signinPopupContainer">
 27 |             <div class="closeSigninPopupDiv">
 28 |                 <span id="closeSigninPopup">&times;</span>
 29 |             </div>
 30 |             <div class="headingDiv">
 31 |                 <span class="heading">Sign in</span>
 32 |                 <br>
 33 |                 <span>Buy &amp; sell things easily with OLX.</span>
 34 |             </div>
 35 |             <div id="signinWarning"></div>
 36 |             <form id="signinForm">
 37 |                 <input type="email" placeholder="Email.." id="signinEmail" required>
 38 |                 <input type="password" placeholder="Passowrd.." id="signinPw" required>
 39 |                 <input type="submit" value="Sign in">
 40 |             </form>
 41 |             <p>Don't have an account? <a href="#" id="signupBtn">Sign up</a></p>
 42 |         </div>
 43 |     </div>
 44 |     <!-- /signin popup -->
 45 | 
 46 |     <!-- signup popup -->
 47 |     <div id="signupPopup">
 48 |         <div id="signupPopupContainer">
 49 |             <div class="closeSignupPopupDiv">
 50 |                 <span id="closeSignupPopup">&times;</span>
 51 |             </div>
 52 |             <div class="headingDiv">
 53 |                 <span class="heading">Sign up</span>
 54 |                 <br>
 55 |                 <span>Buy &amp; sell things easily with OLX.</span>
 56 |             </div>
 57 |             <div id="signupWarning"></div>
 58 |             <form id="signupForm">
 59 |                 <input type="text" placeholder="Name.." id="signupName" required>
 60 |                 <input type="email" placeholder="Email.." id="signupEmail" required>
 61 |                 <input type="password" placeholder="Passowrd.." id="signupPw" required>
 62 |                 <input type="submit" value="Sign up">
 63 |             </form>
 64 |             <p>Already have an account? <a href="#" id="signinBtn_2">Sign in</a></p>
 65 |         </div>
 66 |     </div>
 67 |     <!-- /signup popup -->
 68 | 
 69 |     <!-- category popup -->
 70 |     <div id="categoryPopup">
 71 |         <div id="categoryPopupContainer">
 72 |             <div class="closeCategoryPopupDiv">
 73 |                 <span id="closeCategoryPopup">&times;</span>
 74 |             </div>
 75 |             <div class="headingDiv">
 76 |                 <span class="heading">Choose Category</span>
 77 |             </div>
 78 |             <div id="warning">Please choose a category</div>
 79 |             <form id="categoryForm">
 80 |                 <label class="radioContainer">Mobiles
 81 |                     <input type="radio" name="category" value="Mobiles">
 82 |                     <span class="radioCheck"></span>
 83 |                 </label>
 84 |                 <label class="radioContainer">Vehicles
 85 |                     <input type="radio" name="category" value="Vehicles">
 86 |                     <span class="radioCheck"></span>
 87 |                 </label>
 88 |                 <label class="radioContainer">Electronics
 89 |                     <input type="radio" name="category" value="Electronics">
 90 |                     <span class="radioCheck"></span>
 91 |                 </label>
 92 |                 <label class="radioContainer">Bikes
 93 |                     <input type="radio" name="category" value="Bikes">
 94 |                     <span class="radioCheck"></span>
 95 |                 </label>
 96 |                 <label class="radioContainer">Services
 97 |                     <input type="radio" name="category" value="Services">
 98 |                     <span class="radioCheck"></span>
 99 |                 </label>
100 |                 <label class="radioContainer">Furniture
101 |                     <input type="radio" name="category" value="Furniture">
102 |                     <span class="radioCheck"></span>
103 |                 </label>
104 |                 <input type="submit" value="next">
105 |             </form>
106 |         </div>
107 |     </div>
108 |     <!-- /category popup -->
109 | 
110 |     <!-- sell popup -->
111 |     <div id="sellPopup">
112 |         <div id="sellPopupContainer">
113 |             <div class="closeSellPopupDiv">
114 |                 <span id="backCategoryPopup"><i class="fas fa-arrow-left"></i></span>
115 |                 <span id="closeSellPopup">&times;</span>
116 |             </div>
117 |             <div class="headingDiv">
118 |                 <span class="heading">Post Your Ad</span>
119 |             </div>
120 |             <form id="sellForm">
121 |                 <p id="categoryName"></p>
122 |                 <input type="text" placeholder="Title.." id="adTitle" required>
123 |                 <input type="text" placeholder="Description.." id="adDescription" required>
124 |                 <input type="number" placeholder="Price.." id="adPrice" required>
125 |                 <input type="number" placeholder="Phone number.." id="adPhone">
126 |                 <input type="file" id="adImage" multiple>
127 |                 <input type="submit" value="Add">
128 |             </form>
129 |         </div>
130 |     </div>
131 |     <!-- /sell popup -->
132 | 
133 |     <!-- ad details popup -->
134 |     <div id="adDetailsPopup">
135 |         <div id="adDetailsPopupContainer">
136 |             <div class="closeAdDetailsPopupDiv">
137 |                 <span id="closeAdDetailsPopup">&times;</span>
138 |             </div>
139 |             <div class="left">
140 |                 <div class="inLeft" id="AdDescAndImage">
141 |                     <h2 id="showAdDescriptionHeading"></h2>
142 |                     <div id="showAdImage"></div>
143 |                     <div class="showAdDescription">
144 |                         <p id="showAdDescriptionDesc"></p>
145 |                     </div>
146 |                 </div>
147 |             </div>
148 |             <div class="right">
149 |                 <div class="inRight">
150 |                     <div id="price"></div>
151 |                     <div class="sellerInfo">
152 |                         <h2>Seller Info</h2>
153 |                         <div id="sellerName"></div>
154 |                         <div id="sellerPhone"></div>
155 |                         <div class="chatWithSeller">
156 |                             <button id="chatWithSellerBtn">Chat with seller</button>
157 |                         </div>
158 |                     </div>
159 |                     <div id="deleteAdBtn">Delete Ad</div>
160 |                 </div>
161 |             </div>
162 |         </div>
163 |     </div>
164 |     <!-- /ad details popup -->
165 | 
166 |     <div id="main">
167 |         <!-- header -->
168 |         <header>
169 |             <div class="top">
170 |                 <div class="container">
171 |                     <div class="left">
172 |                         <div class="mainLogo">
173 |                             <a href="./index.html">
174 |                                 <img src="./images/logo.png" alt="logo">
175 |                             </a>
176 |                         </div>
177 |                         <div class="location">
178 |                             <!-- <i class="fas fa-globe-europe"></i> -->
179 |                             <input type="text" placeholder="Location..">
180 |                         </div>
181 |                         <div class="search">
182 |                             <div class="searchFieldDiv">
183 |                                 <input type="text" placeholder="Search.." id="searchField">
184 |                             </div>
185 |                             <div class="searchBtnDiv">
186 |                                 <button id="searchBtn"><i class="fas fa-search"></i></button>
187 |                             </div>
188 |                         </div>
189 |                     </div>
190 |                     <div class="right">
191 |                         <div class="signinBtnDiv">
192 |                             <div class="dropdown">
193 |                                 <button id="signinBtn" class="showSignoutBtnHover">Sign in</button>
194 |                                 <div class="dropdownContent" id="dropdownContent">
195 |                                     <a href="javascript:void(0)" id="myAds">My Ads</a>
196 |                                     <a href="javascript:void(0)" id="favorites">Favorites</a>
197 |                                     <a href="javascript:void(0)" id="signoutBtn">Sign out</a>
198 |                                 </div>
199 |                             </div>
200 |                         </div>
201 |                         <div class="sellBtnDiv">
202 |                             <button id="sellBtn">Sell</button>
203 |                         </div>
204 |                     </div>
205 |                 </div>
206 |             </div>
207 |             <div class="bottom">
208 |                 <div class="container">
209 |                     <div class="dropdown">
210 |                         <a href="javascript:void(0)" id="browseCategories">Browse by Categories &nbsp; <i
211 |                                 class="fas fa-angle-down"></i></a>
212 |                         <div class="dropdownContent">
213 |                             <a href="Javascript:void(0)" onclick="filter('All')">All Categories</a>
214 |                             <a href="Javascript:void(0)" onclick="filter('Mobiles')">Mobiles</a>
215 |                             <a href="Javascript:void(0)" onclick="filter('Vehicles')">Vehicles</a>
216 |                             <a href="Javascript:void(0)" onclick="filter('Electronics')">Electronics</a>
217 |                             <a href="Javascript:void(0)" onclick="filter('Bikes')">Bikes</a>
218 |                             <a href="Javascript:void(0)" onclick="filter('Services')">Services</a>
219 |                             <a href="Javascript:void(0)" onclick="filter('Furniture')">Furniture</a>
220 |                         </div>
221 |                     </div>
222 |                 </div>
223 |             </div>
224 |         </header>
225 |         <!-- /header -->
226 | 
227 |         <!-- banner -->
228 |         <div class="mainBanner" id="mainBanner">
229 |             <img src="./images/banner-1.jpg" alt="banner-image" id="mainBannerImg">
230 |         </div>
231 |         <!-- /banner -->
232 | 
233 |         <!-- popular categories -->
234 |         <div class="popularCategories" id="popularCategories">
235 |             <div class="container">
236 |                 <div class="heading">
237 |                     <h2>Popular Categories</h2>
238 |                     <hr>
239 |                     <p>Browse through some of our most popular categories.</p>
240 |                 </div>
241 |                 <div class="categories">
242 |                     <div class="oneThird">
243 |                         <div class="top">
244 |                             <a href="javascript:void(0)" onclick="filter('Mobiles')"><i class="fas fa-mobile-alt"></i>
245 |                                 &nbsp; Mobiles</a>
246 |                         </div>
247 |                         <div class="bottom">
248 |                             <a href="javascript:void(0)">Tablets</a>
249 |                             <a href="javascript:void(0)">Accessories</a>
250 |                             <a href="javascript:void(0)">Mobile Phones</a>
251 |                         </div>
252 |                     </div>
253 |                     <div class="oneThird">
254 |                         <div class="top">
255 |                             <a href="javascript:void(0)" onclick="filter('Vehicles')"><i class="fas fa-car"></i> &nbsp;
256 |                                 Vehicles</a>
257 |                         </div>
258 |                         <div class="bottom">
259 |                             <a href="javascript:void(0)">Cars</a>
260 |                             <a href="javascript:void(0)">Buses</a>
261 |                             <a href="javascript:void(0)">Spare parts</a>
262 |                         </div>
263 |                     </div>
264 |                     <div class="oneThird">
265 |                         <div class="top">
266 |                             <a href="javascript:void(0)" onclick="filter('Electronics')"><i class="fas fa-tv"></i>
267 |                                 &nbsp; Electronics</a>
268 |                         </div>
269 |                         <div class="bottom">
270 |                             <a href="javascript:void(0)">Cars</a>
271 |                             <a href="javascript:void(0)">Buses</a>
272 |                             <a href="javascript:void(0)">Spare parts</a>
273 |                         </div>
274 |                     </div>
275 |                     <div class="oneThird">
276 |                         <div class="top">
277 |                             <a href="javascript:void(0)" onclick="filter('Bikes')"><i class="fas fa-bicycle"></i> &nbsp;
278 |                                 Bikes</a>
279 |                         </div>
280 |                         <div class="bottom">
281 |                             <a href="javascript:void(0)">Cars</a>
282 |                             <a href="javascript:void(0)">Buses</a>
283 |                             <a href="javascript:void(0)">Spare parts</a>
284 |                         </div>
285 |                     </div>
286 |                     <div class="oneThird">
287 |                         <div class="top">
288 |                             <a href="javascript:void(0)" onclick="filter('Services')"><i class="fas fa-wrench"></i>
289 |                                 &nbsp; Services</a>
290 |                         </div>
291 |                         <div class="bottom">
292 |                             <a href="javascript:void(0)">Cars</a>
293 |                             <a href="javascript:void(0)">Buses</a>
294 |                             <a href="javascript:void(0)">Spare parts</a>
295 |                         </div>
296 |                     </div>
297 |                     <div class="oneThird">
298 |                         <div class="top">
299 |                             <a href="javascript:void(0)" onclick="filter('Furniture')"><i class="fas fa-bed"></i> &nbsp;
300 |                                 Furniture</a>
301 |                         </div>
302 |                         <div class="bottom">
303 |                             <a href="javascript:void(0)">Cars</a>
304 |                             <a href="javascript:void(0)">Buses</a>
305 |                             <a href="javascript:void(0)">Spare parts</a>
306 |                         </div>
307 |                     </div>
308 |                 </div>
309 |             </div>
310 |         </div>
311 |         <!-- /popular categories -->
312 | 
313 |         <!-- top picks for you -->
314 |         <div class="topPicks">
315 |             <div class="container" id="topPicksContainer">
316 |                 <div class="heading">
317 |                     <h2 id="categoryHeading">Recently added</h2>
318 |                     <hr>
319 |                 </div>
320 |                 <div class="picks" id="picks">
321 | 
322 |                 </div>
323 |             </div>
324 |         </div>
325 |         <!-- /top picks for you -->
326 | 
327 |         <!-- footer -->
328 |         <footer>
329 |             <div class="top">
330 |                 <div class="container">
331 |                     <div class="oneFifth">
332 |                         <h3>Popular Categories</h3>
333 |                         <a href="#">Cars</a><br>
334 |                         <a href="#">Flats for rent</a><br>
335 |                         <a href="#">Jobs</a><br>
336 |                         <a href="#">Mobile Phones</a>
337 |                     </div>
338 |                     <div class="oneFifth">
339 |                         <h3>Popular Searches</h3>
340 |                         <a href="#">Bikes</a><br>
341 |                         <a href="#">Watches</a><br>
342 |                         <a href="#">Books</a><br>
343 |                         <a href="#">Dogs</a>
344 |                     </div>
345 |                     <div class="oneFifth">
346 |                         <h3>About us</h3>
347 |                         <a href="#">About OLX Group</a><br>
348 |                         <a href="#">OLX Blog</a><br>
349 |                         <a href="#">Contact us </a><br>
350 |                         <a href="#">Business Packages</a>
351 |                     </div>
352 |                     <div class="oneFifth">
353 |                         <h3>Olx</h3>
354 |                         <a href="#">Help</a><br>
355 |                         <a href="#">Sitemap</a><br>
356 |                     </div>
357 |                     <div class="oneFifth footerSocial">
358 |                         <h3>Find us here</h3>
359 |                         <a href="#"><i class="fab fa-facebook-square"></i></a>
360 |                         <a href="#"><i class="fab fa-youtube"></i></a>
361 |                         <a href="#"><i class="fab fa-instagram"></i></a>
362 |                     </div>
363 |                 </div>
364 |             </div>
365 |             <div class="bottom">
366 |                 <div class="container">
367 |                     <div class="left">
368 |                         <span class="countries">
369 |                             Change country:
370 |                             <a href="#">South Africa</a>
371 |                             <a href="#">India</a>
372 |                             <a href="#">Kenya</a>
373 |                             <a href="#">Ghana</a>
374 |                         </span>
375 |                     </div>
376 |                     <div class="right">
377 |                         <span class="copyrights">
378 |                             Copyrights &copy; OLX, 2019.
379 |                         </span>
380 |                     </div>
381 |                 </div>
382 |             </div>
383 |         </footer>
384 |         <!-- /footer -->
385 |     </div>
386 | 
387 | 
388 |     <!-- service worker -->
389 |     <script>
390 |         if ('serviceWorker' in navigator) {
391 |             navigator.serviceWorker.register('./sw.js')
392 |                 .then(res => {
393 |                     console.log('SW registered');
394 |                 }).catch(err => {
395 |                     console.log('Error in SW registration', err);
396 |                 })
397 |         } else {
398 |             console.log('Browser does not support SW');
399 |         }
400 |     </script>
401 |     <!-- js -->
402 |     <script src="js/app.js"></script>
403 | </body>
404 | 
405 | </html>


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
  1 | var currentUserName;
  2 | var currentUserUid;
  3 | 
  4 | window.onload = () => {
  5 |     firebase.auth().onAuthStateChanged(function (user) {
  6 |         if (user) {
  7 |             // show user's name after sign in
  8 |             firebase.database().ref('/users/' + user.uid).once('value', (success) => {
  9 |                 currentUserUid = success.val().userUid;
 10 |                 currentUserName = success.val().signupName;
 11 |                 if (currentUserUid === user.uid) {
 12 |                     signinBtn.innerHTML = `<i style="font-size:18px; vertical-align:middle;" class="fas fa-user-circle"></i> &nbsp; ${currentUserName}`;
 13 |                 }
 14 |             });
 15 | 
 16 |             // User is signed in.
 17 |             localStorage.setItem('auth', JSON.stringify(user));
 18 |             signoutBtn.setAttribute("onclick", "signOutBtn_f()");
 19 | 
 20 |             // for signoutHover
 21 |             document.getElementById("dropdownContent").removeAttribute('id', 'dropdownContent');
 22 | 
 23 |             //allow to click on sellBtn
 24 |             sellBtn.addEventListener('click', () => {
 25 |                 signinPopup.style.display = "none";
 26 |                 signupPopup.style.display = "none";
 27 |                 sellPopup.style.display = "none";
 28 |                 categoryPopup.style.display = "flex";
 29 |             })
 30 |         } else {
 31 |             // No user is signed in.
 32 |             signinBtn.setAttribute("onclick", "signinBtn_f()");
 33 |             signinBtn.innerText = "Sign In";
 34 |             localStorage.clear()
 35 | 
 36 |             // for signoutHover
 37 |             document.getElementsByClassName("dropdownContent")[0].setAttribute('id', 'dropdownContent');
 38 | 
 39 |             //don't allow to click on sellBtn
 40 |             sellBtn.addEventListener('click', () => {
 41 |                 signinPopup.style.display = "flex";
 42 |                 signupPopup.style.display = "none";
 43 |                 sellPopup.style.display = "none";
 44 |                 categoryPopup.style.display = "none";
 45 |             })
 46 |         }
 47 |     });
 48 | }
 49 | 
 50 | // signin popup
 51 | var signinBtn = document.getElementById("signinBtn");
 52 | var signinBtn_2 = document.getElementById("signinBtn_2");
 53 | var signinPopup = document.getElementById("signinPopup");
 54 | var closeSigninPopup = document.getElementById("closeSigninPopup");
 55 | 
 56 | function signinBtn_f() {
 57 |     signinPopup.style.display = "flex";
 58 |     signupPopup.style.display = "none";
 59 | }
 60 | signinBtn_2.onclick = () => {
 61 |     signinPopup.style.display = "flex";
 62 |     signupPopup.style.display = "none";
 63 |     sellPopup.style.display = "none";
 64 |     categoryPopup.style.display = "none";
 65 | }
 66 | 
 67 | // signup popup
 68 | var signupBtn = document.getElementById("signupBtn");
 69 | var signupPopup = document.getElementById("signupPopup");
 70 | var closeSignupPopup = document.getElementById("closeSignupPopup");
 71 | 
 72 | signupBtn.onclick = () => {
 73 |     signupPopup.style.display = "flex";
 74 |     signinPopup.style.display = "none";
 75 |     sellPopup.style.display = "none";
 76 |     categoryPopup.style.display = "none";
 77 | }
 78 | 
 79 | // category popup
 80 | var selectedCategory = '';
 81 | var sellBtn = document.getElementById("sellBtn");
 82 | var categoryPopup = document.getElementById("categoryPopup");
 83 | var closeCategoryPopup = document.getElementById("closeCategoryPopup");
 84 | 
 85 | sellBtn.onclick = () => {
 86 |     categoryPopup.style.display = "flex";
 87 |     sellPopup.style.display = "none";
 88 |     signupPopup.style.display = "none";
 89 |     signinPopup.style.display = "none";
 90 | }
 91 | 
 92 | // back category popup
 93 | var backCategoryPopup = document.getElementById("backCategoryPopup");
 94 | 
 95 | backCategoryPopup.onclick = () => {
 96 |     categoryPopup.style.display = "flex";
 97 |     sellPopup.style.display = "none";
 98 |     signupPopup.style.display = "none";
 99 |     signinPopup.style.display = "none";
100 | }
101 | 
102 | // sell popup
103 | var categoryForm = document.getElementById("categoryForm");
104 | var categoryName = document.getElementById("categoryName");
105 | 
106 | categoryForm.onsubmit = () => {
107 |     selectedCategory = document.querySelector("input[name='category']:checked");
108 | 
109 |     if (Boolean(selectedCategory) === true) {
110 |         categoryName.innerText = `Category: ${selectedCategory.value}`;
111 | 
112 |         sellPopup.style.display = "flex";
113 |         signupPopup.style.display = "none";
114 |         signinPopup.style.display = "none";
115 |         categoryPopup.style.display = "none";
116 | 
117 |         selectedCategory.checked = false;
118 | 
119 |         document.getElementById("warning").style.display = "none";
120 |     } else {
121 |         document.getElementById("warning").style.display = "block";
122 |     }
123 |     return false;
124 | }
125 | 
126 | // window onclick
127 | window.onclick = () => {
128 |     if (event.target === signinPopup || event.target === closeSigninPopup || event.target === signupPopup || event.target === closeSignupPopup || event.target === closeSellPopup || event.target === closeCategoryPopup || event.target === closeAdDetailsPopup) {
129 |         signupPopup.style.display = "none";
130 |         signinPopup.style.display = "none";
131 |         sellPopup.style.display = "none";
132 |         categoryPopup.style.display = "none";
133 |         adDetailsPopup.style.display = "none";
134 |     }
135 | }
136 | 
137 | //sellForm
138 | var sellForm = document.getElementById("sellForm");
139 | 
140 | sellForm.onsubmit = (e) => {
141 |     e.preventDefault();
142 |     var adTitle = document.getElementById("adTitle");
143 |     var adDescription = document.getElementById("adDescription");
144 |     var adPrice = document.getElementById("adPrice");
145 |     var adPhone = document.getElementById("adPhone");
146 |     var adImage = document.getElementById("adImage");
147 | 
148 |     // firebase storage
149 |     var file = adImage.files[0];
150 |     console.log(file);
151 |     if (file === undefined) {
152 | 
153 |         let ads = {
154 |             title: adTitle.value,
155 |             description: adDescription.value,
156 |             price: adPrice.value,
157 |             phone: adPhone.value,
158 |             image: 'https://firebasestorage.googleapis.com/v0/b/olx-app-d4585.appspot.com/o/images%2Fdummyimg.jpg?alt=media&token=b38e6cca-abff-4c59-b728-3bbb8c3018fa',
159 |             category: selectedCategory.value,
160 |             uid: (JSON.parse(localStorage.getItem('auth')) && JSON.parse(localStorage.getItem('auth')).uid) || '',
161 |             sellerName: currentUserName,
162 |         }
163 |         console.log(ads)
164 |         firebase.database().ref('/ads').push(ads)
165 |             .then(() => {
166 |                 // clear all fields and show category modal
167 |                 adTitle.value = "";
168 |                 adDescription.value = "";
169 |                 adPrice.value = "";
170 |                 adPhone.value = "";
171 |                 adImage.value = "";
172 |             })
173 |             .catch(console.log);
174 |     } else {
175 |         var storageRef = firebase.storage().ref('images/' + file.name);
176 |         storageRef.put(file).then((url) => {
177 |             url.ref.getDownloadURL().then((imgURL) => {
178 |                 console.log(imgURL);
179 | 
180 |                 let ads = {
181 |                     title: adTitle.value,
182 |                     description: adDescription.value,
183 |                     price: adPrice.value,
184 |                     phone: adPhone.value,
185 |                     image: imgURL,
186 |                     category: selectedCategory.value,
187 |                     uid: (JSON.parse(localStorage.getItem('auth')) && JSON.parse(localStorage.getItem('auth')).uid) || '',
188 |                     sellerName: currentUserName,
189 |                 }
190 |                 console.log(ads)
191 |                 firebase.database().ref('/ads').push(ads)
192 |                     .then(() => {
193 |                         // clear all fields and show category modal
194 |                         adTitle.value = "";
195 |                         adDescription.value = "";
196 |                         adPrice.value = "";
197 |                         adPhone.value = "";
198 |                         adImage.value = "";
199 |                     })
200 |                     .catch(console.log);
201 |             })
202 |         });
203 |     }
204 | 
205 |     sellPopup.style.display = "none";
206 | }
207 | 
208 | // signup with email
209 | var signupName = document.getElementById("signupName");
210 | var signupEmail = document.getElementById("signupEmail");
211 | var signupPw = document.getElementById("signupPw");
212 | var signupForm = document.getElementById("signupForm");
213 | var signupWarning = document.getElementById("signupWarning");
214 | 
215 | signupForm.onsubmit = (e) => {
216 |     e.preventDefault();
217 |     firebase.auth().createUserWithEmailAndPassword(signupEmail.value, signupPw.value).then((success) => {
218 |         console.log(success);
219 |         console.log("Signed up");
220 |         var user = firebase.auth().currentUser;
221 |         var uid;
222 |         if (user != null) {
223 |             uid = user.uid;
224 |         }
225 |         var firebaseRef = firebase.database().ref("users");
226 |         var userData = {
227 |             signupName: signupName.value,
228 |             signupEmail: signupEmail.value,
229 |             signupPw: signupPw.value,
230 |             userUid: uid,
231 |         }
232 |         firebaseRef.child(uid).set(userData);
233 | 
234 |         signupPopup.style.display = "none";
235 | 
236 |     }).catch((error) => {
237 |         // Handle Errors here.
238 |         var errorCode = error.code;
239 |         var errorMessage = error.message;
240 | 
241 |         signupWarning.innerText = errorMessage;
242 |         signupWarning.style.display = "block";
243 |     });
244 | }
245 | 
246 | 
247 | // signin with email
248 | var signinEmail = document.getElementById("signinEmail");
249 | var signinPw = document.getElementById("signinPw");
250 | var signinForm = document.getElementById("signinForm");
251 | var signinPopupContainer = document.getElementById("signinPopupContainer");
252 | var signinWarning = document.getElementById("signinWarning");
253 | 
254 | signinForm.onsubmit = (e) => {
255 |     e.preventDefault();
256 |     firebase.auth().signInWithEmailAndPassword(signinEmail.value, signinPw.value).then((success) => {
257 |         console.log(success);
258 |         console.log("Signed in");
259 |         localStorage.setItem('auth', JSON.stringify(success));
260 |         signinPopup.style.display = "none";
261 |         signinEmail.value = "";
262 |         signinPw.value = "";
263 | 
264 |         location.reload();
265 | 
266 |     }).catch((error) => {
267 |         // Handle Errors here.
268 |         var errorCode = error.code;
269 |         var errorMessage = error.message;
270 | 
271 |         signinWarning.innerText = errorMessage;
272 |         signinWarning.style.display = "block";
273 |     });
274 | }
275 | 
276 | // signout
277 | var signoutBtn = document.getElementById("signoutBtn");
278 | function signOutBtn_f() {
279 |     firebase.auth().signOut().then(function () {
280 |         // Sign-out successful.
281 |         localStorage.clear();
282 |         signinEmail.value = "";
283 |         signinPw.value = "";
284 |         console.log("Signed out");
285 | 
286 |         // set ads to default afer user signed out
287 |         location.reload();
288 | 
289 |     }).catch(function (error) {
290 |         // An error happened.
291 |     });
292 | }
293 | 
294 | // fetching all ads
295 | var allAds = [];
296 | var filteredAds = [];
297 | 
298 | (function fetchAds() {
299 |     firebase.database().ref('/ads').on('child_added', (snapshot) => {
300 |         var data = snapshot.val();
301 |         data.key = snapshot.key;
302 |         allAds.push(data);
303 |         renderAds(data);
304 |     });
305 | })()
306 | 
307 | // rendering all products
308 | const picks = document.getElementById('picks');
309 | var adUid;
310 | 
311 | function renderAds(ad) {
312 |     picks.innerHTML = `
313 |                     <div class="oneFourth" id="figure">
314 |                         <figure onclick="showAdDetails(this)">
315 |                             <div class="productImage">
316 |                                 <img src="${ad.image}" alt="">
317 |                             </div>
318 |                             <figcaption>
319 |                                 <span class="productID">${ad.key}</span>
320 |                                 <div class="first">
321 |                                     <span class="price">Rs. ${ad.price}</span>
322 |                                     <a href="javascript:void(0)" onclick="console.log('fvrt')" class="addToFvrt"><i class="far fa-heart"></i></a>
323 |                                 </div>
324 |                                 <div class="second">
325 |                                     <span class="adTitle">${ad.title}</span>
326 |                                 </div>
327 |                                 <div class="productLocation">
328 |                                     <span>Category: ${ad.category}</span>
329 |                                 </div>
330 |                             </figcaption>
331 |                         </figure>
332 |                     </div> ${picks.innerHTML}`;
333 |     adUid = ad.key;
334 | }
335 | 
336 | // filtering
337 | var searchCategory = 'All';
338 | var popularCategories = document.getElementById("popularCategories");
339 | var categoryHeading = document.getElementById("categoryHeading");
340 | var browseCategories = document.getElementById("browseCategories");
341 | var mainBanner = document.getElementById("mainBanner");
342 | var mainBannerImg = document.getElementById("mainBannerImg");
343 | 
344 | function filter(category) {
345 |     filteredAds = [];
346 |     searchField.value = '';
347 |     browseCategories.innerHTML = '';
348 |     browseCategories.innerHTML = `Browse by Categories &nbsp; / &nbsp; ${category}`;
349 |     // popularCategories.style.display = "none";
350 |     categoryHeading.innerText = category;
351 |     picks.innerHTML = '';
352 |     searchCategory = category;
353 | 
354 |     if (category === 'All') {
355 |         filteredAds = [...allAds];
356 |         allAds.map((ad) => {
357 |             renderAds(ad);
358 |         })
359 | 
360 |         return;
361 |     }
362 | 
363 |     allAds.map((ad) => {
364 |         if (ad.category === category) {
365 |             filteredAds.push(ad);
366 |             renderAds(ad);
367 |         }
368 |     });
369 | 
370 |     if (picks.innerHTML.trim().length === 0) {
371 |         picks.innerHTML = `<div style="text-align:center; margin:50px 0;"><h2>Oops! There is nothing to show :(</h2><img src="./images/noresults.png" alt=""></div>`;
372 |     }
373 | }
374 | 
375 | // searching ads
376 | var searchField = document.getElementById('searchField');
377 | var searchBtn = document.getElementById('searchBtn');
378 | 
379 | searchBtn.addEventListener('click', (e) => {
380 |     e.preventDefault();
381 |     search();
382 | })
383 | 
384 | searchField.addEventListener('keyup', () => {
385 |     if (searchCategory === 'All') {
386 |         filteredAds = [...allAds];
387 |     }
388 | 
389 |     if (searchField.value === '') {
390 |         picks.innerHTML = '';
391 |         filteredAds.map((ad) => {
392 |             renderAds(ad);
393 |         })
394 |     }
395 | })
396 | 
397 | 
398 | function search() {
399 |     popularCategories.style.display = "none";
400 |     const textSearched = searchField.value && searchField.value.toLowerCase();
401 |     picks.innerHTML = '';
402 | 
403 |     if (searchCategory === 'All') {
404 |         filteredAds = [...allAds];
405 |     }
406 | 
407 |     filteredAds.map((ad) => {
408 |         if (ad.title && ad.title.toLowerCase().includes(textSearched)) {
409 |             renderAds(ad);
410 |         }
411 |     });
412 | 
413 |     if (picks.innerHTML.trim().length === 0) {
414 |         picks.innerHTML = `<div style="text-align:center; margin:50px 0;"><h2>Oops! There is nothing to show :(</h2><img src="./images/noresults.png" alt=""></div>`;
415 |     }
416 | 
417 | }
418 | 
419 | //my ads
420 | var myAds = document.getElementById("myAds");
421 | 
422 | myAds.addEventListener('click', () => {
423 |     // location.href = 'myads.html';
424 |     picks.innerHTML = '';
425 |     categoryHeading.innerText = 'My Ads';
426 |     var currentUserUid = firebase.auth().currentUser.uid;
427 | 
428 |     allAds.map((ad) => {
429 |         if (ad.uid === currentUserUid) {
430 |             filteredAds.push(ad);
431 |             renderAds(ad);
432 |         }
433 | 
434 |         // if (picks.innerHTML.trim().length === 0) {
435 |         //     picks.innerHTML = `<div style="text-align:center; margin:50px 0;"><h2>Oops! There is nothing to show :(</h2><img src="./images/noresults.png" alt=""></div>`;
436 |         // }
437 |     });
438 | })
439 | 
440 | // show ad details
441 | var showAdImage = document.getElementById("showAdImage");
442 | var showAdDescriptionHeading = document.getElementById("showAdDescriptionHeading");
443 | var showAdDescriptionDesc = document.getElementById("showAdDescriptionDesc");
444 | var price = document.getElementById("price");
445 | var sellerName = document.getElementById("sellerName");
446 | var sellerPhone = document.getElementById("sellerPhone");
447 | var chatWithSeller = document.getElementById("chatWithSeller");
448 | var adDetailsPopup = document.getElementById("adDetailsPopup");
449 | var closeAdDetailsPopup = document.getElementById("closeAdDetailsPopup");
450 | var adDetailsUid;
451 | 
452 | function showAdDetails(figure) {
453 |     adDetailsPopup.style.display = "block";
454 |     categoryPopup.style.display = "none";
455 |     sellPopup.style.display = "none";
456 |     signupPopup.style.display = "none";
457 |     signinPopup.style.display = "none";
458 | 
459 |     let adUid = figure.childNodes[3].childNodes[1].innerText;
460 | 
461 |     firebase.database().ref(`/ads/${adUid}`).on('value', (snapshot) => {
462 |         let adDetails = snapshot.val();
463 | 
464 |         if (adUid === (snapshot.key)) {
465 |             showAdImage.innerHTML = `<img src="${adDetails.image}" alt="">`;
466 |             showAdDescriptionHeading.innerHTML = adDetails.title;
467 |             showAdDescriptionDesc.innerHTML = adDetails.description;
468 |             price.innerHTML = `Rs. ${adDetails.price}`;
469 |             sellerName.innerHTML = `Name: ${adDetails.sellerName}`;;
470 |             sellerPhone.innerHTML = `Phone: <a href="tel:${adDetails.phone}">${adDetails.phone}</a>`;
471 |         } else {
472 |             console.log("key doesn't matched");
473 |         }
474 | 
475 |         adDetailsUid = adDetails.uid;
476 |     });
477 | }
478 | 
479 | // delete ad
480 | var deleteAdBtn = document.getElementById("deleteAdBtn");
481 | console.log(adUid);
482 | 
483 | deleteAdBtn.onclick = () => {
484 |     var figure = document.getElementById("figure");
485 |     console.log(figure);
486 |     console.log(figure.childNodes[1].childNodes[3]);
487 |     console.log('del');
488 |     let adUid = figure.childNodes[1].childNodes[3].childNodes[1].innerText;
489 | 
490 |     firebase.database().ref(`/ads/${adUid}`).remove();
491 | 
492 |     adDetailsPopup.style.display = "none";
493 |     // location.reload();
494 | }
495 | 
496 | //function favourite(ad){
497 | //firebase.database().ref(`/users/${localstorage wla codepastekardo}/favouriteAds`).push(ad)
498 | //}
499 | 


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