Learn with Yasir
Share Your Feedback

JavaScript Basics Practice Exercises – Improve Coding Skills Fast

🧪 Coding Exercises

🟢 Beginner Exercises

  1. Change Text Color on Button Click

    2. 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

    3. 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

    4. 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

🧠 Practice & Progress

Explore More Topics