Add header, main, and footer elements to index.html

julianachavespalm · Dec 20, 2023 · 85e5b9f · 85e5b9f
1 parent 7089c0c
commit 85e5b9f
Show file tree

Hide file tree

Showing 6 changed files with 311 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -1,14 +1,34 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./src/styles/reset.css">
-    <link rel="stylesheet" href="./src/styles/main.css">
-    <title>Matching Game</title>
-</head>
-<body>
+  <!DOCTYPE html>
+  <html lang="pt-br">
+  <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="stylesheet" href="./src/styles/reset.css">
+      <link rel="stylesheet" href="./src/styles/main.css">
+      <title>Matching Game</title>
+  </head>
+  <body>
+
+    <header class="banner">
+        <h1 class="banner__logo">Matching Game</h1>
+    </header>
 
+    <main class="board">
+        <div class="board__game"></div>
+        <button class="board__reset" onclick="restartGame()">RESTART</button>
+    </main>
+
+    <footer class="social-media">
+        <p>© 2023 Juliana Chaves Palm</p>
+        <ul class="social-media__links" >
+        <li class="social-media__item">
+            <a href="https://www.linkedin.com/in/julianachavespalm" class="social-media__link"><i class="fa-brands fa-linkedin" title="Linkedin" aria-label="Linkedin"></i></a>
+        </li>
+        <li class="social-media__item"><a href="https://www.github.com/julianachavespalm" class="social-media__link">
+            <i class="fa-brands fa-github-alt" title="Github" aria-label="Github"></i></a></li>
+        </ul>
+    </p>
     <script src="./src/scripts/engine.js" defer></script>
