Webleb - UI Elements

HTML

CSS

JS

document.addEventListener('DOMContentLoaded', () => {
    const guessInput = document.getElementById('guess');
    const submitButton = document.getElementById('submit');
    const messageElement = document.getElementById('message');
    const restartButton = document.getElementById('restart');

let secretNumber;

function startGame() {
        secretNumber = Math.floor(Math.random() * 10) + 1;
        messageElement.textContent = '';
        guessInput.value = '';
        guessInput.disabled = false;
        submitButton.disabled = false;
        restartButton.style.display = 'none';
    }

function checkGuess() {
        const userGuess = parseInt(guessInput.value, 10);

if (isNaN(userGuess) || userGuess < 1 || userGuess > 10) {
            messageElement.textContent = 'Por favor, ingresa un número válido entre 1 y 10.';
            return;
        }

if (userGuess === secretNumber) {
            messageElement.textContent = '¡Correcto! ¡Has adivinado el número!';
            guessInput.disabled = true;
            submitButton.disabled = true;
            restartButton.style.display = 'inline';
        } else {
            messageElement.textContent = 'Incorrecto, inténtalo de nuevo.';
        }
    }

submitButton.addEventListener('click', checkGuess);
    restartButton.addEventListener('click', startGame);

startGame(); // Inicia el juego al cargar la página
});

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS