Assignments On Day 22: JavaScript and CSS Interactions

Assignments On Day 22: JavaScript and CSS Interactions

Assignments on JavaScript and CSS Interactions

Below are a few assignments based on the topic of JavaScript and CSS Interactions. These assignments cover changing element styles, toggling classes, and animating elements. Each assignment is accompanied by step-by-step solutions and explanations.

Assignment 1: Change Background Color with JavaScript

Task: Create a webpage with a button. When the button is clicked, the background color of a div element should change to a random color.

Solution:

1. HTML Structure:

o A div with an ID of colorBox.

o A button that will trigger the background color change.

2. JavaScript:

o Write a function to generate a random color.

o Change the background color of the div when the button is clicked.

html

Copy code

<!DOCTYPE html>

<head>

<title>Change Background Color</title>

</head>

<body>

Click Button to Change Color

</div>

<button onclick="changeBackgroundColor()">Change Background Color</button>

function getRandomColor() {

const letters = '0123456789ABCDEF';

let color = '#';

for (let i = 0; i < 6; i++) {

color += letters[Math.floor(Math.random() * 16)];

}

return color;

}

function changeBackgroundColor() {

const box = document.getElementById("colorBox");

box.style.backgroundColor = getRandomColor();

}

</script>

</body>

</html>

Explanation:

getRandomColor(): This function generates a random hexadecimal color code.
changeBackgroundColor(): This function gets the div element by its ID and changes its background color by setting the style.backgroundColor property.

Assignment 2: Toggle a Class to Change Text Color

Task: Create a webpage with a div element containing some text. Add a button that will toggle the text color between red and blue when clicked.

Solution:

1. HTML Structure:

o A div element with the text.

o A button that will toggle the text color.

2. CSS:

o Define two classes: .red and .blue for text colors.

3. JavaScript:

o Toggle the classes on the div when the button is clicked.

html

Copy code

<!DOCTYPE html>

<head>

<title>Toggle Class Example</title>

<style>

.red {

color: red;

}

.blue {

color: blue;

}

</style>

</head>

<body>

<div id="textBox">This text will change color!</div>

<button onclick="toggleTextColor()">Toggle Color</button>

function toggleTextColor() {

const textBox = document.getElementById("textBox");

textBox.classList.toggle("red");

textBox.classList.toggle("blue");

}

</script>

</body>

</html>

Explanation:

The toggleTextColor() function uses the classList.toggle() method to add/remove the red and blue classes to the div. This will toggle the text color between red and blue each time the button is clicked.

Assignment 3: Animate an Element with JavaScript

Task: Create a webpage where a box moves horizontally across the screen when a button is clicked. Use JavaScript to animate the movement of the box.

Solution:

1. HTML Structure:

o A div element for the box.

o A button to trigger the animation.

2. JavaScript:

o Use the setInterval() method to animate the box by changing its left position.

html

Copy code

<!DOCTYPE html>

<head>

<title>Animate Box Example</title>

<style>

#movingBox {

width: 100px;

height: 100px;

background-color: green;

position: absolute;

top: 100px;

left: 0;

}

</style>

</head>

<body>

<button onclick="startAnimation()">Start Animation</button>

let position = 0;

function startAnimation() {

const box = document.getElementById("movingBox");

const interval = setInterval(function() {

position += 5; // Move box by 5px

box.style.left = position + 'px';

// Stop the animation once the box reaches the right edge

if (position >= window.innerWidth - 100) {

clearInterval(interval); // Stop the animation

}

}, 20); // Every 20 milliseconds

}

</script>

</body>

</html>

Explanation:

The startAnimation() function is triggered when the button is clicked. It uses setInterval() to repeatedly move the box by 5 pixels every 20 milliseconds.
The box stops moving when its position reaches the right edge of the window.

Assignment 4: Toggle Visibility of an Element

Task: Create a webpage where clicking a button toggles the visibility of a div. The div should either be shown or hidden when the button is clicked.

Solution:

1. HTML Structure:

o A div element to be toggled.

