DEV Community: Sivakumar Mathiyalagan

Looping in python-2

Sivakumar Mathiyalagan — Wed, 27 May 2026 06:30:58 +0000

Question :
_Two friends are driving separate trains from Chennai to Coimbatore.

Driver 1 drives Train 1, which stops at every 3rd station, while Driver 2 drives Train 2, which stops at every 5th station. There are a total of 30 stops between Chennai and Coimbatore.

Since the two drivers are friends, they want to know at which station they will meet for the first time during their journey.

Write a Python program to determine the first stop where both trains stop together_

Code:

train1 = 3
train2 = 5

totalStops = 30
stopCovered = 1

while stopCovered <= totalStops:

    if stopCovered % train1 == 0 and stopCovered % train2 == 0:
        print(stopCovered)
        break

    stopCovered = stopCovered + 1

Output:

Question :
_A thief snatched a purse and started running at a speed of 2 feet per step. A police officer saw the incident and began chasing the thief at a speed of 5 feet per step. At the beginning of the chase, the thief already had a lead of 40 feet.

Write a Python program to determine how many feet the police officer must cover to catch the thief._

Code:

police = 5
thief = 2

thiefCovered = 40
policeCovered =0

while policeCovered <= thiefCovered:
    policeCovered= policeCovered + police
    thiefCovered = thiefCovered + thief

print(policeCovered)

output:

Looping in Python

Sivakumar Mathiyalagan — Wed, 27 May 2026 06:03:36 +0000

Question:
_A priest plucked some flowers from his garden and started visiting temples on his way home. He visited 7 temples in total. At each temple, he offered half of the flowers he had at that moment. After visiting all 7 temples and returning home, he was left with exactly one flower in his hand.

How many flowers did he originally pluck from his garden?_

Code:

flowers = 1
temples = 7
while temples > 0:
    temples = temples -1
    flowers = flowers*2


print (flowers)

Output:

Question:
_After being banned from the royal court, Tenali Raman cleverly bribed his way in to meet Krishnadevaraya.

The king, angry at Tenali’s actions, ordered a punishment of 512 belt beatings. Before entering the court, Tenali had made a deal with each security guard he bribed to share half of whatever reward he received from the king.

Following the agreement, every guard took half of the remaining punishment, one after another. In the end, Tenali returned home without receiving a single beating.

How many security guards did Tenali bribe?_

Code:

beatings = 512
security = 0

while beatings>0:
    beatings =  beatings//2
    security = security+1

print(security)

Output:

Flow Chart

Sivakumar Mathiyalagan — Tue, 26 May 2026 06:30:12 +0000

CODE

feet = 50
days = 0
up = 2
down = 1

while feet > 0:
    feet = feet - up + down
    days += 1

print("Days:", days)

FLOW CHART

CODE

result = 0
no = 1

while no <= 5:
    result = result + no
    no += 1

print(result)

FLOW CHART

CODE

result = 1
no = 5

while no >= 1:
    result = result * no
    no -= 1

print(result)

FLOW CHART

UseEffect - Exercises

Sivakumar Mathiyalagan — Fri, 22 May 2026 07:15:44 +0000

Render only once using UseEffect

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')

    useEffect(()=>console.log("Component Mounted"),[]);



    return(
    <>
      <input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
        <p>Hi! Welcome {name}</p>
        </>

    )

}

export default Input

Output:

Note:
React is running in Strict Mode during development
React intentionally mounts, unmounts, and remounts components once in development to detect side effects. Because of that, it is printed twice in console, this happens only in development mode but in production build, it runs once

Render Every time using UseEffect

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')

    useEffect(()=>console.log("Component Mounted"));



    return(
    <>
      <input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
        <p>Hi! Welcome {name}</p>
        </>

    )

}

export default Input

Output:

Render Only when State changes using UseEffect

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')

    useEffect(()=>console.log("Component Mounted"),[name]);



    return(
    <>
      <input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
        <p>Hi! Welcome {name}</p>
        </>

    )

}

