dantetesta/Sorteador.js

## Sorteador.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorteio JetMaster 2024</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - 40px);
            flex-wrap: wrap;
        }
        .flex-container {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            width: 100%;
            max-width: 1200px;
        }
        .container, .nomes-lista {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            margin: 10px;
        }
        .nomes-lista {
            max-width: 300px;
            margin-left: 20px;
        }
        .nomes-lista ul {
            list-style-type: none;
            padding: 0;
        }
        .nomes-lista ul li {
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        button {
            background-color: #007bff;
            color: #ffffff;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
            transition: background-color 0.3s;
            display: block; /* makes it easier to click */
        }
        button:hover {
            background-color: #0056b3;
        }
        #resultado p {
            margin: 10px 0;
            font-weight: bold;
            color: #333;
            background-color: #e9ecef;
            padding: 30px;
            border-radius: 5px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="container">
            <h2 style="color: #333;">Sorteio JetMaster 2024</h2>
            <button onclick="sortearNomes()">Iniciar Sorteio</button>
            <div id="resultado">
                <p id="primeiroLugar"></p>
                <p id="segundoLugar"></p>
                <p id="terceiroLugar"></p>
            </div>
        </div>
        <div class="nomes-lista">
            <h3>Concorrentes</h3>
            <ul>
                <!-- Os nomes são preenchidos pelo JavaScript -->
            </ul>
        </div>
    </div>
    <script>
        const nomesArray = [
            "WILLIAM JOINER",
            "JULIANO ALVARENGA",
            "MARCOS ALVARENGA",
            "WAGNER SENA",
            "RICARDO PIVETTA",
            "CLAUDIO MOREIRA",
            "RAFAEL DIAS",
            "SABRINA",
            "VERIDIANA",
            "JOEL MEDEIROS",
            "DOM SAMUKA",
            "MARCELO TAGUTTI",
            "ALEXANDRE BRITEZ"
        ];

        window.onload = function() {
            const lista = document.querySelector('.nomes-lista ul');
            nomesArray.forEach(nome => {
                const item = document.createElement('li');
                item.textContent = nome;
                lista.appendChild(item);
            });
        }

        function sortearNomes() {
            let contador = 0;
            const intervalo = setInterval(() => {
                document.getElementById('primeiroLugar').textContent = `1º lugar: ${nomesArray[Math.floor(Math.random() * nomesArray.length)]}`;
                document.getElementById('segundoLugar').textContent = `2º lugar: ${nomesArray[Math.floor(Math.random() * nomesArray.length)]}`;
                document.getElementById('terceiroLugar').textContent = `3º lugar: ${nomesArray[Math.floor(Math.random() * nomesArray.length)]}`;

                contador += 100;

                if (contador >= 10000) {
                    clearInterval(intervalo);
                    const sorteados = [];
                    while (sorteados.length < 3) {
                        const sorteado = nomesArray[Math.floor(Math.random() * nomesArray.length)];
                        if (!sorteados.includes(sorteado)) {
                            sorteados.push(sorteado);
                        }
                    }

                    document.getElementById('primeiroLugar').textContent = `1º lugar: ${sorteados[0]}`;
                    document.getElementById('segundoLugar').textContent = `2º lugar: ${sorteados[1]}`;
                    document.getElementById('terceiroLugar').textContent = `3º lugar: ${sorteados[2]}`;
                }
            }, 100);
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sorteio JetMaster 2024</title>
	<style>
	body {
	font-family: 'Arial', sans-serif;
	background-color: #f4f4f4;
	margin: 0;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 40px);
	flex-wrap: wrap;
	}
	.flex-container {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	width: 100%;
	max-width: 1200px;
	}
	.container, .nomes-lista {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	margin: 10px;
	}
	.nomes-lista {
	max-width: 300px;
	margin-left: 20px;
	}
	.nomes-lista ul {
	list-style-type: none;
	padding: 0;
	}
	.nomes-lista ul li {
	padding: 8px;
	border-bottom: 1px solid #eee;
	}
	button {
	background-color: #007bff;
	color: #ffffff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 5px;
	font-size: 16px;
	transition: background-color 0.3s;
	display: block; /* makes it easier to click */
	}
	button:hover {
	background-color: #0056b3;
	}
	#resultado p {
	margin: 10px 0;
	font-weight: bold;
	color: #333;
	background-color: #e9ecef;
	padding: 30px;
	border-radius: 5px;
	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	}
	</style>
	</head>
	<body>
	<div class="flex-container">
	<div class="container">
	<h2 style="color: #333;">Sorteio JetMaster 2024</h2>
	<button onclick="sortearNomes()">Iniciar Sorteio</button>
	<div id="resultado">
	<p id="primeiroLugar"></p>
	<p id="segundoLugar"></p>
	<p id="terceiroLugar"></p>
	</div>
	</div>
	<div class="nomes-lista">
	<h3>Concorrentes</h3>
	<ul>
	<!-- Os nomes são preenchidos pelo JavaScript -->
	</ul>
	</div>
	</div>
	<script>
	const nomesArray = [
	"WILLIAM JOINER",
	"JULIANO ALVARENGA",
	"MARCOS ALVARENGA",
	"WAGNER SENA",
	"RICARDO PIVETTA",
	"CLAUDIO MOREIRA",
	"RAFAEL DIAS",
	"SABRINA",
	"VERIDIANA",
	"JOEL MEDEIROS",
	"DOM SAMUKA",
	"MARCELO TAGUTTI",
	"ALEXANDRE BRITEZ"
	];

	window.onload = function() {
	const lista = document.querySelector('.nomes-lista ul');
	nomesArray.forEach(nome => {
	const item = document.createElement('li');
	item.textContent = nome;
	lista.appendChild(item);
	});
	}

	function sortearNomes() {
	let contador = 0;
	const intervalo = setInterval(() => {
	document.getElementById('primeiroLugar').textContent = `1º lugar: ${nomesArray[Math.floor(Math.random() * nomesArray.length)]}`;
	document.getElementById('segundoLugar').textContent = `2º lugar: ${nomesArray[Math.floor(Math.random() * nomesArray.length)]}`;
	document.getElementById('terceiroLugar').textContent = `3º lugar: ${nomesArray[Math.floor(Math.random() * nomesArray.length)]}`;

	contador += 100;

	if (contador >= 10000) {
	clearInterval(intervalo);
	const sorteados = [];
	while (sorteados.length < 3) {
	const sorteado = nomesArray[Math.floor(Math.random() * nomesArray.length)];
	if (!sorteados.includes(sorteado)) {
	sorteados.push(sorteado);
	}
	}

	document.getElementById('primeiroLugar').textContent = `1º lugar: ${sorteados[0]}`;
	document.getElementById('segundoLugar').textContent = `2º lugar: ${sorteados[1]}`;
	document.getElementById('terceiroLugar').textContent = `3º lugar: ${sorteados[2]}`;
	}
	}, 100);
	}
	</script>
	</body>
	</html>