JavaScript Tutorials

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 build a simple 'Guess the Coin' game. The game involves randomly selecting three cups out of nine cups to place coins in, and the player has to guess the correct cups by inputting the corresponding numbers.

In this lab, we will be exploring a JavaScript function called 'toPairs', which creates an array of key-value pair arrays from an object or other iterable. Through this lab, we will learn how to use this function to convert various data structures into a format that is more easily manipulated and accessed. We will also gain a deeper understanding of the concepts of iterators and iterable objects in JavaScript.

I believe everyone has played the classic game of Minesweeper before. It has simple rules but is highly addictive. Have you ever thought about developing one yourself? Today, we will create a web-based version of Minesweeper. First, let's take a look at a screenshot of the interface.

In this project, we'll walk you through building a simple Pixel Art Animator using React. By the end of this guide, you'll have a basic pixel art editor where you can draw your pixel art and see the resulting animation. This project is beginner-friendly and provides a fun way to dive into the world of React and pixel art!

Welcome to this project on building a simple Sliding Puzzle game using JavaScript. By the end of this guide, you'll have a functioning 3x3 sliding puzzle game that you can play in your browser. The game will feature numbered tiles, a timer, and controls to start, pause, and reset the game.

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 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 integrate the Log4j2 logging framework into a Spring Boot application. You will configure Log4j2 to log project information in both the console and log files.

In this project, you will learn how to implement a login verification feature using AJAX and JSON data transfer. The project involves creating a login form, handling the form submission with AJAX, and validating the user's login credentials on the server-side.

In this project, you will learn how to perform CRUD (Create, Read, Update, Delete) operations on a course schedule table using MyBatis, a popular Java persistence framework.

In this project, you will learn how to create a line chart using the ECharts library. The chart will display the number of hours the user spends on their phone each day of the week.

In this lab, we will explore the implementation of a function called initializeArrayWithRange in JavaScript. This function initializes an array containing the numbers in a specified range, with the option to include a step value. We will learn how to use Array.from(), the map() function, and default parameter values to create a flexible and reusable function for generating arrays with a range of values.

In this lab, we will explore how to check if a given string ends with a substring of another string using JavaScript. We will use a for...in loop and String.prototype.slice() to get each substring of the given word, starting at the end. Then, we will use String.prototype.endsWith() to check the current substring against the text. By the end of this lab, you will have a solid understanding of how to use these string methods to find matching substrings in JavaScript.

In this lab, we will explore the concept of pretty-printing numbers in bytes to a human-readable format using JavaScript. We will learn how to convert a given number of bytes into KB, MB, GB, TB, PB, EB, ZB, and YB by using an array dictionary of units. with the help of the Number.prototype.toPrecision() method, we will truncate the number to a certain number of digits and build a prettified string to display the result.

In this lab, we will explore how to check if a given string starts with a substring of another string using JavaScript. We will learn how to use for...in loop and String.prototype.slice() to get each substring of a given word, and String.prototype.startsWith() to check if the current substring matches the text. By the end of this lab, you will be able to efficiently find if a string starts with a specific substring in JavaScript.

In this lab, we will explore how to call functions with context using a closure in JavaScript. We will learn how to pass a key and a set of arguments to a function, and then call it with the given context. Through practical examples, we will see how this technique can be used to simplify code and make it more readable.

In this lab, we will explore how to initialize and fill an array with specific values in JavaScript. We will use the Array() constructor and the Array.prototype.fill() method to create and populate the array. By the end of the lab, you will have a deeper understanding of how to create and manipulate arrays in JavaScript.