GiorgeLucas
commented
1 year ago Equipe Vikings
Resultado
HTML
<!DOCTYPE html>
<html lang="en">
<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>Choice picker</title>
</head>
<body>
<div class="main">
<h2>Insira todas as opções separadas por vírgula</h2>
<textarea id="textarea-text" resize="none" oninput="createDivs()"></textarea>
<button class="start" onclick="changeRandomDivColor()">Start</button>
<div id="div-container"></div>
</div>
<script>
function createDivs() {
// Pega o valor do textarea
const textareaText = document.getElementById("textarea-text").value;
// Divide o valor do textarea em um array
const textArray = textareaText.split(",");
// Pega a div container
const divContainer = document.getElementById("div-container");
// Limpa o conteúdo da div container
divContainer.innerHTML = "";
// Cria uma div para cada item do array
for (let i = 0; i < textArray.length; i++) {
const div = document.createElement("div");
div.classList.add("item");
div.innerText = textArray[i];
divContainer.appendChild(div);
}
}
let lastDiv = null;
function changeRandomDivColor() {
// Seleciona aleatoriamente uma das divs e muda a cor dela
const divs = document.getElementsByClassName("item");
const randomIndex = Math.floor(Math.random() * divs.length);
// Descolore a div anteriormente colorida
if (lastDiv) {
lastDiv.style.backgroundColor = "rgb(255, 243, 112)";
}
// Colora a nova div aleatória
divs[randomIndex].style.backgroundColor = "rgb(104, 251, 85)";
// Armazena a div atual em lastDiv
lastDiv = divs[randomIndex];
}
</script>
</body>
</html>CSS
body {
background-color: rgb(2, 125, 233);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
h2 {
font-weight: bold;
}
textarea {
display: block;
width: 50%;
height: 100px;
margin-bottom: 10px;
resize: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.start{
padding: 10px 50px;
border-radius: 50px;
background-color: rgb(240, 240, 240);
border: 0px;
font-weight: bolder;
font-size: 18px;
}
.start:hover {
background-color: rgb(230, 230, 230);
}
.start:active{
background-color: white;
}
.item {
border-radius: 10px;
margin: 10px 0px 0px 0px;
padding: 10px;
background-color: rgb(255, 243, 112);
}
#div-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3px;
padding: 5px;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
iurygdeoliveira
Contact Details
iury.oliveira@ifto.edu.br
Challenge Description
E aí, crianças inocentes! Estão prontos para criar um random choice picker? Nesse desafio, vocês terão que desenvolver uma página web que escolha aleatoriamente uma opção dentre as que foram inseridas pelo usuário. É como se fosse uma roleta da sorte, só que digital!
Para isso, vocês irão precisar utilizar HTML, CSS e JavaScript. Podem usar sua criatividade na hora de estilizar a página, mas lembrem-se de deixá-la intuitiva para o usuário.
Ah, e não se esqueçam de pensar em uma maneira de permitir que o usuário insira as opções. Vocês podem usar um campo de texto para que ele digite as opções separadas por vírgula, por exemplo.
Então, bora colocar as mãos na massa e criar um random choice picker incrível? Boa sorte!
Exemplo:
https://user-images.githubusercontent.com/30157522/223766427-e27c1623-2fcd-4704-a817-83437f5a5e37.mp4
Additional tips
Quanto à lógica do programa, sugiro o uso do Math.random() para gerar o número aleatório que irá determinar qual opção foi escolhida.