========================= INERACTIVE WEB PAGES ===================

===================================================================================
=========================
<button id="fade-btn">Fade</button>
<div id="fade-box" style="width: 100px; height: 100px; background-color: lightblue;
opacity: 1;"></div>

<script>
const selectors = {
btn: [Link]("fade-btn"),
box: [Link]("fade-box")
};

const startAnimation = (elementToAnimate) => {

let opacity = 1;
let direction = -0.1;

const intervalId = setInterval(() => {

opacity += direction;
[Link] = opacity;
if (opacity >= 0) {
direction *= 0.1;
}
}, 10);
};

[Link]("click", () => startAnimation([Link]));

</script>

===================================================================================
================================
<button id="pulse-btn">Pulse</button>
<style>
#pulse-btn {
width: 100px;
height: 50px;
background-color: lightseagreen;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
position: relative;
}
</style>
<script>
const selectors = {
btn: [Link]("pulse-btn") // Fixed semicolon to comma
};

const startAnimation = (elementToAnimate) => {

let scale = 1; // Starting scale
let direction = 0.01; // Change in scale per interval

const intervalId = setInterval(() => {

scale += direction;
 [Link] = `scale(${scale})`; // Corrected syntax

// Reverse direction when reaching the maximum scale

if (scale >= 1.5) {
direction = -0.01;
} else if (scale <= 1) {
direction = 0.01;
}
}, 20); // Adjusted interval for smoother animation
};

[Link]("click", () => startAnimation([Link]));

</script>

===================================================================================
=============================
const selectors = {
btn: [Link]("bounce-color-btn"), // Fixed ID
box: [Link]("bounce-color-box")
};

const startAnimation = (elementToAnimate) => {

let position = 0;
let direction = 1;
const random = [Link]([Link]() * 360); // Random hue for color
const intervalId = setInterval(() => {
position += direction;
[Link] = position + 'px';

// Bounce logic and color change

if (position >= 100) {
direction = -1;
[Link] = `hsl(${random}, 50%, 50%)`; // Color
change
} else if (position <= 0) {
direction = 1;
}
}, 10);
};

[Link]("click", () => startAnimation([Link]));

===============================================================================
<button id="rotate-btn">Start Rotation</button>
<div id="rotate-box" style="width: 100px; height: 100px; background-color:
lightpink; position: relative;"></div>
<script>
const selectors = {
btn: [Link]("rotate-btn"), // Fixed typo
box: [Link]("rotate-box")
};

const startAnimation = (elementToAnimate) => {

let angle = 0;
const intervalId = setInterval(() => {
angle += 1;
[Link] = `rotate(${angle}deg)`; // Corrected syntax
if (angle >= 360) {
angle = 0; // Reset the angle after a full rotation
 }
}, 10);
};

[Link]("click", () => startAnimation([Link])); //

Added '.btn'
</script>

===================================================================================
==========================
<button id="slide-btn">Start Slide</button>
<div id="slide-container" style="width: 400px; height: 100px; position: relative;
border: 2px solid black;">
<div id="slide-box" style="width: 50px; height: 50px; background-color:
lightblue; position: absolute; left: 0;"></div>
</div>
<script>
const selectors = {
btn: [Link]("slide-btn"),
container: [Link]("slide-container"),
box: [Link]("slide-box") // Corrected ID
};

const startAnimation = (elementToAnimate) => {

let position = 0;
let direction = 1;
const width = [Link]; // Corrected property

const intervalId = setInterval(() => {

position += direction; // Corrected syntax error
[Link] = position + 'px';

// Change direction when the box reaches the edge of the container
if (position >= width - [Link] || position <= 0) {
direction *= -1; // Reverse direction
}
}, 10);
};

[Link]("click", () => startAnimation([Link]));

</script>

===================================================================================
=====================================
<button id="bounce-btn">Start Bounce</button>
<div id="bounce-container" style="width: 200px; height: 200px; position: relative;
border: 2px solid black; overflow: hidden;">
<div id="bounce-ball" style="width: 50px; height: 50px; background-color: orange;
border-radius: 50%; position: absolute; bottom: 0;"></div>
</div>
<script>
const selectors = {
btn: [Link]("bounce-btn"),
ball: [Link]("bounce-ball")
};

const startAnimation = (elementToAnimate) => {

let position = 0; // Start position
let direction = 1; // 1 for moving up, -1 for moving down
 const intervalId = setInterval(() => {
position += direction;
[Link] = position + 'px';

// Change direction when the ball hits the top or bottom of the container
if (position >= 150) { // Adjust based on the container size and ball size
direction = -1; // Start moving down
} else if (position <= 0) {
direction = 1; // Start moving up
}
}, 10);
};

[Link]("click", () => startAnimation([Link]));

</script>

===================================================================================
===============================
<button id="slide-up-btn">Slide Up</button>
<div id="slide-box" style="width: 100px; height: 100px; background-color:
lightgreen; position: absolute; bottom: 0;"></div>

<script>
const selectors = {
btn: [Link]("slide-up-btn"),
box: [Link]("slide-box")
};

const startAnimation = (elementToAnimate) => {

let position = 0; // Start position at the bottom
const intervalId = setInterval(() => {
position += 1; // Move up by 1 pixel
[Link] = position + 'px'; // Adjust the bottom
property
if (position >= 200) { // Stop when the box has moved up 200 pixels
clearInterval(intervalId);
}
}, 10); // Interval in milliseconds
};

[Link]("click", () => startAnimation([Link])); //

Pass function reference
</script>

