JavaScript Tutorials

Stream a Workers AI help response to a supplied client, recognize completion, cancel safely and terminate service errors without hanging.

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.

In this project, you will learn how to create a simple folding accordion using HTML, CSS, and JavaScript. The folding accordion is a common UI element that allows users to expand and collapse content sections, making it a useful feature for displaying information in a compact and organized manner.

In this project, you will learn how to create a traffic lights system that changes the color of the light from red to green after a certain time interval. This project will help you understand the basics of JavaScript and how to manipulate the DOM to display different elements based on time-based events.

In this project, you will learn how to build a voting application that allows users to create and manage voting options, as well as delete options if needed. The application also includes features for multi-selection support and public voting results.

In this project, you will learn how to create a simple 'Fruit for Fun' game using HTML, CSS, and JavaScript. The game involves matching pairs of fruit images by clicking on the squares on the game board.

In this project, you will learn how to create a simple fruit stacking game using HTML, CSS, and JavaScript. The goal is to stack the falling fruit items at the top of the page into the box at the bottom. If there are three identical fruits in the box, they will be automatically removed.

This project guides you through the process of deploying a pre-trained MobileNetV2 model using TensorFlow.js within a Flask web application. MobileNetV2 is a lightweight deep neural network used primarily for image classification. TensorFlow.js enables running machine learning models directly in the browser, allowing for interactive web applications. Flask, a Python web framework, will serve as the backend to host our application. By the end of this project, you will have a running web application that classifies images on the fly using the MobileNetV2 model.

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.

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.

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.

2048 is an extremely popular and easy-to-learn game that has taken the world by storm. If you haven't played it yet, you can download it on your mobile phone to give it a try. This project will guide you in using HTML, CSS, JavaScript, and jQuery to create a web version of the 2048 game.

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.

In this project, you will learn how to create a real-time sales dashboard using the Echarts library. The dashboard will display the sales and volume data in a visually appealing and easy-to-understand format.

In this project, you will learn how to create an interactive collection of films web application using HTML, CSS, and JavaScript (jQuery). The application allows users to mark their favorite films, and when a collection of favorite films is created, a success message is displayed.

This project, the 'jQuery Flip Puzzle Game,' provides a hands-on experience in web development, focusing on JavaScript, jQuery, and Bootstrap. It involves object-oriented programming in JavaScript and addresses the common issue of 'this' binding in the context of web development. The game is implemented using jQuery and Bootstrap 3 for the user interface. While familiarity with Bootstrap is helpful, the project's core logic is built with jQuery and JavaScript.

In this project, you will learn how to create a simple prize draw application using JavaScript and jQuery. The application will simulate a prize draw by rotating a list of prizes and displaying the winning prize when the rotation stops.

In this project, you will learn how to build a colour filter application using React. The application will allow users to filter a list of colours by typing in the name of the colour they are looking for. This project will help you understand how to work with state management, event handling, and conditional rendering in React.