Hackforge Academy

Explanation

setTimeout() executes a function once
after a specified delay (in milliseconds).

Code:

setTimeout(() => {
  console.log('Hello after 2 seconds');
}, 2000);

Explanation

1. The delay in setTimeout is not guaranteed exact timing
2. it runs after at least the given delay.

Code:

setTimeout(() => console.log('Executed'), 1000);

Explanation

You can pass arguments to the function
inside setTimeout.

Code:

function greet(name) {
  console.log('Hello ' + name);
}
setTimeout(greet, 1000, 'Praveen');

Explanation

clearTimeout() is used to cancel a
scheduled timeout.

Code:

const id = setTimeout(() => console.log('Will not run'), 3000);
clearTimeout(id);

Explanation

setTimeout returns a timeout ID used to
cancel it later.

Code:

const timeoutId = setTimeout(() => {}, 1000);
console.log(timeoutId);

Explanation

setInterval() repeatedly executes a
function at specified intervals.

Code:

setInterval(() => {
  console.log('Runs every 1 second');
}, 1000);

Explanation

clearInterval() stops the repeated execution.

Code:

const intervalId = setInterval(() => console.log('Running'), 1000);
clearInterval(intervalId);

Explanation

setInterval also returns an interval ID.

Code:

const id = setInterval(() => {}, 2000);
console.log(id);

Explanation

setInterval may cause performance issues
if not cleared properly.

Code:

const id = setInterval(() =>
console.log('Heavy Task'), 100);
clearInterval(id);

Explanation

Difference: setTimeout runs once,
setInterval runs repeatedly.

Code:

setTimeout(() => console.log('Once'), 1000);
setInterval(() => console.log('Repeated'), 1000);

Explanation

You can read a JSON file in browser
using fetch API.

Code:

fetch('data.json')
  .then(res => res.json())
  .then(data => console.log(data));

Explanation

In Node.js, you can read JSON using require().

Code:

const data = require('./data.json');
console.log(data);

Explanation

Using fs module to read JSON in Node.js.

Code:

const fs = require('fs');
const data = JSON.parse(fs.readFileSync('data.json'));
console.log(data);

Explanation

JSON.parse() converts JSON string into
JavaScript object.

Code:

const obj = JSON.parse('{"name":"Praveen"}');

Explanation

JSON.stringify() converts object into JSON
string.

Code:

const str = JSON.stringify({name:'Praveen'});

Explanation

Canvas is an HTML element used to draw
graphics via JavaScript.

Code:

<canvas id='myCanvas'></canvas>

Explanation

You access canvas context using getContext().

Code:

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

Explanation

You can draw shapes like rectangles using fillRect().

Code:

ctx.fillRect(10, 10, 100, 50);

Explanation

Canvas can draw text using fillText().

Code:

ctx.fillText('Hello', 50, 50);

Explanation

Canvas supports drawing images using drawImage().

Code:

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = 'image.png';

Explanation

display: flex enables flexbox layout in CSS.

Code:

.container { display: flex; }

Explanation

Flexbox arranges items in row by default.

Code:

.container { display: flex; flex-direction: row; }

Explanation

You can change direction using flex-direction.

Code:

.container { flex-direction: column; }

Explanation

justify-content aligns items horizontally.

Code:

.container { justify-content: center; }

Explanation

align-items aligns items vertically.

Code:

.container { align-items: center; }

Explanation

margin: auto is commonly used to center
block elements horizontally.

Code:

.box { width: 200px; margin: auto; }

Explanation

For horizontal centering, left and right
margins become equal.

Code:

.box { margin-left: auto; margin-right: auto; }

Explanation

margin: 0 auto centers element horizontally.

Code:

.box { width: 300px; margin: 0 auto; }

Explanation

In flexbox, margin: auto can push elements
to edges.

Code:

.item { margin-left: auto; }

Explanation

margin: auto works only when width is
specified (for block elements).

Code:

.box { width: 150px; margin: auto; }