[movaicode/4] RON SWANSON LE GOAT

Le rendu sur codepen sinon c'est pas marrant: https://codepen.io/mehdi-dalil/full/PojBPJd

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 &lt;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"
  });
}

CoddityTeam / movaicode

[movaicode/4] RON SWANSON LE GOAT #115