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();
    });
});