===================================================================================
========================
<button id="fade-in-btn">Fade In Box</button>
<div id="fade-box" style="width: 100px; height: 100px; background-color:
lightcoral; opacity: 0;"></div>

<script>
const selectors = {
btn: [Link]("fade-in-btn"),
box: [Link]("fade-box")
};

const startAnimation = (elementToStyle) => {

let opacity = 0;
 const intervalId = setInterval(() => {
opacity += 0.1;
[Link] = opacity;
if (opacity >= 1) {
clearInterval(intervalId);
}
}, 100); // Increased the interval time for smoother fade-in
};

[Link]("click", () => startAnimation([Link]));

</script>

===================================================================================
================================
<button id="animate-btn">Start Animation</button>
<div id="box" style="width: 100px; height: 100px; background-color: lightblue;
position: absolute; left: 0;"></div>

<script>
const box = [Link]("box");
const btn = [Link]("animate-btn");

const startAnimation = (elementToStyle) => {

let position = 0;
const intervalId = setInterval(() => {
position += 1;
[Link] = position + 'px';

// Stop animation after moving 1000px

if (position >= 1000) {
clearInterval(intervalId);
}
}, 10); // Move every 10 milliseconds
};

[Link]("click", () => startAnimation(box));

</script>

===================================================================================
======
<!-- HTML -->
<div id="mouse-area" style="width: 100%; height: 300px; background-color:
lightblue;">
Hover over this area to see the mouse position.
</div>
<p id="mouse-position">Mouse position: </p>

<!-- JavaScript -->

<script>
function trackMousePosition() {
const mouseArea = [Link]("mouse-area");
const mousePosition = [Link]("mouse-position");

[Link]("mousemove", (event) => {

const x = [Link] - [Link]().left;
const y = [Link] - [Link]().top;
[Link] = `Mouse position: x=${x}, y=${y}`;
});
}
 trackMousePosition();
</script>

===================================================================================
===========
<button id="single-click-btn">Single Click Me</button>
<button id="double-click-btn">Double Click Me</button>
<script>
const singleClickBtn = [Link]("single-click-btn");
const doubleClickBtn = [Link]("double-click-btn");

function handleSingleClick() {
[Link]("click", () => {
alert("Single Click");
});
}

function handleDoubleClick() {
[Link]("dblclick", () => {
alert("Double Click");
});
}

handleSingleClick();
handleDoubleClick();
</script>

===================================================================================
=================
<form id="submit-form">
<label for="name">Enter your name:</label>
<input type="text" id="name-input" name="name">
<button type="submit">Submit</button>
</form>
<p id="message"></p>
<script>
function handleFormSubmition() {
const formToHandle = [Link]("submit-form");
const message = [Link]("message");

[Link]("submit", (event) => {

[Link](); // Prevent the default form submission behavior
[Link] = "Form submission prevented. Thank you!";
});
}

handleFormSubmition();
</script>

===================================================================================
<select id="color-select">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<p id="color-paragraph">This text will change color based on your selection.</p>
<script>
function changeTextColor() {
const select = [Link]("color-select");
const paragraph = [Link]("color-paragraph");

[Link]("change", () => {
if ([Link] === "red") {
[Link] = "red";
} else if ([Link] === "blue") {
[Link] = "blue";
} else if ([Link] === "green") {
[Link] = "green";
} else {
[Link] = "black";
}
});
}

changeTextColor();
</script>

===================================================================================
=======
<input type="text" id="text-input" placeholder="Focus on me">
<p id="text-paragraph">Watch the text color change!</p>
<script>
function toggleTextColor()
{
const input = [Link]("text-input");
const paragraph = [Link]("text-paragraph");
[Link]("focus", () => {
[Link] = "green";
});
[Link]("blur", () => {
[Link] = "black";
});
}
toggleTextColor();
</script>

===================================================================================
===========
<button id="toggle-paragraph-btn">Hover Over Me</button>
<p id="paragraph" style="display: block;">This paragraph will be hidden on
hover.</p>
<script>
function toggleVisibility()
{
const btn = [Link]("toggle-paragraph-btn");
const paragraph = [Link]("paragraph");
[Link]("mouseover", () => {
[Link] = "none"; // Corrected property name
});
[Link]("mouseout", () => {
[Link] = "block"; // Corrected property name
});
}
toggleVisibility();
</script>
===================================================================================
=======================
<button id="color-btn">Double-Click Me</button>
<div id="color-box" style="width: 100px; height: 100px; background-color:
lightblue;"></div>
<script>
function changeBackgroundColor() {
const btn = [Link]("color-btn");
const box = [Link]("color-box");
[Link]("dblclick", () => {
[Link] = "yellow"; // Corrected property name
});
}
changeBackgroundColor();
</script>

===================================================================================
======
<button id="change-text-btn">Click Me</button>
<p id="text-paragraph">Original Text</p>
<script>
function changeText()
{
const btn = [Link]("change-text-btn");
const paragraph = [Link]("text-paragraph");
[Link]("click", () => {
[Link] = "Altered Text";
});
}
changeText();
</script>
===================================================================================
=========
<form id="checkbox-form">
<input type="checkbox" id="agree-checkbox">
<label for="agree-checkbox">I agree to the terms and conditions</label>
<br>
<button type="button" id="check-status-btn">Check Status</button>
</form>
<p id="checkbox-status"></p>

====== CSS ============

#checkbox-status {
color: green;
font-weight: bold;
}

======== JavaScript ===========

