├── .gitignore ├── package.json ├── plugin.js ├── index.html ├── style.css └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "bootstrap": "^5.2.2", 4 | "bootstrap-icons": "^1.10.2" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /plugin.js: -------------------------------------------------------------------------------- 1 | const $ = (selectName) => { 2 | return document.querySelector(selectName) 3 | } 4 | const $$ = (selectName) => { 5 | return document.querySelectoAll(selectName); 6 | }; 7 | 8 | // DYNAMIC CREATE ELEMENT=========// 9 | 10 | 11 | const createElement = (tagName, className, content) => { 12 | const newEelement = document.createElement(tagName); 13 | if (className) { 14 | newEelement.setAttribute("class", className); 15 | } 16 | if (content) { 17 | newEelement.innerHTML = content; 18 | } 19 | return newEelement; 20 | }; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | AllMovies 15 | 16 | 17 |

18 |

19 |

20 |

AllMovies.UZ

21 |

22 |

23 |

24 | 25 |

26 | 35 | 36 | 37 |

38 |

39 |

40 |

41 | 67 | 70 |

71 |

72 |

73 |

74 |

75 |

76 |

77 |

78 |

79 | 80 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .wrapper { 7 | display: grid; 8 | grid-template-columns: repeat(Auto-fill, minmax(320px, 1fr)); 9 | gap: 10px; 10 | margin: auto; 11 | } 12 | 13 | .lds-roller { 14 | display: inline-block; 15 | position: relative; 16 | width: 80px; 17 | height: 80px; 18 | left: 220px; 19 | top: 100px; 20 | } 21 | .lds-roller div { 22 | animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 23 | transform-origin: 40px 40px; 24 | } 25 | .lds-roller div:after { 26 | content: " "; 27 | display: block; 28 | position: absolute; 29 | width: 7px; 30 | height: 7px; 31 | border-radius: 50%; 32 | background: rgb(255, 0, 0); 33 | margin: -4px 0 0 -4px; 34 | } 35 | .lds-roller div:nth-child(1) { 36 | animation-delay: -0.036s; 37 | } 38 | .lds-roller div:nth-child(1):after { 39 | top: 63px; 40 | left: 63px; 41 | } 42 | .lds-roller div:nth-child(2) { 43 | animation-delay: -0.072s; 44 | } 45 | .lds-roller div:nth-child(2):after { 46 | top: 68px; 47 | left: 56px; 48 | } 49 | .lds-roller div:nth-child(3) { 50 | animation-delay: -0.108s; 51 | } 52 | .lds-roller div:nth-child(3):after { 53 | top: 71px; 54 | left: 48px; 55 | } 56 | .lds-roller div:nth-child(4) { 57 | animation-delay: -0.144s; 58 | } 59 | .lds-roller div:nth-child(4):after { 60 | top: 72px; 61 | left: 40px; 62 | } 63 | .lds-roller div:nth-child(5) { 64 | animation-delay: -0.18s; 65 | } 66 | .lds-roller div:nth-child(5):after { 67 | top: 71px; 68 | left: 32px; 69 | } 70 | .lds-roller div:nth-child(6) { 71 | animation-delay: -0.216s; 72 | } 73 | .lds-roller div:nth-child(6):after { 74 | top: 68px; 75 | left: 24px; 76 | } 77 | .lds-roller div:nth-child(7) { 78 | animation-delay: -0.252s; 79 | } 80 | .lds-roller div:nth-child(7):after { 81 | top: 63px; 82 | left: 17px; 83 | } 84 | .lds-roller div:nth-child(8) { 85 | animation-delay: -0.288s; 86 | } 87 | .lds-roller div:nth-child(8):after { 88 | top: 56px; 89 | left: 12px; 90 | } 91 | @keyframes lds-roller { 92 | 0% { 93 | transform: rotate(0deg); 94 | } 95 | 100% { 96 | transform: rotate(360deg); 97 | } 98 | } 99 | 100 | /* loader css end */ 101 | 102 | /* modal window */ 103 | 104 | .modal-window { 105 | width: 100% !important; 106 | min-height: 100% !important; 107 | background-color: rgba(0, 0, 0, 0.793); 108 | backdrop-filter: blur(6px); 109 | position: fixed; 110 | top: 0; 111 | z-index: 9999999; 112 | display: flex; 113 | justify-content: center; 114 | align-items: center; 115 | transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 116 | -webkit-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 117 | -moz-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 118 | -ms-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 119 | -o-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 120 | } 121 | 122 | .modal-window .modal-container { 123 | width: 60%; 124 | height: 65vh; 125 | background-color: aliceblue; 126 | border-radius: 8px; 127 | box-shadow: 0 0 10px 0px white; 128 | -webkit-border-radius: 8px; 129 | -moz-border-radius: 8px; 130 | -ms-border-radius: 8px; 131 | -o-border-radius: 8px; 132 | } 133 | 134 | .modal-hide { 135 | transform: translateY(-200%); 136 | -webkit-transform: translateY(-200%); 137 | -moz-transform: translateY(-200%); 138 | -ms-transform: translateY(-200%); 139 | -o-transform: translateY(-200%); 140 | } 141 | 142 | #close{ 143 | cursor: pointer; 144 | position: absolute; 145 | z-index: 2222222222; 146 | } 147 | 148 | .animate{ 149 | animation-name: animateClose; 150 | animation-duration: 1s; 151 | animation-timing-function: ease-in; 152 | animation-iteration-count: 1; 153 | animation-fill-mode: forwards; 154 | animation-direction:alternate; 155 | 156 | } 157 | @keyframes animateClose { 158 | 0%{ 159 | transform: scale(1) translateX(0); 160 | 161 | } 162 | 25%{ 163 | transform: scale(1.2) translateX(0); 164 | 165 | } 166 | 50%{ 167 | transform: scale(0.8) translateX(0); 168 | 169 | } 170 | 75%{ 171 | transform: scale(1.2) translateX(0); 172 | 173 | } 174 | 100%{ 175 | transform: scale(1) translateX(0); 176 | 177 | } 178 | } 179 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | movies.splice(100); 4 | 5 | //-----------------------------NORMALIZE ALL MOVIES ------------// 6 | 7 | const allMovies = movies.map((movies) => { 8 | return { 9 | title: movies.title, 10 | year: movies.year, 11 | category: movies.categories, 12 | id: movies.imdbId, 13 | time: `${Math.floor(movies.runtime / 60)}h ${movies.runtime % 60}m`, 14 | summary: movies.summary, 15 | link: `https://www.youtube.com/embed/${movies.youtubeId}`, 16 | maxImg: movies.bigThumbnail, 17 | minImg: movies.smallThumbnail, 18 | rating: movies.imdbRating, 19 | language: movies.language, 20 | }; 21 | }); 22 | 23 | //-----------------------------NORMALIZE ALL MOVIES ------------// 24 | 25 | //----------------------------- RENDER ALL MOVIES function ------------// 26 | 27 | function renderAllMovies() { 28 | allMovies.forEach((el) => { 29 | const card = createElement( 30 | "div", 31 | "card shadow-lg", 32 | ` 33 | 34 |

