DEV Community: Athithya Sivasankarar

Ecommerce Website

Athithya Sivasankarar — Sat, 09 May 2026 07:11:53 +0000

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ecommerce Website</title>

    <style>
        body {
            font-family: Arial;
            margin: 20px;
            background-color: lightgray;
        }

        h1 {
            text-align: center;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        .card {
            background-color: white;
            border: 1px solid black;
            padding: 10px;
        }

        .card img {
            width: 100%;
            height: 150px;
            object-fit: contain;
        }

        .title {
            font-size: 18px;
        }

        .description {
            font-size: 14px;
        }

        .price {
            color: green;
        }

        button {
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <h1>My Store</h1>

    <div class="container" id="container"></div>

    <script>

        const container = document.getElementById("container");

        fetch("https://fakestoreapi.com/products")
            .then((res) => res.json())
            .then((data) => {

                for (let i = 0; i < data.length; i++) {

                    // CARD
                    const card = document.createElement("div");
                    card.setAttribute("class", "card");

                    // IMAGE
                    const img = document.createElement("img");
                    img.src = data[i].image;

                    // TITLE
                    const title = document.createElement("h3");
                    title.innerText = data[i].title;
                    title.setAttribute("class", "title");

                    // DESCRIPTION
                    const desc = document.createElement("p");
                    desc.innerText = data[i].description;
                    desc.setAttribute("class", "description");

                    // PRICE
                    const price = document.createElement("h2");
                    price.innerText = "$" + data[i].price;
                    price.setAttribute("class", "price");

                    // BUTTON
                    const btn = document.createElement("button");
                    btn.innerText = "Add to Cart";

                    // APPEND
                    card.appendChild(img);
                    card.appendChild(title);
                    card.appendChild(desc);
                    card.appendChild(price);
                    card.appendChild(btn);

                    container.appendChild(card);
                }

            })
            .catch((err) => {
                console.log(err);
            });

    </script>

</body>

</html>

output:
https://javascript-project-bbfecd.gitlab.io/productCard.html

To Do List Project

Athithya Sivasankarar — Wed, 06 May 2026 09:19:59 +0000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     body {
            font-family: Arial;
            text-align: center;
            margin-top: 50px;
        }
        input {
            width: 200px;
            height: 40px;
            font-size: 20px;
            text-align: left;
        }

        button {
            width: 70px;
            height: 50px;
            font-size: 18px;
            margin: 5px;
        }

ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
</style>
<body>
<input id="user-input" type="text" placeholder="Enter a task...">
<button onclick="todo()">add</button>
<ul id="list"></ul>
<script>
    function todo() {
        const task = document.getElementById("user-input")
        let user_input = task.value;
        const item = document.createElement("li");
        item.innerHTML = `<span onclick="complete(this)">${user_input}</span>  <button onclick="deleteTask(this)">delete</button>`;
        const list = document.getElementById("list");
        list.appendChild(item);
        task.value = '';
    }
    function deleteTask(element) {
        element.parentElement.remove();
    }
   function complete(element) {
    if (element.style.textDecoration === "line-through") {
        element.style.textDecoration = "none";
    } else {
        element.style.textDecoration = "line-through";
    }
} 

</script>
</body>
</html>

DOM Exercise

Athithya Sivasankarar — Wed, 29 Apr 2026 06:57:50 +0000

1. Bulb on/Off program

output:

10 Simple DOM Questions

Athithya Sivasankarar — Mon, 27 Apr 2026 17:45:44 +0000

What is the DOM in JavaScript?

Concept: Basics

Explain that DOM = Document Object Model
It represents HTML as a tree structure
JS uses it to interact with web pages

How do you select an element by ID?

Concept: getElementById()

let heading = document.getElementById("title");

How do you select elements by class name?

Concept: getElementsByClassName()

let items = document.getElementsByClassName("item");

What is the difference between querySelector() and querySelectorAll()?(tbh)

Concept: Modern selectors

document.querySelector(".box"); // first match
document.querySelectorAll(".box"); // all matches

How do you change text inside an element?

Concept: innerText

document.getElementById("title").innerText = "Hello World";

How do you change HTML content?

Concept: innerHTML

document.getElementById("box").innerHTML = "Bold Text";

How do you change CSS styles using JavaScript?

Concept: style

document.getElementById("box").style.color = "red";

How do you add a click event to a button?

Concept: addEventListener()

document.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});

How do you create a new element and add it to the page?(tbh)

Concept: createElement() & appendChild()

