Gain insights into JavaScript fundamentals while creating web-based games and utility projects. Discover DOM manipulation, classes, data structures, and enhance your career prospects in web development.

Apply Data Structures and Algorithms to Build Real Projects.png

docker.tar.gz

Node With Express

Snake Game

Covid Fighter

Spin N Win

Sudoku

Travel Planner

Chat List

Text Editor

Photo Editor

Frog Jump

JavaScript is one of the most popular programming languages for creating interactive web pages, apps, and games. Knowing JavaScript can give you a huge edge in the job market.

This course is for you if you want to learn JavaScript by creating hands-on projects instead of learning from theory. It will first introduce you to the basics of JavaScript, such as classes, objects, variables, and DOM manipulation. Then, it will help you create several web-based games and projects using different data structures, such as arrays, linked lists, LRU cache, and graphs. You’ll get clear step-by-step instructions for developing each project, while multiple assessments will help monitor your progress.

By the end of this course, you’ll have a solid understanding of JavaScript and how to utilize its different data structures to create actual projects, giving you a good foundation to grow your career in web development, game programming, and interactive media.

Building Web-Based Games and Utility Projects Using JavaScript

import { Stack } from './stack.js';

// Function to executed when the web page is loaded
onload = function () {

    // Store the required HTML elements
    const textbox = document.getElementById('comment');
    const undo = document.getElementById('undo');
    const clear = document.getElementById('clear');
    const temptext = document.getElementById('temptext');

    // Initialize the variables
    textbox.value = "";
    let text = "";
    let stack = new Stack();

    // Attach a click event listener to the button to clear the text editor
    clear.onclick = function () {

        stack.clear(); // Call the clear() function from the Stack class
        text = ""; // Set the text to empty string
        textbox.value = ""; // Set the value of the text box to empty string
        temptext.innerHTML = "Sequence of operations will be shown here !"; // Set the message displaying the operation performed
    };

    // Attach an input event listener to the text box to insert data to the stack
    // when the user enters text and removes the text by pressing the backspace key
    textbox.oninput = function(event){
        switch(event.inputType){

            // Case when the character is inserted in the text box
            case "insertText":
                stack.push(0, event.data); // Store the operation type and the data in the stack
                break;

            // Case when the character is removed from the text box
            case "deleteContentBackward":
                stack.push(1, text[text.length - 1]); // Store the operation type and the last character removed from the text editor in the stack
                break;
        }

        // Set the message on the right side of the web page to display the data in the stack
        temptext.innerHTML = "Stack data: Operation " + stack.top() + "<br>" + temptext.innerHTML;

        // Store the current text data in the text box
        text = textbox.value;
    };

    // Attach a click event listener to button to perform the undo operation
    undo.onclick = function () {

        // Remove the top element from the stack
        let operation = stack.pop();

        // Check if the stack is not empty since the pop() function returns -1 as operation type if the stack is empty
        if(operation[0] !== -1){
            
            // Set the message to display the undo operation performed
            temptext.innerHTML = "Performing undo operation<br>"+temptext.innerHTML;
            
            // Check if the operation type was insert
            if(operation[0] === 0){

                // Store the length of the string
                let len = operation[1].length;

                // Update the text box value
                textbox.value = textbox.value.substring(0,textbox.value.length-len);
            } 
            // If the operation type was delete
            else{

                // Update the text value
                textbox.value += operation[1];
            }

            // Update the variable to store the current text in the text box
            text = textbox.value;
        }
    };
};

Implement the script to connect the Stack class with the HTML web page and finish the project.

Overview of the Course

Refresher to Javascript

Snake Game Using Arrays and Objects

COVID Fighter Game Using Arrays and Collision Algorithm

Spin N Win Using Mathematics and Phaser.js

Sudoku Using a Backtracking Algorithm

Mid-Course Assessment

Travel Planner Project Using Graphs

Chat List Project Using LRU Cache

Text Editor Using Stacks

Photo Editor Using 3-D Arrays

Frog Jump Game Using Greedy Algorithm

Summary

Final Course Assessment

Connect Stack with the UI

Introduction