iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Oi, crianças inocentes! Eu tenho um desafio bem divertido pra vocês! Que tal criar um site que mostre os códigos das teclas que estão sendo pressionadas no teclado? Vamos lá!

Para começar, vocês vão precisar utilizar o evento "keydown" do JavaScript para detectar quando uma tecla é pressionada. Depois disso, podem usar o método "keyCode" para obter o código da tecla pressionada.

Com isso em mãos, vocês podem criar um elemento HTML para mostrar na tela qual tecla foi pressionada e qual é o seu código. Para dar um toque especial, que tal usar um pouco de CSS para estilizar esse elemento e deixá-lo bem bonito e chamativo?

Ah, e não se esqueçam de adicionar um pouco de interatividade! Que tal fazer com que o elemento mostre o nome da tecla, em vez do seu código, quando ela for pressionada? Ou ainda, criar um efeito de animação quando a tecla for solta?

Espero que se divirtam criando esse projeto! Lembrem-se de explorar ao máximo as possibilidades do CSS, JavaScript e HTML para deixá-lo bem legal!

Exemplo: CPT2303081246-334x100

Additional tips

É importante lembrar que não é permitido o uso de frameworks existentes. Vocês terão que colocar a mão na massa e criar tudo do zero

Analicemc commented 1 year ago

Equipe Lovelace

Acesse o repositório https://github.com/Analicemc/desafio22

GiorgeLucas commented 1 year ago

Equipe Vikings

Resultado

_home_202112130027@ifto local_%C3%81rea%20de%20Trabalho_Desafio%2022_index html

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">
    <title>Descobrindo os key Codes do Teclado</title>
</head>
<body>
    <div class="container">
        <div class="box">
            <p>event.key</p>
            <div class="key">
                A
            </div>
        </div>
        <div class="box">
            <p>event.keycode</p>
            <div class="code">
                B
            </div>
        </div>
    </div>
    <script>
        const key = document.querySelector('.key');
        const code = document.querySelector('.code');

        document.addEventListener("keydown", function(event) {
            // Obtém o keycode da tecla pressionada
            var keycode = event.keyCode;
            // Obtém o nome da tecla pressionada
            var tecla = String.fromCharCode(keycode);
            // Exibe o keycode e o nome da tecla pressionada na div "teclaPressionada"
            key.innerHTML = tecla;
            code.innerHTML = String(keycode);
        });

    </script>
</body>
</html>

CSS

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: white;
}

.box{
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 200px;

}

.key, .code{
    padding: 50px;
    border: 1px solid black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
}

.container{
    margin: 200px auto;
    width: 40%;
    background-color: white;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

iurygdeoliveira commented 1 year ago

https://github.com/Analicemc/desafio22

resposta aceita

iurygdeoliveira / Web-development-classes

22º Desafio: Descobrindo os key Codes do Teclado - Peso 1 #27