JavaScript Exercises (Q1 - Q8)
This document includes the full program codes, explanations, and reflections for all eight
JavaScript exercises.
Q1: Random Background Color
When the button is clicked, the background color of the page changes to a random color and
displays its hex code.
Code:
<html>
<h2>Q1: Random Background Color</h2>
<button id="colorBtn">Change Background</button>
<p id="colorCode"></p>
<script>
[Link]("colorBtn").onclick = function() {
let randomColor = "#" + [Link]([Link]() * 16777215).toString(16);
[Link] = randomColor;
[Link]("colorCode").innerText = "Color: " + randomColor;
};
</script>
</html>
Q2: Dice Roller
Simulates rolling a dice and shows a random number between 1 and 6.
<html>
<h2>Q2: Dice Roller 🎲</h2>
<button id="diceBtn">Roll Dice</button>
<p id="diceResult"></p>
<script>
[Link]("diceBtn").onclick = function() {
let dice = [Link]([Link]() * 6) + 1;
[Link]("diceResult").innerText = `🎲 You rolled: ${dice}`;
};
</script>
</html>
Q3: Guess the Number Game
Generates a secret number between 1 and 10 and lets the user guess it.
<html>
<h2>Q3: Guess the Number (1–10)</h2>
<input type="number" id="guessInput" placeholder="Enter your guess">
<button id="guessBtn">Guess</button>
<p id="guessMsg"></p>
<script>
let secret = [Link]([Link]() * 10) + 1;
[Link]("guessBtn").onclick = function() {
let guess = Number([Link]("guessInput").value);
if (guess === secret) {
[Link]("guessMsg").innerText = "🎉 Correct! You guessed it!";
} else {
[Link]("guessMsg").innerText = "❌ Wrong guess! Try again.";
}
};
</script>
</html>
Q4: Click Counter
Counts how many times a button is clicked and updates the count.
<html>
<h2>Q4: Click Counter</h2>
<button id="countBtn">Click Me!</button>
<p id="countDisplay">Count: 0</p>
<script>
let count = 0;
[Link]("countBtn").onclick = function() {
count++;
[Link]("countDisplay").innerText = "Count: " + count;
};
</script>
</html>
Q5: Change Heading Color
Changes the text color of a heading to a random color on each click.
<html>
<h2 id="colorHeading">Q5: Change My Color!</h2>
<button id="textColorBtn">Change Text Color</button>
<script>
[Link]("textColorBtn").onclick = function() {
let randomColor = "#" + [Link]([Link]() * 16777215).toString(16);
[Link]("colorHeading").[Link] = randomColor;
};
</script>
</html>
Q6: Digital Clock
Displays the current time and updates automatically every second.
<html>
<h2>Q6: Digital Clock</h2>
<p id="clock"></p>
<script>
function updateClock() {
let now = new Date();
let time = [Link]();
[Link]("clock").innerText = time;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</html>
Q7: Motivational Quotes
Displays a random motivational quote when the button is clicked.
<html>
<h2>Q7: Random Motivational Quote</h2>
<button id="quoteBtn">Show Quote</button>
<p id="quoteDisplay"></p>
<script>
let quotes = [
"Believe in yourself!",
"Keep going, you’re doing great!",
"Dream big and work hard!",
"Success starts with effort!"
];
[Link]("quoteBtn").onclick = function() {
let randomIndex = [Link]([Link]() * [Link]);
[Link]("quoteDisplay").innerText = quotes[randomIndex];
};
</script>
</html>
Q8: Magic 8-Ball
Displays a random answer when the user clicks the button.
<html>
<h2>Q8: Magic 8-Ball 🎱</h2>
<button id="magicBtn">Ask the Magic 8-Ball</button>
<p id="magicAnswer"></p>
<script>
let answers = ["Yes", "No", "Maybe", "Ask again later", "Definitely!", "Unlikely"];
[Link]("magicBtn").onclick = function() {
let randomIndex = [Link]([Link]() * [Link]);
[Link]("magicAnswer").innerText = "🎱 " + answers[randomIndex];
};
</script>
</html>
Reflection
These exercises helped me understand the fundamentals of JavaScript such as DOM
manipulation, event handling, and random number generation.
I learned how to use functions like [Link](), setInterval(), and how to dynamically
update web page elements using [Link]().
Each question built upon different JavaScript skills — from logic and conditionals to styling
and timing functions.