Exercise 5: Dynamic Styling of Elements

🌟 Enhance Your Websites with Dynamic JavaScript! 📸✨

In our latest tutorial, we dive into a fascinating JavaScript feature: dynamically changing the source of an image with a button click. This technique is a staple in web development, perfect for creating image galleries, sliders, or just adding interactive elements to your site.

👩‍💻 What You’ll Discover:

• The basics of selecting HTML elements with JavaScript.
• Adding event listeners to handle user interactions.
• Using JavaScript to dynamically change image sources.

🚀 Great for All Skill Levels:

This tutorial is tailored for anyone interested in enhancing their web development skills, from beginners to more experienced developers looking for a refresher on dynamic content manipulation.

📌 Why It’s Important:

• A key skill for creating interactive and engaging web pages.
• Understanding this concept opens the door to more advanced JavaScript functionalities.
• Essential for anyone looking to create visually dynamic websites.

#JavaScript #WebDevelopment #DynamicContent #InteractiveWebDesign #FrontEndDevelopment #WebDesign #CodingTutorial #TechSkills #LearnToCode #Programming #DigitalCreativity #WebDevCommunity

Objective: Apply dynamic styling to paragraphs on button click.

HTML:

       <section class=”main”>

           <h2>About Us</h2>

           <p>Paragraph 1</p>

           <p>Paragraph 2</p>

           <p>This section contains information about the website or company.</p>

           <button id=”btn1″>Apply Styling</button>

       </section>

JavaScript:

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

const paras = document.querySelectorAll(‘.main p’);

const arr = [‘red’,’blue’,’green’,’purple’];

let cnt = 0;

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

   paras.forEach((ele,ind) =>{

       cnt++;

       if(cnt%2 == 0){

           ele.style.fontWeight = ‘bold’;

       }else{

           ele.style.fontWeight = ”;

       }

       if(cnt >= arr.length) {cnt = 0;}

       ele.style.color = arr[cnt];

   })

})

Explanation: This script selects all paragraphs and changes their font color to red and font weight to bold when a button is clicked.

Detailed Explanation of the Code

The code snippet provided is a basic example of how to change the source of an image on a webpage when a button is clicked, using JavaScript. This is a common functionality in web development for creating image sliders or changing content dynamically.

HTML Structure

• The HTML consists of an <img> tag and a <button> tag.
• The <img> tag has an ID myImage and initially displays an image (image1.png located in an Images folder).
• The <button> has an ID btn1 and is labeled “Change Image”.

JavaScript Functionality

• Selecting Elements:
  • const myImage = document.querySelector(‘#myImage’);: Selects the image element using its ID.
  • const btn = document.querySelector(‘#btn1’);: Selects the button element using its ID.
• Adding an Event Listener to the Button:
  • btn.addEventListener(‘click’, () => { … });: Attaches a ‘click’ event listener to the button. When the button is clicked, the function provided as an argument is executed.
• Changing the Image Source:
  • Inside the event listener, the code changes the src attribute of the image.
  • const txt = myImage.src;: Gets the current source of the image.
  • The if statement checks whether the current image source ends with “1.png”.
  • If it does, the source of the image is changed to “image2.png”; otherwise, it’s changed back to “image1.png”.

This code effectively creates a toggle effect, where clicking the button alternates the image between “image1.png” and “image2.png”.