├── README.md ├── Expanding Cards ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ └── 5.jpg ├── fonts │ ├── Hamid.ttf │ ├── Hayat.ttf │ ├── Kaman.ttf │ ├── Vazir.ttf │ ├── Yekan.ttf │ ├── Abasan.ttf │ └── IranSans.ttf ├── js │ └── javascript.js ├── css │ ├── fonts.css │ └── style.css └── index.html ├── Movie App ├── image │ └── opencode.jpg ├── index.html ├── js │ └── script.js └── css │ └── style.css ├── Progress Steps ├── fonts │ ├── Abasan.ttf │ ├── Hamid.ttf │ ├── Hayat.ttf │ ├── Kaman.ttf │ ├── Vazir.ttf │ ├── Yekan.ttf │ └── IranSans.ttf ├── css │ ├── fonts.css │ └── style.css ├── index.html └── js │ └── javascript.js ├── Scroll Animation ├── fonts │ ├── Abasan.ttf │ ├── Hamid.ttf │ ├── Hayat.ttf │ ├── Kaman.ttf │ ├── Vazir.ttf │ ├── Yekan.ttf │ └── IranSans.ttf ├── js │ └── javascript.js ├── css │ ├── fonts.css │ └── style.css └── index.html ├── Weather App ├── icons │ ├── Atmosphere.png │ ├── Drizzle.svg │ ├── Rain.svg │ ├── Snow.svg │ ├── Thunderstorm.svg │ ├── Clear-Night.svg │ ├── Clouds.svg │ └── Clear-Day.svg ├── index.html ├── style.css └── app.js └── Book List ├── index.html ├── styles.css └── javascript.js /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript-Projects -------------------------------------------------------------------------------- /Expanding Cards/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/images/1.jpg -------------------------------------------------------------------------------- /Expanding Cards/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/images/2.jpg -------------------------------------------------------------------------------- /Expanding Cards/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/images/3.jpg -------------------------------------------------------------------------------- /Expanding Cards/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/images/4.jpg -------------------------------------------------------------------------------- /Expanding Cards/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/images/5.jpg -------------------------------------------------------------------------------- /Movie App/image/opencode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Movie App/image/opencode.jpg -------------------------------------------------------------------------------- /Expanding Cards/fonts/Hamid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/fonts/Hamid.ttf -------------------------------------------------------------------------------- /Expanding Cards/fonts/Hayat.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/fonts/Hayat.ttf -------------------------------------------------------------------------------- /Expanding Cards/fonts/Kaman.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/fonts/Kaman.ttf -------------------------------------------------------------------------------- /Expanding Cards/fonts/Vazir.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/fonts/Vazir.ttf -------------------------------------------------------------------------------- /Expanding Cards/fonts/Yekan.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/fonts/Yekan.ttf -------------------------------------------------------------------------------- /Progress Steps/fonts/Abasan.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Progress Steps/fonts/Abasan.ttf -------------------------------------------------------------------------------- /Progress Steps/fonts/Hamid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Progress Steps/fonts/Hamid.ttf -------------------------------------------------------------------------------- /Progress Steps/fonts/Hayat.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Progress Steps/fonts/Hayat.ttf -------------------------------------------------------------------------------- /Progress Steps/fonts/Kaman.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Progress Steps/fonts/Kaman.ttf -------------------------------------------------------------------------------- /Progress Steps/fonts/Vazir.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Progress Steps/fonts/Vazir.ttf -------------------------------------------------------------------------------- /Progress Steps/fonts/Yekan.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Progress Steps/fonts/Yekan.ttf -------------------------------------------------------------------------------- /Expanding Cards/fonts/Abasan.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/fonts/Abasan.ttf -------------------------------------------------------------------------------- /Progress Steps/fonts/IranSans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Progress Steps/fonts/IranSans.ttf -------------------------------------------------------------------------------- /Scroll Animation/fonts/Abasan.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Scroll Animation/fonts/Abasan.ttf -------------------------------------------------------------------------------- /Scroll Animation/fonts/Hamid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Scroll Animation/fonts/Hamid.ttf -------------------------------------------------------------------------------- /Scroll Animation/fonts/Hayat.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Scroll Animation/fonts/Hayat.ttf -------------------------------------------------------------------------------- /Scroll Animation/fonts/Kaman.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Scroll Animation/fonts/Kaman.ttf -------------------------------------------------------------------------------- /Scroll Animation/fonts/Vazir.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Scroll Animation/fonts/Vazir.ttf -------------------------------------------------------------------------------- /Scroll Animation/fonts/Yekan.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Scroll Animation/fonts/Yekan.ttf -------------------------------------------------------------------------------- /Weather App/icons/Atmosphere.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Weather App/icons/Atmosphere.png -------------------------------------------------------------------------------- /Expanding Cards/fonts/IranSans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Expanding Cards/fonts/IranSans.ttf -------------------------------------------------------------------------------- /Scroll Animation/fonts/IranSans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencode-source/JavaScript-Projects/HEAD/Scroll Animation/fonts/IranSans.ttf -------------------------------------------------------------------------------- /Expanding Cards/js/javascript.js: -------------------------------------------------------------------------------- 1 | const panels = document.querySelectorAll('.panel') 2 | 3 | panels.forEach(panel => { 4 | panel.addEventListener('click', () => { 5 | removeActiveClasses() 6 | panel.classList.add('active') 7 | }) 8 | }) 9 | 10 | function removeActiveClasses(){ 11 | panels.forEach(panel => { 12 | panel.classList.remove('active'); 13 | }) 14 | } -------------------------------------------------------------------------------- /Movie App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Movie App 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Scroll Animation/js/javascript.js: -------------------------------------------------------------------------------- 1 | const boxes = document.querySelectorAll('.box'); 2 | 3 | window.addEventListener('scroll', showBox) 4 | 5 | function showBox() { 6 | const triggerBottom = window.innerHeight / 1.08; 7 | 8 | boxes.forEach(box => { 9 | const boxTop = box.getBoundingClientRect().top; 10 | 11 | if(boxTop < triggerBottom){ 12 | box.classList.add('show'); 13 | } else { 14 | box.classList.remove('show'); 15 | } 16 | 17 | }); 18 | } -------------------------------------------------------------------------------- /Expanding Cards/css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face{ 2 | font-family: absan; 3 | src: url('../fonts/Abasan.ttf'); 4 | } 5 | @font-face{ 6 | font-family: hamid; 7 | src: url('../fonts/Hamid.ttf'); 8 | } 9 | @font-face{ 10 | font-family: hayat; 11 | src: url('../fonts/Hayat.ttf'); 12 | } 13 | @font-face{ 14 | font-family: iransans; 15 | src: url('../fonts/IranSans.ttf'); 16 | } 17 | @font-face{ 18 | font-family: kaman; 19 | src: url('../fonts/Kaman.ttf'); 20 | } 21 | @font-face{ 22 | font-family: vazir; 23 | src: url('../fonts/Vazir.ttf'); 24 | } 25 | @font-face{ 26 | font-family: yekan; 27 | src: url('../fonts/Yekan.ttf'); 28 | } 29 | -------------------------------------------------------------------------------- /Progress Steps/css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face{ 2 | font-family: absan; 3 | src: url('../fonts/Abasan.ttf'); 4 | } 5 | @font-face{ 6 | font-family: hamid; 7 | src: url('../fonts/Hamid.ttf'); 8 | } 9 | @font-face{ 10 | font-family: hayat; 11 | src: url('../fonts/Hayat.ttf'); 12 | } 13 | @font-face{ 14 | font-family: iransans; 15 | src: url('../fonts/IranSans.ttf'); 16 | } 17 | @font-face{ 18 | font-family: kaman; 19 | src: url('../fonts/Kaman.ttf'); 20 | } 21 | @font-face{ 22 | font-family: vazir; 23 | src: url('../fonts/Vazir.ttf'); 24 | } 25 | @font-face{ 26 | font-family: yekan; 27 | src: url('../fonts/Yekan.ttf'); 28 | } 29 | -------------------------------------------------------------------------------- /Scroll Animation/css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face{ 2 | font-family: absan; 3 | src: url('../fonts/Abasan.ttf'); 4 | } 5 | @font-face{ 6 | font-family: hamid; 7 | src: url('../fonts/Hamid.ttf'); 8 | } 9 | @font-face{ 10 | font-family: hayat; 11 | src: url('../fonts/Hayat.ttf'); 12 | } 13 | @font-face{ 14 | font-family: iransans; 15 | src: url('../fonts/IranSans.ttf'); 16 | } 17 | @font-face{ 18 | font-family: kaman; 19 | src: url('../fonts/Kaman.ttf'); 20 | } 21 | @font-face{ 22 | font-family: vazir; 23 | src: url('../fonts/Vazir.ttf'); 24 | } 25 | @font-face{ 26 | font-family: yekan; 27 | src: url('../fonts/Yekan.ttf'); 28 | } 29 | -------------------------------------------------------------------------------- /Weather App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weather APP 9 | 10 | 11 |

