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

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

References

<tbody>Definisce il contenuto principale di una tabella.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
langSpecifica la lingua del contenuto di un elemento
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input

Users

Log in to search for users

Explore

Find inspiration

CodeALongButton

Harrel Lola DIV CSS

Esercizio 1 Html

Form per il torneo misto dis

Pagina Di Prova 1.11.23

informatica 13/10

Image Comparison Slider

Il Mondo della Tecnologia

AoIT Dashboard 2024 v1

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>