DEV Community: ViGnEsH

Hooks

ViGnEsH — Tue, 19 May 2026 08:02:33 +0000

May 19 2026

Hooks are a special function in React, introduced in version 16.8, that allow you to "hook into" state and lifecycle features from functional components without writing a class.

Core Built-in Hooks

React provides several built-in Hooks to handle common tasks:

useState
useEffect
useContext
useReducer
useMomo & useCallback
useRef
use

useState

useState adds local state to a functional component, allowing it to "remember" information like user input or counter values.

**Toggle Button**

function set(){
  const [isOn, setIsOn] = useState(false);

return(
<div>
 <button onClick={() => setIsOn(!isOn)}>
                {isOn? "ON ": "OFF"}
            </button>
</div>
}

components

ViGnEsH — Fri, 15 May 2026 09:11:16 +0000

May 15 2026

components are mainly 2 types:

*1. Function compoents *

A Functional Component is a simple JavaScript function that returns JSX.

It is the modern and most commonly used component type in React.

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

export default Welcome;

2. Class Component

A Class Component is a React component created using an ES6 class.
It extends React.Component and must contain a render() method that returns JSX.

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello Vignesh</h1>;
  }
}

export default Welcome;

What is react js

ViGnEsH — Thu, 14 May 2026 07:22:18 +0000

May 14 2026

React js

React is an open-source javascript library for building user interface,
Create in Facebook company used for single-page application
npm (Note Package Manager) is the standard tool .Used in node.js

npm create vite@latest
project name
-> react
-> JavaScript
yes

Difference between libraries and frameworks?

libraries:A library is like a toolbox. It is command for codes in create role running process.
It is collection of codes .You control the flow
Libraries
React
jQuery
Axios

frameworks:Framework controls the flow Usually larger. give a full structure for applicatiuon.

Frameworks
Angular
Vue.js
Next.js
Express.js

ECommerce

ViGnEsH — Tue, 12 May 2026 08:54:37 +0000

May 12 2026

code

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

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

    <style>
        *{
            bottom: 0;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            border: 1px solid rgb(195, 235, 17);
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
            padding: 20px;
            gap: 20px;
                background:linear-gradient(rgb(247, 246, 246),rgb(4, 4, 4)) ;


        }

          /* Header */








        div{
            border: 3px solid rgb(78, 251, 3);
            padding: 20px;
            border-radius: 20px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            background:linear-gradient(rgb(252, 251, 251),white) ;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        h2{
            color: rgb(250, 248, 248);
            font-family: 'Times New Roman', Times, serif;
             /* display: flex; */
            /* flex-direction: column; */
            /* justify-content: center; */
            /* align-items: center; */
        }

        img {
            width: 100%;
            height: 250px;
            object-fit: contain;
            background-color: #f8f9fa;
            padding: 20px;
            transition: transform 0.3s ease;
        }

     img:hover {
            transform: scale(1.05);
        }
        h3{
            color: rgb(5, 252, 5);
            margin-bottom: 20px;
        }
        h4{
            color: rgb(251, 223, 7);
            margin-bottom: 20px;
        }

        p{
               color:#666;
        }

        #h{
            color: #f8f9fa;
            border: 1px solid wheat;
            display:flex;
            flex-direction: column;
        }


    </style>
</head>

<body>

    <script>


        async function product() {

            try {

                const rec = await fetch('https://fakestoreapi.com/products');
                const data = await rec.json();

                console.log(data);

                data.forEach(name);

                function name(params) {

                    const bigbox= document.createElement("div")
                    const box = document.createElement("div");
                    const title = document.createElement("h2")
                    const image = document.createElement("img")
                    const price = document.createElement("h3")
                    const rating = document.createElement("h4")
                    const description = document.createElement("p")

                    title.innerText = params.title;
                    image.src = params.image;
                    price.innerHTML = `💰 Price ${params.price}`;
                    rating.innerText = `⭐ Rating ${params.rating.rate}`;
                    description.innerText = `Description ${params.description.substring(0, 120)}...`;


                    box.appendChild(image)
                    box.appendChild(title)
                    box.appendChild(price)
                    box.appendChild(rating)
                    box.appendChild(description)

                    document.body.appendChild(box)

                }


            } catch (error) {
                 console.log("Loading...")
            }

        }

        product();


    </script>