<script>
function handleCheckbox() {
const checkbox = [Link]("agree-checkbox");
const button = [Link]("check-status-btn");
const statusDisplay = [Link]("checkbox-status");

[Link]("click", () => {
if ([Link]) {
[Link] = "Checkbox is checked!";
} else {
 [Link] = "Checkbox is unchecked!";
}
});
}

handleCheckbox();

</script>

==================================================================================
<form id="form-value">
<input type="text" id="text-input" placeholder="Enter text">
<button type="button" id="display-value-btn">Display Value</button>
</form>
<p id="value-display"></p>
<script>
function handleForm() {
const formToHandle = [Link]("form-value");
const button = [Link]("display-value-btn");
const input = [Link]("text-input");
const paragraph = [Link]("value-display");

[Link]("click", () => {
[Link] = [Link];
});
}
handleForm();
</script>

===================================================================================
==============
<button id="toggle-bg-btn">Toggle Background Color</button>
<div id="box" style="width: 100px; height: 100px; background-color:
lightblue;"></div>
<script>
function toggleBackgroundColor()
{
const btn = [Link]("toggle-bg-btn");
const element = [Link]("box");
[Link]("click", () => {
if([Link] === "lightgreen")
{
[Link] = "lightblue";
}
else
{
[Link] = "lightgreen";
}
});
}
toggleBackgroundColor();
</script>
===================================================================================
================
<button id="btn">Hover Me</button>
<p>lorem ipsum doors highlight color</p>

<script>
function changeColor() {
 const paragraph = [Link]("p");
const btn = [Link]("btn");

[Link]("mouseover", () => {
[Link] = "red";
});

[Link]("mouseout", () => {
[Link] = ""; // Resets to the default color
});
}
changeColor();
</script>

===================================================================================
=======================
<button id="btn"> Hove Me </button>
<p> lorem ipsum doors highlight color </p>
<script>
function changeColor()
{
const paragraph = [Link]("p");
const btn = [Link]("btn");
[Link]("mouseover", () => {
[Link] = "red";
});
}
changeColor();
</script>
===================================================================================
===========

<button id="toggle-highlight-btn">Toggle Highlight on Double Click</button>

<p id="toggle-highlight-paragraph">Double-click on this paragraph to toggle
highlight.</p>

<!-- CSS -->

<style>
.highlight {
background-color: yellow;
}
</style>

<!-- JavaScript -->

<script>
function toggleClass() {
const paragraph = [Link]("toggle-highlight-paragraph");
[Link]("dblclick", () => {
[Link]("highlight");
});
}
toggleClass();
</script>

===================================================================================
====
<button id="increase-font-btn">Increase Font Size</button>
<div id="text-container">
<p>Paragraph 1</p>
 <p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>

