Raffle Code

https://salauraheem.github.io/Pick_number/

HTML: Structure of the Page

Code:

<h1>Random Number Picker</h1>
<p>Click the button to pick a number from 1 to 10:</p>
<button onclick="pickNumber()">Pick a Number</button>
<div id="result">Your number will appear here</div>

Explanation:

1. <h1> → This is the main heading of the page. Shows “Random Number Picker” in big letters.

2. <p> → A paragraph giving instructions. Shows text “Click the button to pick a number from 1 to 10”.

3. <button> → A clickable button.

   • onclick="pickNumber()" → When you click the button, it runs the JavaScript function pickNumber().

   • Text inside button is “Pick a Number”.

4. <div id="result"> → A box to show the picked number.

   • id="result" → Gives a name so JavaScript can find this div.

   • Initially, it shows “Your number will appear here”.

Activity for students:

• Change heading text, paragraph, or button text.

• Add another div or paragraph and give it an id.

CSS: Styling the Page

Code:

body {
  font-family: Arial;
  text-align: center;
  margin-top: 100px;
  background-color: #f0f0f0;
}

button {
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  border: none;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  margin-top: 20px;
}

button:hover {
  background-color: #45a049;
}

#result {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #222;
}

Explanation:

Body styling

• font-family: Arial; → Makes all text use Arial font.

• text-align: center; → Centers everything on the page.

• margin-top: 100px; → Moves content down from the top.

• background-color: #f0f0f0; → Sets light gray background.

Button styling

• padding: 10px 20px; → Makes the button bigger inside.

• font-size: 18px; → Text size inside button.

• border-radius: 5px; → Rounded corners.

• border: none; → Removes default border.

• background-color: #4CAF50; → Green button.

• color: white; → White text.

• cursor: pointer; → Shows a hand cursor on hover.

• margin-top: 20px; → Space above button.

Button hover effect

• button:hover { background-color: #45a049; } → Changes button color when mouse is over it.

Result div styling

• margin-top: 20px; → Space above the result box.

• font-size: 24px; → Makes number bigger.

• font-weight: bold; → Makes number bold.

• color: #222; → Dark text color.

Activity for students:

• Change colors of button, background, and text.

• Try bigger or smaller fonts.

• Change spacing between elements.

 JavaScript: Making the Page Interactive

Code:

let numbers = [1,2,3,4,5,6,7,8,9,10];

function pickNumber() {
  if (numbers.length === 0) {
    numbers = [1,2,3,4,5,6,7,8,9,10];
    alert("All numbers used! Restarting...");
  }

  let index = Math.floor(Math.random() * numbers.length);
  let chosen = numbers.splice(index, 1)[0];
  document.getElementById("result").innerText = "🎲 " + chosen;
}

Step-by-Step Explanation:

1️⃣ Create an array of numbers

let numbers = [1,2,3,4,5,6,7,8,9,10];

• numbers is a list of all numbers 1–10.

• We will pick numbers from this list.

2️⃣ Function to pick a number

function pickNumber() { ... }

• A function is like a recipe of instructions.

• This runs every time you click the button.

3️⃣ Check if all numbers are used

if (numbers.length === 0) {
  numbers = [1,2,3,4,5,6,7,8,9,10];
  alert("All numbers used! Restarting...");
}

• numbers.length → number of items left in the array.

• If 0 → all numbers were picked, so reset array and alert user.

4️⃣ Pick a random index

let index = Math.floor(Math.random() * numbers.length);

• Math.random() → gives decimal 0–1

• Multiply by numbers.length → range = 0 to last index

• Math.floor() → rounds down to whole number → gives a valid index

5️⃣ Remove the picked number from array

let chosen = numbers.splice(index, 1)[0];

• splice(index, 1) → removes 1 item at position index from array

• [0] → get the value of removed number

• This ensures no repeats

6️⃣ Show the number on the page

document.getElementById("result").innerText = "🎲 " + chosen;

• Find the <div id="result">

• Change its text to the chosen number (with dice emoji 🎲)

✅ How It Works Together

1. HTML → shows the heading, instructions, button, and result box

2. CSS → makes everything look nice

3. JS → when button is clicked:

   • Pick a random number

   • Remove it from array (no repeats)

   • Show it in the result box

   • Reset when all numbers are used

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Random Number Picker (No Repeat)</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      text-align: center;

      margin-top: 100px;

      background: #f5f5f5;

    }

    button {

      padding: 10px 20px;

      font-size: 18px;

      cursor: pointer;

      border: none;

      border-radius: 5px;

      background: #4CAF50;

      color: white;

    }

    #result, #clickCount {

      margin-top: 20px;

      font-size: 24px;

      font-weight: bold;

      color: #333;

    }

  </style>

</head>

<body>

  <h2>Pick a Random Number (1-10)</h2>

  <button onclick="pickNumber()">Click Me</button>

  <div id="result">Your number will appear here</div>

  <div id="clickCount">Number of clicks: 0</div>

  <script>

    let numbers = []; // store numbers not yet picked

    let clickCounter = 0; // track number of clicks

    function resetNumbers() {

      numbers = [1,2,3,4,5,6,7,8,9,10]; // fill 1–10

    }

    function pickNumber() {

      clickCounter++; // increment click count

      document.getElementById("clickCount").innerText = "Number of clicks: " + clickCounter;

      if (numbers.length === 0) {

        resetNumbers(); // refill if empty

        alert("All numbers used! Restarting...");

      }

      let index = Math.floor(Math.random() * numbers.length);

      let chosen = numbers.splice(index, 1)[0]; // remove chosen number

      document.getElementById("result").innerText = "🎲 Number: " + chosen;

    }

    // initialize numbers at the start

    resetNumbers();

  </script>

</body>

</html>