-</body>
-</html>
+    <script src="https://kit.fontawesome.com/e0954b0c75.js" crossorigin="anonymous"></script>
+  </body>
+  </html>
diff --git a/src/audios/correct.m4a b/src/audios/correct.m4a
diff --git a/src/audios/incorrect.m4a b/src/audios/incorrect.m4a
diff --git a/src/scripts/engine.js b/src/scripts/engine.js
@@ -0,0 +1,81 @@
+const emojis = [
+    "🐷",
+    "🐷",
+    "🐸",
+    "🐸",
+    "🦐",
+    "🦐",
+    "🐵",
+    "🐵",
+    "🐭",
+    "🐭",
+    "🐞",
+    "🐞",
+    "🐙",
+    "🐙",
+    "🐢",
+    "🐢",
+];
+
+function playSound(nameAudio) {
+    let audio = new Audio(`./src/audios/${nameAudio}.m4a`);
+    audio.volume = 0.2;
+    audio.play();
+}
+
+const restartButton = document.querySelector('.board__reset');
+
+function restartGame() {
+    localStorage.clear();
+    window.location.reload();
+}
+
+
+let openCards = [];
+
+let shuffleEmojis = emojis.sort(() => Math.random() - 0.5);
+
+function handleClick() {
+    if (openCards.length < 2) {
+        this.classList.add("boxOpen");
+        openCards.push(this);
+    }
+
+    if (openCards.length === 2) {
+        setTimeout(checkMatch, 500);
+    }
+}
+
+function checkMatch() {
+    if (openCards.length === 2) {
+        if (openCards[0].innerHTML === openCards[1].innerHTML) {
+            openCards[0].classList.add("boxMatch");
+            openCards[1].classList.add("boxMatch");
+            playSound('correct');
+        } else {
+            openCards[0].classList.remove("boxOpen");
+            openCards[1].classList.remove("boxOpen");
+            playSound('incorrect');
+        }
+        openCards = [];
+
+        const matchedBoxes = document.querySelectorAll(".boxMatch").length;
+        const totalBoxes = emojis.length;
+
+        if (matchedBoxes === totalBoxes) {
+            const victoryMessage = document.createElement("div");
+            victoryMessage.textContent = "Parabéns!🏆 Você venceu!🥳";
+            victoryMessage.classList.add("board__victory-message");
+            document.body.appendChild(victoryMessage);
+        }
+    }
+}
+
+
+for (let i = 0; i < emojis.length; i++) {
+    let box = document.createElement("div");
+    box.className = "board__item";
+    box.onclick = handleClick;
+    box.innerHTML = shuffleEmojis[i];
+    document.querySelector(".board__game").appendChild(box);
+}
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -0,0 +1,187 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    min-height: 100vh;
+
+    background: rgb(217,137,189);
+    background: -moz-linear-gradient(148deg, rgba(217,137,189,1) 25%, rgba(166,83,152,1) 51%, rgba(166,83,152,1) 72%, rgba(81,53,140,1) 100%);
+    background: -webkit-linear-gradient(148deg, rgba(217,137,189,1) 25%, rgba(166,83,152,1) 51%, rgba(166,83,152,1) 72%, rgba(81,53,140,1) 100%);
+
+    user-select: none;
+}
+
+.banner__logo { 
+    font-size: 3em;
+    font-weight: 700;
+    color: #000000;
+    text-align: center;
+    text-transform: uppercase;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    letter-spacing: 0.1em;
+}
+
+.board {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 30px 60px;
+    gap: 2rem;
+
+
+}
+
+
+
+    .board__reset {
+        padding: 1rem 2rem;
+
+        border-radius: 1rem;
+        border: none;
+
+
+        background: rgb(56,55,55);
+        background: -moz-radial-gradient(circle, rgba(56,55,55,1) 36%, rgba(57,57,57,1) 40%, rgba(57,54,54,1) 47%, rgba(20,20,20,1) 87%);
+        background: -webkit-radial-gradient(circle, rgba(56,55,55,1) 36%, rgba(57,57,57,1) 40%, rgba(57,54,54,1) 47%, rgba(20,20,20,1) 87%);
+        background: radial-gradient(circle, rgba(56,55,55,1) 36%, rgba(57,57,57,1) 40%, rgba(57,54,54,1) 47%, rgba(20,20,20,1) 87%);
+
+        color: #f0f8ff;
+        font-size: 1rem;
+        font-weight: 500;
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+
+
+        cursor: pointer;
+    }
+
+        .board__reset:hover,
+        .board__reset:focus {
+            filter: invert(1);
+
+            transform: scale(1.1);
+        }
+
+
+
+.board__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: auto;
+
+    background-color: #ffffff;
+
+    transform: rotateY(180deg);
+    transition: 0.25s;
+}
+
+.board__item::after {
+    content: ""; /* Adicionando conteúdo aqui */
+    position: absolute;
+    inset: 0;
+
+    background: #141414;
+
+    transition: 0.25s;
+    transform: rotateY(0deg);
+    backface-visibility: hidden;
+}
+
+.board__item.boxOpen {
+    transform: rotateY(0deg);
+}
+
+.board__item.boxOpen::after,
+.board__item.boxMatch::after {
+    transform: rotateY(180deg)
+}
+
+.board__item.boxMatch {
+    filter: grayscale(100%)
+}
+
+.board__victory-message {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.social-media {
+    width: 100%;
+    padding: 1rem;
+    margin-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background-color: #000000;
+    color: #ffffff;
+}
+
+.social-media__links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+
+
+    list-style: none;
+}
+
+.social-media__link {
+    margin: 1rem 0;
+    text-decoration: none;
+    color: #ffffff;
+}
+
+
+@media (max-width: 767px) {
+    /* Adicione estilos específicos para desktop aqui */
+    .board__game {
+        display: flex;
+        flex-wrap: wrap;
+        width: 250px;
+        height: 250px;
+
+        transform-style: preserve-3d;
+        perspective: 300px;
+    }
+
+    .board__item {
+        width: 60px;
+        height: 60px;
+        font-size: 1rem;
+    }
+}
+
+/* Estilos para dispositivos móveis */
+@media (min-width: 767px) {
+    .board__game {
+        display: flex;
+        flex-wrap: wrap;
+        width: 430px;
+        height: 430px;
+
+        transform-style: preserve-3d;
+        perspective: 500px;
+    }
+
+    .board__item {
+        width: 90px;
+        height: 90px;
+        font-size: 3.4rem;
+    }
+}
diff --git a/src/styles/reset.css b/src/styles/reset.css
@@ -0,0 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;500;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    outline: none;
+    box-sizing: border-box;
+
+    font-family: 'IBM Plex Mono', monospace;
+}
+