export default Input

Output:

Note:
State Variable name is updated 4 times so the useEffect re-rendered 4 times the call back function

Two States and One Effect
Effect runs when count or name is changed

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')
    const[count,setCount]=useState(0)

    useEffect(()=>console.log("Component Mounted"),[name,count]);



    return(
    <>
      <input value={name} type="text" onChange={(e)=>{setName(e.target.value)
       }
      }></input>
      <button value={count} onClick={(e)=>{
        setCount(count+1)}
      }>+</button>
        <p>Hi! Welcome {name} and  Count {count}</p>
        </>

    )

}

export default Input

Output

Note:
State variable name is updated thrice and so effect ran thrice
State variable count is updated thrice and so effect ran thrice for it as well

*Show Even only when count becomes Even *

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')
    const[count,setCount]=useState(0)

    useEffect(()=>{
      if(count%2===0){
        console.log("even")
      }
    },[count]);



    return(
    <>
      <input value={name} type="text" onChange={(e)=>{setName(e.target.value)
       }
      }></input>
      <button value={count} onClick={(e)=>{
        setCount(count+1)}
      }>+</button>
        <p>Hi! Welcome {name} and  Count {count}</p>
        </>

    )

}

export default Input

Output

Note:
count is incermented 16 times and even is printed on console only 8 times for even counts only

UseState - Exercises

Sivakumar Mathiyalagan — Thu, 21 May 2026 08:41:07 +0000

*Toggle Button *

import { useState } from "react";

function Toggle(){

   const [bulb,setBulb] = useState("https://www.w3schools.com/js/pic_bulboff.gif")
//    const [flag,setFlag] = useState(false);





   function toggle(){
    if (bulb === "https://www.w3schools.com/js/pic_bulboff.gif"){
        setBulb("https://www.w3schools.com/js/pic_bulbon.gif")
        // setFlag(true);
    }
    else{
        setBulb("https://www.w3schools.com/js/pic_bulboff.gif")
        // setFlag(false);
    }
   }



    return(
        <>
        <img src= {bulb}></img>
        <button onClick = {toggle}>{bulb==="https://www.w3schools.com/js/pic_bulboff.gif"?"ON":"OFF"}</button>
        </>

    )


}

export default Toggle

output:

Input Field Value

import { useState } from "react";

function Input(){

    const[name,setName] = useState('')




    return(
    <>
      <input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
        <p>Hi! Welcome {name}</p>
        </>

    )

}

export default Input

Output:

Show/Hide Text

function Show(){

    const[text,setText] = useState("");
    const[show,setShow] = useState(false);



    function showContent(){
        if(show===false){
             setShow(true);
        }
        else{
            setShow(false);
        }

    }

    return(
        <>
        <input type="password" onChange={(e)=>setText(e.target.value)}></input>
        <button onClick={showContent}>{show===false ?"Show":"Hide"}</button>
        {show && <p>{text}</p>}
        </>

    )
}

export default Show

Output:

Character Counter

import { useState } from "react";

function Character (){

const [count,setCount] = useState(0);

    return(
        <>
        <input type="text" onChange={(e)=>setCount(e.target.value.length)}></input>
        <p>Count :{count} </p>
        </>

    )
}

export default Character

Output:

Form with Multiple Input

import { useState } from "react";


function Multiple(){

    const[name,setName]= useState('');
    const[email,setEmail]= useState('');
    const[number,setNumber]= useState('');
    const[city,setCity]= useState('');
    const[password,setPassword]= useState('');



    return(
        <>
        <input type="text" onChange={(e)=>setName(e.target.value)}></input>
        <input type="email" onChange={(e)=>setEmail(e.target.value)}></input>
        <input type="text" onChange={(e)=>setNumber(e.target.value)}></input>
        <input type="text" onChange={(e)=>setCity(e.target.value)}></input>
        <input type="password" onChange={(e)=>setPassword(e.target.value)}></input>
        </>
    )
}