Weather App

12 |
13 |

14 |

15 |
16 |
17 |
18 |

19 | 20 |
21 |
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Progress Steps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Progress Steps 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Scroll Animation/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-color: #efedd6; 7 | font-family: hayat; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | margin: 0; 13 | overflow-x: hidden; 14 | } 15 | 16 | h1 { 17 | margin: 10px; 18 | font-size: 50px; 19 | } 20 | 21 | .box { 22 | background-color: #0d8640; 23 | color: #fff; 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | width: 400px; 28 | height: 200px; 29 | margin: 10px; 30 | border-radius: 10px; 31 | box-shadow: 2px 4px 5px rgba(0,0,0, 0.4); 32 | transform: translateX(400%); 33 | transition: transform 0.4s ease; 34 | } 35 | 36 | .box:nth-of-type(even){ 37 | transform: translateX(-400%); 38 | } 39 | 40 | .box.show { 41 | transform: translateX(0); 42 | } 43 | 44 | .box h2 { 45 | font-size: 45px; 46 | } -------------------------------------------------------------------------------- /Expanding Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Expanding Cards 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |

میدان آزادی

13 |
14 | 15 |
16 |

میدان نقش جهان

17 |
18 | 19 |
20 |

پاسارگاد

21 |
22 | 23 |
24 |

