38º Desafio: Construindo um HoverBoard - Peso 1

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá, crianças inocentes! Está na hora de aprender a fazer um HoverBoard! Mas o que é isso, me perguntam vocês? É uma box cheia de pequenos quadrados que mudam de cor quando o mouse passa por cima! É um efeito bem legal e que pode deixar o seu site muito mais atrativo para os usuários.

Mas não é só isso, saber aplicar efeitos é essencial para criar uma boa experiência do usuário em desenvolvimento web. Com efeitos bem aplicados, é possível guiar a atenção do usuário para os pontos mais importantes da sua página, destacar elementos e criar uma navegação mais intuitiva.

Mas vamos ao que interessa! Para criar um HoverBoard, você vai precisar de conhecimentos em HTML, CSS e JavaScript. A ideia básica é criar uma div que contém várias outras divs menores, que representarão os pequenos quadrados. Quando o mouse passar por cima da div principal, vamos utilizar JavaScript para mudar as cores dos quadrados aleatoriamente.

Algumas dicas de comandos de CSS e JS que podem ajudar no desafio:

Utilize a propriedade "display: flex" para alinhar as divs dentro da div principal; Utilize "onmouseover" e "onmouseout" em JavaScript para detectar quando o mouse passa por cima da div principal e quando ele sai; Para mudar as cores dos quadrados aleatoriamente, utilize a função "Math.random()" para gerar números aleatórios e a função "rgb()" para criar cores em RGB. Então, crianças, mãos à obra e criem o HoverBoard mais legal que puderem!

Exemplo

https://user-images.githubusercontent.com/30157522/224548157-a016d537-8d54-4030-a129-56a37d46db69.mp4

Additional tips

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Hoverboard</title>
  </head>
  <body>
    <div class="container" id="container"></div>
    <script src="script.js"></script>
  </body>
</html>

iurygdeoliveira commented 1 year ago

Equipe: NetForce Resultado:

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="index.js">
    <title>Hoverboard</title>
</head>
<body>
    <div class ="container" id="container" ></div>
    <script src ="index.js" ></script>
</body>
</html>

CSS

*{
    box-sizing: border-box;
}

body{
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.container {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    max-width: 400px;
}

.square{
    background-color: #1d1d1d;
    box-shadow: 0 0 2px #000;
    height: 16px;
    width: 16px;
    margin: 2px;
    transition: 2s ease;
}

.square:hover{
    transition-duration: 0s;
}

JAVASCRIPT

const container = document.getElementById('container')
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
const SQUARES = 500

for(let i = 0; i < SQUARES; i++){
    const square = document.createElement('div')
    square.classList.add('square')
    square.addEventListener('mouseover', () => setColor(square))
    square.addEventListener('mouseout', () => removeColor(square))
    container.appendChild(square)
}

function setColor(element){
    const color = getRandomColor()
    element.style.background = color
    element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}

function removeColor(element){
    element.style.background = '#1d1d1d'
    element.style.boxShadow = '0 0 2px #000'
}

function getRandomColor(){
    return colors[Math.floor(Math.random() * colors.length)]
}

Pra mim, só apareceu uma tela preta

josevictormouraa commented 1 year ago

Equipe: NetForce https://github.com/josevictormouraa/Desafio38

iurygdeoliveira commented 1 year ago

resposta aceita

iurygdeoliveira / Web-development-classes