DEV Community: Sathish Kumar

JavaScript:

Sathish Kumar — Mon, 12 Oct 2026 14:26:27 +0000

1.Listen for the Click Event:
First, we attach an event listener to the button element to trigger an action when a user clicks it:

Example:

buttonTag.addEventListener('click', addToCart);

2.Add Item & Update DOM:
Inside the addToCart function:

We push the selected product to our cart array.

We update the UI count dynamically using innerText.

Example:

function addToCart(product) {
cart.push(product);
document.getElementById('cart-count').innerText = cart.length;
}

3.Save Data in LocalStorage:
To make sure data stays saved in the browser, we use localStorage.setItem:

Example:

localStorage.setItem("cart-item", JSON.stringify(cart));

How to call an API in JavaScript:

Sathish Kumar — Sat, 10 Oct 2026 16:42:21 +0000

If you are learning JavaScript, calling an API is one of the most exciting things you will learn. It allows your website to talk to other servers and get data (like weather, user profiles, or products).

Here is the easiest way to do it using fetch() and async/await:

Example:

async function getUserData() {
try {
// 1. Fetch data from the API URL
const response = await fetch('https://api.github.com/users/octocat');

// 2. Convert the response into JSON format
const data = await response.json();

// 3. Print the data in the console
console.log(data);

} catch (error) {
// Handle any errors here
console.error('Error fetching data:', error);
}
}

getUserData();

Simple & Direct (Best for quick engagement):

Sathish Kumar — Thu, 08 Oct 2026 15:04:34 +0000

Understanding the DOM & Basic Manipulation!

Today, I revised key Web Development concepts—focusing on DOM Manipulation and Equality Operators in JavaScript.

Here is a quick summary of what I learned:

1.What is DOM?

DOM stands for Document Object Model.

It represents the HTML web page as objects, allowing us to dynamically change content using JavaScript.

2.Selecting & Changing Elements:

document.getElementById('idName'): Selects an HTML element using its unique ID.

.innerText: Used to update or modify the text content inside an element.

appendChild(): Used to add/append a new node or element to the end of a parent container.

** Loose vs. Strict Equality in JavaScript:**

10 == "10" ➔ true (Checks value only, performs type coercion).

10 === "10" ➔ false (Checks both value and data type).

JavaScript Notes:

Sathish Kumar — Wed, 07 Oct 2026 17:16:16 +0000

1.Spread Operator (...):

Used to expand elements of an array or add new elements easily.

Example:

let arr2 = [4, 5, 6];

arr2 = [...arr2, 7]; // Adding 7 to the existing array

console.log(arr2);

// Output: [4, 5, 6, 7]

2. Array Destructuring & Rest Operator (...):

Extracting specific elements from an array into variables, and packing the remaining elements using the Rest operator.

Example:

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];

// 'a' gets 1st value, 'b' gets 2nd value, '...c' collects the rest!

const [a, b, ...c] = arr1;

console.log(a);

// Output: 1

console.log(b); // Output: 2

console.log(c); // Output: [3, 4, 5, 6, 7, 8]

3. Fetch API & Promises:

Used to request data from a server asynchronously.

Example:

const promise = fetch('https://api.example.com/data');

promise

.then((res) => res.json()) // Convert response to JSON

.then((data) => {

// Accessing specific nested data

console.log(data.product[0].image[0]);

})

.catch((err) => {

// Handle errors if the request fails

console.log("Error:", err);

});

Key Takeaway:

Spread Operator (...): Expands elements.

Rest Operator (...): Combines multiple elements into an array.

Fetch API: Handles asynchronous HTTP requests using Promises.

JavaScript Basics:

Sathish Kumar — Tue, 06 Oct 2026 15:31:48 +0000

Arrays, Functions & Callbacks:

Here is a quick recap of some fundamental JavaScript concepts I revised today:

1.Array Length (.length):

mark.length gives the total size (number of elements) in an array.

2.Mixed Data Types in Arrays:

JavaScript arrays can store different types of data together:

const ar = [10, 20, 30, "abc", true];

3.The .filter() Method:

numbers.filter(display)

numbers ➔ Array name

display ➔ Function passed inside .filter()

4.Callback Functions:

A callback function is a function passed as an argument to another function.

Example: filterdemo(display)

5.Arrow Functions (=>):

A concise way to write functions in JavaScript.

JavaScript for Loop (Increment vs. Decrement)

Sathish Kumar — Fri, 02 Oct 2026 15:51:59 +0000

Mastering Loops in JavaScript: For Loops Explained Simply!
Understanding how loops work is a fundamental skill for every web developer. Today, I broke down the for loop flow logic into two simple scenarios:

1. Incrementing Loop (Counting Up):
Initial Value: Starts at i = 0

Condition: Runs as long as i <= 5

Step: Increases by 1 (i++)

Output: 0, 1, 2, 3, 4, 5
Example:
for (let i = 0; i <= 5; i++) {
console.log(i);
}

2.Decrementing Loop (Counting Down):
Initial Value: Starts at i = 5