o A button to trigger the visibility change.

2. JavaScript:

o Use the style.display property to toggle between none (hidden) and block (visible).

html

Copy code

<!DOCTYPE html>

<head>

<title>Toggle Visibility</title>

</head>

<body>

This is a box that can be toggled.

</div>

<button onclick="toggleVisibility()">Toggle Visibility</button>

function toggleVisibility() {

const box = document.getElementById("toggleBox");

if (box.style.display === "none") {

box.style.display = "block"; // Make the box visible

} else {

box.style.display = "none"; // Hide the box

}

</script>

</body>

</html>

Explanation:

The toggleVisibility() function checks the current display property of the div. If it is set to none, the box is made visible by setting display to block. If it is already visible, it hides the box by setting display to none.

Assignment 5: Smoothly Animate an Element's Width

Task: Create a webpage where a div element's width gradually increases when a button is clicked. Use JavaScript to animate the width of the div.

Solution:

1. HTML Structure:

o A div element with a starting width.

o A button to trigger the animation.

2. CSS:

o Define the div style for width and height.

3. JavaScript:

o Use setInterval() or requestAnimationFrame() to animate the width.

html

Copy code

<!DOCTYPE html>

<head>

<title>Animate Width</title>

<style>

#resizeBox {

width: 100px;

height: 100px;

background-color: orange;

transition: width 1s ease;

}

</style>

</head>

<body>

<button onclick="animateWidth()">Animate Width</button>

function animateWidth() {

const box = document.getElementById("resizeBox");

let width = 100; // Initial width

const interval = setInterval(function() {

width += 5; // Increase width by 5px

box.style.width = width + 'px';

if (width >= 500) {

clearInterval(interval); // Stop animation when the width reaches 500px

}

}, 50); // Execute every 50 milliseconds

}

</script>

</body>

</html>

Explanation:

The animateWidth() function gradually increases the width of the div by 5px every 50 milliseconds, using setInterval(). The animation stops once the width reaches 500px.

These assignments offer hands-on practice with how JavaScript interacts with CSS styles, including techniques like toggling classes, animating elements, and changing styles dynamically. Each assignment is designed for beginners, with clear explanations and step-by-step solutions to help solidify understanding of the concepts.

4o mini

You said:

ChatGPT said:

ChatGPT

Here are additional assignments based on the concepts of JavaScript and CSS Interactions.

Assignment 6: Toggle Between Light and Dark Themes

Task: Create a webpage with two themes (light and dark). When a button is clicked, the webpage should toggle between the light and dark theme.

Solution:

1. HTML Structure:

o A div element for the content.

o A button to switch themes.

2. CSS:

o Define two different classes: .light-theme and .dark-theme.

3. JavaScript:

o Toggle the classes to change the theme when the button is clicked.

html

Copy code

<!DOCTYPE html>

<head>

<title>Toggle Theme</title>

<style>

.light-theme {

background-color: white;

color: black;

}

.dark-theme {

background-color: black;

color: white;

}

</style>

</head>

<h1>Toggle Between Light and Dark Themes</h1>

<p>This is an example of toggling themes using JavaScript and CSS.</p>

</div>

<button onclick="toggleTheme()">Toggle Theme</button>

function toggleTheme() {

document.body.classList.toggle("light-theme");

document.body.classList.toggle("dark-theme");

}

</script>

</body>

</html>

Explanation:

The toggleTheme() function toggles between light-theme and dark-theme by adding/removing the respective classes to the <body> element. This switches the background color and text color of the webpage.

Assignment 7: Hide and Show Elements

Task: Create a webpage with a div element that can be hidden or shown when the button is clicked. Initially, the div should be visible.

Solution:

1. HTML Structure:

o A div element with some content.

o A button to toggle visibility.

2. JavaScript:

o Use the style.display property to toggle between none (hidden) and block (visible).

html

Copy code

<!DOCTYPE html>

<head>

<title>Show and Hide Elements</title>

</head>

<body>

This is a box that can be shown or hidden.

