30 Days Of JavaScript

# Day	Topics
01	Introduction
02	Data Types
03	Booleans, Operators, Date
04	Conditionals
05	Arrays
06	Loops
07	Functions
08	Objects
09	Higher Order Functions
10	Sets and Maps
11	Destructuring and Spreading
12	Regular Expressions
13	Console Object Methods
14	Error Handling
15	Classes
16	JSON
17	Web Storages
18	Promises
19	Closure
20	Writing Clean Code
21	DOM
22	Manipulating DOM Object
23	Event Listeners
24	Mini Project: Solar System
25	Mini Project: World Countries Data Visualization 1
26	Mini Project: World Countries Data Visualization 2
27	Mini Project: Portfolio
28	Mini Project: Leaderboard
29	Mini Project: Animating Characters
30	Final Projects

🧡🧡🧡 HAPPY CODING 🧡🧡🧡

30 Days Of JavaScript: Introduction

Day 2 >>

• 30 Days Of JavaScript
• 📔 Day 1
  • Introduction
  • Requirements
  • Setup
    • Install Node.js
    • Browser
      • Installing Google Chrome
      • Opening Google Chrome Console
      • Writing Code on Browser Console
        • Console.log
        • Console.log with Multiple Arguments
        • Comments
        • Syntax
      • Arithmetics
    • Code Editor
      • Installing Visual Studio Code
      • How to Use Visual Studio Code
  • Adding JavaScript to a Web Page
    • Inline Script
    • Internal Script
    • External Script
    • Multiple External Scripts
  • Introduction to Data Types
    • Numbers
    • Strings
    • Booleans
    • Undefined
    • Null
  • Checking Data Types
  • Comments Again
  • Variables
• 💻 Day 1: Exercises

📔 Day 1

Introduction

Congratulations on deciding to participate in the 30 days of JavaScript programming challenge. This comprehensive curriculum, created by Jedan Code Academy, will guide you from JavaScript fundamentals to advanced concepts. By the end of this challenge, you'll have a solid understanding of JavaScript and be able to build real-world applications.

30DaysOfJavaScript is designed for both beginners and intermediate developers. JavaScript powers the modern web, enabling interactive websites, mobile apps, desktop applications, games, and even server-side programming with Node.js. Mastering JavaScript opens doors to numerous opportunities in web development, mobile development, and beyond.

This curriculum follows a structured, day-by-day approach with hands-on exercises and projects. Each day builds upon the previous, ensuring steady progress. The content is written in clear, accessible language with practical examples.

Requirements

No prior programming experience is needed! You just need:

1. Dedication to commit to daily learning
2. A computer (Windows, Mac, or Linux)
3. Internet connection
4. A modern web browser (Chrome recommended)
5. A code editor (VS Code recommended)

Setup

Install Node.js

Node.js allows you to run JavaScript outside the browser. Download it from nodejs.org.

After downloading, run the installer. Verify installation by opening your terminal/command prompt:

node --version
# Should display something like: v18.17.0 or higher

Browser

Installing Google Chrome

Download and install Google Chrome. Chrome has excellent developer tools that we'll use throughout this course.

Opening Google Chrome Console

The console is where you can test JavaScript code directly. Open it using:

• Windows/Linux: Ctrl + Shift + J
• Mac: Cmd + Option + J

Or right-click on any webpage → "Inspect" → "Console" tab.

Writing Code on Browser Console

Let's write our first JavaScript code:

console.log('Hello from Jedan Code Academy!');

Console.log with Multiple Arguments

console.log('Welcome', 'to', '30 Days', 'of', 'JavaScript');
console.log('Jedan Code Academy', 2026);

Comments

// Single line comment

/*
Multi-line comment
This is the 30DaysOfJavaScript challenge
Created by Jedan Code Academy
*/

Syntax

JavaScript requires proper syntax. Common mistakes include missing parentheses, quotes, or semicolons:

