Exercise 1: Change Background Color

🚀 Discover the Power of JavaScript in Web Design! 🌈✨

In today’s video, we delve into an exciting aspect of web development: dynamically changing the background color of a webpage using JavaScript! This simple yet powerful technique showcases how JavaScript can interact with HTML elements to enhance user experience and website interactivity.

🔍 What’s Inside:

• We explore how to select HTML elements using JavaScript.
• Understanding the significance of event listeners in JavaScript.
• Implementing conditional logic to alter styles based on user interaction.

🎯 Perfect for Beginners:

Whether you’re just starting out in web development or looking to brush up on your JavaScript skills, this video offers a clear and practical demonstration of basic but essential concepts.

🧩 Why This Matters:

• Enhance website interactivity and user engagement.
• Learn the fundamentals of JavaScript, a key tool in web development.
• Unlock the potential for more complex and dynamic web designs.

💡 Don’t forget to like, share, and subscribe for more tips and tutorials on web development and JavaScript!

#JavaScriptBasics #WebDevelopment #CodingTutorial #InteractiveDesign #WebDesign #FrontEndDevelopment #LearnToCode #Programming #TechEducation #WebDev #DigitalCreativity

Objective: Write a JavaScript function to change the background color of a webpage.

HTML:

 <button id=”btn1″>Change Background Color</button>

JavaScript:

const btn = document.querySelector(‘#btn1’);

console.log(btn);

btn.addEventListener(‘click’,()=>{

   const bg = document.body.style;

   if(bg.backgroundColor!= ‘red’){

       bg.backgroundColor = ‘red’;

   }else{

       bg.backgroundColor = ‘white’;

   }

})

Explanation: This script adds an event listener to a button with the ID changeColorButton. When clicked, it changes the body’s background color to light blue.

Detailed Explanation of the Code

The provided JavaScript code snippet is designed to change the background color of a webpage when a button is clicked. Here’s a step-by-step explanation:

• Selecting the Button:
  • const btn = document.querySelector(‘#btn1’);
  • This line selects the first HTML element with the ID btn1 and assigns it to the variable btn. document.querySelector is a method that returns the first element that matches a specified CSS selector in the document.
• Logging the Button to Console:
  • console.log(btn);
  • This line logs the button element to the console. It’s a way to verify that the correct element has been selected.
• Adding Event Listener to the Button:
  • btn.addEventListener(‘click’, () => { … })
  • An event listener is added to the button for the ‘click’ event. This means that the anonymous function (arrow function) provided as the second argument to addEventListener will be executed every time the button is clicked.
• Defining the Click Event Behavior:
  • Inside the arrow function, the code checks and toggles the background color of the page body.
  • const bg = document.body.style;
    • This line gets the style object of the body element of the document and assigns it to the variable bg.
  • The if statement checks if the backgroundColor of the body is currently ‘red’.
  • If it is red, it changes the backgroundColor to ‘white’. If it’s not red, it changes the backgroundColor to ‘red’.