export default Multiple

CheckBox Selection List

import { useState } from "react";

function Selection(){

    const [value,setValue] = useState([]);
    const [checked,setChecked] = useState(false);

   function addValue(e) {

        const checked = e.target.checked;
        const item = e.target.value;

        if (checked) {
            setValue([...value, item]);
        } else {
            setValue(value.filter((val) => val !== item));
        }
    }

    return(
        <>
        <input value="React" type="checkbox" onChange={addValue}></input>
        <label>React</label>
        <input value="Node" type="checkbox" onChange={addValue}></input>
        <label>Node</label>
        <input value="Java" type="checkbox" onChange={addValue}></input>
        <label>Java</label>
        <input value="SQL" type="checkbox" onChange={addValue}></input>
        <label>SQL</label>

        <ul>
                {value.map((val, index) => (
                    <li key={index}>{val}</li>
                ))}
            </ul>
        </>
    )
}

export default Selection

Output:

Dependent Dropdown

import { useState } from "react";

function Dependent() {

    const states = {
        india: ["tamilnadu", "kerala"],
        usa: ["arizona", "newyork"]
    };

    const cities = {
        tamilnadu: ["chennai", "trichy"],
        kerala: ["trivandrum", "kochi"],
        arizona: ["phoenix"],
        newyork: ["washington"]
    };

    const [country, setCountry] = useState("");
    const [state, setState] = useState("");
    const [city, setCity] = useState("");

    return (
        <>

            <select value={country}
         onChange={(e) => {
        setCountry(e.target.value);
        setState("");
        setCity("");
        }}
        >   

                <option value="">Select Country</option>

                <option value="india">India</option>

                <option value="usa">USA</option>

            </select>


            <select value={state} onChange={(e) => {
                setState(e.target.value);
                setCity("");

            }

            }>

                <option value="">Select State</option>

                {
                    country &&
                    states[country].map((val, index) => (
                        <option key={index} value={val}>
                            {val}
                        </option>
                    ))
                }

            </select>


            <select value={city} onChange={(e) => setCity(e.target.value)}>

                <option value="">Select City</option>

                {
                   country && state &&
                    cities[state].map((val, index) => (
                        <option key={index} value={val}>
                            {val}
                        </option>
                    ))
                }

            </select>


        </>
    );
}

export default Dependent;

Output:

React Basics 2

Sivakumar Mathiyalagan — Thu, 14 May 2026 17:40:55 +0000

What is JSX and its rule?

JSX is the abbreviation of JavaScript XML. XML is the short form of Extensible Markup Language

XML primary purpose is to store and transport data and it allows developer to use custom tags and also extremely strict -requires closing tags, case-sensitive

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX

Facebook Choose XML Syntax to create JSX for various reasons
XML Syntax is Predictable and Strict : Mandatory Closing Tags: HTML allows unclosed self-closing tags like <img> or <input>. XML requires every tag to be closed strictly (<img /> or <input />), which makes it incredibly simple for automated tools (like compiler preprocessors) to parse without guessing.

Strict Nesting Rules: XML trees map 1:1 onto compiler tree structures (Abstract Syntax Trees), making it highly reliable to translate the code directly into JavaScript function calls like React.createElement()

Rules of JSX

1.Return a single root element:
To return multiple elements from a component, wrap them with a single parent tag

<div>
  <h1>scientists</h1>
  <img
    src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
    alt=""
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

here div is used to wrap the combination of tags to return as a single value because function can only return single value

If you don’t want to add an extra <div> to your markup, you can write <>and </> instead

<> 
<div>
  <h1>scientists</h1>
  <img
    src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
    alt=""
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>
</>

This empty tag <>, </> is called a Fragment.
In React, a Fragment is a special wrapper component that lets you group multiple elements without adding an extra HTML element to the page

2.Close all the tags:

