├── 1_cours_DOM ├── bg.jpg ├── index.html ├── index.js └── style.css ├── 2_cours_DATA ├── index.html ├── index.js └── style.css ├── 3_cours_API ├── index.html ├── index.js └── style.css ├── base.js └── exercices ├── 10_movie_app2.0 ├── img │ └── poster.jpg ├── index.html ├── index.js └── style.css ├── 1_mouse_move ├── index.html ├── index.js └── style.css ├── 2_mouse_helium ├── font │ └── Inter-VariableFont_slnt,wght.ttf ├── img │ ├── investlogo2blue.png │ ├── investlogo3blue.png │ ├── investlogo4blue.png │ ├── main.png │ ├── maquette_helium.png │ └── marker1.svg ├── index.html ├── index.js └── style.css ├── 3_scroll_navbar ├── bg.jpg ├── index.html ├── index.js └── style.css ├── 4_click_sidebar ├── index.html ├── index.js └── style.css ├── 5_form ├── index.html ├── index.js └── style.css ├── 6_bubble ├── index.html ├── index.js └── style.css ├── 7_color_generator ├── index.html ├── index.js └── style.css ├── 8_joke_app ├── index.html └── index.js └── 9_movie_app ├── index.html ├── index.js ├── poster.jpg └── style.css /1_cours_DOM/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/1_cours_DOM/bg.jpg -------------------------------------------------------------------------------- /1_cours_DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Abonnez vous à la Newsletter

16 | 17 |
18 | 19 |

Cours Javascript

20 | 21 | 22 | 23 | 24 | 25 |

26 | 27 | 28 |