let newPara = document.createElement("p");
newPara.innerText = "New paragraph";
document.body.appendChild(newPara);

How do you remove an element from the DOM?

Concept: remove()

document.getElementById("box").remove();

JavaScript Scenario Questions

Athithya Sivasankarar — Sat, 18 Apr 2026 11:13:45 +0000

1. Login Check

let username = "Athithya";
let pass = "1234564#$$5";

if (username && pass) {
    console.log("You have logged in");
} else {
    console.log("Check your username and password");
}

Output:

You have logged in

2. Product Details

let name = "iPhone";
let price = 60000;
let stock = 5;

console.log(`${name} costs ${price} and only ${stock} left in stock`);

Output:

iPhone costs 60000 and only 5 left in stock

3. Total Marks

let mark = [35, 60, 78];
let total = 0;

for (let i = 0; i < mark.length; i++) {
    total += mark[i];
}

console.log(total);

Output:

4. Swap Two Numbers

let a = 20;
let b = 15;

a = a + b;
b = a - b;
a = a - b;

console.log(a, b);

Output:

15 20

5. User Login Status

let userLoggedIn = true;

if (userLoggedIn) {
    console.log("Welcome user");
} else {
    console.log("Incorrect password");
}

Output:

Welcome user

6. 10% Discount

let total = 3000;
let discount = total * 0.10;
let finalPrice = total - discount;

console.log(finalPrice);

Output:

7. Even or Odd

let num = 25;

if (num % 2 === 0) {
    console.log("Even number");
} else {
    console.log("Odd number");
}

Output:

Odd number

8. Compare Passwords

let pass1 = "abc";
let pass2 = "abc";

if (pass1 === pass2) {
    console.log("Passwords match");
} else {
    console.log("Passwords do not match");
}

Output:

Passwords match

9. Voting Eligibility

let age = 21;

if (age >= 18) {
    console.log("Eligible to vote");
} else {
    console.log("Not eligible to vote");
}

Output:

Eligible to vote

10. Dashboard Access

let userLogged = true;
let admin = true;

if (userLogged && admin) {
    console.log("Access granted");
} else {
    console.log("Access denied");
}

Output:

Access granted

11. Cart Total

const cart = [20, 45, 74];

const total = cart.reduce((acc, val) => acc + val, 0);

console.log(total);

Output:

12. Greeting Function

function greet(name) {
    console.log(`Good Morning ${name}`);
}

greet("Athithya");

Output:

Good Morning Athithya

13. Celsius to Fahrenheit

function celsiusToFahrenheit(c) {
    return (c * 9/5) + 32;
}

console.log(celsiusToFahrenheit(25));

Output:

14. Largest Number

function largest(a, b) {
    return a > b ? a : b;
}

console.log(largest(10, 15));

Output:

15. Simple EMI Calculation

function calculateEMI(principal, rate, months) {
    let totalInterest = (principal * rate) / 100;
    let totalAmount = principal + totalInterest;

    return Math.round(totalAmount / months);
}

console.log(calculateEMI(100000, 10, 12));

Output:

16. Role-Based Access

let role = "admin";

if (role === "admin") {
    console.log("Show admin panel");
} else {
    console.log("Show user dashboard");
}

Output:

Show admin panel

17. Positive / Negative / Zero

let num = 20;

if (num > 0) {
    console.log("Positive number");
} else if (num === 0) {
    console.log("Zero");
} else {
    console.log("Negative number");
}

Output:

Positive number

18. Leap Year

function isLeapYear(year) {
    if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
        return "Leap Year";
    } else {
        return "Not a Leap Year";
    }
}

console.log(isLeapYear(2024));
console.log(isLeapYear(1900));
console.log(isLeapYear(2000));

Output:

Leap Year
Not a Leap Year
Leap Year

19. Movie Ticket Pricing

let age = 15;

if (age < 12) {
    console.log("Child Ticket ₹100");
} else {
    console.log("Adult Ticket ₹200");
}

Output:

Adult Ticket ₹200

20. Grade System

let mark = 78;

if (mark >= 90) {
    console.log("Grade A");
} else if (mark >= 75) {
    console.log("Grade B");
} else {
    console.log("Fail");
}

Output:

Grade B

JavaScript Object & Array Scenario based Questions

Athithya Sivasankarar — Thu, 16 Apr 2026 18:14:19 +0000

1. User Profile Update

Update an object property and add a new one.

const user = {
  name: "Vijay",
  age: 25,
  email: "vijay@gmail.com"
};

user.email = "vijaykumar@gmail.com";
user.isActive = true;

console.log(user);