JSX requires tags to be explicitly closed: self-closing tags like <img>must become <img />, and wrapping tags like <li> oranges must be written as <li>oranges</li>

3.camelCase all most of the things:

JSX turns into JavaScript objects, and JavaScript has strict rules for naming properties. Standard HTML attributes are converted into camelCase naming conventions

Write this
return <div onClick={handleClick} tabIndex="0"></div>;
instead of this
return <div onclick={handleClick} tabindex="0"></div>;

Use className Instead of class, Because class is a reserved keyword in JavaScript for defining programming classes, you cannot use it as a layout attribute. Use className instead.

Write this
return <div className="container"></div>;
instead of this
return <div class="container"></div>;

Inline styling cannot be written as a plain string. It must be written as a JavaScript object inside curly braces

Write this
return <div style={{ color: 'red', fontSize: '16px' }}></div>;
instead of this
return <div style="color: red; font-size: 16px;"></div>;

Wrap JavaScript Expressions in Curly Braces
To read variables, run math operations, or execute logic inside your markup, you must wrap the JavaScript code in single curly braces {}.

const name = "Alex"; return <h1>Hello, {name}</h1>;

Explain React Folder Structure?

A React folder structure is the way files and folders are organized inside a React project so the application stays

clean
scalable
maintainable
easy to understand

node_modules

Contains all installed npm packages.
Automatically created when you run npm install
We normally do not edit this folder

public

Stores static files.

Examples:

images
favicon
static assets

Files here are copied directly to the final build.

src

Main source code folder.
Most React development happens here.

src/assets

Stores project assets.

Examples:

images
SVGs
fonts

App.jsx

Main React component.
Usually contains the primary UI.

Example:

function App() {
  return <h1>Hello React</h1>;
}

export default App;

This component is rendered into the browser.

App.css

Styles specific to App.jsx.

Example:

h1 {
  color: blue;
}

Imported inside App.jsx.

index.css

Global CSS file.
Applies styles across the whole app.

Example:

body {
  margin: 0;
  font-family: Arial;
}

main.jsx

Entry point of the React application.
This is where React starts running.

Example:

import React from "react";(TBD)
import ReactDOM from "react-dom/client";(TBD)
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
);

Important Flow

main.jsx
↓
renders App.jsx
↓
displayed inside index.html

.gitignore

Tells Git which files/folders to ignore.

Example:

node_modules
dist

Prevents unnecessary files from being uploaded to GitHub.

eslint.config.js(TBD)

Configuration for ESLint.

ESLint checks:

coding mistakes
bad practices
formatting issues

Helps maintain clean code

index.html

Main HTML file.
Contains the root DOM element where React mounts

Example:

<div id="root"></div>

React injects the app into this <div>

package.json(TBD)

Most important configuration file.
Contains:

project info
dependencies
scripts

package-lock.json

Automatically generated by npm.
Locks exact package versions for consistency

README.md

Project documentation.
Usually contains:

setup instructions
project info
commands

vite.config.js(TBD)

Configuration file for Vite.
Used to customize:

server
plugins
aliases
build settings

How Everything Works Together

Step-by-Step
Browser opens:
index.html
React starts from:
main.jsx
main.jsx renders:
App.jsx
Styles come from:
App.css + index.css
Assets loaded from:
assets/ or public/

Visual Flow
index.html
↓
main.jsx
↓
App.jsx
↓
Components/UI

What is Components in React?

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML
Components come in two types, Class components and Function components
In older React code bases, you may find Class components primarily used.
It is now suggested to use Function components along with Hooks, instead of Class components

Example:

function Car() {
  return (
    <h2>Hi, I am a Car!</h2>
  );
}

React Js Basics

Sivakumar Mathiyalagan — Thu, 14 May 2026 05:12:28 +0000

What is library and difference between library and framework?

Library is a collection of helper modules , classes , objects , functions , pre-written code , etc. A bunch of code packed together that can be used repeatedly is known as Library
A library is easy to be replaced with another library

