Skip to content

collection of mini JavaScript projects covering various topics such as event handling, DOM manipulation, timers, AJAX, and API integration. It serves as a practical learning resource with hands-on exercises and examples for improving JavaScript skills.

Notifications You must be signed in to change notification settings

ajeetkumarrauniyar/JS-Minor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

collection of mini JavaScript projects covering various topics such as event handling, DOM manipulation, timers, AJAX, and API integration. It serves as a practical learning resource with hands-on exercises and examples for improving JavaScript skills.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published