29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 | 40 | 41 |
42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /1_cours_DOM/index.js: -------------------------------------------------------------------------------- 1 | const title = document.querySelector("h1"); 2 | const btn1 = document.getElementById("btn1"); 3 | const btn2 = document.querySelector(".btn2"); 4 | const btn3 = document.querySelector(".btn3"); 5 | const popup = document.querySelector(".popup"); 6 | 7 | title.addEventListener("click", () => { 8 | title.style.fontFamily = "Verdana"; 9 | title.textContent = "Super cours JS"; 10 | }); 11 | 12 | // Ajout classe 13 | btn1.addEventListener("click", () => { 14 | // Ajouter classe 15 | // mainImg.classList.add("active"); 16 | 17 | // Supprimer classe 18 | // mainImg.classList.remove("active"); 19 | 20 | // Le toggle teste si la classe est présente dans la balise, si elle y est on la supprime et inversement. 21 | mainImg.classList.toggle("active"); 22 | }); 23 | 24 | btn2.addEventListener("click", () => { 25 | document.body.style.animation = "animBody 1s"; 26 | }); 27 | 28 | btn3.addEventListener("click", () => { 29 | popup.style.right = "10px"; 30 | }); 31 | 32 | popupBtn.addEventListener("click", () => { 33 | popup.style.right = "-450px"; 34 | }); 35 | 36 | //----------------------------------------------------- 37 | // MOUSEMOVE 38 | 39 | // "e" représente toutes les données ratachées à l'Event 40 | title.addEventListener("mousemove", (e) => { 41 | title.style.left = e.x + "px"; 42 | title.style.top = e.y + "px"; 43 | }); 44 | 45 | //------------------------------------------------------ 46 | // SCROLL 47 | 48 | window.addEventListener("scroll", (e) => { 49 | // console.log(window.innerWidth); 50 | // console.log(window.innerHeight); 51 | console.log(window.scrollY); 52 | }); 53 | 54 | //------------------------------------------------------- 55 | // INPUT 56 | 57 | // Obtenir ce qui est tapé dans un input 58 | nom.value; // Ne pas utiliser textContent 59 | 60 | const error = document.querySelector(".error"); 61 | 62 | nom.addEventListener("input", () => { 63 | if (nom.value.length < 3) { 64 | error.textContent = "Pseudo trop court !!!!"; 65 | error.style.color = "red"; 66 | } else { 67 | error.textContent = ""; 68 | } 69 | }); 70 | 71 | //----------------------------------------------------- 72 | // SUBMIT 73 | 74 | const form = document.querySelector("form"); 75 | 76 | form.addEventListener("submit", (e) => { 77 | // preventDefault empeche le rechargement de la page 78 | e.preventDefault(); 79 | 80 | if (cgv.checked && nom.value.length >= 3) { 81 | alert("Bingo !"); 82 | nom.value = ""; 83 | cgv.checked = false; 84 | } else { 85 | alert("Veuillez remplir correctement !"); 86 | } 87 | }); 88 | 89 | //-------------------------------------------------- 90 | // LOAD 91 | // Lancer une fonction au chargement de la page 92 | window.addEventListener("load", maFonction); 93 | -------------------------------------------------------------------------------- /1_cours_DOM/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; 4 | min-height: 300vh; 5 | } 6 | h1 { 7 | position: absolute; 8 | transform: translate(-50%, -50%); 9 | margin: 0; 10 | transition: 2s; 11 | } 12 | .popup { 13 | background: salmon; 14 | width: 300px; 15 | padding: 5px; 16 | border-radius: 10px; 17 | position: fixed; 18 | right: -330px; 19 | transition: 0.4s ease; 20 | } 21 | .active { 22 | filter: blur(4px); 23 | height: 150px; 24 | border-radius: 30px; 25 | border: 3px solid pink; 26 | } 27 | @keyframes animBody { 28 | 50% { 29 | transform: translateX(20px); 30 | } 31 | 100% { 32 | transform: translate(0); 33 | } 34 | } 35 | label { 36 | user-select: none; 37 | } 38 | -------------------------------------------------------------------------------- /2_cours_DATA/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /2_cours_DATA/index.js: -------------------------------------------------------------------------------- 1 | // Types de données en JS 2 | let chaine = "Je suis une chaine de caratère"; 3 | let bouleen = true; 4 | let nombre = 45; 5 | 6 | // Connaitre le type d'une variable 7 | // console.log(typeof nombre); 8 | 9 | let tableau = ["Je", "suis", "un", "tableau"]; 10 | // console.log(tableau[1][0]); 11 | let complexArray = ["Bordeaux", 23, true, [42, true, "Paris"]]; 12 | // console.log(complexArray[3][2][4]); 13 | 14 | let objet = { 15 | nom: "Denis", 16 | age: 32, 17 | admin: false, 18 | technos: ["React", "Nodejs"], 19 | }; 20 | 21 | let autreVar = undefined; 22 | let maVariable = null; 23 | 24 | let arrayOfObjects = [ 25 | { 26 | nom: "Denis", 27 | age: 32, 28 | admin: false, 29 | }, 30 | { 31 | nom: "Julien", 32 | age: 42, 33 | admin: true, 34 | }, 35 | { 36 | nom: "Samia", 37 | age: 21, 38 | admin: false, 39 | }, 40 | ]; 41 | 42 | for (let i = 0; i < arrayOfObjects.length; i++) { 43 | document.body.innerHTML += `
  • ${arrayOfObjects[i].nom}
    • `; 44 | } 45 | 46 | //---- 47 | // MAP 48 | //---- 49 | 50 | document.body.innerHTML = arrayOfObjects 51 | .map( 52 | (user) => ` 53 |
    54 |

    ${user.nom}

    55 |

    Age : ${user.age}

    56 |

    ${user.admin ? "Administrateur" : "Membre"}

    57 |
    58 | ` 59 | ) 60 | .join(""); 61 | 62 | //------------------ 63 | // Fonction ternaire 64 | //------------------ 65 | 66 | nombre > 340 ? console.log("yes") : console.log("no"); 67 | -------------------------------------------------------------------------------- /2_cours_DATA/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: space-around; 4 | text-align: center; 5 | } 6 | .user-card { 7 | border: 3px solid salmon; 8 | padding: 20px; 9 | width: 150px; 10 | } 11 | -------------------------------------------------------------------------------- /3_cours_API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /3_cours_API/index.js: -------------------------------------------------------------------------------- 1 | // Structure d'un appel à l'API (fetch) 2 | // fetch("mon-lien-api.com") 3 | // .then((res) => res.json()) 4 | // .then((data) => console.log(data)); 5 | 6 | const app = document.querySelector(".app"); 7 | 8 | function generateQuote() { 9 | fetch("https://api.quotable.io/random") 10 | .then((res) => res.json()) 11 | .then((data) => { 12 | console.log(data); 13 | 14 | app.innerHTML = ` 15 |

    ${data.content}

    16 | ${data.author} 17 | `; 18 | }); 19 | } 20 | 21 | generateQuote(); 22 | app.addEventListener("click", generateQuote); 23 | -------------------------------------------------------------------------------- /3_cours_API/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | body { 5 | height: 100vh; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | margin: 0; 10 | font-family: "Times New Roman", Times, serif; 11 | color: white; 12 | background: url(https://picsum.photos/1400/1000) center/cover; 13 | } 14 | .app { 15 | background: rgba(0, 0, 0, 0.746); 16 | width: 400px; 17 | padding: 20px; 18 | border-radius: 10px; 19 | backdrop-filter: blur(3px); 20 | user-select: none; 21 | line-height: 25px; 22 | } 23 | em { 24 | display: block; 25 | text-align: right; 26 | margin-top: 20px; 27 | } 28 | -------------------------------------------------------------------------------- /base.js: -------------------------------------------------------------------------------- 1 | // Afficher les données 2 | alert("Yo !"); 3 | console.log(document.body); 4 | document.body.textContent = "Cours Javascript"; 5 | document.body.innerHTML += "

    Cours Javascript

    "; 6 | 7 | //-------------------------------------- 8 | // Variables 9 | var maVieilleVariable = "Coucou je suis un vielle variable"; 10 | 11 | // Const = valeur immuable 12 | const prenom = "julien"; 13 | 14 | // Let = peut évoluer au fil du code 15 | let cours = "Ceci est un cours blbalblabalbalabalbal"; 16 | cours = "test"; 17 | 18 | //------------------------------------ 19 | // Fonction classique 20 | function faireQuelqueChose() { 21 | console.log("Je fais un quelque chose"); 22 | } 23 | 24 | faireQuelqueChose(); 25 | 26 | function addition(a, b) { 27 | console.log(a + b); 28 | } 29 | addition(21, 484885); 30 | 31 | // Struture des fonctions de base 32 | function nomFonction() { 33 | // Algo des choses à faire 34 | } 35 | 36 | const nomDeLaFonction = () => { 37 | // Algo des choses à faire 38 | }; 39 | 40 | //-------------------------------------- 41 | // Les événements 42 | 43 | const maBalise = document.querySelector(".maBalise"); 44 | 45 | maBalise.addEventListener("type d'événement", fonction); 46 | 47 | maBalise.addEventListener("click", () => { 48 | // La fonction s'éxecute au click sur la balise 49 | }); 50 | 51 | //-------------------------------------- 52 | // Les structures contrôles 53 | 54 | if (maVariable > 200) { 55 | // Valeur si vrai 56 | } else { 57 | // Valeur si faux 58 | } 59 | 60 | for (let i = 0; i < tableau.length; i++) { 61 | // Algo des choses à effectuer à chaque tour de boucle 62 | } 63 | -------------------------------------------------------------------------------- /exercices/10_movie_app2.0/img/poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/exercices/10_movie_app2.0/img/poster.jpg -------------------------------------------------------------------------------- /exercices/10_movie_app2.0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | What Watch - Movie app 9 | 10 | 11 | 12 | 13 | 14 | 15 |

    What watch

    16 | 17 |
    18 |
    19 | 20 | 21 | 22 |
    23 | 24 |
    25 |
    Note ➜
    26 |
    Note ➜
    27 |
    28 |
    29 | 30 |
    31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /exercices/10_movie_app2.0/index.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector("form"); 2 | const searchInput = document.getElementById("search-input"); 3 | const btnFilter = document.querySelectorAll(".btn-sort"); 4 | let movies = []; 5 | let list = []; 6 | let search = ""; 7 | let sortGoodBad; 8 | let currentData; 9 | 10 | const fetchMovies = async () => { 11 | await fetch( 12 | `https://api.themoviedb.org/3/search/movie?api_key=ed82f4c18f2964e75117c2dc65e2161d&query=maison&language=fr-FR` 13 | ) 14 | .then((res) => res.json()) 15 | .then((data) => (movies = data.results)); 16 | console.log(movies); 17 | }; 18 | 19 | const fetchList = async () => { 20 | await fetch( 21 | "https://api.themoviedb.org/3/list/7094088?api_key=ed82f4c18f2964e75117c2dc65e2161d&language=fr-FR" 22 | ) 23 | .then((res) => res.json()) 24 | .then((data) => (list = data.items)); 25 | }; 26 | 27 | const moviesDisplay = async (array) => { 28 | const dateFormater = (date) => { 29 | [yy, mm, dd] = date.split("-"); 30 | return [dd, mm, yy].join("/"); 31 | }; 32 | 33 | result.innerHTML = array 34 | .slice(0, 12) 35 | .sort((a, b) => { 36 | if (sortGoodBad === "goodToBad") { 37 | return b.vote_average - a.vote_average; 38 | } else if (sortGoodBad === "badToGood") { 39 | return a.vote_average - b.vote_average; 40 | } 41 | }) 42 | .map((movie) => { 43 | function genreFinder() { 44 | let genreArray = []; 45 | for (i = 0; i < movie.genre_ids.length; i++) { 46 | switch (movie.genre_ids[i]) { 47 | case 28: 48 | genreArray.push(`
  • Action
    • `); 49 | break; 50 | case 12: 51 | genreArray.push(`
  • Aventure
    • `); 52 | break; 53 | case 16: 54 | genreArray.push(`
  • Animation
    • `); 55 | break; 56 | case 35: 57 | genreArray.push(`
  • Comédie
    • `); 58 | break; 59 | case 80: 60 | genreArray.push(`
  • Policier
    • `); 61 | break; 62 | case 99: 63 | genreArray.push(`
  • Documentaire
    • `); 64 | break; 65 | case 18: 66 | genreArray.push(`
  • Drama
    • `); 67 | break; 68 | case 10751: 69 | genreArray.push(`
  • Famille
    • `); 70 | break; 71 | case 14: 72 | genreArray.push(`
  • Fantasy
    • `); 73 | break; 74 | case 36: 75 | genreArray.push(`
  • Histoire
    • `); 76 | break; 77 | case 27: 78 | genreArray.push(`
  • Horreur
    • `); 79 | break; 80 | case 10402: 81 | genreArray.push(`
  • Musique
    • `); 82 | break; 83 | case 9648: 84 | genreArray.push(`
  • Mystère
    • `); 85 | break; 86 | case 10749: 87 | genreArray.push(`
  • Romance
    • `); 88 | break; 89 | case 878: 90 | genreArray.push(`
  • Science-fiction
    • `); 91 | break; 92 | case 10770: 93 | genreArray.push(`
  • Téléfilm
    • `); 94 | break; 95 | case 53: 96 | genreArray.push(`
  • Thriller
    • `); 97 | break; 98 | case 10752: 99 | genreArray.push(`
  • Guerre
    • `); 100 | break; 101 | case 37: 102 | genreArray.push(`
  • Western
    • `); 103 | break; 104 | default: 105 | break; 106 | } 107 | } 108 | 109 | return genreArray.join(""); 110 | } 111 | 112 | return ` 113 |
    114 | 119 |

    ${movie.title}

    120 | ${ 121 | movie.release_date 122 | ? "

    Sorti le : " + dateFormater(movie.release_date) + "

    " 123 | : "" 124 | } 125 |

    ${movie.vote_average}/10 ⭐

    126 | 127 | 128 | 129 | ${movie.overview ? "

    Synopsis

    " : ""} 130 |

    ${movie.overview}

    131 | 132 |
    Acheter des places
    133 |
    134 | `; 135 | }) 136 | .join(""); 137 | }; 138 | 139 | searchInput.addEventListener("input", (e) => { 140 | search = e.target.value; 141 | fetchMovies(); 142 | }); 143 | 144 | form.addEventListener("submit", (e) => { 145 | e.preventDefault(); 146 | currentData = movies; 147 | moviesDisplay(currentData); 148 | }); 149 | 150 | buttonList.addEventListener("click", async () => { 151 | await fetchList(); 152 | currentData = list; 153 | moviesDisplay(currentData); 154 | }); 155 | 156 | btnFilter.forEach((btn) => { 157 | btn.addEventListener("click", (e) => { 158 | sortGoodBad = e.target.id; 159 | moviesDisplay(currentData); 160 | }); 161 | }); 162 | 163 | // https://api.themoviedb.org/3/list/7094088?api_key=ed82f4c18f2964e75117c2dc65e2161d&language=fr-FR 164 | 165 | // https://api.themoviedb.org/3/search/movie?api_key=ed82f4c18f2964e75117c2dc65e2161d&query=land&language=fr-FR 166 | 167 | // https://api.themoviedb.org/3/genre/movie/list?api_key=ed82f4c18f2964e75117c2dc65e2161d&language=en-US 168 | -------------------------------------------------------------------------------- /exercices/10_movie_app2.0/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | list-style-type: none; 3 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 4 | } 5 | body { 6 | background: #212040; 7 | color: white; 8 | } 9 | h1 { 10 | font-size: 2.8rem; 11 | text-shadow: 2px 3px 0px #546fe4; 12 | text-align: center; 13 | } 14 | .form-container { 15 | text-align: center; 16 | } 17 | form { 18 | width: 300px; 19 | margin: 0 auto; 20 | } 21 | input[type="text"] { 22 | padding: 10px; 23 | border-radius: 20px 20px 0 0; 24 | border: none; 25 | font-size: 1.2rem; 26 | display: block; 27 | margin: 0 auto; 28 | width: 220px; 29 | outline: none; 30 | text-align: center; 31 | } 32 | input[type="submit"] { 33 | padding: 10px; 34 | width: 240px; 35 | border-radius: 0 0 20px 20px; 36 | border: none; 37 | background: rgb(100, 100, 100); 38 | color: white; 39 | font-size: 1.1rem; 40 | cursor: pointer; 41 | z-index: 10; 42 | position: relative; 43 | } 44 | button { 45 | padding: 10px; 46 | font-size: 1.05rem; 47 | background: #546fe4; 48 | border: none; 49 | border-radius: 0 0 20px 20px; 50 | cursor: pointer; 51 | transform: translateY(-30px); 52 | transition: 0.25s ease-out; 53 | } 54 | button:hover, 55 | input[type="submit"]:hover + button { 56 | transform: translateY(-6px); 57 | background: white; 58 | color: #060d2c; 59 | } 60 | .btn-sort-container { 61 | margin: 8px auto; 62 | width: 200px; 63 | display: flex; 64 | justify-content: space-around; 65 | cursor: pointer; 66 | } 67 | #goodToBad { 68 | border-radius: 10px 0 0 10px; 69 | } 70 | #badToGood { 71 | border-radius: 0 10px 10px 0; 72 | } 73 | #goodToBad, 74 | #badToGood { 75 | background: #546fe4; 76 | width: 100px; 77 | transition: 0.3s; 78 | position: relative; 79 | } 80 | #goodToBad span { 81 | transform: translateY(-50%) rotate(-90deg); 82 | right: 18px; 83 | } 84 | #badToGood span { 85 | transform: translateY(-50%) rotate(90deg); 86 | left: 16px; 87 | } 88 | #goodToBad span, 89 | #badToGood span { 90 | position: absolute; 91 | top: 50%; 92 | } 93 | #goodToBad:hover, 94 | #badToGood:hover { 95 | background: #060d2c; 96 | } 97 | #result { 98 | padding: 0; 99 | display: flex; 100 | flex-wrap: wrap; 101 | justify-content: center; 102 | } 103 | .movie-card { 104 | flex: 1 0 25%; 105 | min-width: 240px; 106 | max-width: 300px; 107 | background: #060d2c; 108 | border-radius: 35px; 109 | margin: 5px; 110 | padding: 32px 15px 70px; 111 | position: relative; 112 | } 113 | .movie-card img { 114 | width: 80%; 115 | height: 330px; 116 | object-fit: cover; 117 | display: block; 118 | margin: 0 auto; 119 | border-radius: 50px; 120 | box-shadow: 0 8px 1px rgba(255, 255, 255, 0.1), 121 | 0 16px 1px rgba(255, 255, 255, 0.05); 122 | } 123 | .movie-card h2 { 124 | margin: 34px 0 5px; 125 | } 126 | .movie-card h4 { 127 | margin-top: 0; 128 | } 129 | .movie-card p { 130 | display: -webkit-box; 131 | -webkit-box-orient: vertical; 132 | /* set here max line number you need */ 133 | -webkit-line-clamp: 6; 134 | overflow: hidden; 135 | color: rgb(167, 166, 166); 136 | margin: 8px 0 8px; 137 | } 138 | .movie-card ul { 139 | margin: 26px 0; 140 | display: flex; 141 | padding: 0; 142 | } 143 | .movie-card li { 144 | background: #212040; 145 | border-radius: 18px; 146 | padding: 5px 10px; 147 | margin-right: 4px; 148 | font-size: 0.8rem; 149 | } 150 | .movie-card h3 { 151 | margin-bottom: 4px; 152 | } 153 | .movie-card .btn { 154 | background: #546fe4; 155 | position: absolute; 156 | bottom: 16px; 157 | left: 50%; 158 | transform: translateX(-50%); 159 | padding: 14px 20px; 160 | width: 150px; 161 | text-align: center; 162 | border-radius: 15px; 163 | cursor: pointer; 164 | transition: 0.2s; 165 | } 166 | .movie-card .btn:hover { 167 | background: #212040; 168 | box-shadow: 0 0 10px #546ee4d2; 169 | font-size: 1.025rem; 170 | } 171 | -------------------------------------------------------------------------------- /exercices/1_mouse_move/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 |
    17 |
    18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /exercices/1_mouse_move/index.js: -------------------------------------------------------------------------------- 1 | const circles = document.querySelectorAll(".circles"); 2 | 3 | window.addEventListener("mousemove", (e) => { 4 | circles.forEach((circle) => { 5 | circle.style.left = e.x + "px"; 6 | circle.style.top = e.y + "px"; 7 | }); 8 | }); 9 | 10 | // window.addEventListener("mousemove", (e) => { 11 | // circle1.style.left = e.x + "px"; 12 | // circle1.style.top = e.y + "px"; 13 | 14 | // circle2.style.left = e.x + "px"; 15 | // circle2.style.top = e.y + "px"; 16 | 17 | // circle3.style.left = e.x + "px"; 18 | // circle3.style.top = e.y + "px"; 19 | // }); 20 | -------------------------------------------------------------------------------- /exercices/1_mouse_move/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 100vh; 3 | overflow: hidden; 4 | } 5 | body > div { 6 | border-radius: 150px; 7 | position: absolute; 8 | transform: translate(-50%, -50%); 9 | border: 3px solid salmon; 10 | } 11 | #circle1 { 12 | height: 20px; 13 | width: 20px; 14 | } 15 | #circle2 { 16 | height: 40px; 17 | width: 40px; 18 | transition: 240ms; 19 | } 20 | #circle3 { 21 | height: 60px; 22 | width: 60px; 23 | transition: 360ms; 24 | } 25 | -------------------------------------------------------------------------------- /exercices/2_mouse_helium/font/Inter-VariableFont_slnt,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/exercices/2_mouse_helium/font/Inter-VariableFont_slnt,wght.ttf -------------------------------------------------------------------------------- /exercices/2_mouse_helium/img/investlogo2blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/exercices/2_mouse_helium/img/investlogo2blue.png -------------------------------------------------------------------------------- /exercices/2_mouse_helium/img/investlogo3blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/exercices/2_mouse_helium/img/investlogo3blue.png -------------------------------------------------------------------------------- /exercices/2_mouse_helium/img/investlogo4blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/exercices/2_mouse_helium/img/investlogo4blue.png -------------------------------------------------------------------------------- /exercices/2_mouse_helium/img/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/exercices/2_mouse_helium/img/main.png -------------------------------------------------------------------------------- /exercices/2_mouse_helium/img/maquette_helium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/exercices/2_mouse_helium/img/maquette_helium.png -------------------------------------------------------------------------------- /exercices/2_mouse_helium/img/marker1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /exercices/2_mouse_helium/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Helium 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 24 | 25 |
    26 |
    27 |

    People-Powered Networks

    28 |

    Start a Wirless Revolution

    29 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae dolore delectus a ipsa deleniti, illum quo 30 | dolorum cupiditate reprehenderit velit.

    31 |
    32 |
    33 | photo modem 34 |
    35 |
    36 | 37 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /exercices/2_mouse_helium/index.js: -------------------------------------------------------------------------------- 1 | const circles = document.querySelectorAll(".circles"); 2 | 3 | window.addEventListener("mousemove", (e) => { 4 | circles.forEach((circle) => { 5 | circle.style.left = e.x + "px"; 6 | circle.style.top = e.y + "px"; 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /exercices/2_mouse_helium/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "font-1"; 3 | src: url(./font/Inter-VariableFont_slnt\wght.ttf); 4 | } 5 | * { 6 | margin: 0; 7 | padding: 5px; 8 | font-family: "font-1", Arial; 9 | box-sizing: border-box; 10 | } 11 | li { 12 | list-style: none; 13 | } 14 | a, 15 | a:visited { 16 | color: white; 17 | text-decoration: none; 18 | transition: 0.3s; 19 | z-index: 1000000000000000; 20 | position: relative; 21 | } 22 | a:hover { 23 | font-size: 1.3rem; 24 | color: #2128bd; 25 | } 26 | body { 27 | background: rgb(27, 27, 27); 28 | color: rgb(246, 246, 246); 29 | min-height: 100vh; 30 | cursor: none; 31 | } 32 | /* MOUSE */ 33 | .circles { 34 | position: absolute; 35 | transform: translate(-50%, -50%); 36 | border-radius: 1000px; 37 | } 38 | #cursor { 39 | background: #2128bd; 40 | width: 14px; 41 | height: 14px; 42 | z-index: 10; 43 | mix-blend-mode: difference; 44 | } 45 | #mouse1 { 46 | height: 100px; 47 | width: 100px; 48 | mix-blend-mode: difference; 49 | background: rgb(255, 245, 247); 50 | transition: 0.2s ease; 51 | } 52 | #mouse2 { 53 | height: 200px; 54 | width: 200px; 55 | mix-blend-mode: difference; 56 | background: rgb(37, 37, 37); 57 | transition: 0.3s ease; 58 | } 59 | nav { 60 | display: grid; 61 | grid-template-columns: 50% 50%; 62 | margin: 10px 20px; 63 | height: 50px; 64 | } 65 | nav ul { 66 | display: flex; 67 | justify-content: space-between; 68 | } 69 | section { 70 | display: flex; 71 | } 72 | .main-left { 73 | width: 50%; 74 | display: flex; 75 | flex-direction: column; 76 | justify-content: center; 77 | } 78 | h1 { 79 | font-size: 5rem; 80 | } 81 | .main-left h2 { 82 | color: #474dff; 83 | font-size: 1.8rem; 84 | } 85 | .main-left p { 86 | font-size: 0.8rem; 87 | } 88 | .main-right { 89 | width: 50%; 90 | } 91 | .main-right img { 92 | width: 100%; 93 | } 94 | footer { 95 | background: rgb(7, 7, 7); 96 | display: grid; 97 | grid-template-columns: 33% 67%; 98 | border-radius: 10px; 99 | } 100 | .footer-left ul { 101 | display: flex; 102 | flex-direction: column; 103 | justify-content: space-around; 104 | min-height: 160px; 105 | } 106 | .footer-left li { 107 | background: #474dff; 108 | width: 170px; 109 | padding: 10px 0; 110 | text-align: center; 111 | border-radius: 10px; 112 | letter-spacing: 1px; 113 | font-weight: bold; 114 | } 115 | .footer-right ul { 116 | display: flex; 117 | justify-content: space-around; 118 | align-items: center; 119 | min-height: 160px; 120 | } 121 | 122 | footer img { 123 | height: 60px; 124 | } 125 | 126 | /* ************** RESPONSIVE *************** */ 127 | 128 | /* Tablette */ 129 | @media (max-width: 800px) { 130 | h1 { 131 | font-size: 2.5rem; 132 | } 133 | .main-left h2 { 134 | font-size: 1rem; 135 | } 136 | p { 137 | font-size: 0.7rem; 138 | } 139 | footer { 140 | grid-template-columns: 40% 60%; 141 | } 142 | footer img { 143 | height: 35px; 144 | } 145 | } 146 | 147 | /* Mobile */ 148 | @media (max-width: 570px) { 149 | nav { 150 | margin: 10px 5px; 151 | } 152 | nav li { 153 | font-size: 0.7rem; 154 | } 155 | section { 156 | flex-direction: column; 157 | } 158 | .main-left, 159 | .main-right { 160 | width: 100%; 161 | } 162 | .main-right img { 163 | width: 65%; 164 | margin: 0 auto; 165 | display: block; 166 | } 167 | footer { 168 | grid-template-columns: 1fr; 169 | } 170 | .footer-left ul { 171 | align-items: center; 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /exercices/3_scroll_navbar/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/exercices/3_scroll_navbar/bg.jpg -------------------------------------------------------------------------------- /exercices/3_scroll_navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 23 | 24 |
    25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /exercices/3_scroll_navbar/index.js: -------------------------------------------------------------------------------- 1 | const nav = document.querySelector("nav"); 2 | 3 | // window.addEventListener("scroll", () => { 4 | // if (window.scrollY > 250) { 5 | // nav.style.top = 0; 6 | // } else { 7 | // nav.style.top = "-60px"; 8 | // } 9 | // }); 10 | 11 | let lastScroll = 0; 12 | 13 | window.addEventListener("scroll", () => { 14 | if (window.scrollY < lastScroll) { 15 | nav.style.top = 0; 16 | } else { 17 | nav.style.top = "-60px"; 18 | } 19 | lastScroll = window.scrollY; 20 | }); 21 | -------------------------------------------------------------------------------- /exercices/3_scroll_navbar/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 400vh; 3 | margin: 0; 4 | color: gold; 5 | font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 6 | "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 7 | } 8 | li { 9 | list-style: none; 10 | } 11 | nav { 12 | position: fixed; 13 | display: grid; 14 | grid-template-columns: 40% 60%; 15 | width: 100%; 16 | background: rgb(15, 15, 15); 17 | height: 60px; 18 | top: 0; 19 | transition: 0.5s ease; 20 | } 21 | h2, 22 | ul { 23 | margin: 0; 24 | padding: 10px 25px; 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | } 29 | header { 30 | height: 100vh; 31 | background: url(./bg.jpg) center/cover; 32 | } 33 | -------------------------------------------------------------------------------- /exercices/4_click_sidebar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 28 | 29 |
    30 |

    Sidebar is life

    31 |

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae nam quibusdam vel explicabo. Impedit in 32 | exercitationem hic sit, dolor tenetur amet cupiditate error ipsam vitae repellat natus ut fuga possimus cumque 33 | excepturi quae ab nobis. In, facilis sapiente. Perferendis, provident. Similique mollitia impedit corporis natus 34 | hic. Aliquid necessitatibus sed, beatae ex ad quia praesentium facere error provident itaque laudantium, eum animi 35 | assumenda placeat eaque earum sit cumque obcaecati sequi ipsam consectetur! Repellendus, nesciunt! Molestiae 36 | maiores sed laborum voluptatum facilis laboriosam.

    37 |

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae nam quibusdam vel explicabo. Impedit in 38 | exercitationem hic sit, dolor tenetur amet cupiditate error ipsam vitae repellat natus ut fuga possimus cumque 39 | excepturi quae ab nobis. In, facilis sapiente. Perferendis, provident. Similique mollitia impedit corporis natus 40 | hic. Aliquid necessitatibus sed, beatae ex ad quia praesentium facere error provident itaque laudantium, eum animi 41 | assumenda placeat eaque earum sit cumque obcaecati sequi ipsam consectetur! Repellendus, nesciunt! Molestiae 42 | maiores sed laborum voluptatum facilis laboriosam.

    43 |
    44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /exercices/4_click_sidebar/index.js: -------------------------------------------------------------------------------- 1 | const sideBar = document.querySelector("#side-bar"); 2 | const content = document.querySelector(".content"); 3 | 4 | btn.addEventListener("click", () => { 5 | sideBar.classList.toggle("active"); 6 | }); 7 | 8 | content.addEventListener("click", () => { 9 | sideBar.classList.remove("active"); 10 | }); 11 | -------------------------------------------------------------------------------- /exercices/4_click_sidebar/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Poppins"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | font-family: "Poppins", sans-serif; 7 | } 8 | body { 9 | background-color: #383838; 10 | } 11 | .content { 12 | color: #09fbba; 13 | transition: 1s; 14 | min-height: 100vh; 15 | } 16 | h1 { 17 | text-transform: uppercase; 18 | text-align: center; 19 | font-size: 4rem; 20 | margin-top: 20px; 21 | } 22 | p { 23 | padding: 30px 50px; 24 | } 25 | #side-bar { 26 | position: absolute; 27 | width: 230px; 28 | height: 100%; 29 | background: #09fbba; 30 | top: 0; 31 | left: -230px; 32 | transition: 0.5s ease-out; 33 | z-index: 4; 34 | } 35 | .toggle-btn { 36 | position: absolute; 37 | top: 30px; 38 | left: 240px; 39 | cursor: pointer; 40 | height: 50px; 41 | width: 50px; 42 | } 43 | .toggle-btn span { 44 | width: 60px; 45 | height: 10px; 46 | border-radius: 5px; 47 | background: #09fbba; 48 | display: block; 49 | margin-top: 4px; 50 | transition: 0.3s ease; 51 | } 52 | li { 53 | color: #292929; 54 | list-style: none; 55 | font-size: 2.5rem; 56 | cursor: pointer; 57 | padding-left: 5px; 58 | } 59 | li:hover { 60 | background: #292929; 61 | color: #fcfcfb; 62 | } 63 | #side-bar.active { 64 | left: 0; 65 | } 66 | .active ~ .content { 67 | opacity: 0.3; 68 | } 69 | .active span { 70 | position: absolute; 71 | } 72 | .active span:nth-child(1) { 73 | transform: rotate(45deg); 74 | } 75 | .active span:nth-child(2) { 76 | opacity: 0; 77 | } 78 | .active span:nth-child(3) { 79 | transform: rotate(-45deg); 80 | } 81 | -------------------------------------------------------------------------------- /exercices/5_form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 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 |
    34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /exercices/5_form/index.js: -------------------------------------------------------------------------------- 1 | const errorPseudo = document.querySelector(".error-pseudo"); 2 | const errorConfirmPassword = document.querySelector(".error-confirmPassword"); 3 | const form = document.querySelector("form"); 4 | 5 | pseudo.addEventListener("input", () => { 6 | if (pseudo.value !== "") { 7 | if (pseudo.value.length > 2 && pseudo.value.length < 17) { 8 | errorPseudo.textContent = "Pseudo correct"; 9 | errorPseudo.style.color = "green"; 10 | } else { 11 | errorPseudo.textContent = "Le pseudo doit être entre 3 et 16 caractères"; 12 | errorPseudo.style.color = "red"; 13 | } 14 | } else { 15 | errorPseudo.textContent = ""; 16 | } 17 | }); 18 | 19 | password.addEventListener("input", () => { 20 | if ( 21 | password.value.match( 22 | /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,24}$/ 23 | ) 24 | ) { 25 | console.log("True"); 26 | } else { 27 | console.log("False"); 28 | } 29 | }); 30 | 31 | confirmPassword.addEventListener("input", () => { 32 | if (password.value === confirmPassword.value) { 33 | errorConfirmPassword.textContent = "Les mots de passe correspondent"; 34 | errorConfirmPassword.style.color = "green"; 35 | } else { 36 | errorConfirmPassword.textContent = "Les mots de passe ne correspondent pas"; 37 | errorConfirmPassword.style.color = "red"; 38 | } 39 | }); 40 | 41 | form.addEventListener("submit", (e) => { 42 | e.preventDefault(); 43 | 44 | if ( 45 | pseudo.value.length > 2 && 46 | pseudo.value.length < 17 && 47 | password.value === confirmPassword.value && 48 | charte.checked 49 | ) { 50 | alert("Votre formulaire a été soumis"); 51 | clearForm(); 52 | } else { 53 | alert("Veuillez tout remplir svp !"); 54 | } 55 | }); 56 | 57 | function clearForm() { 58 | pseudo.value = ""; 59 | password.value = ""; 60 | confirmPassword.value = ""; 61 | charte.checked = false; 62 | errorConfirmPassword.textContent = ""; 63 | errorPseudo.textContent = ""; 64 | } 65 | -------------------------------------------------------------------------------- /exercices/5_form/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | form { 7 | display: grid; 8 | border: 2px solid grey; 9 | border-radius: 4px; 10 | padding: 20px; 11 | width: 50%; 12 | max-width: 500px; 13 | font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; 14 | } 15 | label { 16 | margin: 15px 0 5px; 17 | } 18 | input[type="submit"] { 19 | margin: 20px auto; 20 | padding: 10px; 21 | width: 200px; 22 | } 23 | -------------------------------------------------------------------------------- /exercices/6_bubble/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    0
    16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /exercices/6_bubble/index.js: -------------------------------------------------------------------------------- 1 | let count = 0; 2 | let totalClick = 0; 3 | 4 | function bubbleMaker() { 5 | const bubble = document.createElement("span"); 6 | document.body.appendChild(bubble); 7 | 8 | const size = Math.floor(Math.random() * 200 + 100) + "px"; 9 | bubble.style.width = size; 10 | bubble.style.height = size; 11 | 12 | bubble.style.left = Math.random() * 100 + "%"; 13 | bubble.style.top = Math.random() * 100 + 50 + "%"; 14 | 15 | // Délenche avec un compte à rebours 16 | setTimeout(() => { 17 | bubble.remove(); 18 | }, 5000); 19 | 20 | bubble.addEventListener("click", () => { 21 | bubble.remove(); 22 | count++; 23 | score.textContent = count; 24 | }); 25 | } 26 | 27 | document.body.addEventListener("click", () => { 28 | totalClick++; 29 | console.log(Math.round((count / totalClick) * 100) + "%"); 30 | }); 31 | 32 | setInterval(bubbleMaker, 400); 33 | -------------------------------------------------------------------------------- /exercices/6_bubble/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 100vh; 3 | overflow: hidden; 4 | cursor: crosshair; 5 | user-select: none; 6 | } 7 | span { 8 | position: absolute; 9 | background: orange; 10 | border-radius: 300px; 11 | animation: animColor 5s forwards linear; 12 | transform: translate(-50%, -50%); 13 | opacity: 0; 14 | } 15 | @keyframes animColor { 16 | 100% { 17 | filter: hue-rotate(720deg); 18 | top: -500px; 19 | opacity: 1; 20 | } 21 | } 22 | #score { 23 | font-size: 6rem; 24 | text-align: center; 25 | color: rgb(168, 168, 168); 26 | } 27 | -------------------------------------------------------------------------------- /exercices/7_color_generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /exercices/7_color_generator/index.js: -------------------------------------------------------------------------------- 1 | function colorGenerator() { 2 | const r = Math.floor(Math.random() * 255); 3 | const g = Math.floor(Math.random() * 255); 4 | const b = Math.floor(Math.random() * 255); 5 | 6 | const color = `rgb(${r},${g},${b})`; 7 | 8 | document.body.style.background = color; 9 | document.body.innerHTML = `

    ${color}

    `; 10 | } 11 | setInterval(colorGenerator, 1000); 12 | 13 | // console.log(Math.floor(3.6)); 14 | // console.log(Math.round(3.4)); 15 | // console.log(Math.ceil(3.2)); 16 | 17 | // background: linear-gradient(90deg, rgb(2,0,3), rgb(0,212,255)) 18 | 19 | // GRADIENT GENERATOR 20 | 21 | // function gradientGenerator() { 22 | // const r = Math.floor(Math.random() * 255); 23 | // const g = Math.floor(Math.random() * 255); 24 | // const b = Math.floor(Math.random() * 255); 25 | 26 | // const rr = Math.floor(Math.random() * 255); 27 | // const gg = Math.floor(Math.random() * 255); 28 | 29 | // const deg = Math.floor(Math.random() * 360); 30 | 31 | // const color = `radial-gradient(rgb(${r},${g},${b}), rgb(${rr},${gg},${b}))`; 32 | 33 | // document.body.style.background = color; 34 | // document.body.innerHTML = `

    ${color}

    `; 35 | // } 36 | // setInterval(gradientGenerator, 1000); 37 | -------------------------------------------------------------------------------- /exercices/7_color_generator/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 100vh; 3 | overflow: hidden; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | transition: 1s linear; 8 | } 9 | h2 { 10 | background: black; 11 | color: white; 12 | padding: 20px; 13 | border-radius: 5px; 14 | box-shadow: 3px 7px 20px #0000004d; 15 | } 16 | -------------------------------------------------------------------------------- /exercices/8_joke_app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /exercices/8_joke_app/index.js: -------------------------------------------------------------------------------- 1 | function getJoke() { 2 | fetch("https://api.blablagues.net/?rub=blagues") 3 | .then((res) => res.json()) 4 | .then((data) => { 5 | console.log(data); 6 | 7 | const { content } = data.data; 8 | 9 | app.innerHTML = ` 10 |

    ${content.text_head}

    11 |

    ${content.text !== "" ? content.text : content.text_hidden}

    12 | `; 13 | }); 14 | } 15 | 16 | getJoke(); 17 | app.addEventListener("click", getJoke); 18 | -------------------------------------------------------------------------------- /exercices/9_movie_app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 12 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /exercices/9_movie_app/index.js: -------------------------------------------------------------------------------- 1 | const movieApp = document.querySelector(".movie-app"); 2 | let sortMovies = false; 3 | 4 | const dateFormater = (date) => { 5 | let [y, m, d] = date.split("-"); 6 | return [d, m, y].join("/"); 7 | }; 8 | 9 | const fetchMovies = () => { 10 | fetch( 11 | `https://api.themoviedb.org/3/search/movie?api_key=ed82f4c18f2964e75117c2dc65e2161d&query=${ 12 | searchInput.value !== "" ? searchInput.value : "code" 13 | }&language=fr-FR` 14 | ) 15 | .then((res) => res.json()) 16 | .then((data) => { 17 | console.log(data.results); 18 | 19 | movieApp.innerHTML = data.results 20 | .slice(0, rangeInput.value) 21 | .sort((a, b) => { 22 | if (sortMovies) { 23 | return b.vote_average - a.vote_average; 24 | } 25 | }) 26 | .map( 27 | (movie) => ` 28 |
    29 | affiche ${movie.title} 34 |

    ${movie.title}

    35 |

    Sorti le : ${dateFormater(movie.release_date)}

    36 |

    ${movie.vote_average} ⭐

    37 |
    Synopsis
    38 |

    ${movie.overview}

    39 |
    40 | ` 41 | ) 42 | .join(""); 43 | }); 44 | }; 45 | 46 | window.addEventListener("load", fetchMovies); 47 | 48 | searchInput.addEventListener("input", fetchMovies); 49 | 50 | rangeInput.addEventListener("input", () => { 51 | fetchMovies(); 52 | rangeInputValue.textContent = rangeInput.value; 53 | }); 54 | 55 | btnSort.addEventListener("click", () => { 56 | sortMovies = true; 57 | console.log(sortMovies); 58 | fetchMovies(); 59 | }); 60 | -------------------------------------------------------------------------------- /exercices/9_movie_app/poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JustFS/cours-js/96613da851dd6d47c7d36ce9c89bd9c6ac8e60ad/exercices/9_movie_app/poster.jpg -------------------------------------------------------------------------------- /exercices/9_movie_app/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 3 | } 4 | body { 5 | background: #212040; 6 | color: rgb(246, 246, 246); 7 | } 8 | .movie-app { 9 | display: flex; 10 | flex-wrap: wrap; 11 | justify-content: center; 12 | } 13 | .movie-card { 14 | flex: 1 0 25%; 15 | min-width: 240px; 16 | max-width: 300px; 17 | border: 2px solid white; 18 | margin: 5px; 19 | padding: 10px; 20 | } 21 | img { 22 | height: 300px; 23 | margin: 0 auto; 24 | display: block; 25 | border-radius: 30px; 26 | box-shadow: 0 8px 1px rgba(255, 255, 255, 0.1), 27 | 0 16px 1px rgba(255, 255, 255, 0.05); 28 | } 29 | p { 30 | display: -webkit-box; 31 | -webkit-box-orient: vertical; 32 | -webkit-line-clamp: 6; 33 | overflow: hidden; 34 | text-align: justify; 35 | } 36 | --------------------------------------------------------------------------------