javascript project Fayokemi Omolola

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock, Scissors, Paper, Lizard, Spock</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Rock, Scissors, Paper, Lizard, Spock</h1>
        <label for="rounds">Number of Rounds:</label>
        <input type="number" id="rounds" min="1" value="3">
        <button id="startBtn">Start Game</button>
        <p id="remainingRounds"></p>
        <div id="choices">
            <button data-choice="rock" style="background-color: #FF6F61;">Rock</button>
            <button data-choice="scissors" style="background-color: #6B5B95;">Scissors</button>
            <button data-choice="paper" style="background-color: #88B04B;">Paper</button>
            <button data-choice="lizard" style="background-color: #FFA500;">Lizard</button>
            <button data-choice="spock" style="background-color: #92A8D1;">Spock</button>
        </div>
        <p id="computerPlay"></p>
        <p id="roundResult"></p>
        <p id="overallWinner"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
    background-color: #F0F8FF;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
    font-size: 2.5em;
    margin-bottom: 20px;
}

label {
    font-size: 1.2em;
    color: #555;
}

input {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
}

button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease;
}

button:hover {
    opacity: 0.9;
}

#startBtn {
    background: linear-gradient(45deg, #FF4500, #FF0000);
    font-size: 1.2em;
    font-weight: bold;
    padding: 15px 30px;
}

#choices {
    margin-top: 20px;
}

#remainingRounds, #computerPlay, #roundResult, #overallWinner {
    margin-top: 20px;
    font-size: 1.2em;
    color: #333;
}

#overallWinner {
    font-weight: bold;
    color: #D9534F;
}

JavaScript

const choices = ["rock", "paper", "scissors", "lizard", "spock"];
const winConditions = {
    rock: ["scissors", "lizard"],
    paper: ["rock", "spock"],
    scissors: ["paper", "lizard"],
    lizard: ["paper", "spock"],
    spock: ["rock", "scissors"]
};

let totalRounds = 0;
let remainingRounds = 0;
let humanScore = 0;
let computerScore = 0;

const roundsInput = document.getElementById("rounds");
const startBtn = document.getElementById("startBtn");
const remainingRoundsDisplay = document.getElementById("remainingRounds");
const computerPlayDisplay = document.getElementById("computerPlay");
const roundResultDisplay = document.getElementById("roundResult");
const overallWinnerDisplay = document.getElementById("overallWinner");

startBtn.addEventListener("click", () => {
    totalRounds = parseInt(roundsInput.value);
    if (isNaN(totalRounds) || totalRounds < 1) return;
    remainingRounds = totalRounds;
    humanScore = 0;
    computerScore = 0;
    remainingRoundsDisplay.textContent = `Remaining Rounds: ${remainingRounds}`;
    computerPlayDisplay.textContent = "";
    roundResultDisplay.textContent = "";
    overallWinnerDisplay.textContent = "";
});

document.querySelectorAll("#choices button").forEach(button => {
    button.addEventListener("click", () => {
        if (remainingRounds === 0) return;

        const humanChoice = button.dataset.choice;
        const computerChoice = choices[Math.floor(Math.random() * choices.length)];

        computerPlayDisplay.textContent = `Computer chose: ${computerChoice}`;

        if (humanChoice === computerChoice) {
            roundResultDisplay.textContent = "It's a tie!";
        } else if (winConditions[humanChoice].includes(computerChoice)) {
            roundResultDisplay.textContent = `You win! ${humanChoice} beats ${computerChoice}.`;
            humanScore++;
        } else {
            roundResultDisplay.textContent = `Computer wins! ${computerChoice} beats ${humanChoice}.`;
            computerScore++;
 ...