دریای خزر

25 |
26 | 27 |
28 |

باغ فین

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /Scroll Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Scroll Animation 5 | 6 | 7 | 8 | 9 | 10 |

برای دیدن انیمیشن اسکرول کنید

11 | 12 |

محتوا

13 |

محتوا

14 |

محتوا

15 |

محتوا

16 |

محتوا

17 |

محتوا

18 |

محتوا

19 |

محتوا

20 |

محتوا

21 |

محتوا

22 |

محتوا

23 |

محتوا

24 |

محتوا

25 |

محتوا

26 |

محتوا

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Weather App/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | flex-direction: column; 12 | align-items: center; 13 | background: linear-gradient(rgb(47,150,163), rgb(48,62,143)); 14 | font-family: sans-serif; 15 | color: white; 16 | } 17 | 18 | #opencode { 19 | font-size: 45px; 20 | margin-bottom: 100px; 21 | } 22 | 23 | .icon img{ 24 | height: 256px; 25 | width: 256px; 26 | } 27 | 28 | .location, 29 | .temperature { 30 | height: 30vh; 31 | width: 50%; 32 | display: flex; 33 | justify-content: space-around; 34 | align-items: center; 35 | } 36 | 37 | .temperature { 38 | flex-direction: column; 39 | } 40 | 41 | .temperature-description { 42 | font-size: 25px; 43 | } 44 | 45 | .degree-section { 46 | display: flex; 47 | align-items: center; 48 | cursor: pointer; 49 | } 50 | 51 | .degree-section span{ 52 | margin: 10px; 53 | font-size: 30px; 54 | } 55 | 56 | .degree-section h2{ 57 | font-size: 40px; 58 | } 59 | -------------------------------------------------------------------------------- /Expanding Cards/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | font-family: hamid; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | overflow: hidden; 12 | margin: 0; 13 | } 14 | 15 | .container{ 16 | display: flex; 17 | width: 90vw; 18 | } 19 | 20 | .panel { 21 | background-size: auto 100%; 22 | background-position: center; 23 | background-repeat: no-repeat; 24 | height: 80vh; 25 | border-radius: 50px; 26 | cursor: pointer; 27 | color: #fff; 28 | flex: 0.5; 29 | margin: 10px; 30 | position: relative; 31 | transition: flex 0.7s ease-in; 32 | } 33 | 34 | .panel h3 { 35 | font-size: 24px; 36 | position: absolute; 37 | bottom: 20px; 38 | left: 20px; 39 | margin: 0; 40 | opacity: 0; 41 | } 42 | 43 | .panel.active { 44 | flex: 5; 45 | } 46 | 47 | .panel.active h3 { 48 | opacity: 1; 49 | transition: opacity 0.3s ease-in 0.5s; 50 | } 51 | 52 | @media(max-width: 560px){ 53 | .container{ 54 | width: 100vw; 55 | } 56 | 57 | .panel:nth-of-type(4), 58 | .panel:nth-of-type(5) { 59 | display: none; 60 | } 61 | } -------------------------------------------------------------------------------- /Progress Steps/js/javascript.js: -------------------------------------------------------------------------------- 1 | const progress = document.getElementById('progress'); 2 | const prev = document.getElementById('prev'); 3 | const next = document.getElementById('next'); 4 | const circles = document.querySelectorAll('.circle'); 5 | 6 | let currentActive = 1; 7 | 8 | next.addEventListener('click', () => { 9 | currentActive++; 10 | 11 | if(currentActive > circles.length) { 12 | currentActive = circles.length; 13 | } 14 | 15 | update(); 16 | }) 17 | 18 | prev.addEventListener('click', () => { 19 | currentActive--; 20 | 21 | if(currentActive < 1) { 22 | currentActive = 1; 23 | } 24 | 25 | update(); 26 | }) 27 | 28 | function update() { 29 | // circles.forEach((circle, idx) => { 30 | 31 | // }); 32 | 33 | for(let [idx, circle] of circles.entries()) { 34 | if(idx < currentActive){ 35 | circle.classList.add('active'); 36 | } else { 37 | circle.classList.remove('active'); 38 | } 39 | } 40 | 41 | const actives = document.querySelectorAll('.active'); 42 | 43 | progress.style.width = ((actives.length - 1) / (circles.length - 1) * 100 + '%'); 44 | 45 | 46 | 47 | if(currentActive === 1) { 48 | prev.disabled = true; 49 | } else if (currentActive === circles.length) { 50 | next.disabled = true; 51 | } else { 52 | prev.disabled = false; 53 | next.disabled = false; 54 | } 55 | 56 | } 57 | -------------------------------------------------------------------------------- /Book List/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript DOM Tutorials 7 | 8 | 9 |
10 |
11 |
12 |