</div>

function toggleVisibility() {

const content = document.getElementById("content");

if (content.style.display === "none") {

content.style.display = "block"; // Show the div

} else {

content.style.display = "none"; // Hide the div

}

</script>

</body>

</html>

Explanation:

The toggleVisibility() function checks the current display style of the div. If it's set to none, the div is shown; otherwise, it is hidden.

Assignment 8: Animate Box Width and Height

Task: Create a webpage where a box's width and height are gradually increased when a button is clicked. Use JavaScript to animate the changes.

Solution:

1. HTML Structure:

o A div element to represent the box.

o A button to trigger the animation.

2. CSS:

o Set initial dimensions of the box.

3. JavaScript:

o Use setInterval() to animate the width and height of the div.

html

Copy code

<!DOCTYPE html>

<head>

<title>Animate Box Dimensions</title>

<style>

#box {

width: 100px;

height: 100px;

background-color: lightgreen;

transition: width 1s, height 1s;

}

</style>

</head>

<body>

<button onclick="animateBox()">Animate Box</button>

function animateBox() {

let width = 100;

let height = 100;

const interval = setInterval(function() {

width += 10; // Increase width by 10px

height += 10; // Increase height by 10px

const box = document.getElementById("box");

box.style.width = width + 'px';

box.style.height = height + 'px';

if (width >= 300) { // Stop animation at 300px width and height

clearInterval(interval);

}

}, 50); // Animation interval (50ms)

}

</script>

</body>

</html>

Explanation:

The animateBox() function increases both the width and height of the box by 10 pixels every 50 milliseconds. The animation stops when both the width and height reach 300px.

Assignment 9: Change Element Border Color on Hover Using JavaScript

Task: Create a webpage where the border color of a div element changes when the mouse hovers over it.

Solution:

1. HTML Structure:

o A div element to be hovered over.

2. CSS:

o Set the initial border for the div.

3. JavaScript:

o Change the border color on the mouseover and mouseout events.

html

Copy code

<!DOCTYPE html>

<head>

<title>Change Border Color on Hover</title>

<style>

#hoverBox {

width: 200px;

height: 200px;

border: 5px solid black;

text-align: center;

line-height: 200px;

}

</style>

</head>

<body>

<div id="hoverBox">Hover over me!</div>

const box = document.getElementById("hoverBox");

box.addEventListener("mouseover", function() {

box.style.borderColor = "red"; // Change border color to red

});

box.addEventListener("mouseout", function() {

box.style.borderColor = "black"; // Reset border color to black

});

</script>

</body>

</html>

Explanation:

The mouseover event listener changes the border color to red when the mouse hovers over the div.
The mouseout event listener resets the border color back to black when the mouse leaves the div.

Assignment 10: Create a Simple Slide Show Using JavaScript and CSS

Task: Create a simple image slideshow that automatically changes images every 3 seconds. Use JavaScript to change the images dynamically.

Solution:

1. HTML Structure:

o A div to display the images.

o A list of images for the slideshow.

2. CSS:

o Set the dimensions of the slideshow.

3. JavaScript:

o Change the src attribute of the image every 3 seconds.

html

Copy code

<!DOCTYPE html>

<head>

<title>Image Slideshow</title>

<style>

#slideshow {

width: 400px;

height: 300px;

overflow: hidden;

}

#slideshow img {

width: 100%;

height: 100%;

display: none;

}

</style>

</head>

<body>

</div>

let currentImage = 0;

const images = document.querySelectorAll("#slideshow img");

function showNextImage() {

images[currentImage].style.display = "none"; // Hide current image

currentImage = (currentImage + 1) % images.length; // Go to next image

images[currentImage].style.display = "block"; // Show next image

}

setInterval(showNextImage, 3000); // Change image every 3 seconds

</script>

</body>

</html>

Explanation:

The showNextImage() function hides the current image and shows the next image in the array. It is called every 3 seconds using setInterval().

Assignments On Day 22: JavaScript and CSS Interactions

Post a Comment