</body>

</html>

output

Promise in html

ViGnEsH — Fri, 08 May 2026 07:40:47 +0000

May 08 2026

TO DO List

ViGnEsH — Wed, 06 May 2026 07:10:07 +0000

_May -6 2026 _

HTML

SCRIPT

STYLE

ONE

TWO

Calculator projects

ViGnEsH — Tue, 05 May 2026 07:50:52 +0000

May 25 2026

Calculator projects

HTML

SCRIPT

STYLE

RESULT

Two mine projects in javaScript

ViGnEsH — Thu, 30 Apr 2026 17:11:43 +0000

April/30/2026

Change Text on Button Click

Touch next buttom

Light On / Off Toggle

DOM

ViGnEsH — Tue, 28 Apr 2026 08:31:43 +0000

April/28/2026

1.What is a dom ?

DOM from is documents object model. it is used for responding website create

2.What is Document Object ?
document is the root object to access the page.

3.Tree Structure ?
The HTML page is represented as nodes (elements, text, attributes).

4.Who to modify html page ?
You can add, remove, or update elements, styles, and content. used like object.

5.How do you select elements in the DOM?
Document.getElementById, Document.getElementByclass ect..

What is the difference between DOM and BOM, and how do window and document relate? (TBD)

What is the difference between NodeList and HTMLCollection?(TBD)

Tell me about yourself

ViGnEsH — Tue, 21 Apr 2026 07:00:10 +0000

April/21/2026

I'm K Vignesh,
I am a comfortable professional front-end developer,
I know about HTML, CSS, and JavaScript,
I complete fure project in HTML and CSS, and I know about JavaScript programming, scenario questions,
My ambition is to be a web developer, and I do my code push in GitLab, also write blogs in every day.

Variable, operations, conditional statments PART 2

ViGnEsH — Sun, 19 Apr 2026 06:01:04 +0000

7. Even or Odd

Output

check a number odd or even code this
if condition number modulus 2 ===0 is even condition fail go else condition run

8. compare two passwords

Output

Check a password and repassword same print successfully

else print incorrect password.

9.Eligible to vote

Output

Eligible to vote is age 18 is starting age for vote

10. checked logged and admin

Output

Check a logged and admin is correct go inside

11. Total cart amount

Output

Calculator in a and b value in function

12. Greeting function

Output

create a function is name print in data

13. Temperture conversion

Output

Formal F=(CX9/5)+32

14. Largest number

Output

largest only give

15.EMI

Output

This is calculator in emi for price, rent, tax

16. Admin

Output

Admin only entry

17. positive, negative, or zero

Output

Here, is positive(1,2,3...), negative(-1,-2,-3...), or zero(0)

*movie ticket pricing *

Output

movie ticket price is chid 12 less than 100 more than age 200

20, Grade A, B, and fail

Output

Here, than grade A 90, grade b 75, fail less than

Variable, operations, conditional statments

ViGnEsH — Sat, 18 Apr 2026 06:59:32 +0000

April/18/2026

Output

We are used : Function Expression
username and password corrent only print Login successfully
username one wrong print invalid username
password only wrong print invalid password
username and password both wrong print invalid username and password.

2. Product details

Output

We are used : Function Expression
Product details : three varibles store data comma varibles
like : console.log( variblesName , "String" ,variblesName, "String",variblesName, "String")

3. student mark

Output

We are used : Function Expression
three varibles store data used arithmetic operators +

4. swap number

Output

We are used : Function Expression
Student: two varibles swap two number and store.

5. Login status

Output

We are used : Function Expression
used data types in booleans true or false