JavaScript Basics Practice Exercises – Improve Coding Skills Fast

🧪 Coding Exercises

🟢 Beginner Exercises

1. ✅ Change Text Color on Button Click

Create a paragraph with some text and a button. When the button is clicked, change the text color of the paragraph to blue.

Requirements

• Use `getElementById()` to access the paragraph.
• Use JavaScript to change the style color property.

Input

<button onclick="changeColor()">Change Color</button>

Expected Output

# The paragraph text changes to blue when the button is clicked

📚 View Solution

---

2. ✅ Change Font Size Dynamically

Create a paragraph with some text and a button. When the button is clicked, increase the font size of the paragraph text.

Requirements

• Use `getElementById()` to access the paragraph.
• Modify the `style.fontSize` property using JavaScript.

Input

<button onclick="increaseFont()">Increase Font</button>

Expected Output

# The paragraph font size increases when the button is clicked

📚 View Solution

---

3. ✅ Change Background Color Randomly

Create a button that, when clicked, changes the background color of the web page to a random color from a predefined list.

Requirements

• Use JavaScript's `Math.random()` to pick a color.
• Update `document.body.style.backgroundColor`.

Input

<button onclick="randomBg()">Random Background</button>

Expected Output

# The background color of the page changes randomly each time the button is clicked

📚 View Solution

---

🟡 Intermediate Exercises

🔴 Advanced Exercises