35 |

36 |

${el.title}

37 |

Year: ${el.year}
Language: ${el.language}
Runtime: ${el.time}
Category: ${el.category}
Rating: ${el.rating}

44 | 49 | 50 |

51 | 52 | ` 53 | ); 54 | 55 | $(".wrapper").appendChild(card); 56 | }); 57 | } 58 | renderAllMovies(); 59 | 60 | //============================ FIND MOVIES ======== // 61 | 62 | const findFilm = (regexp, rating = 0, category) => { 63 | if (category === "All") { 64 | return allMovies.filter((film) => { 65 | return film.title.match(regexp) && film.rating >= rating; 66 | }); 67 | } 68 | 69 | return allMovies.filter((film) => { 70 | return ( 71 | film.title.match(regexp) && 72 | film.rating >= rating && 73 | film.category.includes(category) 74 | ); 75 | }); 76 | }; 77 | 78 | //=========== FIND FILMS LISTENER ====== 79 | 80 | $("#submitForm").addEventListener("submit", () => { 81 | $( 82 | ".wrapper" 83 | ).innerHTML = `

`; 84 | 85 | const searchValue = $("#filmName").value; 86 | const filmRating = $("#filmRating").value; 87 | const filmCategory = $("#category").value; 88 | 89 | const regexp = new RegExp(searchValue, "gi"); 90 | 91 | const searchResult = findFilm(regexp, filmRating, filmCategory); 92 | 93 | setTimeout(() => { 94 | if (searchResult.length > 0) { 95 | searchResultsRender(searchResult); 96 | 97 | $(".card-res").classList.remove("d-none"); 98 | 99 | $(".card-res").style.displey = "block"; 100 | 101 | $( 102 | "#res" 103 | ).innerHTML = ` ${searchResult.length} ta ma'lumot topildi`; 104 | 105 | if (searchValue.length === 0) { 106 | } 107 | } else { 108 | $(".card-res").classList.add("d-none"); 109 | $( 110 | ".wrapper" 111 | ).innerHTML = `

