Day 1: Introduction to JavaScript and Basic Concepts
Tutorial 1: Setting Up the Development Environment
Install Visual Studio Code (VSCode):
Step 1: Go to the VSCode official website.
Step 2: Download the installer for your operating system (Windows, macOS, or Linux).
Step 3: Run the installer and follow the on-screen instructions to complete the installation.
Step 4: Open VSCode after installation.
Install Node.js:
Step 1: Visit the Node.js official website.
Step 2: Download the LTS (Long Term Support) version for your operating system.
Step 3: Run the installer and follow the on-screen instructions to install Node.js.
Step 4: Verify the installation by opening a terminal (Command Prompt on Windows, Terminal on macOS/Linux) and typing
node -v
. You should see the version number of Node.js.
Open VSCode and Set Up a New Project:
Step 1: Open VSCode.
Step 2: Create a new folder for your JavaScript projects. You can name it something like
JavaScriptProjects
.Step 3: In VSCode, click on
File
->Open Folder
and select the folder you just created.Step 4: Open the terminal in VSCode by pressing
Ctrl +
(backtick) or going toView
->Terminal
.
Tutorial 2: JavaScript Basics
Creating Your First JavaScript File:
Step 1: In your project folder, create a new file called
index.js
.Step 2: Open
index.js
and write the following code:console.log('Hello, JavaScript!');
Step 3: Save the file.
Step 4: In the terminal, navigate to the folder containing
index.js
and run the file using the command:node index.js
Step 5: You should see
Hello, JavaScript!
printed in the terminal.
Variables and Data Types:
Variables:
Step 1: In
index.js
, declare variables usinglet
,const
, andvar
.Step 2: Understand the differences between them:
let age = 25; // Can be reassigned const name = 'John'; // Cannot be reassigned var isStudent = true; // Function-scoped, older way of declaring variables
Data Types:
Step 1: Explore different data types by writing the following code in
index.js
:let number = 10; // Number let text = 'Hello'; // String let isTrue = false; // Boolean let nothing = null; // Null let notDefined; // Undefined let person = { name: 'Alice', age: 30 }; // Object
Step 2: Use
console.log
to print these variables and their types:console.log(typeof number); // number console.log(typeof text); // string console.log(typeof isTrue); // boolean console.log(typeof nothing); // object (null is an object) console.log(typeof notDefined); // undefined console.log(typeof person); // object
Operators and Expressions:
Step 1: Practice using different operators by writing the following code:
let sum = 5 + 3; // Arithmetic let difference = 10 - 6; let product = 4 * 2; let quotient = 8 / 2; let isEqual = (5 == '5'); // Comparison (true because of type coercion) let isIdentical = (5 === '5'); // Strict comparison (false) let isAdult = (age > 18) && isStudent; // Logical let isMinor = (age < 18) || isStudent; let isNotStudent = !isStudent;
Tutorial 3: Control Structures
Conditionals:
Step 1: Write
if
,else if
, andelse
statements:let age = 20; if (age >= 18) { console.log('Adult'); } else if (age >= 13) { console.log('Teenager'); } else { console.log('Child'); }
Step 2: Use a
switch
statement for multiple conditions:let day = 'Monday'; switch (day) { case 'Monday': console.log('Start of the week'); break; case 'Wednesday': console.log('Midweek'); break; case 'Friday': console.log('Weekend is near'); break; default: console.log('Other day'); }
Loops:
For Loop:
Step 1: Write a
for
loop to print numbers from 0 to 4:for (let i = 0; i < 5; i++) { console.log(i); }
While Loop:
Step 1: Write a
while
loop to print numbers from 5 to 1:let count = 5; while (count > 0) { console.log(count); count--; }
Do...While Loop:
Step 1: Write a
do...while
loop to print numbers from 1 to 3:let num = 1; do { console.log(num); num++; } while (num <= 3);
Tutorial 4: Project 1 - Simple Calculator
Basic Calculator Implementation:
Step 1: Create an HTML file
calculator.html
and link it to a new JavaScript filecalculator.js
:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Calculator</title> <script src="calculator.js" defer></script> </head> <body> <h1>Simple Calculator</h1> </body> </html>
Step 2: In
calculator.js
, write the basic calculator code:let num1 = parseFloat(prompt('Enter first number:')); let num2 = parseFloat(prompt('Enter second number:')); let operator = prompt('Enter operator (+, -, *, /):'); let result; if (operator === '+') { result = num1 + num2; } else if (operator === '-') { result = num1 - num2; } else if (operator === '*') { result = num1 * num2; } else if (operator === '/') { result = num1 / num2; } else { alert('Invalid operator'); } alert('Result: ' + result);
Day 2: Functions and Arrays
Tutorial 1: Functions
Declaring and Invoking Functions:
Step 1: In
index.js
, declare a function:function greet(name) { return 'Hello, ' + name; } console.log(greet('Alice'));
Step 2: Understand parameters and return values:
function add(a, b) { return a + b; } let sum = add(3, 5); console.log(sum);
Arrow Functions:
Step 1: Rewrite the
add
function as an arrow function:const add = (a, b) => a + b; console.log(add(3, 5));
Tutorial 2: Arrays
Creating and Manipulating Arrays:
Step 1: Create an array and access its elements:
let numbers = [1, 2, 3, 4, 5]; console.log(numbers[0]); // 1 console.log(numbers[4]); // 5
Step 2: Use array methods like
push
,pop
,shift
,unshift
:numbers.push(6); console.log(numbers); // [1, 2, 3, 4, 5, 6] numbers.pop(); console.log(numbers); // [1, 2, 3, 4, 5] numbers.shift(); console.log(numbers); // [2, 3, 4, 5] numbers.unshift(1); console.log(numbers); // [1, 2, 3, 4, 5]
Array Methods:
Step 1: Use
map
to create a new array with each element doubled:javascript let doubled =
numbers.map
(num => num * 2); console.log(doubled); // [2, 4, 6, 8, 10]
Step 2: Use
filter
to create a new array with even numbers:
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
Step 3: Use reduce
to sum all the numbers in the array:
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
Tutorial 3: Project 1 Enhancements
Modularize Calculator Code:
Step 1: Refactor the calculator code to use functions for different operations:
function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } function multiply(a, b) { return a * b; } function divide(a, b) { return a / b; } function calculate(num1, num2, operator) { switch (operator) { case '+': return add(num1, num2); case '-': return subtract(num1, num2); case '*': return multiply(num1, num2); case '/': return divide(num1, num2); default: return 'Invalid operator'; } } let num1 = parseFloat(prompt('Enter first number:')); let num2 = parseFloat(prompt('Enter second number:')); let operator = prompt('Enter operator (+, -, *, /):'); let result = calculate(num1, num2, operator); alert('Result: ' + result);
Day 3: Objects and DOM Manipulation
Tutorial 1: Objects
Creating and Using Objects:
Step 1: Create an object and access its properties and methods:
let person = { name: 'Alice', age: 25, greet() { console.log('Hello, ' + this.name); } }; console.log(person.name); // Alice person.greet(); // Hello, Alice
Tutorial 2: DOM Manipulation
Selecting and Modifying DOM Elements:
Step 1: Create an HTML file
dom.html
and link it to a new JavaScript filedom.js
:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM Manipulation</title> <script src="dom.js" defer></script> </head> <body> <h1 id="header">Hello, World!</h1> <button id="changeColorButton">Change Color</button> </body> </html>
Step 2: In
dom.js
, select and modify the header element:let header = document.getElementById('header'); header.textContent = 'New Header'; header.style.color = 'blue';
Event Handling:
Step 1: Add an event listener to the button to change the header color when clicked:
let button = document.getElementById('changeColorButton'); button.addEventListener('click', () => { header.style.color = 'red'; });
Tutorial 3: Project 2 - To-Do List Application
Basic To-Do List Implementation:
Step 1: Create an HTML file
todo.html
and link it to a new JavaScript filetodo.js
:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To-Do List</title> <script src="todo.js" defer></script> </head> <body> <h1>To-Do List</h1> <input type="text" id="taskInput" placeholder="Add a new task"> <button id="addTaskButton">Add Task</button> <ul id="taskList"></ul> </body> </html>
Step 2: In
todo.js
, implement the to-do list functionality:let tasks = []; function addTask(task) { tasks.push({ text: task, completed: false }); renderTasks(); } function removeTask(index) { tasks.splice(index, 1); renderTasks(); } function toggleTask(index) { tasks[index].completed = !tasks[index].completed; renderTasks(); } function renderTasks() { let taskList = document.getElementById('taskList'); taskList.innerHTML = ''; tasks.forEach((task, index) => { let li = document.createElement('li'); li.textContent = task.text; if (task.completed) { li.style.textDecoration = 'line-through'; } li.addEventListener('click', () => toggleTask(index)); let removeButton = document.createElement('button'); removeButton.textContent = 'Remove'; removeButton.addEventListener('click', () => removeTask(index)); li.appendChild(removeButton); taskList.appendChild(li); }); } document.getElementById('addTaskButton').addEventListener('click', () => { let taskInput = document.getElementById('taskInput'); let taskText = taskInput.value; if (taskText) { addTask(taskText); taskInput.value = ''; } });
Day 4: Advanced Concepts and ES6 Features
Tutorial 1: Advanced Functions
Higher-Order Functions:
Step 1: Write a function that accepts another function as an argument:
function applyOperation(a, b, operation) { return operation(a, b); } function add(a, b) { return a + b; } console.log(applyOperation(5, 3, add)); // 8
Closures and IIFE:
Step 1: Understand closures with an example:
function createCounter() { let count = 0; return function () { count++; return count; }; } let counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2
Step 2: Write an Immediately Invoked Function Expression (IIFE):
(function () { console.log('This function runs immediately!'); })();
Tutorial 2: ES6 Features
Template Literals:
Step 1: Use template literals for string interpolation:
let name = 'Alice'; let greeting = `Hello, ${name}`; console.log(greeting); // Hello, Alice
Destructuring:
Step 1: Destructure arrays and objects:
let [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 let person = { name: 'Alice', age: 25 }; let { name, age } = person; console.log(name); // Alice console.log(age); // 25
Spread and Rest Operators:
Step 1: Use the spread operator to expand arrays:
let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4, 5]; console.log(arr2); // [1, 2, 3, 4, 5]
Step 2: Use the rest operator to collect arguments:
function sum(...numbers) { return numbers.reduce((acc, num) => acc + num, 0); } console.log(sum(1, 2, 3)); // 6
Classes and Inheritance:
Step 1: Understand ES6 classes and inheritance:
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } class Dog extends Animal { speak() { console.log(`${this.name} barks.`); } } let dog = new Dog('Rex'); dog.speak(); // Rex barks.
Tutorial 3: Project 2 Enhancements
Saving to Local Storage:
Step 1: Use
localStorage
to persist the to-do list across sessions:function saveTasks(){ localStorage.setItem('tasks', JSON.stringify(tasks)); } function loadTasks() { let storedTasks = localStorage.getItem('tasks'); if (storedTasks) { tasks = JSON.parse(storedTasks); renderTasks(); } } loadTasks(); function addTask(task) { tasks.push({ text: task, completed: false }); saveTasks(); renderTasks(); } function removeTask(index) { tasks.splice(index, 1); saveTasks(); renderTasks(); } function toggleTask(index) { tasks[index].completed = !tasks[index].completed; saveTasks(); renderTasks(); }
```
Filtering Tasks:
Step 1: Add buttons to filter tasks (all, completed, incomplete):
<button id="allTasksButton">All</button> <button id="completedTasksButton">Completed</button> <button id="incompleteTasksButton">Incomplete</button>
Step 2: Implement filtering logic in
todo.js
:function filterTasks(filter) { let filteredTasks = tasks.filter(task => { if (filter === 'all') return true; if (filter === 'completed') return task.completed; if (filter === 'incomplete') return !task.completed; }); renderTasks(filteredTasks); } document.getElementById('allTasksButton').addEventListener('click', () => filterTasks('all')); document.getElementById('completedTasksButton').addEventListener('click', () => filterTasks('completed')); document.getElementById('incompleteTasksButton').addEventListener('click', () => filterTasks('incomplete')); function renderTasks(filteredTasks = tasks) { let taskList = document.getElementById('taskList'); taskList.innerHTML = ''; filteredTasks.forEach((task, index) => { let li = document.createElement('li'); li.textContent = task.text; if (task.completed) { li.style.textDecoration = 'line-through'; } li.addEventListener('click', () => toggleTask(index)); let removeButton = document.createElement('button'); removeButton.textContent = 'Remove'; removeButton.addEventListener('click', () => removeTask(index)); li.appendChild(removeButton); taskList.appendChild(li); }); }
Day 5: APIs and Final Touches
Tutorial 1: Working with APIs
Fetch API:
Step 1: Learn how to make GET requests using the Fetch API:
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
Step 2: Learn how to make POST requests using the Fetch API:
fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
Async/Await:
Step 1: Use async functions and handle errors with try/catch:
async function fetchData() { try { let response = await fetch('https://api.example.com/data'); let data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); } } fetchData();
Tutorial 2: Project 2 Final Enhancements
Integrating Weather API:
Step 1: Use a weather API to display the weather for each task location:
async function getWeather(location) { let response = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${location}`); let data = await response.json(); return data.current.temp_c; } async function addTaskWithWeather(task, location) { let weather = await getWeather(location); tasks.push({ text: task, location: location, weather: weather, completed: false }); saveTasks(); renderTasks(); } document.getElementById('addTaskButton').addEventListener('click', async () => { let taskInput = document.getElementById('taskInput'); let locationInput = document.getElementById('locationInput'); let taskText = taskInput.value; let locationText = locationInput.value; if (taskText && locationText) { await addTaskWithWeather(taskText, locationText); taskInput.value = ''; locationInput.value = ''; } });
README for To-Do List Application:
# To-Do List Application
## Description
This is a simple to-do list application that allows users to add, remove, and mark tasks as completed. It also integrates a weather API to display the weather for each task location.
## Features
- Add new tasks
- Remove tasks
- Mark tasks as completed
- Filter tasks (all, completed, incomplete)
- Save tasks to local storage
- Display weather for each task location
## Usage
1. Open `todo.html` in a web browser.
2. Enter a new task and its location, then click "Add Task".
3. The task will be added to the list and the weather for the location will be displayed.
## Technologies Used
- HTML
- CSS
- JavaScript
- Fetch API
- Local Storage
## License
This project is licensed under the MIT License.
This detailed tutorial ensures a comprehensive understanding of JavaScript basics, advanced concepts, and project development, making the learning process engaging and practical.