Javascript Beginner Roadmap along with some mini projects

1. Introduction to JavaScript

Start with the basics! JavaScript is used to add behavior to web pages.

Mini Project: Write a simple “Hello, World!” program to get familiar with JS syntax.

console.log("Hello, World!");

2. Variables and Data Types

Learn how to store and manipulate data using variables and various data types like strings, numbers, booleans, arrays, and objects.

Mini Project: Create a program that demonstrates the different data types and how to use them.

let name = "Ayush"; // string
let age = 20;       // number
let isStudent = true; // boolean
let hobbies = ["Coding", "Music"]; // array
let address = { city: "Mumbai", pincode: 400001 }; // object

3. Operators

Operators help you perform calculations and manipulate values.

Mini Project: Build a simple calculator that can add, subtract, multiply, and divide two numbers.

let num1 = 10;
let num2 = 5;
console.log(num1 + num2); // addition
console.log(num1 - num2); // subtraction
console.log(num1 * num2); // multiplication
console.log(num1 / num2); // division

4. Control Structures

Control the flow of your code using if-else statements.

Mini Project: Write a program that determines if a number is positive, negative, or zero.

let number = 5;
if (number > 0) {
    console.log("Positive");
} else if (number < 0) {
    console.log("Negative");
} else {
    console.log("Zero");
}

5. Loops (for, while)

Loops allow you to repeat a block of code multiple times.

Mini Project: Create a program that prints numbers from 1 to 100 using a loop.

for (let i = 1; i <= 100; i++) {
    console.log(i);
}

6. Functions

Functions are reusable blocks of code.

Mini Project: Write a function that takes two numbers and returns their sum.

function addNumbers(a, b) {
    return a + b;
}
console.log(addNumbers(5, 10));

7. Objects

Objects let you group related data and functionality.

Mini Project: Create a simple contact book where each contact is an object with properties like name, phone, and email.

let contact = {
    name: "Ayush",
    phone: "9876543210",
    email: "ayush@example.com"
};
console.log(contact.name, contact.phone, contact.email);

8. Arrays

Arrays store multiple values in a single variable.

Mini Project: Build a program that manipulates an array of numbers (e.g., find the largest number, sort the array).

let numbers = [5, 10, 2, 8];
console.log(Math.max(...numbers)); // largest number
console.log(numbers.sort((a, b) => a - b)); // sorted array

9. DOM Manipulation

Learn how to interact with HTML elements using JavaScript.

Mini Project: Build a basic to-do list where users can add, remove, and mark tasks as complete.

// Add, remove, and mark tasks in the DOM using JavaScript.

10. Events

JavaScript handles user interactions via events.

Mini Project: Create a form that validates user input and displays an alert when the form is submitted.

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();
    alert("Form submitted successfully!");
});

11. ES6 Features (let, const, arrow functions, etc.)

ES6 brought many improvements to JavaScript.

Mini Project: Refactor a basic function to use arrow functions and demonstrate the use of let and const.

const sum = (a, b) => a + b;
console.log(sum(5, 10));

12. Error Handling (try-catch)

Errors happen! Learn how to handle them gracefully.

Mini Project: Write a program that safely parses JSON and handles potential errors.

try {
    let data = JSON.parse('{"name": "Ayush"}');
    console.log(data.name);
} catch (error) {
    console.log("Error parsing JSON", error);
}

13. Asynchronous JavaScript (callbacks, promises)

Understand asynchronous code to handle tasks like fetching data.

Mini Project: Create a simple app that fetches data from an API and displays it using fetch and promises.

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log("Error fetching data", error));

14. Async/Await

Simplify asynchronous code using async/await.

Mini Project: Refactor the previous project to use async/await for fetching and displaying data.

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.log("Error fetching data", error);
    }
}
fetchData();

15. Local Storage

Store data in the browser using local storage.

Mini Project: Build a note-taking app that saves notes to the browser's local storage.

localStorage.setItem('note', 'This is a note');
console.log(localStorage.getItem('note'));

16. Modules

Organize your code with ES6 modules by splitting it into multiple files.

Mini Project: Create a basic app with separate JavaScript files and use modules to import/export functions.

// import { myFunction } from './module.js';

17. Basic Debugging

Use browser dev tools to debug your JavaScript code.

Mini Project: Intentionally break a piece of code and use the console to debug and fix it.

console.log("Debugging is important!");