OpenBook

13 |
14 | 15 |
16 |
17 |
18 | 19 |
20 |

کتاب های اخیر

21 | 22 |
23 | 24 | 42 |
43 | 44 |
45 | 46 | 47 |
48 | 49 |
50 | 51 |
52 | 53 | اضافه 54 |
55 | 56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /Progress Steps/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-color: #f6f7fb; 7 | font-family: kaman; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | overflow: hidden; 13 | margin: 0; 14 | } 15 | 16 | .container { 17 | text-align: center; 18 | } 19 | 20 | .progress-container { 21 | display: flex; 22 | justify-content: space-between; 23 | position: relative; 24 | margin-bottom: 30px; 25 | max-width: 100%; 26 | width: 350px; 27 | } 28 | 29 | .progress-container::before { 30 | content: ''; 31 | background-color: #e0e0e0; 32 | position: absolute; 33 | top: 50%; 34 | left: 0; 35 | transform: translateY(-50%); 36 | height: 4px; 37 | width: 100%; 38 | z-index: -1; 39 | } 40 | 41 | .progress { 42 | background-color: #3498db; 43 | position: absolute; 44 | top: 50%; 45 | left: 0; 46 | transform: translateY(-50%); 47 | height: 4px; 48 | width: 0; 49 | z-index: -1; 50 | transition: 0.4s ease; 51 | } 52 | 53 | .circle { 54 | background-color: #fff; 55 | color: #999; 56 | border-radius: 50%; 57 | height: 30px; 58 | width: 30px; 59 | display: flex; 60 | align-items: center; 61 | justify-content: center; 62 | border: 3px solid #e0e0e0; 63 | transition: 0.4s ease; 64 | } 65 | 66 | .circle.active { 67 | border-color: #3498db ; 68 | } 69 | 70 | .btn { 71 | background-color: #3498db; 72 | color: #fff; 73 | border: 0; 74 | border-radius: 6px; 75 | cursor: pointer; 76 | font-family: inherit; 77 | padding: 8px 30px; 78 | margin: 5px; 79 | font-size: 14px; 80 | } 81 | 82 | .btn:active { 83 | transform: scale(0.98); 84 | } 85 | 86 | .btn:disabled { 87 | background-color: #e0e0e0; 88 | cursor: not-allowed; 89 | } -------------------------------------------------------------------------------- /Movie App/js/script.js: -------------------------------------------------------------------------------- 1 | const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=a0814a81d9e0ea8e164320078c18b3cb&page=1'; 2 | 3 | const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'; 4 | 5 | const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=a0814a81d9e0ea8e164320078c18b3cb&query="'; 6 | 7 | const main = document.getElementById('main'); 8 | const form = document.getElementById('form'); 9 | const search = document.getElementById('search'); 10 | 11 | 12 | getMovie(API_URL) 13 | 14 | async function getMovie(url) { 15 | const res = await fetch(url); 16 | const data = await res.json(); 17 | 18 | showMovies(data.results) 19 | } 20 | 21 | 22 | function showMovies(movies){ 23 | main.innerHTML = ''; 24 | 25 | movies.forEach(movie => { 26 | const {title, poster_path, vote_average, overview } = movie 27 | 28 | const movieEl = document.createElement('div') 29 | movieEl.classList.add('movie') 30 | 31 | movieEl.innerHTML = ` 32 | ${title} 33 | 34 |
35 |