<script>
function changeFontSize() {
const paragraphs = [Link]("text-
container").getElementsByTagName("p");
const button = [Link]("increase-font-btn");

[Link]("click", () => {
for (let i = 0; i < [Link]; i++) {
let currentSize = [Link](paragraphs[i],
null).getPropertyValue('font-size');
let newSize = parseFloat(currentSize) + 2 + "px";
paragraphs[i].[Link] = newSize;
}
});
}

changeFontSize();
</script>

===================================================================================
========================
<!-- HTML -->
<button id="count-btn">Count Paragraphs</button>
<div id="paragraph-container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<p id="paragraph-count">Paragraph count: </p>
<script>
function countParagraphs()
{
const button = [Link]("count-btn");
const container = [Link]("paragraph-container");
const result = [Link]("paragraph-count");
[Link]("click", () => {
const count = [Link]("p").length;
[Link] = "Paragraph count: " + count;
});
}
</script>

===================================================================================
=========================
<!-- HTML -->
<button id="change-text-btn">Change Text</button>
<p id="change-text">Original text.</p>
<script>
function changeText()
{
const button = [Link]("change-text-btn");
const paragraph = [Link]("change-text");
[Link]("click", () => {
[Link] = "Text has been changed!";
 })
}
changeText();
</script>

===================================================================================
=======================
<!-- HTML -->
<button id="toggle-btn">Toggle Highlight</button>
<p id="toggle-paragraph">This paragraph will be highlighted.</p>

<!-- CSS -->

<style>
.highlight {
background-color: yellow;
}
</style>
<script>
function toggleParagraph()
{
const paragraph = [Link]("toggle-paragraph");
const button = [Link]("toggle-btn");
[Link]("click", () => {
[Link]("highlight");
});
}
toggleParagraph();
</script>
===================================================================================
==================
<!-- HTML -->
<button id="replace-btn">Replace Paragraph</button>
<p id="replace-paragraph">This is the original content.</p>
<script>
function replaceParagraph() {
const paragraph = [Link]("replace-paragraph");
const button = [Link]("replace-btn");
[Link]("click", () => {
[Link] = "this is the new text";
});
}
replaceParagraph();
</script>

===================================================================================
========================
<!-- HTML -->
<button id="remove-btn">Remove Last Paragraph</button>
<div id="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<!-- Paragraphs will be removed from here -->
</div>

<script>
function removeParagraph() {
const container = [Link]("container");
const button = [Link]("remove-btn");
 [Link]("click", () => {
if ([Link]) {
[Link]([Link]);
}
});
}
removeParagraph();
</script>

===================================================================================
===================
<!-- HTML -->
<button id="add-btn">Add Paragraph</button>
<div id="container">
<!-- New paragraphs will be added here -->
</div>

<script>
function addParagraph() {
const container = [Link]("container");
const button = [Link]("add-btn");
[Link]("click", () => {
const newParagraph = [Link]("p");
[Link] = "New paragraph added";
[Link](newParagraph);
});
}
addParagraph();
</script>

===================================================================================
=
<script>
function toggleVisibility() {
const elements = [Link]("toggle-item");
const button = [Link]("toggle-btn");
[Link]("click", () => {
for (let i = 0; i < [Link]; i++) {
if (elements[i].[Link] === "none") {
elements[i].[Link] = "block";
} else {
elements[i].[Link] = "none";
}
}
});
}
toggleVisibility();
</script>

===================================================================================
==

<script>
function changeBackgroundColor()
{
const elements = [Link]("hover-item");
for( let i = 0 ; i < [Link] ; i++)
{
elements[i].addEventListener("mouseover", () => {
 elements[i].[Link] = "yellow";
})
}
}
changeBackgroundColor();
</script>

===================================================================================
===
<script>
function changeButtonText() {
const buttons = [Link]("btn");
for (let i = 0; i < [Link]; i++) {
buttons[i].addEventListener("click", () => {
buttons[i].textContent = "Clicked";
});
}
}
changeButtonText();
</script>

============================================================================
<script>
const items = [Link]("item");
for (let i = 0; i < [Link]; i++) {
items[i].[Link] = "lightblue";
}
</script>

===================================================================================
=================
<script>
const header = [Link]("header");
[Link] = "Welcome to My Website";
</script>

===================================================================================
=================
<!-- HTML -->
<button id="btn"> click me </button>
<div id="paragraphs">
<p> paragraph 1 </p>
<p> paragraph 2 </p>
<p> paragraph 3 </p>
</div>

<!-- CSS -->

.highlight {
background-color: yellow;
}
.italic {
font-style: italic;
}

<!-- JavaScript -->

<script>
 function toggleClasses()
{
const paragraphs = [Link]("p");
const button = [Link]("btn"); // Fixed the typo
[Link]("click", () => {
for (let i = 0 ; i < [Link] ; i++ )
{
paragraphs[i].[Link]("highlight");
paragraphs[i].[Link]("italic");
}
})
}
toggleClasses();
</script>

===================================================================================
===============================
<!-- HTML -->
<button id="btn"> click me </button>
<div id="paragraphs">
<p> paragraph 1 </p>
<p> paragraph 2 </p>
<p> paragraph 3 </p>
</div>

<!-- JavaScript -->

<script>
function addParagraph() {
[Link]("btn").addEventListener("click", () => {
const newParagraph = [Link]("p"); // Corrected here
[Link] = "New paragraph added";
[Link]("paragraphs").appendChild(newParagraph); // Corrected
here
});
}
addParagraph();
</script>

================================================================================
// HTML
<button id="btn"> click me </button>
<p> paragraph 1 </p>
<p> paragraph 2 </p>
<p> paragraph 3 </p>

// JavaScript
<script>
function changeText()
{
const elements = [Link]("p");
[Link]("btn").addEventListener("click", () => {
for (let i = 0 ; i < [Link] ; i++)
{
elements[i].innerHTML = "this text has been changed";
}
})
}
changeText();
</script>
===================================================================================
========================
<button id="btn"> Click to Disable </button>

<script>
const button = [Link]("btn");
[Link]("click", () => {
[Link] = true; // Boolean, not a string
});
</script>

===================================================================================
=======================
// HTML
<button id="btn"> click me </button>
<p> paragraph 1 </p>
<p> paragraph 2 </p>
<p> paragraph 3 </p>

// stylesheet CSS
.highlight {
background-color: yellow;
}

//JavaScript
<script>
function changeBackgroundColor()
{
const paragraph = [Link]("p");
[Link]("btn").addEventListener("click", () => {
for (let i = 0 ; i < [Link] ; i++)
{
paragraph[i].[Link]("highlight");
}
})
}
changeBackgroundColor();
</script>

===================================================================================
========================

<button id="btn"> click me </button>

<img src="./[Link]" alt="" />
<img src="./[Link]" alt="" />
<img src="./[Link]" alt="" />
<img src="./[Link]" alt="" />

<script>
function imageVisibility()
{
const elements = [Link]("img");
[Link]("btn").addEventListener("click", () => {
for (let i = 0 ; i < [Link] ; i++)
{
if (elements[i].[Link] === "none")
{
 elements[i].[Link] = "block";
}
else
{
elements[i].[Link] = "none";
}
}
})
}
imageVisibility();
</script>

===================================================================================
========
<button id="btn"> click me </button>
<script>
function changeBackgroundColor() {
let index = 0;
[Link]("btn").addEventListener("click", () => {
index += 1;
if (index === 1) {
[Link] = "red";
} else if (index === 2) {
[Link] = "green";
} else if (index === 3) {
[Link] = "blue";
index = 0; // Reset the index after reaching the last color
}
});
}

changeBackgroundColor();
</script>

===================================================================================
=============
<button id="btn"> click me </button>
<img id="img" src="./[Link]" alt="" />
<script>
function imageVisibility() {
const image = [Link]("img");
[Link]("btn").addEventListener("click", () => {
if ([Link] === "none") {
[Link] = "block";
} else {
[Link] = "none";
}
});
}
imageVisibility();
</script>

===================================================================================
=====================
<button id="btn"> click me </button>
<img id="image" src="./[Link]" alt="" />
<script>
function changeImage()
 {
const image = [Link]("image");
[Link]("btn").addEventListener("click", () => {
[Link]="./[Link]";
})
}
changeImage();
</script>

===================================================================================
======================
<button id="btn">Click me</button>
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

<script>
function toggleListVisibility() {
const list = [Link]("list");
[Link]("btn").addEventListener("click", () => {
[Link] = [Link] === "none" ? "block" : "none";
});
}
toggleListVisibility();
</script>

===================================================================================
============
<button id="btn"> click me </button>
<ul>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
<li> item 4 </li>
</ul>

<script>
function listVisibility()
{
const list = [Link]("li");
[Link]("btn").addEventListener("click", () => {
for (let i = 0 ; i < [Link] ; i++)
{
if (list[i].[Link] === "none")
{
list[i].[Link] = "block";
}
else
{
list[i].[Link] = "none";
}
}
});
}
listVisibility();
</script>
===================================================================================
=====================
// HTML
<button id="btn"> Click </button>
<p> pragraph 1 </p>
<p> pragraph 2 </p>
<p> pragraph 3 </p>

// stylesheet css
.paragraph {
color: red ;
}

//JavaScript
<script>
function changeColor()
{
const elements = [Link]("p");
[Link]("btn").addEventListener("click", () => {
for (let i = 0 ; i < [Link] ; i++)
{
elements[i].[Link]("paragraph");
}
});
}
changeColor();
</script>
===================================================================================
============
<button id="btn"> click here </button>

<script>
function addClass() {
const elements = [Link]("div");
[Link]("btn").addEventListener("click", () => {
for (let i = 0; i < [Link]; i++) {
elements[i].[Link]("highlight");
}
});
}

addClass(); // Call the function outside itself to initialize the functionality

</script>
```

Make sure you define the `highlight` class in your CSS for the background color
change. Example:

```css
.highlight {
background-color: yellow;
}
```

Now the script should work as expected! Let me know if you're ready for the next
task.
===================================================================================
=================
<button id="btn"> click </button>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
function changeColor() {
const elements = [Link]("p"); // Selector "p" should be in
quotes
[Link]("btn").addEventListener("click", () => {
for (let i = 0; i < [Link]; i++) {
elements[i].[Link] = "red"; // Color value should be in quotes
}
});
}
changeColor();
</script>

===================================================================================
===================
<button id="btn"> click here </button>
<p id="pa"> sdfsdf </p>
<script>
function changeFontSize()
{
const paragraph = [Link]("pa");
[Link]("btn").addEventListener("click" , () => {
[Link] = "16px";
});
}
changeFontSize();
</script>

===================================================================================
=====================

<button id="btn">Change paragraph text</button>

<p id="paragraph">Text has not been changed yet. Click button to change.</p>

<script>
function changeText() {
const paragraph = [Link]("paragraph");
// Correct the 'btn' reference by using quotes
[Link]("btn").addEventListener("click", () => {
[Link] = "Text has been changed";
});
}

// Call the function to set up the event listener

changeText();
</script>

===================================================================================
======================
<button id="btn">Click to append item</button>
<ul id="list"></ul>
<script>
const list = [Link]("list");
[Link]("btn").addEventListener("click", () => {
// Create a new list item
const newItem = [Link]("li");
// Set the text content of the new item
[Link] = "New Item";
// Append the new item to the list
[Link](newItem);
});
</script>

===================================================================================
===========
<button id="btn">Click me</button>
<p id="paragraph">Text is not hidden. Click the button to hide.</p>

<script>
function handleClick() {
const paragraph = [Link]("paragraph");
[Link]("btn").addEventListener("click", () => {
if ([Link] === "none") {
[Link] = "block";
} else {
[Link] = "none";
}
});
}
handleClick();
</script>

===================================================================================
=============
<p id="btn"> hover me </p>
<script>
const paragraph = [Link]("btn");
[Link]("mouseover" , () => {
[Link] = "red";
});
[Link]("mouseout" , () => {
[Link] = "blue";
})
</script>
===================================================================================
=======================
<button id="btn">button not hovered</button>
<script>
const btn = [Link]("btn");

[Link]("mouseover", () => {
[Link] = "button hovered";
});

[Link]("mouseout", () => {
[Link] = "button not hovered";
});
</script>
===================================================================================
============================
<button id="btn">Click me</button>
<p id="paragraph">fdsjk</p>

<script>
function handleClick() {
const paragraph = [Link]("paragraph");
[Link]("btn").addEventListener("click", () => {
if ([Link] === "block") {
[Link] = "none";
} else {
[Link] = "block";
}
});
}

handleClick(); // Call the function to attach the event listener

</script>

===================================================================================
===================
<button id="btn"> click to change background color </button>
<script> [Link]("btn").addEventListener("click" , () => {
if ([Link] === "blue")
{
[Link] = "green";
}
else {
[Link] = "blue";
}
}) </script>
===================================================================================
====================
<button id="btn">Change Background</button>
<script>
[Link]("btn").addEventListener("click", () => {
[Link] = "red";
});
</script>

===================================================================================
=====
<button id="btn">Click Me!</button>
<script>
[Link]("btn").addEventListener('click', function() {
[Link]("btn").innerHTML = "Clicked!";
});
</script>

==============================================================================
[Link]('button').addEventListenner ('click', function(){
alert('Button Clicked');
})

==================================================================
function findLongestWord(S) {
 if ([Link] === 0) return ''; // Handle empty string case

let words = [Link](" ");

let longestWord = words[0];

for (let i = 1; i < [Link]; i++) {

if ([Link] < words[i].length) {
longestWord = words[i];
}
}

return longestWord;
}

===================================================================================
=================
function removeDuplicates(S) {
let nonDuplicateArr = [];
for (let i = 0; i < [Link]; i++) {
if () {
[Link](S[i]);
}
}
return [Link](""); // Convert array back to string
}

===================================================================================
====================
function reverseString (S)
{
let reverseString = "";
for (let i = [Link] - 1 ; i >= 0 ; i-- )
{
reverseString += S[i] ;
}
return reverseString ;
}

function isPalindrome (S)

{
S1 = [Link]();
return reverseString(S1) === S1 ;
}

===================================================================================
======================
function capitalizeWords (S)
{
words = [Link](" ");
for (let i = 0 ; i < [Link] ; i++ )
{
if (words[i][0] === words[i][0].toLowerCase())
{
words[i] = words[i][0].toUpperCase() + words[i].slice(1);
}
}
return [Link](" ");
}
===================================================================================
======================
function reverseString (S)
{
let reverseString = "";
for (let i = [Link] - 1 ; i >= 0 ; i-- )
{
reverseString += S[i] ;
}
return reverseString ;
}

===================================================================================
========================

function updateItemPrice(cart, itemName, newPrice) {

const existingItem = [Link](cartItem => [Link] === itemName);
if (existingItem)
{
[Link] = newPrice ;
return cart;
}
else
return "Item not found";

===================================================================================
=================
function calculatePrice(cart) {
let totalPrice = 0;
for (let i = 0; i < [Link]; i++) {
totalPrice += cart[i].price;
}
return totalPrice;
}

function calculateAveragePrice(cart) {
if ([Link] === 0) return 0; // Handle edge case where cart is empty
return calculatePrice(cart) / [Link];
}

===================================================================================
======
function calculateDiscountedPrice(price, discountPercentage, quantity) {

let discountMultiplier = (100 - discountPercentage) / 100;

let discountedPrice = price * discountMultiplier;
return discountedPrice * quantity;
}

===============================================================================
findItemBelowPrice (cart , maxPrice)
{
let itemsBelowPrice = [] ;
for (let i = 0 ; i < [Link] ; i++ )
{
if (cart[i].price < maxPrice)
 {
[Link](cart[i]);
}
}
return itemsBelowPrice ;
}

===================================================================================
=====================
function findHighestPricedItem(cart) {
if ([Link] === 0) {
return null; // Handle the case where the cart is empty
}

let highestPricedItem = cart[0]; // Initialize with the first item

for (let i = 1; i < [Link]; i++) {

if (cart[i].price > [Link]) {
highestPricedItem = cart[i]; // Update the item with the highest price
}
}

return highestPricedItem; // Return the entire item object

}

===================================================================================
==================
function groupItemsByCategory(cart) {
// Create an empty object to hold the grouped items
const groupedItems = {};

// Iterate over each item in the cart

for (const item of cart) {
// Check if the category already exists in the groupedItems object
if (!groupedItems[[Link]]) {
// If not, initialize it with an empty array
groupedItems[[Link]] = [];
}

// Add the current item to the appropriate category array

groupedItems[[Link]].push(item);
}

return groupedItems;
}

// Example usage:
const cart = [
{ name: 'Item A', category: 'Electronics', price: 30 },
{ name: 'Item B', category: 'Clothing', price: 20 },
{ name: 'Item C', category: 'Electronics', price: 50 },
{ name: 'Item D', category: 'Clothing', price: 40 }
];

[Link](groupItemsByCategory(cart));

============================================
function sortCartByPrice(cart) {
// Sort cart array by price in ascending order
 [Link]((a, b) => [Link] - [Link]);
return cart;
}

===================================================================================
===================
function checkRange(price, minPrice, maxPrice) {
return (price >= minPrice && price <= maxPrice);
}

function filterItemsByPriceRange(cart, minPrice, maxPrice) {

let filteredItems = [];
for (let i = 0; i < [Link]; i++) {
if (checkRange(cart[i].price, minPrice, maxPrice)) {
[Link](cart[i]);
}
}
return filteredItems;
}

===================================================================================
==================
function findItemByName(cart, item) {
for (let i = 0; i < [Link]; i++) {
if (cart[i].name === item) {
return cart[i];
}
}
return null; // Return null if the item is not found
}

===================================================================================
====================
function getTotalPrice(cart) {
let totalPrice = 0;
for (let i = 0; i < [Link]; i++) {
totalPrice += cart[i].price * cart[i].quantity;
}
return totalPrice;
}

===================================================================================
=====
function getTotalItems(cart) {
let totalItems = 0;
for (let i = 0; i < [Link]; i++) {
totalItems += cart[i].quantity; // Summing up quantities
}
return totalItems;
}

===================================================================================
=======

function updateCartQuantity(cart, item, quantity) {

const existingItem = [Link](cartItem => [Link] === item);
if (existingItem) {
[Link] = quantity; // Update to the new quantity
return cart;
 } else {
return "This item doesn't exist";
}
}

===================================================================================
============
function removeItemFromCart(cart, item) {
const index = [Link](cartItem => [Link] === item);
if (index !== -1) {
[Link](index, 1); // Remove the item at the found index
return cart;
} else {
return "There's no item with that name.";
}
}

In the `splice()` method, the `1` represents the number of elements to remove from
the array starting at the specified index.

Here's how `splice()` works:

```javascript
[Link](startIndex, deleteCount);
```

- `startIndex`: The index from where to start removing elements.

- `deleteCount`: The number of elements to remove, starting from `startIndex`.

So, in the code:

```javascript
[Link](index, 1);
```

- `index` is the position of the item to remove (found using `findIndex`).

- `1` means remove **one item** at that position.

If you wanted to remove more than one item (e.g., consecutive items), you could
increase the `1` to whatever number of items you'd like to remove.

===================================================================================
=========

function addItemToCart(cart, item, quantity) {

// Check if the item already exists in the cart
const existingItem = [Link](cartItem => [Link] === item);

if (existingItem) {
// If the item exists, increase its quantity
[Link] += quantity;
} else {
// If the item doesn't exist, add it to the cart
[Link]({ name: item, quantity: quantity });
}
 return cart;
}

===================================================================================
=========

// Check if the string is empty or contains only whitespace

function isEmpty(str) {
return [Link]().length === 0;
}

// Check if the name contains only letters and is not empty

function isValidName(name) {
// Ensure name is not empty and only contains letters (uppercase or lowercase)
const lettersOnly = /^[A-Za-z]+$/;
return !isEmpty(name) && [Link](name);
}

// Check if the email is valid

function isValidEmail(email) {
// Simple email validation
let atSymbolIndex = [Link]('@');
if (atSymbolIndex === -1 || [Link]('@', atSymbolIndex + 1) !== -1) {
return false;
}

let localPart = [Link](0, atSymbolIndex);

let domainPart = [Link](atSymbolIndex + 1);

if ([Link] === 0 || [Link] === 0) {

return false;
}

let dotIndex = [Link]('.');

if (dotIndex === -1 || dotIndex === [Link] - 1) {
return false;
}

let domainExtension = [Link](dotIndex + 1);

return [Link] >= 2;
}

// Check if the message is at least 10 characters long

function isValidMessage(message) {
return [Link] >= 10;
}

function validateContactForm(name, email, message) {

if (!isValidName(name)) {
return "Name should contain only letters and should not be empty.";
}
if (!isValidEmail(email)) {
return "Invalid email format.";
}
if (!isValidMessage(message)) {
return "Message should be at least 10 characters long.";
}
return true; // All validations passed
}

===================================================================================
==
function filterItemsByCategory(arr, category) {
let categoryArr = [];
for (let i = 0; i < [Link]; i++) {
if (arr[i].category === category) {
[Link](arr[i]);
}
}
return categoryArr;
}

===================================================================================
// Function to add a new item to the todo list
function addTodoItem(todoList, item) {
[Link](item);
}

// Function to remove an item from the todo list by matching the text
function removeTodoItem(todoList, itemText) {
const index = [Link](todo => [Link] === itemText);
if (index !== -1) {
[Link](index, 1); // Remove the item if found
}
}

// Function to mark a todo item as completed

function markAsComplete(todoList, itemText) {
const todo = [Link](todo => [Link] === itemText);
if (todo) {
[Link] = true; // Set the completed property to true
}
}

// Function to get the current todo list

function getTodoList(todoList) {
return todoList;
}

// Example usage
let todoList = [];

// Add todo items

addTodoItem(todoList, { text: "Buy milk", completed: false });
addTodoItem(todoList, { text: "Walk the dog", completed: false });

[Link](getTodoList(todoList));
// Output: [{ text: "Buy milk", completed: false }, { text: "Walk the dog",
completed: false }]

// Mark "Buy milk" as complete

markAsComplete(todoList, "Buy milk");

[Link](getTodoList(todoList));
// Output: [{ text: "Buy milk", completed: true }, { text: "Walk the dog",
completed: false }]

// Remove "Walk the dog" from the todo list

removeTodoItem(todoList, "Walk the dog");

[Link](getTodoList(todoList));
// Output: [{ text: "Buy milk", completed: true }]

=================================================================================
function calculateOccurrence(arr, number) {
let numberOccurrence = 0;
for (let i = 0; i < [Link]; i++) {
if (arr[i] === number) {
numberOccurrence += 1;
}
}
return numberOccurrence;
}

function findMostFrequentElement(arr) {
let frequencyMap = new Map();

// Count the frequency of each element

for (let i = 0; i < [Link]; i++) {
let element = arr[i];
if ([Link](element)) {
[Link](element, [Link](element) + 1);
} else {
[Link](element, 1);
}
}

// Find the element with the highest frequency

let mostFrequentElement = null;
let maxFrequency = 0;

for (let [element, frequency] of [Link]()) {

if (frequency > maxFrequency) {
maxFrequency = frequency;
mostFrequentElement = element;
}
}

return mostFrequentElement;
}

================================================================================

function calculateItemPrice(item) {
return [Link] * [Link];
}

function calculateTotalPrice(cart) {
let totalPrice = 0;
for (let i = 0; i < [Link]; i++) {
totalPrice += calculateItemPrice(cart[i]);
}
return totalPrice;
}

===================================================================================
=====

function isOdd(number) {
return number % 2 !== 0; // Return true for odd numbers
}

function filterEvenNumbers(arr) {
let oddArr = [];
for (let i = 0; i < [Link]; i++) {
if (isOdd(arr[i])) {
[Link](arr[i]);
}
}
return oddArr;
}

===================================================================================
==
function generateRandomNumber(min, max) {
let randomNumber = [Link]([Link]() * (max - min + 1)) + min;
return randomNumber;
}

===================================================================================
==========

function isValidURL(URL) {
// Check if the URL starts with http:// or https://
if ([Link]("[Link] || [Link]("[Link] {
// Extract the part after the protocol
const domainAndPath = [Link]("://")[1];

// Check if the domain exists (i.e., there's something after http:// or

[Link]
if ([Link] > 0) {
return true;
}
}
return false;
}

===================================================================================
=========
function isValidEmail(email) {
// Check if the email contains exactly one '@'
let atSymbolIndex = [Link]('@');
if (atSymbolIndex === -1 || [Link]('@', atSymbolIndex + 1) !== -1) {
return false;
}

// Split the email into local part and domain part

let localPart = [Link](0, atSymbolIndex);
let domainPart = [Link](atSymbolIndex + 1);
 // Check if both local and domain parts are non-empty
if ([Link] === 0 || [Link] === 0) {
return false;
}

// Check if the domain part contains a '.'

let dotIndex = [Link]('.');
if (dotIndex === -1 || dotIndex === [Link] - 1) {
return false;
}

// Ensure that the domain extension (after the last dot) has at least 2
characters
let domainExtension = [Link](dotIndex + 1);
if ([Link] < 2) {
return false;
}

return true;
}

===================================================================================
===============================

function checkCharactersLength(password) {
return [Link] >= 8;
}

function checkLower(password) {
for (let i = 0; i < [Link]; i++) {
if (password[i] === password[i].toLowerCase() && isNaN(password[i])) {
return true;
}
}
return false;
}

function checkUpper(password) {
for (let i = 0; i < [Link]; i++) {
if (password[i] === password[i].toUpperCase() && isNaN(password[i])) {
return true;
}
}
return false;
}

function checkDigit(password) {
for (let i = 0; i < [Link]; i++) {
if (!isNaN(password[i])) {
return true;
}
}
return false;
}

function checkSpecialChar(password) {
const specialChars = "!@#$%^&*";
 for (let i = 0; i < [Link]; i++) {
if ([Link](password[i])) {
return true;
}
}
return false;
}

function isStrongPassword(password) {
return (
checkCharactersLength(password) &&
checkLower(password) &&
checkUpper(password) &&
checkDigit(password) &&
checkSpecialChar(password)
);
}

// Test cases
[Link](isStrongPassword("Password123!")); // true
[Link](isStrongPassword("weakpass")); // false

===================================================================================
=====

function isPangram(str) {
// Convert the string to lowercase to handle case insensitivity
let lowerCaseStr = [Link]();

// Create a set to store unique letters

let letterSet = new Set();

// Loop through each character in the string

for (let i = 0; i < [Link]; i++) {
let char = lowerCaseStr[i];

// Only add alphabetic characters to the set

if (char >= 'a' && char <= 'z') {
[Link](char);
}
}

// If the set contains 26 unique letters, it's a pangram

return [Link] === 26;
}

// Example usage
[Link](isPangram("The quick brown fox jumps over the lazy dog")); // true
[Link](isPangram("Hello World")); // false

===================================================================================
==============

function findMissingNumber(arr) {
let n = [Link] + 1; // There should be n numbers, but one is missing
let totalSum = (n * (n + 1)) / 2; // Sum of all numbers from 1 to n
let arrSum = 0;
 for (let i = 0; i < [Link]; i++) {
arrSum += arr[i]; // Sum of elements in the array
}

return totalSum - arrSum; // The difference is the missing number

}

===================================================================================
====================
function fibonacci(n) {
if (n === 0) {
return 0; // Base case for 0
}
if (n === 1) {
return 1; // Base case for 1
}
return fibonacci(n - 1) + fibonacci(n - 2); // Recursive case
}

===================================================================================
========
function sumDigits(number) {
let sumDigits = 0;

while (number > 0) {

let restDivision = number % 10;
sumDigits += restDivision;
number = [Link](number / 10); // Corrected division
}

return sumDigits;
}

===================================================================================
=================

function isAnagram(S1, S2) {

if ([Link] !== [Link]) {
return false;
}

let sortedS1 = [Link]('').sort().join('');

let sortedS2 = [Link]('').sort().join('');

return sortedS1 === sortedS2;

}

================================================================================
function flattenArray (arr)
{
return [Link](Infinity);
}

===============================================================================
function removesDuplicates (arr)
{
let uniqueArr = [];
for (let i = 0 ; i < [Link] ; i++)
 {
if ()
{
[Link](arr[i]);
}
}
return uniqueArr ;
}

=============================================================================

functtion reverseWord (word)

{
let reverseWord = "";
for ( let i = [Link]-1 ; i >= 0 ; i-- )
{
reverseWord += word[i];
}
return reverseWord ;
}

function reverseWords (S)

{
let words = [Link](" ");
for ( let i = 0 ; i < [Link] ; i++)
{
words[i] = reverseWord(words[i]);
}
return [Link](" ");
}

==========================================================================

function isVowel (number)

{
const vowels = ['a','o','e','i','u'];
for (let i = 0 ; i < [Link] ; i++)
{
if (number === vowels[i])
{ return true ;}
}
}

function countVowels (word)

{
let countVowels = 0 ;
for (let i = 0 ; i < [Link] ; i++)
{
if(isVowel(word[i]))
{
countVowels++ ;
}
}
return countVowels ;
}
==========================================================

function multiplyArray (arr)

{
 let multiplyArr = 1 ;
for ( let i = 0 ; i < [Link] ; i++ )
{
multiplyArr *= arr[i];
}
return multiplyArr ;
}

function isPositive (number)

{
if (number > 0)
{
return true ;
}
else return false ;
}

function addNumbers (number1, number2) {

return number1 + number2;
}