// Incorrect
console.log('Hello world

// Correct
console.log('Hello world');

Arithmetics

console.log(10 + 5);      // 15
console.log(20 - 8);      // 12
console.log(6 * 7);       // 42
console.log(50 / 5);      // 10
console.log(17 % 5);      // 2 (remainder)
console.log(2 ** 4);      // 16 (2 to the power of 4)

Code Editor

Installing Visual Studio Code

Download VS Code, a free, powerful editor with great JavaScript support.

How to Use Visual Studio Code

1. Open VS Code
2. Create a new folder for the challenge
3. Create your first JavaScript file (e.g., day1.js)
4. Install the "Live Server" extension for running web pages

Adding JavaScript to a Web Page

JavaScript can be added to HTML in three ways:

Inline Script

<!DOCTYPE html>
<html>
<head>
    <title>Jedan Academy - Day 1</title>
</head>
<body>
    <button onclick="alert('JavaScript is awesome!')">Click Me</button>
</body>
</html>

Internal Script

<!DOCTYPE html>
<html>
<head>
    <title>Jedan Academy - Day 1</title>
    <script>
        console.log('Learning JavaScript with Jedan Code Academy');
    </script>
</head>
<body>
    <h1>Welcome to 30DaysOfJavaScript</h1>
</body>
</html>

External Script

Create script.js:

console.log('External JavaScript file loaded');

HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>External JavaScript</title>
</head>
<body>
    <h1>Jedan Code Academy</h1>
    <script src="script.js"></script>
</body>
</html>

Multiple External Scripts

<script src="script1.js"></script>
<script src="script2.js"></script>

Introduction to Data Types

JavaScript has several primitive data types:

Numbers

let age = 25;
let price = 19.99;
let temperature = -5;

Strings

let name = 'Jedan Academy';
let message = "Learn JavaScript";
let greeting = `Hello, ${name}!`; // Template literal

Booleans

let isLoggedIn = true;
let hasPermission = false;
let isGreater = 10 > 5; // true

Undefined

let username; // undefined
let value = undefined;

Null

let emptyValue = null;

Checking Data Types

Use the typeof operator:

console.log(typeof 'Jedan Academy'); // "string"
console.log(typeof 42);              // "number"
console.log(typeof true);            // "boolean"
console.log(typeof undefined);       // "undefined"
console.log(typeof null);            // "object" (historical quirk)

Comments Again

// Good comments explain WHY, not WHAT

/*
Project: 30DaysOfJavaScript
Author: Jedan Code Academy
Date: January 2026
Purpose: JavaScript learning curriculum
*/

Variables

Variables store data. Use let for variables that change, const for constants:

// Using let (can be reassigned)
let studentName = 'Alex';
studentName = 'Jordan'; // OK

// Using const (cannot be reassigned)
const PI = 3.14159;
// PI = 3.14; // Error!

// Valid variable names
let firstName;
let user_age;
let $price;
let _internalValue;
let totalAmount2026;

// Invalid variable names
// let 1stPlace;     // Cannot start with number
// let user-name;    // No hyphens
// let let;          // Cannot use reserved words

Variable Declaration Examples:

// Student information
const academy = 'Jedan Code Academy';
let course = '30 Days of JavaScript';
let studentCount = 1000;
let isEnrolled = true;
let nextSession = null;
let startDate; // undefined

console.log(`Academy: ${academy}`);
console.log(`Course: ${course}`);
console.log(`Students: ${studentCount}`);

💻 Day 1: Exercises

1. Write a single line comment saying: // Comments make code readable
2. Write another single comment: // Welcome to Jedan Code Academy's 30DaysOfJavaScript
3. Write a multiline comment describing the importance of comments
4. Create variables.js and declare variables with different data types
5. Create datatypes.js and use typeof to check each variable's type
6. Declare four variables without assigning values
7. Declare four variables with assigned values
8. Declare your information in multiple lines:

   let firstName = 'YourName';
   let lastName = 'YourLastName';
   let country = 'YourCountry';
   let age = 25;

9. Declare the same information in a single line
10. Create ageComparison.js:

    let myAge = 25;
    let yourAge = 30;
    console.log(`I am ${myAge} years old.`);
    console.log(`You are ${yourAge} years old.`);

Exercise Solutions

variables.js

// Exercise 4: Different data types
let academyName = 'Jedan Code Academy'; // string
let studentCount = 500;                 // number
let isActive = true;                    // boolean
let upcomingCourse;                     // undefined
let previousBatch = null;               // null

datatypes.js

// Exercise 5: Check data types
console.log(typeof 'Jedan Academy'); // string
console.log(typeof 2026);            // number
console.log(typeof true);            // boolean
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object

Additional Practice

// Exercise 6: Unassigned variables
let variable1;
let variable2;
let variable3;
let variable4;

// Exercise 7: Assigned variables
let courseName = 'JavaScript Fundamentals';
let duration = 30;
let isFree = true;
let rating = 4.8;

// Exercise 8: Multi-line declaration
const academy = 'Jedan Code Academy';
const founded = 2023;
const location = 'Online';
const courses = ['JavaScript', 'Python', 'Web Development'];

// Exercise 9: Single line (not recommended for readability)
let name = 'Alex', role = 'Student', level = 'Beginner', progress = 0;

🎉 EXCELLENT WORK ON COMPLETING DAY 1! 🎉

You've taken the first step in your JavaScript journey with Jedan Code Academy. Tomorrow we'll dive deeper into data types and operators.

Day 2 >>

---

Jedan Code Academy - Empowering Developers Worldwide

Visit us at jedanacademy.com