Project Title

Events

Project Number	Project Title	Source Code	Live Demo Link
01	Mouse Tracking	Source Code	Live Demo
02	Form Validation	Source Code	Live Demo
03	Event Delegation	Source Code	Live Demo
04	Interactive Image Gallery	Source Code	Live Demo
05	Image Slider	Source Code	Live Demo
06	Custom Tooltips	Source Code	Live Demo
07	Drag and Drop Game	Source Code	Live Demo
08	Drag and Drop Interface	Source Code	Live Demo
09	Infinite Scroll	Source Code	Live Demo
10	Keyboard Check	Source Code	Live Demo
11	Todo List	Source Code	Live Demo

Date & Time

Project Number	Project Title	Source Code	Live Demo Link
12	PixelTime	Source Code	Live Demo

Jump to Top

If-else & switch statement

Project Number	Project Title	Source Code	Live Demo Link
13	BMI Master	Source Code	Live Demo

Jump to Top

setTimeout & clearTimeout

Project Number	Project Title	Source Code	Live Demo Link
14	Simple Delayed Message	Source Code	Live Demo
15	CountdownTimerWithCancelOption	Source Code	Live Demo
16	Popup Reminder	Source Code	Live Demo
17	Unlimited Color Changer	Source Code	Live Demo

Jump to Top

XMLHttpRequest (xhr)

Project Number	Project Title	Source Code	Live Demo Link
18	Profile Card	Source Code	Live Demo

Fetch API

Project Number	Project Title	Source Code	Live Demo Link
19	Random Cat Facts	Source Code	Live Demo
20	Rate mate : Currency Converter	Source Code	Live Demo
21	WeatherWise : Weather App	Source Code	Live Demo

Jump to Top

Mouse Tracking

• Description: Create a web page that tracks the mouse movement of the user. Displays the current position of the mouse (X, Y coordinates) on the page. Use mouse events such as mousemove to capture the movement and update the display dynamically.
• Events covered: mousemove
• Use case: Mouse tracking can be useful for analytics purposes or for creating interactive experiences on a website.

Jump to Top

Keyboard Check

• Task Description: Create a web page that detects and displays keyboard events.
• Events covered: keydown
• Use case: Keyboard event tracking is beneficial for debugging, user input analysis, and enhancing interactive web applications. Jump to Top

Form Validation

• Task Description: Design a registration/login form inclusive of input fields for name, email, and password. Utilize client-side validation mechanisms such as input, change, blur, and submit events to provide real-time feedback on the validity of user inputs. Implement dynamic error message display to guide users as they interact with the form.
• Events covered: keyup, blur, input,change, submit, focus
• Use case: Form validation is crucial for ensuring data integrity and providing a user-friendly experience in web applications. Jump to Top

Event Delegation

• Description: Design a dynamic list where users can add and remove items. Use event delegation to handle events efficiently, especially for dynamically added elements. Attach event listeners to a parent element and utilize event bubbling to handle events triggered by child elements. Implement functionality to add new items to the list and remove existing items by clicking on them.
• Events covered: click
• Use case: Event delegation optimizes event handling, particularly for large lists or dynamically generated content, improving performance and scalability. Jump to Top

Interactive Image Gallery

• Description: Create a simple image gallery where users can navigate through images using keyboard events (e.g., arrow keys) or mouse events (e.g., click, hover).
• Events covered: keydown, keyup, click, mouseover, mouseout
• Use case: Image galleries are commonly used on websites to showcase portfolios, products, or visual content. Jump to Top

Image Slider

• Description: Develop an image slider that allows users to navigate through a set of images using buttons or arrow keys. Utilize keyboard events (keydown, keyup) to enable navigation via arrow keys and mouse events (click) for button-based navigation. Implement event listeners to handle user interactions and update the displayed image accordingly.
• Events covered: keydown, keyup, click
• Use case: Image sliders are commonly used on websites to showcase multiple images in a compact space, such as product galleries or photo albums. Jump to Top

Custom Tooltips

• Description: Create a reusable tooltip component that displays additional information or instructions when the user hovers over or clicks on specific elements, using events like mouseover, mouseout, click, and focus.
• Events covered: mouseover, mouseout, click, focus, blur
• Use case: Tooltips are widely used in user interfaces to provide contextual information or guidance to users without cluttering the main content area. Jump to Top

Drag and Drop Game

• Description: Create a simple drag-and-drop game where users can drag objects and drop them into specified targets. Use drag-and-drop events (dragstart, dragenter, dragover, dragleave, drop, dragend) to detect drag actions and update the UI accordingly. Implement event handlers to track the state of draggable objects and their positions relative to drop targets.
• Events covered: dragstart, dragenter, dragover, dragleave, drop, dragend
• Use case: Drag-and-drop games are interactive and engaging, making them suitable for educational purposes or entertainment on websites. Jump to Top

Drag and Drop Interface

• Description: Develop a drag and drop interface where users can move elements around the page using mouse events like mousedown, mousemove, and mouseup.
• Events covered: mousedown, mousemove, mouseup, dragstart, dragover, drop
• Use case: Drag and drop interfaces are useful for creating interactive interfaces, such as task managers, file explorers, or layout builders. Jump to Top

Infinite Scroll