A framework is a supporting structure that gives shape to your code.
It comprises of lot of APIs , compilers , support programs , libraries etc
It is difficult to replace frameworks

Why React?

React is a free, open-source JavaScript library for building User Interfaces. It is used to build single-page applications and allows you to create reusable UI components
React is a JavaScript library developed by Facebook that allows you to write user interfaces and create apps

Single Page Application
A Single Page Application (SPA) is a web app that loads content dynamically without refreshing the whole page. It uses JavaScript to update only the required parts of the screen based on user actions. This creates a smooth, fast, and app-like user experience.

Eliminates full page reloads for better performance
Sends and updates only the necessary data from the server
Provides a more responsive and seamless interface

NPM(Node Package Manager)
NPM (Node Package Manager) is the default package manager for Node.js. It helps manage project dependencies, scripts, and third-party libraries, and is automatically installed when you install Node.js.

It is mainly used to manage packages or modules, these are pre-built pieces of code that extend the functionality of your NodeJS application.
The NPM registry hosts millions of free packages that you can download and use in your project.
NPM is installed automatically when you install NodeJS, so you don’t need to set it up manually

we can create react file using npm. It has multiple framework and it enable us to choose the framework that suits for us. When the file is being created it also create a folder called node_modules which has all the supporting files for the code to use

What is Build Tool?

Frameworks like React use advanced features that browsers don’t natively support
React relies on JSX (JavaScript XML), which needs to be transpiled into regular JavaScript(TBD JSX)
build tool is a software utility that automates the process of converting your development code JSX into an optimized version that a web browser can actually understand and run efficiently

Vite:
Vite (French for "fast") has replaced older tools like Create React App (CRA) as the industry standard due to its speed and modern approach

QR-Code Generator

Sivakumar Mathiyalagan — Tue, 12 May 2026 16:30:46 +0000

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate QR Code</title>

    <style>

      body{
        background: linear-gradient(
            90deg,
            #2f2d2d,
            #342d2d,
            #504541,
        #4f3c37)
      }

        .container{
            width: 500px;
            /* border: 1px double red; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap:20px;
            padding: 20px;
            margin: auto;
            background: rgba(255, 255, 255, 0.10);
        }

        h1{
            text-align: center;
            margin-bottom: 40px;
            margin-top: 40px;
            color: beige;
        }

        #text{
            border: none;
            width: 200px;
            padding:10px 10px 10px 20px;
            outline: none;
            font-size: large;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        button{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           width: 100px;
           padding: 10px;
           font-weight: 800;
           background: rgba(255, 255, 255, 0.10);
           color: beige;
        }
    </style>


</head>
   <h1>Generate your QR Code</h1>
<body>
    <div class="container">
    <input id="text" type="text" placeholder="Input">
    <button onclick="generateQr()">Submit</button>
    <br>
    <img style="font-size: 20px;" id="imgQr"  src="">
    </div>
<script>

   const text = document.getElementById("text");
   const imgQr = document.getElementById("imgQr");

   function generateQr(){
    if(text.value.trim()===''){
        imgQr.alt= "Please Enter your Input"
    }
    else{
    imgQr.src= ` https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${text.value} `

    text.value = '';
    }

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

Output:

link: https://products-api-ec8f9f.gitlab.io/qrcode.html

Weather Status

Sivakumar Mathiyalagan — Tue, 12 May 2026 06:50:57 +0000

CODE:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Weather</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;

            background: linear-gradient(135deg, #0f172a, #1e3a8a, #38bdf8);

            font-family: Arial, sans-serif;
        }

        #container {
            width: 400px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background: rgba(255, 255, 255, 0.10);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            margin: auto;
            gap: 20px;
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            color: white;
            text-align: center;
        }

        #inputbox {
            width: 50%;
            height: 40px;
            border: none;
            /* border-radius:25px; */
            padding: 10px;
            font-size: x-large;
            outline: none;
            background: rgba(255, 255, 255, 0.25);
            color: white;
        }

        #inputbox::placeholder {
            color: #e2e8f0;
        }

        h3 {
            width: 150px;
            text-align: center;
            margin: 0;
            color: black;
            font-size: larger;
            font-weight: 900;
        }



        button {
            padding: 15px;
            width: 150px;
            border-radius: 25px;
            border: none;
            box-shadow: gray 0 10px 10px 0;
            font-size: 15px;
            background: #38bff8d9;
            color: white;
        }

        button:hover {
            background: #0ea5e9;
            transform: scale(1.05);
        }
    </style>
