├── .gitattributes ├── index.html └── src ├── css ├── home.css └── modal.css ├── images ├── covers │ ├── bitcoin.jpg │ ├── despacito.jpg │ ├── echame-la-culpa.jpg │ ├── felices.jpg │ ├── gorillaz.jpg │ ├── html5.jpg │ ├── mejorandola.jpg │ ├── mi-gente.jpg │ ├── midnight.jpg │ ├── no-vaya-a-ser.jpg │ ├── one-more-time.jpg │ ├── optimizar.jpg │ ├── rehuso.jpg │ ├── responsive.jpg │ ├── social.jpg │ └── solar-sailer.jpg ├── loader.gif └── platzi-video.png └── js └── home.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Platzi Video 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 19 |
20 |

Mi Playlist Escuchar Playlist

21 |
    22 |
  1. 23 | 24 | 25 | Reasons To Choose A Notebook Over A Computer Desktop 26 | 27 | 28 |
    2. 29 |
  2. 30 | 31 | 32 | Programming 33 | 34 | 35 |
    3. 36 |
  3. 37 | 38 | 39 | Pa Bailar 40 | 41 | 42 |
    4. 43 |
  4. 44 | 45 | 46 | Top 10 mundial 47 | 48 | 49 |
    5. 50 |
  5. 51 | 52 | 53 | Platzi Video 54 | 55 | 56 |
    6. 57 |
  6. 58 | 59 | 60 | Luis y sus amigos 61 | 62 | 63 |
    7. 64 |
  7. 65 | 66 | 67 | Bailar y Bailar 68 | 69 | 70 |
    8. 71 |
  8. 72 | 73 | 74 | 13 reasons why 75 | 76 | 77 |
    9. 78 |
  9. 79 | 80 | 81 | El mundial 82 | 83 | 84 |
    10. 85 |
86 |
87 |
88 |

Playlist de amigos

89 | 155 |
156 |
157 | 158 |
159 |
160 | 161 |
162 | 165 |
166 |
167 |
168 |

169 | 170 | Leonidas Esteban 171 |

172 |
173 |
174 |
175 |
176 |

A los golpes

177 |

Acción

178 |
179 | 180 |
181 |
182 |
183 |

Para llorar

184 |

Drama

185 |
186 | 187 |
188 |
189 |
190 |

Dibujitos animados

191 |

Animación

