Estrazione Casuale Studenti by @lion-h - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<nav>Definisce un menu di navigazione
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<em>Formatta il testo in corsivo/italico enfatizzato
<b>Formatta il testo in grassetto
<h5>Titolo di intestazione di quinto livello
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Users

Log in to search for users

Explore

Find inspiration

Autoscuola Eur Torrino Fabrizio e

FORM iscrizione

cpa continuing professional educat

Heads Or Tails Random Tally 2

Primo esercizio

JEANSON ANCHETA

Design & Comunicazione Digitale ??

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estrazione Casuale Studenti</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        .container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .box {
            width: 48%;
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        h2 {
            color: #3498db;
            border-bottom: 2px solid #3498db;
            padding-bottom: 5px;
        }
        ul {
            list-style-type: none;
            padding: 0;
            min-height: 200px;
            border: 1px dashed #ccc;
            padding: 10px;
            border-radius: 4px;
        }
        li {
            padding: 8px;
            margin: 5px 0;
            background-color: #ecf0f1;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        li:hover {
            background-color: #d6eaf8;
        }
        .input-area {
            display: flex;
            margin-bottom: 20px;
        }
        input {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
        }
        button {
            padding: 10px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .actions {
            text-align: center;
            margin-top: 20px;
        }
        .actions button {
            border-radius: 4px;
            padding: 12px 25px;
            margin: 0 10px;
            font-weight: bold;
        }
        .extract-btn {
            background-color: #2ecc71;
        }
        .extract-btn:hover {
            background-color: #27ae60;
        }
        .reset-btn {
            background-color: #e74c3c;
        }
        .reset-btn:hover {
            background-color: #c0392b;
        }
        .highlight {
            animation: highlight 1.5s;
            background-color: #2ecc71;
            color: white;
        }
        @keyframes highlight {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <h1>Estrazione Casuale Studenti</h1>
    
    <div class="input-area">
        <input type="text" id="studentName" placeholder="Inserisci il nome dello studente">
        <button onclick="addStudent()">Aggiungi</button>
    </div>
    
    <div class="container">
        <div class="box">
            <h2>Lista Studenti</h2>
            <ul id="studentsList"></ul>
        </div>
        
        <div class="box">
            <h2>Estratti</h2>
            <ul id="extractedList"></ul>
        </div>
    </div>
    
    <div class="actions">
        <button class="extract-btn" onclick="extractStudent()">Estrai Studente</button>
        <button class="reset-btn" onclick="resetAll()">Reset</button>
    </div>

    <script>
        let students = [];
        
        function addStudent() {
            const input = document.getElementById('studentName');
            const name = input.value.trim();
            
            if (name && !students.includes(name)) {
                students.push(name);
                updateStudentsList();
                input.value = '';
            } else if (students.includes(name)) {
                alert('Questo studente è già stato inserito!');
            }
        }
        
        function updateStudentsList() {
            const list = document.getElementById('studentsList');
            list.innerHTML = '';
            
            students.forEach(student => {
                const li = document.createElement('li');
                li.textContent = student;
                list.appendChild(li);
            });
        }
        
        function extractStudent() {
            if (students.length === 0) {
                alert('Non ci sono studenti da estrarre!');
                return;
            }
            
            // Seleziona uno studente casuale
            const randomIndex = Math.floor(Math.random() * students.length);
            const extractedStudent = students[randomIndex];
            
            // Rimuovi lo studente dall'array
            students.splice(randomIndex, 1);
            
            // Aggiorna la lista studenti
            updateStudentsList();
            
            // Aggiungi lo studente alla lista estratti
            const extractedList = document.getElementById('extractedList');
            const li = document.createElement('li');
            li.textContent = extractedStudent;
            li.classList.add('highlight');
            extractedList.insertBefore(li, extractedList.firstChild);
            
            // Rimuovi l'animazione dopo che è finita
            setTimeout(() => {
                li.classList.remove('highlight');
            }, 1500);
        }
        
        function resetAll() {
            if (confirm('Vuoi davvero resettare tutto?')) {
                students = [];
                document.getElementById('studentsList').innerHTML = '';
                document.getElementById('extractedList').innerHTML = '';
            }
        }
        
        // Permette di aggiungere studenti premendo Invio
        document.getElementById('studentName').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addStudent();
            }
        });
    </script>
</body>
</html>