</head>

<body>

    <div id="container">
        <input id="inputbox" type="text" placeholder="Enter the City">
        <button onclick="checkWeather()">Check Weather</button>
        <h3 id="temp"></h3>
        <h3 id="maxTemp"></h3>
        <h3 id="minTemp"></h3>
        <!-- <img id="tempImg" style="width: 300px;" > -->
    </div>

    <script>


        async function checkWeather() {
            const city = document.getElementById("inputbox").value;
            const apiKey = "e68ce0c444414138fbe7040035b317b4";

            const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
            const data = await res.json();

            const container = document.getElementById("container");
            const temp = document.getElementById("temp");
            const maxTemp = document.getElementById("maxTemp");
            const minTemp = document.getElementById("minTemp");
            // const tempImg = document.getElementById("tempImg");
            const currentTemp = data.main.temp;

            temp.innerText = `Temperature Today in ${city} : ${data.main.temp} °C`;
            maxTemp.innerText = `Max-Temperature Today in ${city} : ${data.main.temp_max} °C`;
            minTemp.innerText = `Min-Temperature Today in ${city} : ${data.main.temp_min} °C`;

            if (currentTemp > 28) {
                container.style.backgroundImage = "url(https://www.shutterstock.com/shutterstock/photos/384381070/display_1500/stock-vector-hot-summer-384381070.jpg)"
            }
            else {
                container.style.backgroundImage = "url(https://thumbs.dreamstime.com/b/freezing-boy-winter-cold-cartoon-vector-shivering-young-standing-snowman-illustration-103588415.jpg)"
            }

            inputbox.value = "";
        }





    </script>




</body>

</html>

OUTPUT:

Product page - fetch Api

Sivakumar Mathiyalagan — Sun, 10 May 2026 15:46:43 +0000

SOURCE CODE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Products</title>
<style>
    body{
        background-color: #f9f9f9;
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       padding :20px;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       gap: 20px;
}

