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

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

References

_selfApre collegamenti ipertestuali nella stessa pagina del browser
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<caption>Definisce didascalie all'interno di una tabella
<li>Inserisce voci all'interno di una lista
formnovalidateImpedisce la convalida di un singolo elemento input
widthImposta la larghezza di un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

template 2 colonne

Portfolio Base Freelance – Web,

google search clone

Casetta NEWTON+

INFORMATICA - ESERCIZIO 1 RISOLTO

esercizio 2 (italia)

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>