192 |
193 | 194 |
195 |
196 |
197 | 198 |
199 |
200 | 201 |
202 |
203 |
204 |
205 | 215 | 216 | 217 | 218 | 219 | -------------------------------------------------------------------------------- /src/css/home.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Lato', sans-serif; 4 | } 5 | 6 | 7 | /*home layout*/ 8 | .home { 9 | display: grid; 10 | height: 100vh; 11 | grid-template-columns: 350px 1fr; 12 | grid-template-rows: 1fr 0; 13 | grid-template-areas: "sidebar primary" 14 | "sidebar featuring"; 15 | } 16 | .home.search-active { 17 | grid-template-rows: 1fr 150px; 18 | } 19 | 20 | .home-sidebar { 21 | grid-area: sidebar; 22 | } 23 | .home-primary { 24 | grid-area: primary; 25 | } 26 | .home-featuring { 27 | grid-area: featuring; 28 | display: grid; 29 | } 30 | .home-featuring img { 31 | align-self: center; 32 | justify-self: center; 33 | } 34 | 35 | /*Sidebar*/ 36 | .sidebar { 37 | display: grid; 38 | grid-template-columns: 1fr; 39 | grid-template-rows: auto 1fr 1fr; 40 | background: #171929; 41 | color: white; 42 | padding: 1em; 43 | box-sizing: border-box; 44 | height: 100vh; 45 | overflow: auto; 46 | } 47 | 48 | /*Logo*/ 49 | .logo { 50 | 51 | } 52 | .logo-image { 53 | margin: 0; 54 | } 55 | .logo-image img { 56 | max-width: 100%; 57 | } 58 | 59 | .sidebarPlaylist { 60 | overflow: auto; 61 | } 62 | 63 | /*myPlaylist*/ 64 | 65 | .myPlaylist { 66 | padding: 0 20px; 67 | } 68 | 69 | .myPlaylist-item a { 70 | color: white; 71 | text-decoration: none; 72 | font-size: .8em; 73 | display: block; 74 | margin-bottom: 7px; 75 | } 76 | .myPlaylist-item:last-child a { 77 | margin-bottom: 0; 78 | } 79 | 80 | 81 | .myPlaylist-item a:hover { 82 | text-decoration: underline; 83 | } 84 | 85 | /*playlistFriends*/ 86 | 87 | .playlistFriends { 88 | padding: 0; 89 | } 90 | 91 | .playlistFriends-item { 92 | color: white; 93 | } 94 | 95 | .playlistFriends-item { 96 | display: flex; 97 | margin-bottom: 7px; 98 | font-size: .8em; 99 | } 100 | .playlistFriends-item a { 101 | display: inline-flex; 102 | align-items: center; 103 | color: white; 104 | text-decoration: none; 105 | } 106 | .playlistFriends-item:hover a { 107 | text-decoration: underline; 108 | } 109 | 110 | .playlistFriends-item img { 111 | width: 35px; 112 | height: 35px; 113 | border-radius: 50%; 114 | margin-right: 10px; 115 | } 116 | 117 | .playlistFriends-item span { 118 | display: inline-block; 119 | } 120 | 121 | 122 | .home-primary { 123 | display: grid; 124 | grid-template-areas: "search user" 125 | "list list"; 126 | grid-template-rows: auto 1fr; 127 | grid-template-columns: 300px 1fr; 128 | padding: 10px; 129 | overflow: auto; 130 | } 131 | 132 | 133 | .search { 134 | grid-area: search; 135 | } 136 | 137 | .search input { 138 | background: #f0f0f0; 139 | font-family: "Lato"; 140 | padding: 10px; 141 | border-radius: 10px; 142 | font-size: 16px; 143 | width: 100%; 144 | border: none; 145 | box-shadow: 0 0 10px #f0f0f0; 146 | box-sizing: border-box;; 147 | } 148 | .primary-search { 149 | align-self: center; 150 | } 151 | 152 | .primary-user { 153 | justify-self: end; 154 | margin: 5px 0; 155 | } 156 | 157 | .user p { 158 | display: flex; 159 | align-items: center; 160 | font-weight: 300; 161 | margin: 0; 162 | } 163 | .user img { 164 | width: 45px; 165 | height: 45px; 166 | object-fit: cover; 167 | border-radius: 50%; 168 | margin-right: 10px; 169 | } 170 | 171 | .primary-list { 172 | grid-area: list; 173 | overflow: auto; 174 | } 175 | .primaryPlaylist-topic { 176 | margin: 15px 0 0; 177 | color: #888B8E; 178 | font-size: 14px; 179 | font-weight: 300; 180 | } 181 | .primaryPlaylist-title { 182 | margin: 0 0 15px; 183 | color: #3F546C; 184 | font-size: 20px; 185 | font-weight: 400; 186 | } 187 | .primaryPlaylist-list { 188 | display: flex; 189 | overflow: auto; 190 | } 191 | 192 | .primaryPlaylist-list .primaryPlaylistItem { 193 | margin-right: 10px; 194 | } 195 | 196 | .primaryPlaylistItem { 197 | cursor: pointer; 198 | transition: .3s; 199 | /*border: 1px solid blue;*/ 200 | } 201 | /*.primaryPlaylistItem:hover { 202 | transform: scale(1.1) 203 | } 204 | */ 205 | .primaryPlaylistItem-image { 206 | } 207 | 208 | .primaryPlaylistItem img { 209 | width: 170px; 210 | height: 256px; 211 | object-fit: cover; 212 | } 213 | .primaryPlaylistItem-title { 214 | margin: 5px 0; 215 | color: #44546B; 216 | font-size: 14px; 217 | font-weight: normal; 218 | } 219 | 220 | 221 | .featuring { 222 | background: linear-gradient(to right, #ff0000, #ff458b); 223 | display: flex; 224 | height: 100%; 225 | align-items: center; 226 | padding-left: 100px; 227 | color: white; 228 | } 229 | 230 | .featuring-image { 231 | margin-right: 20px; 232 | } 233 | 234 | .featuring-title { 235 | margin: 10px; 236 | } 237 | .featuring-album { 238 | font-size: 1.3em; 239 | margin: 10px; 240 | } 241 | 242 | 243 | .fadeIn { 244 | animation: 5000ms fadeIn; 245 | } 246 | 247 | @keyframes fadeIn { 248 | 0% { 249 | opacity: 0; 250 | } 251 | 252 | 100% { 253 | opacity: 1; 254 | } 255 | } 256 | -------------------------------------------------------------------------------- /src/css/modal.css: -------------------------------------------------------------------------------- 1 | .modal-btn { 2 | text-align: center; 3 | padding: .6em .8em .8em; 4 | border: none; 5 | color: white; 6 | background: lightgray; 7 | margin: 5px; 8 | border-radius: 5px; 9 | cursor: pointer; 10 | box-shadow: inset 0 -.2em rgba(0,0,0, .2); 11 | outline: 0; 12 | transition: .2s; 13 | will-change: transform; 14 | } 15 | .modal-btn.primary { 16 | background: #7dc800; 17 | } 18 | .modal-btn.warning { 19 | background: #ff463b; 20 | } 21 | 22 | .modal-btn:active { 23 | transform: scale(.9); 24 | } 25 | .overlay { 26 | background: rgba(0,0,0,.5); 27 | position: fixed; 28 | left: 0; 29 | right: 0; 30 | top: 0; 31 | bottom: 0; 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | /*transition: 300s ease-in;*/ 36 | /*opacity: 0;*/ 37 | /*visibility: hidden;*/ 38 | display: none; 39 | } 40 | .overlay.active { 41 | /*opacity: 1;*/ 42 | /*visibility: visible;*/ 43 | display: flex; 44 | } 45 | .modal { 46 | 47 | width: 500px; 48 | background: white; 49 | padding: 2em; 50 | border-radius: .5em; 51 | text-align: center; 52 | z-index: 2; 53 | transform: translateY(-3000px); 54 | position: absolute; 55 | left: 0; 56 | right: 0; 57 | top: 0; 58 | bottom: 0; 59 | margin: auto; 60 | height: 500px; 61 | overflow: auto; 62 | display: flex; 63 | justify-content: center; 64 | flex-direction: column; 65 | } 66 | 67 | .modal-content { 68 | display: flex; 69 | } 70 | 71 | .modal-content img { 72 | width: 170px; 73 | height: 256px; 74 | object-fit: cover; 75 | margin-right: 15px; 76 | } 77 | .modal-content p { 78 | align-self: center; 79 | } 80 | /*@keyframes animationIn {*/ 81 | @keyframes modalIn { 82 | 0% { 83 | transform: translateY(-3000px); 84 | } 85 | 60% { 86 | transform: translateY(25px); 87 | } 88 | 75% { 89 | transform: translateY(-10px); 90 | } 91 | 90% { 92 | transform: translateY(5px); 93 | } 94 | 100% { 95 | transform: translateY(0px); 96 | } 97 | } 98 | 99 | /*@keyframes animationOut {*/ 100 | @keyframes modalOut { 101 | 0% { 102 | transform: translateY(5px); 103 | } 104 | 60% { 105 | transform: translateY(-10px); 106 | } 107 | 75% { 108 | transform: translateY(25px); 109 | } 110 | 100% { 111 | transform: translateY(-3000px); 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /src/images/covers/bitcoin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/bitcoin.jpg -------------------------------------------------------------------------------- /src/images/covers/despacito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/despacito.jpg -------------------------------------------------------------------------------- /src/images/covers/echame-la-culpa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/echame-la-culpa.jpg -------------------------------------------------------------------------------- /src/images/covers/felices.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/felices.jpg -------------------------------------------------------------------------------- /src/images/covers/gorillaz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/gorillaz.jpg -------------------------------------------------------------------------------- /src/images/covers/html5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/html5.jpg -------------------------------------------------------------------------------- /src/images/covers/mejorandola.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/mejorandola.jpg -------------------------------------------------------------------------------- /src/images/covers/mi-gente.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/mi-gente.jpg -------------------------------------------------------------------------------- /src/images/covers/midnight.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/midnight.jpg -------------------------------------------------------------------------------- /src/images/covers/no-vaya-a-ser.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/no-vaya-a-ser.jpg -------------------------------------------------------------------------------- /src/images/covers/one-more-time.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/one-more-time.jpg -------------------------------------------------------------------------------- /src/images/covers/optimizar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/optimizar.jpg -------------------------------------------------------------------------------- /src/images/covers/rehuso.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/rehuso.jpg -------------------------------------------------------------------------------- /src/images/covers/responsive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/responsive.jpg -------------------------------------------------------------------------------- /src/images/covers/social.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/social.jpg -------------------------------------------------------------------------------- /src/images/covers/solar-sailer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/covers/solar-sailer.jpg -------------------------------------------------------------------------------- /src/images/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/loader.gif -------------------------------------------------------------------------------- /src/images/platzi-video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/jquery-to-js-curso/242f999702e5fdc57c99b1230cb32b2449bef9a4/src/images/platzi-video.png -------------------------------------------------------------------------------- /src/js/home.js: -------------------------------------------------------------------------------- 1 | console.log('hola mundo!'); 2 | const noCambia = "Leonidas"; 3 | 4 | let cambia = "@LeonidasEsteban" 5 | 6 | function cambiarNombre(nuevoNombre) { 7 | cambia = nuevoNombre 8 | } 9 | 10 | const getUserAll = new Promise(function(todoBien, todoMal) { 11 | // llamar a un api 12 | setTimeout(function() { 13 | // luego de 3 segundos 14 | todoBien('se acabó el tiempo'); 15 | }, 5000) 16 | }) 17 | 18 | const getUser = new Promise(function(todoBien, todoMal) { 19 | // llamar a un api 20 | setTimeout(function() { 21 | // luego de 3 segundos 22 | todoBien('se acabó el tiempo 3'); 23 | }, 3000) 24 | }) 25 | 26 | // getUser 27 | // .then(function() { 28 | // console.log('todo está bien en la vida') 29 | // }) 30 | // .catch(function(message) { 31 | // console.log(message) 32 | // }) 33 | 34 | Promise.race([ 35 | getUser, 36 | getUserAll, 37 | ]) 38 | .then(function(message) { 39 | console.log(message); 40 | }) 41 | .catch(function(message) { 42 | console.log(message) 43 | }) 44 | 45 | 46 | 47 | $.ajax('https://randomuser.me/api/sdfdsfdsfs', { 48 | method: 'GET', 49 | success: function(data) { 50 | console.log(data) 51 | }, 52 | error: function(error) { 53 | console.log(error) 54 | } 55 | }) 56 | 57 | fetch('https://randomuser.me/api/dsfdsfsd') 58 | .then(function (response) { 59 | // console.log(response) 60 | return response.json() 61 | }) 62 | .then(function (user) { 63 | console.log('user', user.results[0].name.first) 64 | }) 65 | .catch(function() { 66 | console.log('algo falló') 67 | }); 68 | 69 | 70 | (async function load() { 71 | // await 72 | // action 73 | // terror 74 | // animation 75 | async function getData(url) { 76 | const response = await fetch(url); 77 | const data = await response.json(); 78 | if (data.data.movie_count > 0) { 79 | // aquí se acaba 80 | return data; 81 | } 82 | // si no hay pelis aquí continua 83 | throw new Error('No se encontró ningun resultado'); 84 | } 85 | const $form = document.getElementById('form'); 86 | const $home = document.getElementById('home'); 87 | const $featuringContainer = document.getElementById('featuring'); 88 | 89 | 90 | function setAttributes($element, attributes) { 91 | for (const attribute in attributes) { 92 | $element.setAttribute(attribute, attributes[attribute]); 93 | } 94 | } 95 | const BASE_API = 'https://yts.am/api/v2/'; 96 | 97 | function featuringTemplate(peli) { 98 | return ( 99 | ` 100 |
101 |
102 | 103 |
104 |
105 |