div{
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

h2{
    font-size: 1rem;
    height: 3em; 
    overflow: hidden;
    text-align: center;
    margin: 10px 0;
}

h3{
    color: #2c3e50;
    margin: 5px 0;
}

img{
    height: 150px; 
    width: auto;
    object-fit: contain; 
    margin-bottom: 15px;
}

 p {
    font-size: 0.85rem;
    color: #666;
    height: 4.5em; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}

</style>


</head>
<body>
    <script>
        // fetch('https://fakestoreapi.com/products')
        //     .then(res=>res.json())            
        //     .then(data=>console.log(data))


            async function products(){
                try{
                const res = await fetch('https://fakestoreapi.com/products');
                const data = await res.json();

               data.forEach(element => {
                const newDiv = document.createElement("div")
                const title = document.createElement("h2");
                const img = document.createElement("img");
                const price = document.createElement("h3");
                const rating = document.createElement("h3");
                const description = document.createElement("p");

                title.innerText = element.title;
                img.src = element.image;
                price.innerText = `PRICE   $${element.price}`;
                rating.innerText = `RATING   ${element.rating.rate}`;
                description.innerText = `Product Description   ${element.description}`


                newDiv.appendChild(title);
                newDiv.appendChild(img);
                newDiv.appendChild(price);
                newDiv.appendChild(rating);
                newDiv.appendChild(description);
                document.body.appendChild(newDiv);

               });

                }
                catch(err){
                    console.log(err)
                }
            }

            products();
    </script>


</body>
</html>

OUTPUT :

link : https://products-api-ec8f9f.gitlab.io/product.html

Promises - JavaScript

Sivakumar Mathiyalagan — Thu, 07 May 2026 18:34:34 +0000

what is promises in Javascript?

JavaScript is synchronous by default, which means code executes in a linear, line-by-line manner. Each statement waits for the previous statement to finish before executing.

However, some operations like:

API calls
Database queries
File reading
Timers (setTimeout)

take time to complete. If JavaScript waited for these operations synchronously, the entire program would pause and become slow or unresponsive.

To avoid blocking execution, JavaScript supports asynchronous programming.

A Promise is an object that represents the eventual completion or failure of an asynchronous operation. Promises allow JavaScript to continue executing other code while waiting for long-running tasks to finish.

Promises have three states:

Pending = operation is still running
Resolved = operation completed successfully
Rejected = operation failed

Why Promises?

Callback functions also help perform asynchronous operations in JavaScript.

A callback function is a function passed as an argument to another function and executed later, usually after an asynchronous task completes.

Before Promises were introduced, callbacks were commonly used for handling asynchronous tasks

However, when multiple asynchronous operations depend on each other, callbacks become deeply nested, leading to a problem called Callback Hell.

function analyse(callback) {
    setTimeout(() => {
        console.log("done analysis");
        callback();
    }, 2000);
}

function design(callback) {
    setTimeout(() => {
        console.log("done design");
        callback();
    }, 1000);
}

function develop(callback) {
    setTimeout(() => {
        console.log("done development");
        callback();
    }, 3000);
}

function test(callback) {
    setTimeout(() => {
        console.log("done testing");
        callback();
    }, 2000);
}

function deploy(callback) {
    setTimeout(() => {
        console.log("done deployment");
        callback();
    }, 1000);
}

to execute in order this is how callback functions are called and thus resulting in callback hell

analyse(() => {
    design(() => {
        develop(() => {
            test(() => {
                deploy(() => {
                    console.log("SDLC completed");
                });
            });
        });
    });
});

Problems with callback hell:

Code becomes difficult to read
Hard to maintain
Error handling becomes complicated
Debugging becomes difficult

To solve this issue, JavaScript introduced:

Promises
Async/Await (TBD)

let's see how to reslove the callback hell with promises

CODE:

function analyse() {
    return new Promise((res, rej) => {
        setTimeout(() => {
            console.log("done analysis");
            res();
        }, 2000);
    });
}
function design(){
    return new Promise ((res,rej)=>{
        setTimeout(()=> {
            console.log("done design")
            res();
        },1000);
    })

}

function develope(){
    return new Promise ((res,rej)=>{
        setTimeout(()=> {
            console.log("done development")
            res();
        },3000);
    })

}

function test(){
    return new Promise ((res,rej)=>{
        setTimeout(()=> {
            console.log("done testing")
            res();
        },2000);
    })
}

function deploy(){
    return new Promise ((res,rej)=>{
        setTimeout(()=> {
            console.log("done deployment")
            res();
        },1000);
    })
}

function sdlc(){
    analyse().then(()=>design())
    .then(()=>develope())
    .then(()=>test())
    .then(()=>deploy())
    .then(()=>console.log("SLDC Completed"))
}

sdlc();

OUTPUT:

Closures - Javascript

Sivakumar Mathiyalagan — Thu, 07 May 2026 06:14:07 +0000

Define Closure ?

A closure in JavaScript is the combination of a function bundled together with references to its surrounding state, known as the lexical environment. Essentially, a closure allows an inner function to "remember" and access variables from its outer (enclosing) scope even after the outer function has finished executing
Closures make it possible for a function to have "private" variables

a lexical environment is the internal structure that keeps track of:

Variables and function declarations available in the current scope
A reference to the outer (parent) environment
It’s the foundation of how scope and closures work