JavaScript 30-Day Learning Plan

This 30-day plan is designed to help you learn JavaScript from basics to advanced concepts with practical exercises and mini-projects.

30 Days the maximum to learn javascript basic. I can make the day 1, 2 ,3 and 4 in just 1 day if I can. Goal coding hours per day 2 hours maximum. So that I have time for other school works.

---

Week 1 – Basics

Goal: Variables, operators, conditionals, loops, functions, objects.

Day 1 – Variables & Console

• Create variables of different types: string, number, boolean.
• Print them using console.log().
• Challenge: Object person with name, age, hobbies. Print properties.

Day 2 – Operators & Expressions

• Practice arithmetic (+, -, *, /, %) and logical operators (>, <, ==, !=, &&, ||).
• Challenge: Small calculator for two numbers.

Day 3 – Conditionals

• Learn if, else if, else.
• Challenge: Grade calculator and teen check.

Day 4 – Loops

• Use for and while loops.
• Challenge: Multiplication table, sum of first 10 numbers.

Day 5 – Arrays

• Create arrays, push/pop, check length.
• Challenge: Find largest/smallest number in an array.

Day 6 – Functions

• Function declaration, parameters, return values.
• Challenge: Sum of array numbers, even/odd check.

Day 7 – Objects & Methods

• Create objects, add properties and methods.
• Challenge: Array of objects (students) and print names/grades.

---

Week 2 – DOM & Events

Goal: Make your web pages interactive.

Day 8 – DOM Basics

• Select elements using getElementById, querySelector.
• Change text content and styles.
• Challenge: Change <p> text when a button is clicked.

Day 9 – Event Listeners

• Learn onclick, oninput, addEventListener.
• Challenge: Show alert with input value.

Day 10 – Simple Counter

• Create + and - buttons.
• Update a number on the page.
• Challenge: Prevent negative numbers.

Day 11 – Todo List: Add Items

• Input field + button to add <li> items.
• Challenge: Clear input after adding.

Day 12 – Todo List: Delete Items

• Add delete buttons for each item.
• Challenge: Delete clicked item.

Day 13 – Todo List: Edit Items

• Edit item text using prompt or inline input.
• Challenge: Save edited text.

Day 14 – Mini Project: Interactive List

• Combine add, delete, edit functionality.
• Style with simple CSS or Tailwind.

---

Week 3 – Intermediate JS

Goal: Arrays, objects, ES6 features, local storage.

Day 15 – Array Methods

• Learn map, filter, forEach, includes.
• Challenge: Filter numbers > 10.

Day 16 – ES6 Basics

• let, const, template literals, arrow functions.
• Challenge: Rewrite previous functions using ES6.

Day 17 – Destructuring & Spread

• Array/object destructuring, spread operator.
• Challenge: Merge two arrays, extract object properties.

Day 18 – Objects Advanced

• Nested objects, Object.keys(), Object.values().
• Challenge: Print all student grades from array of objects.

Day 19 – Local Storage Basics

• localStorage.setItem, getItem, removeItem.
• Challenge: Save username in local storage and display on page.

Day 20 – Local Storage + Arrays

• Save todo list in local storage.
• Challenge: Persist items after page refresh.

Day 21 – Mini Project: Persistent Todo List

• Combine DOM, events, and local storage.

---

Week 4 – Advanced Concepts & APIs

Goal: Async JS, JSON, APIs, small project.

Day 22 – JSON Basics

• JSON.stringify() and JSON.parse().
• Challenge: Convert object to JSON and back.

Day 23 – Fetch API

• Get data from public API (e.g., JSONPlaceholder).
• Challenge: Print posts in console.

Day 24 – Fetch + DOM

• Display fetched data in HTML.
• Challenge: Show title & body of posts in a list.

Day 25 – Async/Await

• Rewrite fetch with async/await.
• Challenge: Handle errors using try/catch.

Day 26 – Event Delegation

• Handle events for dynamically added elements.
• Challenge: Delete dynamically added list items.

Day 27 – Simple Form Validation

• Check empty fields, valid email.
• Challenge: Prevent form submission if invalid.

Day 28 – Mini Project: API Todo App

• Add tasks and fetch them from a fake API.
• Combine events, fetch, local storage.

Day 29 – Debugging & Console Tools

• Learn console.log, console.table, breakpoints.
• Challenge: Debug previous projects.

Day 30 – Final Project: Complete Todo App

• Add, edit, delete, persist in local storage.
• Optional: Fetch placeholder data.
• Style with CSS or Tailwind.

---

By following this plan, you will become confident in core JavaScript concepts, DOM manipulation, events, and working with APIs within 30 days.