• Description: Implement an infinite scroll feature on a website, where new content is loaded dynamically as the user scrolls down the page, utilizing the scroll event.
• Events covered: scroll, resize
• Use case: Infinite scroll is commonly used on social media feeds, news websites, and e-commerce platforms to enhance the user experience by loading content seamlessly without page refreshes. Jump to Top

Todo List

• Description: Create a web page for managing a todo list. Users can add tasks, mark them as completed, and remove tasks. The tasks are saved in the browser's local storage to persist data between sessions. This project uses event listeners for task interactions and local storage for data persistence.
• Topics covered: click, keypress, localStorage, getItem, setItem, DOM manipulation
• Use case: Todo lists are widely used for task management, planning, and organization. This project demonstrates fundamental web development skills and practical use of local storage. Jump to Top

PixelTime

• Description: PixelTime is a digital clock that displays the current time and date. It provides a simple yet effective way to keep track of time.
• Topics covered: Date object, setInterval function, DOM manipulation
• Use case: PixelTime can be used on websites or applications where displaying real-time information is necessary, such as dashboards, admin panels, or personal websites. Jump to Top

BMI Master

• Description: BMI Master is a web application that calculates the Body Mass Index (BMI) based on the user's height and weight inputs. It provides real-time feedback on the BMI value and interpretation.
• Topics covered: Event handling, form submission, conditional statements, DOM manipulation
• Use case: BMI Master can be used in healthcare websites, fitness applications, or personal wellness trackers to help users monitor their body composition and make informed decisions about their health. Jump to Top

Simple Delayed Message

• Description: Displays a message after a specified delay. The user clicks a "Show Message" button, which triggers a function that sets a timeout to update a message div with "Hello World!!" after a delay of 3 seconds.
• Topics covered: setTimeout, clearTimeout, scopes, DOM manipulation, event listeners.
• Use case: Demonstrating basic JavaScript concepts like DOM manipulation, event handling, and timers.
• Extension: Can be extended by adding an input field to allow the user to specify the delay in seconds, covering additional topics like user input handling and type conversion. Jump to Top

Countdown Timer With Cancel Option

• Description: Created a countdown timer that can be canceled before it completes.
• Topics covered:
• Use case: Jump to Top

Popup Reminder

• Description: Displays a reminder popup at regular interval.
• Topics covered:
• Use case: Jump to Top

Unlimited Color Changer

• Description: Create a web page that changes the background color continuously every second when a button is clicked. The color changes stop when another button is clicked. This project uses setInterval to create the color-changing effect and clearInterval to stop it.
• Events covered: click
• Use case: This functionality can be used for creating dynamic and visually appealing web pages or for user interface testing to see how different colors impact the overall look and feel of the site. Jump to Top

Form Auto-save Feature

• Description: Implemented an auto-save feature for a form.
• Topics covered:
• Use case: Jump to Top

Image Slideshow

• Description:
• Topics covered:
• Use case:

Jump to Top

Profile Card

• Description: Dynamically fetches and displays user information from the GitHub API. It includes elements for the user's avatar, name, bio, and follower count, which are populated by making an AJAX request.
• Topics covered: XMLHttpRequest, open, send, onreadystatechange,innerHTML, JSON.parse
• Use case: Useful for creating a simple, visually appealing profile card that pulls live data from an API. It can be used in web applications that require user profile displays, such as social media platforms, personal blogs, or portfolio websites.

Jump to Top

Random Cat Facts

• Description: Dynamically fetches and displays user information from the third-party API. It includes elements for displaying the fact text and a button to trigger fetching a new fact, utilizing modern JavaScript features like the Fetch API and async/await.
• Topics covered: fetch, async/await, DOM manipulation, innerText, addEventListener.
• Use case: Useful for creating an interactive, visually appealing card that pulls live data from an API. It can be used in web applications that aim to provide fun or educational content, such as trivia games, pet websites, or blogs.

Jump to Top

Rate Mate : Currency Converter

• Description: This is a web application that allows users to convert currency values between different countries. It provides a user interface with dropdown menus to select the source and target currencies, and an input field to enter the amount to be converted. The conversion rate is dynamically fetched from an external API and displayed on the page. When the user clicks the "Get Exchange Rate" button, the application calculates the converted amount based on the selected currencies and the current exchange rate.
• Topics covered: fetch async/await,DOM manipulation, form elements, events, third-party API integration, dynamic UI rendering.
• Use case: E-commerce websites, travel booking platforms, financial applications, personal finance management tools requiring currency conversion.

Jump to Top

WeatherWise: Weather App

• Description: This Weather App allows users to search for the current weather and forecast for any city. It also provides the weather details based on the user's current location. The application is built using HTML, CSS, and JavaScript, and it leverages the OpenWeatherMap API to fetch weather data.
• Topics covered: fetch, async/await, DOM manipulation, form elements, events, third-party API integration, dynamic UI rendering, date and time formatting, geolocation API, error handling.
• Use case: Travel planning, daily weather updates, event planning based on weather conditions, personal weather tracking, outdoor activity planning.

• Features:

  • Search for current weather and forecast by city name.
  • Display weather information for the user's current location using geolocation.
  • Display the current temperature, feels-like temperature, humidity, wind speed, sunrise, and sunset times.
  • Show weather icons based on the current weather conditions.
  • Display a 5-day weather forecast and hourly forecast.
• Credits: [OpenWeatherMap API] (https://openweathermap.org/) for providing the weather data.
  Jump to Top