Skip to content

Commit

Permalink
Add header, main, and footer elements to index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
julianachavespalm committed Dec 20, 2023
1 parent 7089c0c commit 85e5b9f
Show file tree
Hide file tree
Showing 6 changed files with 311 additions and 12 deletions.
44 changes: 32 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
Binary file added src/audios/correct.m4a
Binary file not shown.
Binary file added src/audios/incorrect.m4a
Binary file not shown.
81 changes: 81 additions & 0 deletions src/scripts/engine.js
Original file line number Diff line number Diff line change
@@ -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);
}
187 changes: 187 additions & 0 deletions src/styles/main.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
11 changes: 11 additions & 0 deletions src/styles/reset.css
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 85e5b9f

Please sign in to comment.