Ma'lumot topilmadi

`; 112 | } 113 | }, 2000); 114 | }); 115 | 116 | function searchResultsRender(data = []) { 117 | $(".wrapper").innerHTML = " "; 118 | 119 | data.forEach((el) => { 120 | const card = createElement( 121 | "div", 122 | "card shadow-lg", 123 | ` 124 | 125 |

126 |

127 |

${el.title}

128 |

Year: ${el.year}
Language: ${el.language}
Runtime: ${el.time}
Category: ${el.category}
Rating: ${el.rating}

135 | 140 | 141 |

142 | 143 | ` 144 | ); 145 | 146 | $(".wrapper").appendChild(card); 147 | }); 148 | } 149 | 150 | //============ DYNAMIC CATEGORY ================== 151 | 152 | const dynamicCategory = () => { 153 | let category = []; 154 | 155 | allMovies.forEach((e) => { 156 | e.category.forEach((el) => { 157 | if (!category.includes(el)) { 158 | category.push(el); 159 | } 160 | }); 161 | }); 162 | 163 | category.sort(); 164 | category.unshift("All"); 165 | category.forEach((el) => { 166 | const option = createElement("option", "item-option", el); 167 | $("#category").appendChild(option); 168 | }); 169 | }; 170 | 171 | dynamicCategory(); 172 | 173 | // ================ show modal ========== 174 | 175 | $(".wrapper").addEventListener("click", (e) => { 176 | if (e.target.classList.contains("btn-primary")) { 177 | const idMovie = e.target.getAttribute("data-read"); 178 | console.log(idMovie); 179 | showModal(idMovie); 180 | $(".modal-window").classList.remove("modal-hide"); 181 | } 182 | }); 183 | 184 | function showModal(ID) { 185 | const filmItem = allMovies.filter((e) => { 186 | return e.id == ID; 187 | }); 188 | 189 | filmItem.forEach((e) => { 190 | const row = createElement( 191 | "div", 192 | "row", 193 | ` 194 |

195 |

196 |

197 |

198 |

${e.title}

199 |

Rating: ${e.rating}
Year: ${e.year}
Runtime: ${e.time}
Category: ${e.category}
Language: ${e.language}

206 |

207 |

208 |

209 | ${e.title} 210 |

211 |

212 | ${e.summary} 213 |

214 |

215 | ` 216 | ); 217 | $(".modal-content").appendChild(row); 218 | }); 219 | } 220 | 221 | $("#close").addEventListener("click", () => { 222 | $(".modal-window").classList.add("modal-hide"); 223 | $(".modal-content").innerHTML = ""; 224 | }); 225 | 226 | window.addEventListener("click", (e) => { 227 | if (e.target.classList.contains("modal-window")) { 228 | $("#close").classList.toggle("animate"); 229 | } 230 | }); 231 | 232 | // ========= show modal end ============== 233 | 234 | // ================ BOOKMARK ============= 235 | 236 | $(".wrapper").addEventListener("click", (e) => { 237 | if (e.target.classList.contains("btn-warning")) { 238 | const idMovie = e.target.getAttribute("data-add"); 239 | addBookmark(idMovie); 240 | } 241 | }); 242 | const bookmark = []; 243 | 244 | function addBookmark(ID) { 245 | const filmItem = allMovies.filter((e) => { 246 | return e.id == ID; 247 | }); 248 | if (!bookmark.includes(filmItem[0])) { 249 | bookmark.push(filmItem[0]); 250 | } else { 251 | alert("avval qo'shilgan"); 252 | } 253 | 254 | localStorage.setItem("bookmark", JSON.stringify(bookmark)); 255 | } 256 | --------------------------------------------------------------------------------