Open mehdi-dalil opened 2 years ago
Le rendu sur codepen sinon c'est pas marrant: https://codepen.io/mehdi-dalil/full/PojBPJd
HTML (dédicace à mon gars sûr Oli):
<div class="container"> <form id="input" class="input"> <input type="text" name="name" autocomplete="off" class="input__field" id="inputField" placeholder="Enter a name..." /> <button class="input__button" id="randomButton" form="not">Random</button> <button class="input__button" id="searchButton" form="not">Find Jean-BFF <3</button> <button class="input__button" id="resetButton" form="not">Reset</button> </form> <div class="names-list" id="namesList" /> <!-- N'aie pas le seum Oli --> </div> <div class="bubble"> <img src="https://parade.com/wp-content/uploads/2013/10/tv-show-best-boss-ron-swanson.jpg" /> </div> <div class="bubble" data-count="titan"> <img src="https://i.pinimg.com/originals/a6/09/19/a60919b770716417cf413ed0f6c532a6.png" /> </div>
CSS (dédicace à mon gars sûr Jo qui adore le CSS):
html, body { font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 400; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background-color: hsl(0, 0%, 11%); background: linear-gradient( -45deg, hsl(0, 0%, 10%), hsl(0, 0%, 20%), hsl(0, 0%, 8%), hsl(0, 0%, 25%) ); background-size: 400% 400%; animation: fade 40s ease infinite; z-index: 1; } @keyframes fade { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* * For our Duke Silver aka THE G O A T */ .bubble { position: fixed; top: 0; width: 500px; height: 500px; border-radius: 50%; overflow: hidden; animation: bubbles 200s infinite; box-shadow: 0px 0px 10px 15px #f2e1f2; opacity: 0.1; z-index: 10; } .bubble[data-count="titan"] { animation-direction: reverse; } .bubble img { width: 100%; height: 100%; object-fit: cover; } @keyframes bubbles { 0% { transform: translateX(-600px) translateY(-600px) rotate(0deg); } 25% { transform: translateX(1000px) translateY(1500px) rotate(90deg); } 50% { transform: translateY(-500px) translateX(600px) rotate(180deg); } 75% { transform: translateY(1000px) translateX(-200px) rotate(270deg); } 100% { transform: translateY(-600px) translateX(0px); } } /* * Ses un container */ .container { width: 100%; height: 80%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 10rem; overflow: hidden; z-index: 100; } /* * Ca s'appelle input mais en vrai ses un form */ .input { flex: 2; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; } /* * Et la pour désigner l'input j'ai mis field alors que c'est un input. * Quelle plaie de devoir nommer des classes et des variables on en parle jamais de ça */ .input__field { font-family: "Open Sans", sans-serif; font-weight: 400; height: 33px; background-color: transparent; outline: none; box-shadow: none; border: none; border-bottom: 1px solid hsl(0, 0%, 50%); color: hsl(0, 0%, 80%); font-size: 1rem; padding: 0.5rem; z-index: 100; } /* * Non la c'est plutôt clair en vrai */ .input__button { font-family: "Open Sans", sans-serif; font-weight: 400; height: 51px; border-radius: 6px; background-color: transparent; outline: none; box-shadow: none; border: 1px solid hsl(0, 0%, 50%); color: hsl(0, 0%, 80%); font-size: 1rem; padding: 0.5rem; cursor: pointer; transition: background-color 200ms ease-in-out, color 200ms ease-in-out; z-index: 100; } .input__button[disabled] { cursor: not-allowed; color: hsl(0, 0%, 50%); } .input__button:hover:not([disabled]) { background-color: hsla(0, 0%, 50%, 0.25); } ::placeholder { color: hsl(0, 0%, 50%); } /* * J'crois c'est la liste de noms (mais j'suis pas sûr) */ .names-list { flex: 3; width: 50%; max-height: 20rem; padding: 3rem; display: flex; overflow-x: scroll; justify-content: flex-start; gap: 1rem; background: hsla(0, 0%, 40%, 0.1); border-radius: 6px; border: 1px solid hsla(0, 0%, 50%, 0.2); z-index: 100; -ms-overflow-style: none scrollbar-width: none; } .names-list::-webkit-scrollbar { display: none; } .card { width: 10rem; min-width: 10rem; border: 1px solid; border-radius: 6px; padding: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; opacity: 1; cursor: pointer; font-size: 0.9rem; z-index: 100; transition: border-color 100ms ease-in-out, color 100ms ease-in-out, box-shadow 100ms ease-in-out, filter 1s ease-in-out, opacity 1s ease-in-out, transform 1s ease-in-out; } .card.blur { filter: blur(2px); } .card.disappear { opacity: 0; transform: rotate(360deg); } .card:hover { border-color: hsl(0, 0%, 80%) !important; color: hsl(0, 0%, 80%) !important; box-shadow: 3px 3px 3px 3px hsla(0, 0%, 100%, 0.05); } .card__description { flex: 1; font-size: 0.8rem; text-align: center; } /* * La flemme de commenter chaque classe, mais en même temps c'était * soit ça soit les tests end to end, donc bon... */
JS (dédicace à mon gars sûr Matthieu pck il adore le js):
/* * La BDD tant convoitée */ const randomNames = [ { name: "Jean BFF <3", desc: "Le fameux" }, { name: "Ron Swanson", desc: "Duke Silver le goat" }, { name: "Snake", desc: "Tu savais que Snake était inspiré d'un film des années 90 bla bla bla [...]" }, { name: "Eren Jäger", desc: "En Marche!" }, { name: "Abdel essamad ", desc: "Un pote du lycée en terminale grave gentil" }, { name: "Eric Zemmour", desc: "AKA jsuis pas raciste j'suis algérien" }, { name: "Bob Sinclar", desc: "Le DJ qui a volé la vedette à notre MatCod national" }, { name: "Erwin Smith", desc: "Son bras droit c'était Livaï, à défaut d'avoir un bras gauche" }, { name: "Xavier Nil", desc: "Fun fact: Google a renommé null en nil à cause d'un pari raté avec Xavier Niel. Le pari ? 'Wala google+ yaura personne dessus lol'. Visionnaire le Xavier." }, { name: "Benjamin Tranié", desc: "'Comment qu'elles vont mes 2 paupiettes sauce gribiche ??' (faut demander à Chris pour celle là sinon j'vais passer pour un ouf)" }, { name: "JuL", desc: "Fun fact: JuL a étudié à Epitech" } ]; const names = []; let jean = false; // flemme /* * HTML elements */ const searchButton = document.getElementById("searchButton"); const randomButton = document.getElementById("randomButton"); const inputField = document.getElementById("inputField"); const resetButton = document.getElementById("resetButton"); const form = document.getElementById("input"); const namesList = document.getElementById("namesList"); /* * Listeners */ form.addEventListener("submit", onSubmit); searchButton.addEventListener("click", onSearch); randomButton.addEventListener("click", onRandom); resetButton.addEventListener("click", onReset); function onSubmit(event) { event.preventDefault(); const formData = new FormData(form); const name = formData.get("name"); if (name.trim() === "") { return; } addCard(name.trim()); } function onSearch() { const copy = [...names]; copy.forEach((elem, index) => { const { innerText } = elem; const [split] = innerText.split("\n"); if (split === "Jean BFF <3") { scrollIntoCard(elem); copy.splice(index, 1); applyBlur(copy); randomButton.disabled = true; searchButton.disabled = true; inputField.disabled = true; } }); } function onRandom() { const item = randomNames[Math.floor(Math.random() * randomNames.length)]; if (jean && item.name === "Jean BFF <3") { return onRandom(); } if (item.name === "Jean BFF <3") { jean = true; } addCard(item.name, item.desc); } function onReset() { applyDisappear(names, () => { names.splice(0, names.length); namesList.innerHTML = ""; randomButton.disabled = false; searchButton.disabled = false; inputField.disabled = false; jean = false; }); } /* * Helpers */ function applyDisappear(names, callback) { names.forEach((elem) => (elem.classList += " disappear")); setTimeout(() => callback(), 1000); } function applyBlur(names) { names.forEach((elem) => (elem.classList += " blur")); } function addCard(name, desc = "") { const nameElem = document.createElement("div"); const descElem = document.createElement("div"); nameElem.classList += "card"; nameElem.innerText = name; nameElem.style = ` border-color: hsl(${names.length * 30 - 1}, 96%, 78%); color: hsl(${ names.length * 30 - 1 }, 96%, 78%); `; descElem.classList += "card__description"; descElem.innerText = desc; nameElem.appendChild(descElem); nameElem.key = names.length - 1; names.push(nameElem); namesList.appendChild(nameElem); scrollIntoCard(nameElem); nameElem.addEventListener("click", () => scrollIntoCard(nameElem)); form.reset(); } function scrollIntoCard(htmlElement) { htmlElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" }); }
Ça va trop loin.
@louismarslen t'étais au courant pour Jul ?
Non je suis choqué
Mince, à quelques lignes près tu étais sur 1200 lignes de code. Propre @
Le rendu sur codepen sinon c'est pas marrant: https://codepen.io/mehdi-dalil/full/PojBPJd
HTML (dédicace à mon gars sûr Oli):
CSS (dédicace à mon gars sûr Jo qui adore le CSS):
JS (dédicace à mon gars sûr Matthieu pck il adore le js):