Pelicula encontrada

106 |

${peli.title}

107 |
108 |
109 | ` 110 | ) 111 | } 112 | 113 | $form.addEventListener('submit', async (event) => { 114 | event.preventDefault(); 115 | $home.classList.add('search-active') 116 | const $loader = document.createElement('img'); 117 | setAttributes($loader, { 118 | src: 'src/images/loader.gif', 119 | height: 50, 120 | width: 50, 121 | }) 122 | $featuringContainer.append($loader); 123 | 124 | const data = new FormData($form); 125 | try { 126 | const { 127 | data: { 128 | movies: pelis 129 | } 130 | } = await getData(`${BASE_API}list_movies.json?limit=1&query_term=${data.get('name')}`) 131 | 132 | const HTMLString = featuringTemplate(pelis[0]); 133 | $featuringContainer.innerHTML = HTMLString; 134 | } catch(error) { 135 | alert(error.message); 136 | $loader.remove(); 137 | $home.classList.remove('search-active'); 138 | } 139 | }) 140 | 141 | function videoItemTemplate(movie, category) { 142 | return ( 143 | `
144 |
145 | 146 |
147 |

148 | ${movie.title} 149 |

150 |
` 151 | ) 152 | } 153 | function createTemplate(HTMLString) { 154 | const html = document.implementation.createHTMLDocument(); 155 | html.body.innerHTML = HTMLString; 156 | return html.body.children[0]; 157 | } 158 | function addEventClick($element) { 159 | $element.addEventListener('click', () => { 160 | // alert('click') 161 | showModal($element) 162 | }) 163 | } 164 | function renderMovieList(list, $container, category) { 165 | // actionList.data.movies 166 | $container.children[0].remove(); 167 | list.forEach((movie) => { 168 | const HTMLString = videoItemTemplate(movie, category); 169 | const movieElement = createTemplate(HTMLString); 170 | $container.append(movieElement); 171 | const image = movieElement.querySelector('img'); 172 | image.addEventListener('load', (event) => { 173 | event.srcElement.classList.add('fadeIn'); 174 | }) 175 | addEventClick(movieElement); 176 | }) 177 | } 178 | 179 | async function cacheExist(category) { 180 | const listName = `${category}List`; 181 | const cacheList = window.localStorage.getItem(listName); 182 | 183 | if (cacheList) { 184 | return JSON.parse(cacheList); 185 | } 186 | const { data: { movies: data } } = await getData(`${BASE_API}list_movies.json?genre=${category}`) 187 | window.localStorage.setItem(listName, JSON.stringify(data)) 188 | 189 | return data; 190 | } 191 | 192 | // const { data: { movies: actionList} } = await getData(`${BASE_API}list_movies.json?genre=action`) 193 | const actionList = await cacheExist('action'); 194 | // window.localStorage.setItem('actionList', JSON.stringify(actionList)) 195 | const $actionContainer = document.querySelector('#action'); 196 | renderMovieList(actionList, $actionContainer, 'action'); 197 | 198 | const dramaList = await await cacheExist('drama'); 199 | const $dramaContainer = document.getElementById('drama'); 200 | renderMovieList(dramaList, $dramaContainer, 'drama'); 201 | 202 | const animationList = await await cacheExist('animation'); 203 | const $animationContainer = document.getElementById('animation'); 204 | renderMovieList(animationList, $animationContainer, 'animation'); 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | // const $home = $('.home .list #item'); 214 | const $modal = document.getElementById('modal'); 215 | const $overlay = document.getElementById('overlay'); 216 | const $hideModal = document.getElementById('hide-modal'); 217 | 218 | const $modalTitle = $modal.querySelector('h1'); 219 | const $modalImage = $modal.querySelector('img'); 220 | const $modalDescription = $modal.querySelector('p'); 221 | 222 | function findById(list, id) { 223 | return list.find(movie => movie.id === parseInt(id, 10)) 224 | } 225 | 226 | function findMovie(id, category) { 227 | switch (category) { 228 | case 'action' : { 229 | return findById(actionList, id) 230 | } 231 | case 'drama' : { 232 | return findById(dramaList, id) 233 | } 234 | default: { 235 | return findById(animationList, id) 236 | } 237 | } 238 | } 239 | 240 | function showModal($element) { 241 | $overlay.classList.add('active'); 242 | $modal.style.animation = 'modalIn .8s forwards'; 243 | const id = $element.dataset.id; 244 | const category = $element.dataset.category; 245 | const data = findMovie(id, category); 246 | 247 | $modalTitle.textContent = data.title; 248 | $modalImage.setAttribute('src', data.medium_cover_image); 249 | $modalDescription.textContent = data.description_full 250 | } 251 | 252 | $hideModal.addEventListener('click', hideModal); 253 | function hideModal() { 254 | $overlay.classList.remove('active'); 255 | $modal.style.animation = 'modalOut .8s forwards'; 256 | 257 | } 258 | 259 | 260 | 261 | 262 | })() 263 | --------------------------------------------------------------------------------