Local Storage Examples

// Store data
localStorage.setItem("username", "john_doe");

// Retrieve data
let username = localStorage.getItem("username");

// Remove data
localStorage.removeItem("username");

Session Storage Examples

//store data
sessionStorage.setItem("sessionId", "12345");

//get data
let sessionId = sessionStorage.getItem("sessionId");

//delete data
sessionStorage.removeItem("sessionId");

Declaring Canvas in HTML

Accessing Canvas in JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

Basic Canvas Animation Example

let x = 50;  // Circle's first pixel in the x axis
let y = 50;  // Circle's first pixel in the y axis
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // Let's erase the last circle
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);  // Place a circle in the center
    ctx.fillStyle = "red";
    ctx.fill();
    x += 1;  // Increment x position by 1 Pixel.
    y += 1;  // Increment y position by 1 Pixel.
    requestAnimationFrame(animate);  // Move on to the next frame and repeat.
}
animate();  // Drawing and looping the animation.

SVG Animation Example

Basic Fetch Example

fetch('https://api.example.com/data')
.then(response => response.json()) 
.then(data =>{
    console.log(data);
})
.catch(error => {
    console.error('There was an error!', error);
});

Response Handling Example

fetch('https://api.example.com/data').then(response => {
    const statusCode = response.status;
    if (!(statusCode >= 200 && statusCode < 300)) {
        throw new Error("Network response was not ok");
    }
    return response.json();
}).then(data => {
    console.log(data);
}).catch(error => {
    console.error('There was a problem with the fetch operation:', error);
});

Fetch POST Example

const data = {
    username: 'john_doe',
    email: '[email protected]'
};
fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
    console.log('User created:', data);
})
.catch(error => {
    console.error('There was an error!', error);
});

Named Exports Example

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Default Exports Example

//Dummy.js
const logger = (message) => {
    console.log(message);
}
export default logger;

Importing Named Exports Example

//Dummy2.js
import {add, subtract} from './math.js';
console.log(add(2,3)); //5
console.log(subtract(5,3)); //2

Importing Default Exports Example

//app.js
import logMessage from './logger.js';
logMessage('This is a log message!');

Dynamic Imports Example

button.addEventListener('click', () => {
    import('./notThatSmallModule.js').then(module => {
        module.testButton();
    });
});

Arrow Function Example

let add = (a, b) => a + b;

Template Literals Example

let name = "Alice";
let greeting = `Hello, ${name}!`;

Array Destructuring Example

let numbers = [1, 2, 3];
let [a, b, c] = numbers;

Object Destructuring Example

let person = { name: "John", age: 30 };
let { name, age } = person;

Class Example

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
let person = new Person("Alice", 25);
person.greet(); // Outputs: Hello, my name is Alice

Default Parameters Example

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

Rest Operator Example

function sum(...numbers) {
    return numbers.reduce((acc,num) => acc + num),0);
}

Spread Operator Example

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];

Exporting Module Example

// math.js 
export function add(a, b) {
    return a + b;
}

Importing Module Example

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

Promise Example

let myPromise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("Task completed successfully");
    } else {
        reject("Task failed");
    }
});

myPromise.then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});

Basic JSON Object Example

{"name": " "John","age":"30","isStudent" - false}

Complex JSON Example

{ "name": "Alice","age": 25,"hobbies": ["reading", "hiking", "coding"],"address": {"street": "123 Maple St.","city": "Wonderland"}}

Parsing JSON to JavaScript Object

let jsonString = '{"name": "Alice", "age": 25}';
let obj = JSON.parse(jsonString);
console.log(obj.name);  // Output: Alice
console.log(obj.age);   // Output: 25

Stringifying JavaScript Object to JSON

let person = {name: "Bob",age: 30,isStudent: false};
let jsonString = JSON.stringify(person);
console.log(jsonString);  // Display: '{"name":"Bob","age":30,"isStudent":false}'

Fetching JSON Data Example

fetch("https://api.example.com/data")
.then(response => response.json())  // A method that converts the response body// as JSON, which is a response format to // note as well
.then(data => {
    console.log(data); // Add user defined logic
})
.catch(function (error){
    console.log("Error: " + error);
});

Reading and Writing JSON in Node.js

const fs = require('fs');
// Reading JSON from a file
fs.readFile('data.json', 'utf8', (err, data) => {
    if (err) {
        console.log(err);
        return;
    }
    let jsonData = JSON.parse(data);  // Converts JSON string into JavaScript object    
    console.log(jsonData);
});
// Writing JSON to a file
let newPerson = { name: "Charlie", age: 28 };
fs.writeFile('newData.json', JSON.stringify(newPerson), 'utf8', (err) => {
    if (err) {
        console.log(err);
    } else {
        console.log("Data has been written to the file.");
    }
});

Promise Structure

let promise = new Promise(function(resolve, reject){
// Asynchronous operation
let success = false;
// A piece of code that determines if a success or failure simulation will be fired
if(success) {
    resolve("Operation was successful");  // The promise is fulfilled
} else {
    reject("Operation failed");  // The promise is rejected
}
});

promise
.then(function(result) {
    console.log(result); // If resolved, show the success message.
}).catch(function(error) {
    console.log(error); // If rejected, show the error message.
});

Promise Chaining Example

fetchDataFromAPI().then(function(response) {
    return processData(response); // Returning new promise
})
.then(function(processedData) {
    return saveData(processedData); // Returning another promise
})
.catch(function(error) {
    console.log("Error: " + error);
});

Async/Await Example

async function fetchData() {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    return data;
}

fetchData().then(function(result){
    console.log(result);
}).catch(function(error){
    console.log("Error: " + error);
});

try-catch Syntax

try { 
 // Code that may cause an error 
} catch (error) { 
 // Code to handle the error 
}

try-catch Example

try {
    let result = 10 / 0; // This will always raise an error of executing a divide by zero statement
} catch (error) {
    console.log("Error: " + error.message); // This will log the error message
}

Throwing a Custom Error

throw new Error("This is a custom error message");

Throwing a Custom Error in a Function

function checkAge(age) { 
if (age < 18) { 
throw new Error("Age must be 18 or older."); 
} 
console.log("Age is valid"); 
} 
try { 
checkAge(16); 
} catch(error) { 
console.log(error.message); // Outputs: Age must be 18 or older. 
}

try-catch-finally Syntax

try {
    // Code with a chances of failing
} catch (error) {
    // Managing the error
} finally {
    // Code which runs regardless of code above throwing an error or not
}

try-catch-finally Example

try {
    let file = openFile("example.txt");
    // Perform some operations on the file
} catch (error) {
    console.log("An error occurred: " + error.message);
} finally {
    closeFile(file); // Close the file no matter the try block being a success or failure
}

Accessing Error Object Properties

try { var x = 10 / 0;} catch (error) {
console.log("Error name: " + error.name); //Produces: Error name: Error
console.log("Error message: " + error.message); //Produces: Error message: Infinity
console.log("Stack trace: " + error.stack); //So this returns the stack trace
}