TASK -3 WT

Date: 02-01-2025

Aim :
Study and Develop a fully interac ve website that demonstrates the use of various JavaScript
concepts, including data types, func ons, objects, loops, and event handling.

Each feature of the website should be triggered by user interac ons such as bu on clicks, mouse
movements, or form submissions.

Requirements:

1. Website Theme:
Choose a theme for the website (e.g., Quiz App, Virtual Library, Simple Game, or Personal
Organizer). Ensure the theme integrates various JavaScript concepts.

2. Mandatory Features:

o Data Types in Ac on:

Demonstrate the use of different data types:

 Strings: Handle user input (e.g., entering names, ques ons, or descrip ons).

 Numbers: Perform calcula ons or scoring.

 Booleans: Use for toggling states (e.g., dark mode or game states).

 Arrays: Manage lists like tasks, quiz ques ons, or inventory.

 Objects: Represent en es with proper es (e.g., user profile, product

details).

o Func ons:
Create reusable func ons to:

 Perform specific tasks (e.g., validate inputs, calculate totals).

 Handle events (e.g., bu on clicks, form submissions).

o Loops:
Use loops to:

 Display lists dynamically (e.g., a to-do list, quiz ques ons).

 Animate elements (e.g., move an object across the screen).

 Perform itera ve tasks (e.g., processing mul ple inputs).

o Event Handling:
A ach events to various elements:

 Bu ons (e.g., "Start Quiz," "Submit," or "Add Task").

 Inputs (e.g., display sugges ons while typing).

  Mouse/keyboard interac ons (e.g., hover effects or key presses).

3. Features Based on Events:

o Create dynamic content based on user input or interac on.

o Example ideas:

 A bu on to shuffle and display a random item from an array.

 Form submission event to create new items dynamically.

 Hovering over an image to display addi onal informa on (e.g., a tool p).

 Keyboard event to control a game element.

4. Advanced Use of Loops:

o Use for, for...of, for...in, and while loops in meaningful ways.

o Example ideas:

 Iterate over an array of objects to display them on the page.

 Create a visual effect, such as a countdown mer or carousel.

Requirements & Hints for Implementa on

1. Data Types (Strings, Numbers, Booleans, Arrays, Objects):

Use different data types for various features on the website:

 Strings:

o Collect and display user input (e.g., name, email, or task descrip on).

o Example: Store a welcome message or feedback comment.

o Hint: Use string methods like .toUpperCase(), .split(), or .concat().

 Numbers:

o Perform calcula ons like scores in a quiz or totals in a shopping cart.

o Hint: Use arithme c opera ons (+, -, *, /) and methods like Math.random().

 Booleans:

o Toggle states, such as enabling/disabling dark mode or showing/hiding elements.

o Hint: Use Boolean variables in if-else statements.

 Arrays:

o Manage lists, such as tasks, quiz ques ons, or inventory items.

o Hint: Use methods like .push(), .pop(), .filter(), and .map().

 Objects:
 o Represent complex en es with proper es (e.g., a user profile or a product).

o Hint: Create objects with keys and values, e.g., {name: "John", age: 25}.

2. Func ons:

Use func ons to perform repe ve tasks and organize your code:

 Reusability:

o Create func ons to validate user inputs, calculate totals, or update the UI.

o Hint: Define reusable func ons like func on calculateTotal(items).

 Event Handlers:

o Write func ons that execute when events occur, such as clicking a bu on or
submi ng a form.

o Hint: Use addEventListener to bind func ons to events.

3. Loops (for, for...of, for...in, while):

Use loops to iterate through data or perform repe ve ac ons:

 For Loops:

o Display a list of tasks, quiz ques ons, or items dynamically.

o Hint: Use a for loop to iterate over an array and append elements to the DOM.

 While Loops:

o Create countdown mers or repeat an ac on un l a condi on is met.

o Hint: Use while or do...while for condi onal itera ons.

 For...of Loop:

o Iterate through arrays, such as quiz op ons or user inputs.

o Hint: Use for...of for cleaner itera on of arrays.

 For...in Loop:

o Access proper es of an object (e.g., user data or configura on).

o Hint: Use for...in for object itera on.

4. Event Handling:

Create interac vity by a aching events to elements:

 Bu on Clicks:
 o Trigger ac ons like adding a new task, star ng a quiz, or calcula ng results.

o Hint: Use onclick or addEventListener("click", func on).

 Hover Effects:

o Show or hide addi onal informa on when the user hovers over an element.

o Hint: Use addEventListener("mouseover") and addEventListener("mouseout").

 Form Submission:

o Process user inputs and update the page dynamically.

o Hint: Use the submit event to handle forms.

 Keyboard Events:

o Enable shortcuts or control elements using the keyboard.

o Hint: Use keydown or keyup events.

Example Feature Ideas with Implementa on Hints

1. To-Do List App:

o Data Types: Store tasks in an array.

o Objects: Represent each task as an object with proper es like name and
isCompleted.

o Loops: Use a for loop to display all tasks dynamically.

o Func ons: Create func ons for adding, edi ng, or dele ng tasks.

o Events: Trigger ac ons using bu ons (e.g., "Add Task").

2. Quiz Applica on:

o Data Types: Use arrays to store ques ons and answers.

o Loops: Iterate through ques ons using a for...of loop.

o Objects: Represent each ques on as an object with ques on and op ons proper es.

o Func ons: Calculate the score or display the next ques on.

o Events: Handle user input (e.g., selec ng an answer).

3. Dynamic Calculator:

o Data Types: Use numbers for calcula ons.

o Func ons: Write func ons for opera ons like addi on, subtrac on, etc.

o Events: Trigger calcula ons when bu ons are clicked.