Condition: Runs as long as i > 0

Step: Decreases by 1 (i--)

Output: 5, 4, 3, 2, 1
Example:
for (let i = 5; i > 0; i--) {
console.log(i);
}

JavaScript:

Sathish Kumar — Wed, 30 Sep 2026 15:26:58 +0000

Today, I spent time revising two essential core concepts in JavaScript:
JavaScript Objects and Arrow Functions. Here is a quick breakdown of what I covered:

1. JavaScript Objects (Key-Value Pairs & Methods):****

Objects allow us to group related data and functionality together.

Example 1: Mobile Object:

const mobile = {

brand: "Vivo",

price: 15000,

network: "5G",

browse: function () {

console.log("Browsing...");

}

Example 2: Bike Objects (TVS & Bajaj):

const TVS = {

model: "XL-100",

price: 99000,

cc: 100,

drive: function () {

console.log("Speed - 70 km/h");

}

const bajaj = {

model: "Pulsar",

price: 150000,

cc: 150,

drive: function () {

console.log("Speed - 120 km/h");

}

2.Arrow Functions :

Arrow functions provide a cleaner and shorter syntax for writing function expressions in JavaScript.

Syntax:

(param1, param2) => expression;

Example:

const add = (i, j) => i + j;

Constructor Function:

Sathish Kumar — Tue, 29 Sep 2026 13:06:23 +0000

What is a Constructor Function?

It is a special function used to initialize objects with specific values.

It is called automatically when a new object is created using the new keyword.

2. Naming Convention Rule:

Regular functions start with a lowercase letter (e.g., function laptop()).

Constructor functions start with an uppercase letter (e.g., function Laptop()).

Key Concept:

The this keyword refers to the current object being created.

Example Code:

function Laptop(brand, model, price, rom, ram) {
this.brand = brand;
this.model = model;
this.price = price;
this.rom = rom;
this.ram = ram;
}

const laptop1 = new Laptop("Lenovo", "l15", 45000, 512, 8);
const laptop2 = new Laptop("HP", "h15", 35000, 256, 4);

console.log(laptop1);
console.log(laptop2);

Thrilled to share my latest front-end project:

Sathish Kumar — Mon, 28 Sep 2026 14:54:32 +0000

I recently built a clean and responsive website for JJ College using only HTML & CSS.

Key Highlights:

🔹 Built purely with semantic HTML5 and CSS3

🔹 Clean and user-friendly design

🔹 Fully responsive layout across desktop and mobile

🔹 Easy navigation for college updates and course details

Check out the live website here:

🔗 https://shop-ed6a1b.gitlab.io/jjcollege.html

Would love to hear your thoughts and feedback in the comments!

JAVASCRIPT FUNCTION:

Sathish Kumar — Sat, 26 Sep 2026 16:46:34 +0000

Learning JavaScript step-by-step! Today, I made notes on one of the most fundamental concepts in JS: Functions, Parameters, and Arguments. Here is a quick breakdown:

1. What is a Function?

A function is a reusable block of code designed to perform a specific task.

Example:

function biriyani() {

console.log("Biriyani Ready");

}

biriyani(); // Output: Biriyani Ready

2.Parameters vs. Arguments

Parameter: A placeholder variable declared inside the function definition.

Argument: The actual value you pass into the function when calling it.

Example:

// 'i' and 'j' are Parameters (placeholders)

function add(i, j) {

let result = i + j;

console.log(result);

}

// 5 and 10 are Arguments (actual values)

add(5, 10); // Output: 15

Today's Learning: JavaScript Basics:

Sathish Kumar — Fri, 25 Sep 2026 17:01:34 +0000

Today's Learning: JavaScript Basics
I am currently revising core JavaScript concepts and created a quick reference note! Here is a summary of the fundamentals

1. Data Types (Primitive):
JavaScript has essential primitive data types to handle different kinds of values:

Number

BigInt

String

Boolean

Undefined

Null

Symbol

2. Anatomy of a Variable:
Example: age = 25;

age ➔ Variable

= ➔ Assignment Operator

25 ➔ Value

3. Variable Declarations (var, let, const):
let: Used when declaring a variable for the first time (let age = 35;).

const: Used for fixed values that shouldn't be reassigned (const Pi = 3.14;).

var: Traditional variable declaration (var age = 30;).

JAVA SCRIPT:

Sathish Kumar — Thu, 24 Sep 2026 12:35:36 +0000

Today I learned about Data Types in JavaScript.

Data types tell us what kind of value a variable stores.

Primitive Data Types:

Primitive data types store simple values.

String → stores text

Example:

let name = "Sathish";

Number → stores numbers

Example:

let age = 23;

Boolean → stores true or false

Example:

let is Student = true;

BigInt → used for very large integers

Example:

let bigNumber = 12345678901234567890n;

Non-Primitive Data Type:

The main non-primitive type is Object.

Objects can store multiple values in a structured way.

Example:

let student = {

name: "Sathish",

age: 23

};