Output:

{
  name: "Vijay",
  age: 25,
  email: "vijaykumar@gmail.com",
  isActive: true
}

2. Shopping Cart Total

Calculate total price from an array of objects.

const cart = [
  { name: "Shirt", price: 500 },
  { name: "Shoes", price: 1500 },
  { name: "Cap", price: 300 }
];

const total = cart
  .map(val => val.price)
  .reduce((acc, val) => acc + val, 0);

console.log(total);

Output:

3. Find Specific Object

Find a user with a specific name.

const users = [
  { name: "Vijay", age: 25 },
  { name: "Arun", age: 30 },
  { name: "Kumar", age: 28 }
];

const output = users.filter(n => n.name === "Arun");

console.log(output);

Output:

[{ name: "Arun", age: 30 }]

4. Add Item to Array & Filter

Add a new product and filter data.

const products = [
  { name: "Shirt", price: 500 },
  { name: "Shoes", price: 1500 }
];

products.push({ name: "Pant", price: 1750 });

console.log(products);

const newProdut = products.filter(
  n => n.name !== "Shoes" && n.price > 1000
);

console.log(newProdut);

Output:

[
  { name: "Shirt", price: 500 },
  { name: "Shoes", price: 1500 },
  { name: "Pant", price: 1750 }
]

[
  { name: "Pant", price: 1750 }
]

5. Count Items in Object

Find total values inside an object.

const fruits = {
  apple: 2,
  banana: 5,
  mango: 3
};

const output = Object.values(fruits).reduce((acc, n) => acc + n);

console.log(output);

Output:

6. Convert Array to Object

Convert array into object with values as keys.

const users = ["Vijay", "Arun", "Kumar"];

const dub = Object.fromEntries(
  users.map(v => [v, true])
);

console.log(dub);

Output:

{
  Vijay: true,
  Arun: true,
  Kumar: true
}

JavaScript Array Iteration Methods

Athithya Sivasankarar — Wed, 15 Apr 2026 16:29:52 +0000

JavaScript provides powerful array iteration methods to work with elements easily. These methods help us write cleaner and shorter code.

1. forEach()

Executes a function for each element.

let nums = [1, 2, 3];
nums.forEach(n => console.log(n));

Output:

1
2
3

2. map()

Creates a new array by modifying each element.

let nums = [1, 2, 3];
let result = nums.map(n => n * 2);
console.log(result);

Output:

[2, 4, 6]

3. flatMap()

Maps and flattens the array.

let arr = [1, 2];
let result = arr.flatMap(x => [x, x * 2]);
console.log(result);

Output:

[1, 2, 2, 4]

4. filter()

Filters elements based on condition.

let nums = [1, 2, 3, 4];
let even = nums.filter(n => n % 2 === 0);
console.log(even);

Output:

[2, 4]

5. reduce()

Reduces array to a single value.

let nums = [1, 2, 3];
let sum = nums.reduce((acc, val) => acc + val, 0);
console.log(sum);

Output:

6. every()

Checks if all elements satisfy condition.

let nums = [2, 4, 6];
let allEven = nums.every(n => n % 2 === 0);
console.log(allEven);

Output:

true

7. some()

Checks if at least one element satisfies condition.

let nums = [1, 3, 4];
let hasEven = nums.some(n => n % 2 === 0);
console.log(hasEven);

Output:

true

8. Array.from()

Creates array from iterable.

let str = "hi";
let arr = Array.from(str);
console.log(arr);

Output:

['h', 'i']

9. keys()

Returns array indices.

let arr = ["a", "b"];
console.log([...arr.keys()]);

Output:

[0, 1]

10. Spread Operator (...)

Expands array elements.

let arr = [1, 2];
let newArr = [...arr, 3, 4];
console.log(newArr);

Output:

[1, 2, 3, 4]

Reference
W3Schools
https://www.w3schools.com/js/js_array_iteration.asp

Why JavaScript is Single-Threaded

Athithya Sivasankarar — Wed, 15 Apr 2026 04:32:20 +0000

JavaScript is one of the most popular programming languages used to build interactive websites. One important concept you will often hear is that JavaScript is single-threaded.

What Does Single-Threaded Mean?

A single-threaded language can execute only one task at a time.

JavaScript has:

One main thread
One call stack

This means tasks are executed one by one, in order.

Example:
console.log("Task 1");
console.log("Task 2");
console.log("Task 3");

Output:

Task 1
Task 2
Task 3

JavaScript does not run multiple lines at the same time.

Why is JavaScript Single-Threaded?

