You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
For practice questions related to JavaScript, please refer to the JavaScript Practice Questions file. This file contains various exercises categorized by topics, including basics, operators, loops, functions, arrays, objects, and more.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
Description: HowOldAmI is a age calculator that calculates your current age from your date of birth. It provides a simple yet effective way to know old are you.
Topics covered: Date object, function, conditional-statements, DOM manipulation
Use case: Determine age for healthcare, forms, websites, and applications.
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.
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.
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.
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.
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.
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.
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: fetchasync/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.
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.
Description: Speak Easy allows users to type text, select a voice, and listen to it. The application uses the Web Speech API for converting text to speech and supports various voices available on the user's device.
Topics covered: DOM manipulation, Web Speech API, event handling, dynamic dropdown population, form validation, accessibility features, JavaScript functions, error handling.
Use case: Assist visually impaired users, boost productivity with hands-free text consumption, aid language learners, and provide an educational or entertainment tool for converting text to speech.
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.