${title}

36 | ${vote_average} 37 |
38 | 39 |
40 |

Overview

41 | ${overview} 42 |
43 | ` 44 | 45 | main.appendChild(movieEl) 46 | }); 47 | 48 | } 49 | 50 | function getClassByRate(vote){ 51 | if(vote >= 8){ 52 | return 'green' 53 | } else if(vote >= 5) { 54 | return 'orange' 55 | } else { 56 | return 'red' 57 | } 58 | } 59 | 60 | 61 | form.addEventListener('submit', (e) => { 62 | e.preventDefault() 63 | 64 | const searchTerm = search.value 65 | 66 | if(searchTerm && searchTerm !== '') { 67 | getMovie(SEARCH_API + searchTerm) 68 | 69 | search.value = '' 70 | } else { 71 | window.location.reload() 72 | } 73 | }) -------------------------------------------------------------------------------- /Movie App/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #22254b; 9 | font-family: 'Poppins', sans-serif; 10 | margin: 0; 11 | } 12 | 13 | header { 14 | padding: 1rem; 15 | display: flex; 16 | justify-content: flex-end; 17 | background-color: #373b69; 18 | } 19 | 20 | #form { 21 | display: flex; 22 | justify-content: space-between; 23 | } 24 | 25 | .search { 26 | background-color: transparent; 27 | border: 2px solid #22254b; 28 | border-radius: 50px ; 29 | font-size: 1rem; 30 | padding: 0.5rem 1rem; 31 | color: #fff; 32 | } 33 | 34 | .search::placeholder { 35 | color: #7378c5; 36 | } 37 | 38 | .search:focus{ 39 | outline: none; 40 | background-color: #22254b; 41 | } 42 | 43 | main { 44 | display: flex; 45 | flex-wrap: wrap; 46 | justify-content: center; 47 | } 48 | 49 | .movie { 50 | width: 300px; 51 | margin: 1rem; 52 | background-color: #373b69; 53 | box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); 54 | 55 | position: relative; 56 | overflow: hidden; 57 | border-radius: 3px; 58 | } 59 | 60 | .movie img { 61 | width: 100%; 62 | } 63 | 64 | .movie-info { 65 | color: #eee; 66 | display: flex; 67 | align-items: center; 68 | justify-content: space-between; 69 | padding: 0.5rem 1rem 1rem; 70 | letter-spacing: 0.5px; 71 | } 72 | 73 | .movie-info h3 { 74 | margin-top: 0; 75 | } 76 | 77 | .movie-info span { 78 | background-color: #22254b; 79 | padding: 0.25rem 0.5rem; 80 | border-radius: 4px; 81 | font-weight: bold; 82 | } 83 | 84 | .movie-info span.green { 85 | color: lightgreen; 86 | } 87 | .movie-info span.orange { 88 | color: orange; 89 | } 90 | .movie-info span.red { 91 | color: red; 92 | } 93 | 94 | .overview { 95 | background-color: #fff; 96 | padding: 2rem; 97 | position: absolute; 98 | left: 0; 99 | bottom: 0; 100 | right: 0; 101 | max-height: 100%; 102 | transform: translateY(101%); 103 | overflow-y: auto; 104 | transition: transform 0.3s ease-in; 105 | } 106 | 107 | .movie:hover .overview { 108 | transform: translateY(0); 109 | } -------------------------------------------------------------------------------- /Weather App/icons/Drizzle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /Book List/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Tahoma; 3 | color: #444; 4 | letter-spacing: 1px; 5 | } 6 | 7 | #book-list h1{ 8 | float: right; 9 | } 10 | 11 | .clear{ 12 | clear: both; 13 | } 14 | 15 | h1, h2{ 16 | font-weight: normal; 17 | } 18 | 19 | #container{ 20 | width: 90%; 21 | max-width: 960px; 22 | margin: 20px auto; 23 | border-radius: 6px; 24 | box-shadow: 0px 1px 6px rgba(0,0,0,0.2); 25 | box-sizing: border-box; 26 | padding: 0 0 20px; 27 | overflow: hidden; 28 | border: 1px solid lightgray; 29 | } 30 | 31 | #page-banner{ 32 | background: #eee ; 33 | padding: 10px 0; 34 | 35 | } 36 | 37 | #page-banner h1, #page-banner p{ 38 | width: 100%; 39 | text-align: center; 40 | margin: 10px 0; 41 | } 42 | 43 | #page-banner input{ 44 | width: 90%; 45 | max-width: 300px; 46 | margin: 20px auto; 47 | display: block; 48 | padding: 8px; 49 | border: 1px solid #ddd; 50 | border-radius: 4px; 51 | font-size: 16px; 52 | color: #444; 53 | } 54 | 55 | #book-list, #add-book, #tabbed-content{ 56 | margin: 30px; 57 | } 58 | 59 | #book-list h2{ 60 | float: right; 61 | margin-right: 15px; 62 | } 63 | 64 | #book-list ul, #tabbed-content ul{ 65 | list-style-type: none; 66 | padding: 0; 67 | } 68 | 69 | #book-list li{ 70 | padding: 20px; 71 | border-right: 5px solid #ddd; 72 | margin: 20px 10px; 73 | } 74 | 75 | #book-list li:hover{ 76 | border-color: #9361bf; 77 | } 78 | 79 | .delete{ 80 | float: left; 81 | background: #9361bf; 82 | padding: 6px; 83 | border-radius: 4px; 84 | cursor: pointer; 85 | color: white; 86 | } 87 | 88 | .name{ 89 | float: right; 90 | } 91 | 92 | .delete:hover{ 93 | background: #333; 94 | } 95 | 96 | #add-book{ 97 | width: 400px; 98 | margin: 0 auto; 99 | } 100 | 101 | #add-book input{ 102 | display: block; 103 | margin: 20px 0; 104 | padding: 10px; 105 | border: 1px solid #ccc; 106 | font-size: 16px; 107 | border-radius: 4px 0 0 4px; 108 | box-sizing: border-box; 109 | width: 300px; 110 | float: left; 111 | } 112 | 113 | #add-book .button{ 114 | border: 1px solid #9361bf; 115 | background: #9361bf; 116 | padding: 10px 20px; 117 | font-size: 17px; 118 | display: inline-block; 119 | border-radius: 0 4px 4px 0; 120 | cursor: pointer; 121 | width: 59px; 122 | margin: 20px 0; 123 | border-left: 0; 124 | text-decoration: none; 125 | text-align: center; 126 | color: white; 127 | } 128 | 129 | #add-book:after{ 130 | content: ''; 131 | display: block; 132 | clear: both; 133 | } 134 | 135 | #hide{ 136 | float: right; 137 | padding: 20px 35px 20px 0; 138 | } 139 | 140 | #hide label{ 141 | padding: 0 10px; 142 | } 143 | 144 | #add-book #hide{ 145 | width: 30px; 146 | } 147 | -------------------------------------------------------------------------------- /Book List/javascript.js: -------------------------------------------------------------------------------- 1 | const inputText = document.querySelector('#add-book input'); 2 | const link = document.querySelector('.button'); 3 | const ul = document.querySelector('ul'); 4 | const checkBox = document.querySelector('#hide input'); 5 | const inputSearch = document.querySelector('#search-books input'); 6 | 7 | const spanDelete = `حذف`; 8 | 9 | link.addEventListener('click', function(e){ 10 | const spanName = document.createElement('span'); 11 | spanName.className = 'name'; 12 | spanName.textContent = inputText.value; 13 | 14 | const li = document.createElement('li'); 15 | 16 | li.appendChild(spanName); 17 | li.innerHTML += spanDelete; 18 | 19 | ul.appendChild(li); 20 | 21 | storeToLocalStorage(inputText.value); 22 | 23 | inputText.value = ''; 24 | e.preventDefault(); 25 | }) 26 | 27 | 28 | 29 | ul.addEventListener('click', function(e){ 30 | if(e.target.className === 'delete'){ 31 | e.target.parentElement.remove(); 32 | removeFromLocalStorage(e.target.parentElement.children[0].textContent); 33 | } 34 | }) 35 | 36 | 37 | checkBox.addEventListener('change', function(e){ 38 | if(checkBox.checked === true){ 39 | ul.style.display = 'none'; 40 | } else { 41 | ul.style.display = 'block'; 42 | } 43 | }) 44 | 45 | inputSearch.addEventListener('keyup', function(e){ 46 | for(let book of ul.children){ 47 | if(book.firstElementChild.textContent.indexOf(inputSearch.value) !==-1){ 48 | book.style.display = 'block'; 49 | } else { 50 | book.style.display = 'none'; 51 | } 52 | } 53 | }) 54 | 55 | 56 | document.addEventListener('DOMContentLoaded', function(e){ 57 | let tasks; 58 | if(localStorage.getItem('tasks') === null){ 59 | tasks = []; 60 | } else { 61 | tasks = localStorage.getItem('tasks').split(','); 62 | } 63 | 64 | for(let item of tasks){ 65 | const spanName = document.createElement('span'); 66 | spanName.className = 'name'; 67 | spanName.textContent = item; 68 | 69 | const li = document.createElement('li'); 70 | 71 | li.appendChild(spanName); 72 | li.innerHTML += spanDelete; 73 | 74 | ul.appendChild(li); 75 | } 76 | }) 77 | 78 | function storeToLocalStorage(task){ 79 | let tasks; 80 | if(localStorage.getItem('tasks') === null){ 81 | tasks = []; 82 | } else { 83 | tasks = localStorage.getItem('tasks').split(','); 84 | } 85 | 86 | tasks.push(task); 87 | 88 | localStorage.setItem('tasks', tasks); 89 | } 90 | 91 | 92 | function removeFromLocalStorage(task){ 93 | let tasks; 94 | if(localStorage.getItem('tasks') === null){ 95 | tasks = []; 96 | } else { 97 | tasks = localStorage.getItem('tasks').split(','); 98 | } 99 | 100 | for(let i=0; i 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /Weather App/app.js: -------------------------------------------------------------------------------- 1 | const getLoc = async () => { 2 | 3 | const url = 'http://ip-api.com/json/?fields=status,country,city,lat,lon,timezone'; 4 | 5 | const response = await fetch(url); 6 | const data = response.json(); 7 | 8 | return data; 9 | } 10 | 11 | const getWeather = async (lat, lon) => { 12 | api = 'f0894defae7c5584798f8812232a40c2'; 13 | 14 | url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${api}`; 15 | 16 | const response = await fetch(url); 17 | const data = response.json(); 18 | 19 | return data; 20 | } 21 | 22 | function getIcon(weMain){ 23 | let icon; 24 | switch (weMain) { 25 | case 'Thunderstorm': 26 | icon = `${weMain}.svg`; 27 | break; 28 | case 'Drizzle': 29 | icon = `${weMain}.svg`; 30 | break; 31 | case 'Rain': 32 | icon = `${weMain}.svg`; 33 | break; 34 | case 'Snow': 35 | icon = `${weMain}.svg`; 36 | break; 37 | case 'Clear': 38 | const DayOrNigh = getDayOrNight(); 39 | icon = `${weMain}-${DayOrNigh}.svg`; 40 | break; 41 | case 'Clouds': 42 | icon = `${weMain}.svg`; 43 | break; 44 | case 'Atmosphere': 45 | icon = `${weMain}.png`; 46 | break; 47 | } 48 | return icon; 49 | } 50 | 51 | function getDayOrNight() { 52 | let DayOrNigh; 53 | var d = new Date(); 54 | 55 | const hour = d.getHours(); 56 | 57 | if (hour >= 6 && hour <= 19) { 58 | DayOrNigh = 'Day'; 59 | } else { 60 | DayOrNigh = 'Night'; 61 | } 62 | 63 | return DayOrNigh; 64 | } 65 | 66 | function getTemp(weTemp){ 67 | const k = weTemp; 68 | const f = (k - 273.15) * 9/5 + 32; 69 | const c = k - 273.15; 70 | return temp = {kel:Math.floor(k), far:Math.floor(f), can:Math.floor(c)}; 71 | } 72 | 73 | const loti = document.querySelector('.timezone'); 74 | let icon = document.querySelector('.icon'); 75 | const dese = document.querySelector('.degree-section'); 76 | const deg = document.querySelector('.degree-section h2'); 77 | const unit = document.querySelector('.degree-section span'); 78 | 79 | const tede = document.querySelector('.temperature-description'); 80 | 81 | window.addEventListener('load', function(){ 82 | getLoc() 83 | .then(locData => { 84 | const timeZone = locData.timezone; 85 | loti.textContent = timeZone; 86 | getWeather(locData.lat, locData.lon) 87 | .then(weData => { 88 | const weTemp = weData.main.temp; 89 | const weMain = weData.weather[0].main; 90 | const weDes = weData.weather[0].description; 91 | 92 | const iconName = getIcon(weMain); 93 | icon.innerHTML = ``; 94 | 95 | deg.textContent = Math.floor(weTemp); 96 | unit.textContent = 'K'; 97 | dese.addEventListener('click', function(e){ 98 | if(unit.textContent == 'K'){ 99 | deg.textContent = getTemp(weTemp).far; 100 | unit.textContent = 'F'; 101 | } 102 | else if(unit.textContent == 'F'){ 103 | deg.textContent = getTemp(weTemp).can; 104 | unit.textContent = 'C'; 105 | } 106 | else{ 107 | deg.textContent = getTemp(weTemp).kel; 108 | unit.textContent = 'K'; 109 | } 110 | }) 111 | tede.textContent = weDes; 112 | console.log(weTemp, weMain, weDes); 113 | }) 114 | }) 115 | }) 116 | -------------------------------------------------------------------------------- /Weather App/icons/Snow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /Weather App/icons/Thunderstorm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | -------------------------------------------------------------------------------- /Weather App/icons/Clear-Night.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | -------------------------------------------------------------------------------- /Weather App/icons/Clouds.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | -------------------------------------------------------------------------------- /Weather App/icons/Clear-Day.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | --------------------------------------------------------------------------------