Designed for Web Browsers

JavaScript was originally created to run inside web browsers.

According to W3Schools:
JavaScript is used to control the behavior of web pages.

It works with the DOM (Document Object Model).

If JavaScript had multiple threads:

Two threads could try to change the same element at the same time
This could create confusion and errors

So, JavaScript is single-threaded to keep things simple and safe.

Easy to Learn and Use

Single-threaded design makes JavaScript:

Easier to understand
Easier to debug
Less complex

Developers don’t need to handle:

Thread management
Locks
Deadlocks

This is perfect for beginners.

Uses a Call Stack

JavaScript uses a call stack to manage execution.

Example:

function first() {
  console.log("First");
}

function second() {
  first();
  console.log("Second");
}

second();

Execution:

second() runs
first() runs
Then back to second()

Only one function runs at a time → single-threaded behavior

But JavaScript Can Handle Multiple Tasks

You might think:

“If JavaScript is single-threaded, how does it handle timers, APIs, etc.?”

Example:

console.log("Start");

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

console.log("End");

Output:

Start
End
Hello after 2 seconds

This happens because of the Event Loop

Event Loop

JavaScript uses:

Call Stack
Web APIs
Callback Queue
Event Loop

According to MDN Web Docs:
The event loop allows JavaScript to perform non-blocking operations even though it is single-threaded.

So JavaScript can:

Start a task
Continue other work
Come back later

JavaScript Basics

Athithya Sivasankarar — Fri, 10 Apr 2026 04:57:37 +0000

JavaScript is one of the most important programming languages used in web development.
It helps make websites interactive and dynamic.

we will understand:

What is JavaScript
Data Types in JavaScript
Difference between Primitive and Non-Primitive
Variables in JavaScript

1. What is JavaScript?

JavaScript is a versatile, dynamically typed programming language that brings life to web pages by making them interactive. It is used for building interactive web applications, supports both client-side and server-side development, and integrates seamlessly with HTML, CSS, and a rich standard library.

JavaScript is a single-threaded language that executes one task at a time.
It is an interpreted language which means it executes the code line by line.
The data type of the variable is decided at run-time in JavaScript, which is why it is called dynamically typed.

Example

<html>
<head></head>
<body>
    <h1>Check the console for the message!</h1>
    <script>
        console.log("Hello, World!");
    </script>
</body>
</html>

Output:

Hello World

2. Data Types in JavaScript

What is a Data Type?

A data type defines what kind of value a variable holds (number, text, etc.).

JavaScript is dynamically typed, meaning you don’t need to define the type manually.

Types of Data in JavaScript

According to W3Schools, JavaScript has 8 data types:

Primitive Data Types (7 types)

1. Number

let x = 10;

2. String

let name = "Athithya";

3. Boolean

let isStudent = true;

4. Undefined

let a;

5. Null

let value = null;

6. BigInt

let big = 12345678901234567890n;

7. Symbol

let id = Symbol("id");

These are called primitive because they store a single value.

Non-Primitive Data Type

Object

let person = {
  name: "Athithya",
  age: 21
};

Objects can store multiple values (key-value pairs).

Difference Between Primitive and Non-Primitive

Feature	Primitive	Non-Primitive
Type	Basic data	Complex data
Storage	Single value	Multiple values
Mutability	Immutable	Mutable
Examples	Number, String	Object, Array
Memory	Stored directly	Stored by reference

Example

// Primitive
let a = 10;
let b = a;
b = 20;

console.log(a); // 10

// Non-Primitive
let obj1 = {name: "A"};
let obj2 = obj1;
obj2.name = "B";

console.log(obj1.name); // B

Primitive → value is copied
Non-Primitive → reference is copied

3. Variables in JavaScript

What is a Variable?

A variable is a container used to store data values.

Ways to Declare Variables

1. var

var x = 10;

Old method
Function scoped

2. let

let y = 20;

Block scoped
Can be updated

3. const

const z = 30;

Cannot be reassigned
Must be initialized

Example

let name = "Athithya";
let age = 21;
const country = "India";

console.log(name, age, country);

Output:

Athithya 21 India

typeof Operator

You can check data type using:

let x = "Hello";
console.log(typeof x);

Output:

string

The typeof operator returns the type of a variable.

Reference

https://www.w3schools.com/js/

JavaScript Array Methods

Athithya Sivasankarar — Wed, 08 Apr 2026 16:12:26 +0000

Arrays in JavaScript are used to store multiple values in a single variable.
JavaScript provides many built-in methods to work with arrays easily.

What is an Array?

