JavaScript Free Labs

Practice JavaScript with Free Labs. Explore hands-on exercises to master JavaScript syntax, DOM manipulation, and event-driven programming in an interactive JavaScript playground.

Your First JavaScript Lab

Your First JavaScript Lab

Hi there, welcome to LabEx! In this first lab, you'll learn the classic 'Hello, World!' program in JavaScript.
LabJavaScript
HTTP Module Application

HTTP Module Application

The http module is the official Node.js module for creating a web server, allowing front-end developers to quickly get started with server-side development. Let's create an application using this module.
ChallengeJavaScript
LabEx Campus Card

LabEx Campus Card

In this challenge, we will help Jane create a campus card application interface for a university. The objective is to implement form validation for the name and student ID fields and display the submitted form content correctly on the card. By completing this task, we will ensure that the form input is validated and the card displays the correct information.
ChallengeJavaScript
Arrays and Objects

Arrays and Objects

In this Lab, we continue to follow Alex on their journey as a web developer at a tech startup. The scene unfolds in the development team's workspace, where Alex is tasked with enhancing the personal finance tracker by incorporating the ability to handle multiple financial records. This crucial feature requires Alex to delve into JavaScript's arrays and objects, storing each financial record as an object within an array. The goal is to create a dynamic and interactive application that not only tracks but also organizes users' financial data efficiently. Through this endeavor, Alex aims to provide users with a clear overview of their financial activities, thus making the app more useful and engaging.
LabJavaScript
Basic JavaScript and DOM

Basic JavaScript and DOM

In this Lab, you'll step into the world of web development through the eyes of Alex, a budding web developer tasked with creating a dynamic personal finance tracker. To build a user-friendly application that allows users to input and track their daily expenses and income. The goal is clear - to develop an interface that's both intuitive and engaging, ensuring users can easily manage their finances without any hassle. This project not only aims to simplify personal finance management but also to introduce you to the fundamental concepts of JavaScript and DOM manipulation.
LabJavaScript
Data Storage and Retrieval

Data Storage and Retrieval

In this Lab, we accompany Alex, a determined web developer at a bustling tech startup, who is now venturing into the realm of data persistence. After successfully creating a mechanism for tracking and displaying financial records in the personal finance tracker, the next challenge is to ensure that these records persist across browser sessions. The goal is to enable users to return to the app and find all their previously entered data intact, enhancing the app's usability and user satisfaction. This task introduces Alex to the concept of web storage, specifically leveraging the localStorage API to save and retrieve the application's state.
LabJavaScript
Enhancing Personal Finance Tracker

Enhancing Personal Finance Tracker

In this Lab, Alex's journey through the development of the personal finance tracker enters an advanced stage, focusing on enhancing the application's interactivity through sophisticated event handling techniques. The scene is set in a brainstorming session at the tech startup, where Alex proposes adding a drag-and-drop feature to reorder financial records. This ambitious goal aims to provide users with an intuitive way to organize their records, reflecting the fluid nature of personal finance management. Achieving this requires Alex to explore advanced DOM events and manipulate elements in a way that's both visually appealing and user-friendly.
LabJavaScript
Implementing the Summary

Implementing the Summary

In this lab, set in the bustling startup scene of 'FinTech Valley', you'll step into the shoes of Alex, a budding software engineer tasked with enhancing the financial tracking system for a rapidly growing tech company. The company's financial team needs a dynamic way to view the overall financial health of the organization. Your goal is to implement a feature in their existing web-based accounting application that calculates and displays the total income, total expenses, and net balance, providing real-time financial insights.
LabJavaScript
Call an API in JavaScript

Call an API in JavaScript

In this lab, you will learn to interact with web APIs using modern JavaScript. You'll use the `fetch` API to make GET and POST requests, handle responses, parse JSON data, display it in HTML, implement error handling, and authenticate requests with an API key for dynamic web applications.
LabJavaScript
JavaScript Conditional Statements

JavaScript Conditional Statements

In this lab, you will learn the fundamentals of JavaScript conditional statements, including if, else, and else if, to control the flow of your code.
LabJavaScript
JavaScript Introduction and Embedding

JavaScript Introduction and Embedding

In this lab, you will learn the basics of JavaScript, including how to embed it directly into an HTML file and how to link an external JavaScript file.
LabJavaScript
JavaScript Loops

JavaScript Loops

In this lab, you will learn the fundamentals of JavaScript loops, including for, while, and do-while loops, to control the flow of your code and repeat actions.
LabJavaScript
JavaScript Operators and Expressions

JavaScript Operators and Expressions

In this lab, you will learn the fundamentals of JavaScript operators and expressions, including arithmetic operations, string concatenation, and increment operators.
LabJavaScript
JavaScript Variables and Data Types

JavaScript Variables and Data Types

In this lab, you will learn the fundamentals of JavaScript by declaring variables using `let` and exploring basic data types like strings, numbers, and booleans.
LabJavaScript
Parsing JSON Data

Parsing JSON Data

In this lab, you will learn how to parse, modify, and save JSON configuration files using Python. This skill is essential for managing structured data in modern applications.
LabJavaScript