An array is a collection of values.

Example:

let fruits = ["apple", "banana", "mango"];
console.log(fruits);

Output:

["apple", "banana", "mango"]

Common Array Methods

1. push() → Add element at end

let fruits = ["apple", "banana"];
fruits.push("mango");

console.log(fruits);

Output:

["apple", "banana", "mango"]

2. pop() → Remove last element

let fruits = ["apple", "banana", "mango"];
fruits.pop();

console.log(fruits);

Output:

["apple", "banana"]

3. shift() → Remove first element

let fruits = ["apple", "banana", "mango"];
fruits.shift();

console.log(fruits);

Output:

["banana", "mango"]

4. unshift() → Add element at beginning

let fruits = ["banana", "mango"];
fruits.unshift("apple");

console.log(fruits);

Output:

["apple", "banana", "mango"]

5. length → Find array size

let fruits = ["apple", "banana", "mango"];
console.log(fruits.length);

Output:

6. includes() → Check value

let fruits = ["apple", "banana", "mango"];
console.log(fruits.includes("banana"));

Output:

true

7. indexOf() → Find position

let fruits = ["apple", "banana", "mango"];
console.log(fruits.indexOf("mango"));

Output:

8. join() → Convert to string

let fruits = ["apple", "banana", "mango"];
console.log(fruits.join(", "));

Output:

apple, banana, mango

9. slice() → Get part of array

let fruits = ["apple", "banana", "mango"];
console.log(fruits.slice(0, 2));

Output:

["apple", "banana"]

10. splice() → Add/Remove elements

let fruits = ["apple", "banana", "mango"];
fruits.splice(1, 1);

console.log(fruits);

Output:

["apple", "mango"]

Reference

W3Schools

Using Objects as Functions, Function Constructor & this Keyword in JavaScript

Athithya Sivasankarar — Tue, 07 Apr 2026 18:01:53 +0000

JavaScript is a flexible language where functions and objects work closely together.

Functions as objects
Function constructor
thiskeyword

1. Functions as Objects

In JavaScript, functions are special types of objects.

This means:

Functions can be stored inside objects
Functions can have properties

Example: Function inside Object

const user = {
    name: "Athithya",
    greet: function() {
        return "Hello " + this.name;
    }
};

console.log(user.greet());

Output:

Hello Athithya

Explanation

user → object
greet → function (method)
this.name → refers to object value

Functions Can Have Properties

function greet() {}

greet.msg = "Hello";

console.log(greet.msg);

Output:

Hello

So, functions behave like objects.

2. Function Constructor

What is it?

A constructor function is used to create multiple objects using new.

Example

function Student(name, age) {
    this.name = name;
    this.age = age;

    this.display = function() {
        return this.name + " " + this.age;
    };
}

let s1 = new Student("Ram", 20);
console.log(s1.display());

Output:

Ram 20

Explanation

Student → constructor function
this.name → assign value
new Student() → creates object

3. this Keyword

this refers to the current object.

Example

const user = {
    name: "Athithya",
    show: function() {
        console.log(this.name);
    }
};

user.show();

Output:

Athithya

Explanation

this.name → refers to object's name
Inside object → this = that object

Reference

Understanding JavaScript Objects Using CRUD Operations

Athithya Sivasankarar — Mon, 06 Apr 2026 10:50:53 +0000

Objects are one of the most important concepts in JavaScript.
They allow us to store data in key-value pairs.

What is an Object?

An object is a collection of properties where each property has a key and a value.

Example:

const user = {
    name: "Athithya",
    age: 20
};

console.log(user);

Output:

{ name: "Athithya", age: 20 }

CRUD Operations in JavaScript Objects

CRUD stands for:

Create
Read
Update
Delete

1. Create (Adding Data)

We can create an object or add new properties.

Example:

const user = {};

user.name = "Athithya";
user.age = 20;

console.log(user);

Output:

{ name: "Athithya", age: 20 }

2. Read (Access Data)

We can access object values using dot notation.

Example:

const user = {
    name: "Athithya",
    age: 20
};

console.log(user.name);

Output:

Athithya

3. Update (Modify Data)

We can change existing values.

Example:

const user = {
    name: "Athithya",
    age: 20
};

user.age = 21;

console.log(user.age);

Output:

4. Delete (Remove Data)

We can remove properties using the delete keyword.

Example:

const user = {
    name: "Athithya",
    age: 20
};

delete user.age;

console.log(user);

Output:

{ name: "Athithya" }

Reference

https://www.w3schools.com/js/js_objects.asp