DEV Community: Veera Ganapathi

React Hooks Part 2

Veera Ganapathi — Thu, 10 Sep 2026 05:57:23 +0000

React useEffect

The useEffect Hook allows you to perform side effects in your components.Some examples of side effects are: fetching data, directly updating the DOM, and timers.useEffect accepts two arguments. The second argument is optional.

useEffect(function, dependency)

Type

No dependency
An empty array
Props or state values

Example

An empty array
Runs the effect only once when the component is first loaded (mounted).

import {useState, useEffect} from 'react'


 function Clock(){
    const[time, setTime]=useState(new Date())
    useEffect(function(){
        setInterval(function(){
            setTime(new Date());
        },1000)
    },[])

    return(
        <div>
            <h1>Clock</h1>
      <p>{time.toLocaleTimeString()}</p>
        </div>

    )
 }

 export default Clock


Output:

Clock
11:07:30

Props or state values

Runs the effect when the specified dependency value changes.

import { useState } from 'react'
import {useEffect} from 'react'

function App() {

const [count, setCount] = useState(0);
useEffect(function(){
  console.log("Count change:", count)
}, [count]);
function increase() {
  setCount(count+1);
}
function decrease() {
  if(count>0){
    setCount(count - 1);
  }

}
  return (

    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
      <button onClick={() => setCount(0)}>Reset</button>

    </div>


  )
}

export default App

Output:

Count change: 0
Count change: 0
Count change: 1
Count change: 2
Count change: 3
Count change: 4
Count change: 5
Count change: 6
Count change: 7
Count change: 8

No dependency

Runs the effect after every render of the component.

import { useState } from 'react'
import {useEffect} from 'react'

function App() {

const [count, setCount] = useState(0);
useEffect(function(){
  console.log("Count change:", count)
});
function increase() {
  setCount(count+1);
}
function decrease() {
  if(count>0){
    setCount(count - 1);
  }

}
  return (

    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
      <button onClick={() => setCount(0)}>Reset</button>

    </div>


  )
}

export default App

React Quiz Project

Veera Ganapathi — Thu, 10 Sep 2026 04:00:49 +0000

App.jsx

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import './App.css'
import User from './components/User'
import Questions from './components/Questions'
import Result from './components/Result'
import { createContext, useState } from 'react'

export const quizContext = createContext();
function App() {
  const [user, setUser] = useState("");
  const [score, setScore] = useState(0);

  return (
    <div>
      <BrowserRouter>
       <quizContext.Provider value={{ user, setUser, score, setScore }}>
        <Routes>
            <Route path='/' element={<User />} />
            <Route path='/questions' element={<Questions />} />
            <Route path='/result' element={<Result />} /> 
        </Routes>
        </quizContext.Provider>
      </BrowserRouter>
    </div>
  )
}

export default App

User.jsx

import { useContext } from "react"
import { quizContext } from "../App"
import { useNavigate } from "react-router-dom";

function User() {
    const navigate = useNavigate();
    const { user, setUser } = useContext(quizContext);

    function start() {
        if (user) {
            navigate("/questions")
        } else {
            alert("Please enter valid input");
        }
    }
    return (
        <div className="user">
            <h1 className="head">Quiz App</h1>
            <input type="text" className="form-control" placeholder='Enter userName' onChange={(e) => setUser(e.target.value)} />
            <button className="user-btn" onClick={start}>Start Quiz</button>
        </div>
    )
}

export default User

Questions.jsx

import React, { useContext, useState } from 'react'
import quiz from '../assets/quiz.json'
import { quizContext } from '../App';
import { useNavigate } from 'react-router-dom';


function Questions() {
  const { score, setScore } = useContext(quizContext);
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [optionChoosen, setOptionChoosen] = useState("");

  const navigation = useNavigate();

  function next() {
    if (optionChoosen === quiz[currentQuestion].answer) {
      setScore(score + 1);
    }
    setCurrentQuestion(currentQuestion + 1);


  }

  function finish() {
     if (optionChoosen === quiz[currentQuestion].answer) {
      setScore(score + 1);
    }
    navigation("/result");
  }
  return (
    <div className='quiz'>
      <h1 className="question">{quiz[currentQuestion].prompt}</h1>
      <button className='quesBtn' onClick={() => setOptionChoosen("optionA")}>{quiz[currentQuestion].optionA}</button>
      <button className='quesBtn' onClick={() => setOptionChoosen("optionB")}>{quiz[currentQuestion].optionB}</button>
      <button className='quesBtn' onClick={() => setOptionChoosen("optionC")}>{quiz[currentQuestion].optionC}</button>
      <button className='quesBtn' onClick={() => setOptionChoosen("optionD")}>{quiz[currentQuestion].optionD}</button>
      {
        currentQuestion == quiz.length - 1 ? <button className='nextBtn' onClick={finish}>Finish</button> : <button className='nextBtn' onClick={next}>Next</button>
      }

    </div>
  )
}

export default Questions

Result.jsx

import React, { useContext } from 'react'
import { quizContext } from '../App';
import Questions from './Questions';
import { useNavigate } from 'react-router-dom';


function Result() {
  const { user, score } = useContext(quizContext);
  const navigation = useNavigate();

  function reset() {
    navigation("/");
    window.location.reload();
  }

  return (
    <div className='result'>
      <h1 className='headRes'>Quiz Result</h1>
      <p className='resultSco'>{user}, your score is: {score}</p>
      <p className='resultSco'>Thank you for participating!</p>
      <button className='resBtn' onClick={reset}>Play Again</button>
    </div>
  )
}

export default Result

App.css

/* userCss */

.user{
  height: 100vh;
  width: 100%;
  background-image: url("https://t4.ftcdn.net/jpg/03/45/88/07/360_F_345880772_zIT2mkdCzTthplO7xqaGGrMspN0jw0ll.jpg");
  background-size: cover;
  background-position: center;
}
.form-control{
  padding: 10px;
  border-radius: 5px;
  border: none;


}
.user-btn{
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #c6c6d8;

}
.head{

  color: rgb(245, 239, 239);
  font-size: 50px;
  margin-right: 20px;
  padding-top: 200px;

}

/* questionCss */

.quiz{
  height: 100vh;
  width: 100%;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgt3hNmO2Q_xmX2Nll5Zj9xtcOgB3oXMjKyE7-xT5LqL4ng2zNanS4wFmm&s=10");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  margin:0;


}

.question{
  color: rgba(15, 14, 14, 0.973);
  font-size: 30px;
  /* border: 2px solid black; */
  padding: 10px;
  margin: 10px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.863);
  margin-bottom: 100px;

}

.quesBtn{
  margin: 20px;
  padding: 15px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #c6c6d8;
}

.quesBtn:hover{
  background-color: #80808f;
  color: white;
}

.nextBtn{
  width: 120px;
  margin: 20px;
  padding: 15px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #0808e9;
  margin-left: 1000px;
  color: white;

} 

/* resultCss */

.result{
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin:0;
  background-color: rgba(10, 165, 226, 0.863);

}

.headRes{
  color: rgba(15, 14, 14, 0.973);
  font-size: 50px;
  margin-top: 100px;
  margin-bottom: 100px;
}

.resultSco{
  color: rgba(15, 14, 14, 0.973);
  font-size: 30px;
  margin-bottom: 100px;
}

.resBtn{
  width: 120px;
  margin: 20px;
  padding: 15px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #0808e9;
  margin-left: 500px;
  color: white;
}

Output:

React Task

Veera Ganapathi — Wed, 09 Sep 2026 06:29:35 +0000

Task 1:

Show/Hide

import { useState } from 'react';

function Show() {
    const [name,setName]=useState(true)
function hide(){
   if(true){
    setName(!name)
   }
}

  return (
    <div>
      {name && <h1>Hello Ganapathi</h1>}
      <button onClick={hide}>Click Me</button>
    </div>
  );
}

export default Show;

Output:
Show

Hide

Task 2

Input Field Value:

import { useState } from 'react';
function InputBox() {
const [input,setInput] = useState("");

function handleChange(event){
  setInput(event.target.value);
}
function clearButton(){
    setInput("");
}
  return (
    <div>
      <input type="text" placeholder='Enter your name' onChange={handleChange} value={input} />
      <p>Hello {input}</p>
      <button onClick={clearButton}>Clear</button>
    </div>
  );
}

export default InputBox;

Output:

Task 3

Counter app

import {useState} from 'react';

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

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default Counter;

Output:

Task 4

Toggle Button:

import {useState} from 'react';

function Name(){
    const [changeName, setChangeName] = useState("Off");
function changeFunction(){
    if(changeName === "Off"){
        setChangeName("On");
    }
    else{
        setChangeName("Off");
    }

}

    return(
        <div>
            <h2>On/Off</h2>
            <h3>{changeName}</h3>
            <button onClick={changeFunction}>Button</button>
        </div>
    )
}

export default Name;

Output:

React Hooks Part 1

Veera Ganapathi — Wed, 09 Sep 2026 05:59:37 +0000

Hooks

Hooks allow functions to have access to state and other React features without using classes.They provide a more direct API to React concepts like props, state, context, refs, and lifecycle.

Hook Rules

There are 3 rules for hooks:

Hooks can only be called inside React function components.
Hooks can only be called at the top level of a component.
Hooks cannot be conditional

Types of React Hooks:

useState
useEffect
useContext

useState

The useState hook is used to declare state variables in functional components. It allows us to read and update the state within the component.

const [state, setState] = useState(initialState);

state:The current value of the state.
setState: A function used to update the state.
initialState: The initial value of the state, which can be a primitive type or an object/array

import {useState} from 'react';

function Name(){
    const [changeName, setChangeName] = useState("Ganapathi");
function changeFunction(){
    if(changeName === "Ganapathi"){
        setChangeName("Veera");
    }
    else{
        setChangeName("Ganapathi");
    }

}

    return(
        <div>
            <h1>NameChange</h1>
            <p>{changeName}</p>
            <button onClick={changeFunction}>NameChange</button>
        </div>
    )
}

export default Name;

Output:

React Js introduction

Veera Ganapathi — Wed, 09 Sep 2026 05:28:57 +0000

React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM, enabling efficient UI updates and a seamless user experience.

Importance of React

Before React, front-end development struggled with:

Manual DOM Manipulation:Traditional JavaScript directly modified the DOM, slowing down the performance.
Complex State Management: Maintaining UI state became messy and hard to debug.
Tight Coupling in Frameworks: Frameworks like Angular introduced complex two-way data binding that made code harder to manage.

Core Features

Virtual DOM: React updates only the changed parts of the DOM, resulting in faster rendering.
One-Way Data Binding: Ensures predictable and easy to debug data flow.
Component-Based Architecture: Breaks UI into reusable pieces, improving the code reusability and scalability.

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

Output:
Hello World!

Closure in JavaScript

Veera Ganapathi — Tue, 25 Aug 2026 14:36:23 +0000

What is Closure?

A closure is the combination of a function and its lexical environment, allowing the function to access variables from its outer scope even after the outer function has finished executing.

Retains access to outer function variables.
Preserves the lexical scope.
Allows data encapsulation and privacy.
Commonly used in callbacks and asynchronous code.

function bank() {

            let min_balance = 500;

            const actions = {

                deposit: function (amt) {
                    min_balance = min_balance + amt;
                },

                withdraw: function (amt) {
                    min_balance = min_balance - amt;
                },
                checkbalance: function () {
                    console.log(min_balance);

                }



            }
            return actions;
        }

        const customer1 = bank();
        customer1.deposit(1000);
        customer1.checkbalance();

Output:
1500

Testing Levels:

Veera Ganapathi — Mon, 17 Aug 2026 16:09:50 +0000

Main Testing Levels:

Unit Testing
Integration Testing
System Testing

Unit Testing

Unit Testing is the first level of software testing in which individual units or components of an application are tested independently. It is usually performed by developers to verify that each unit works correctly before integration.

Tests individual functions, methods, or classes in isolation.
Detects defects early, reducing debugging time and development cost.
Ensures each component behaves as expected.

Integration Testing

Integration Testing verifies the interaction and data flow between two or more integrated modules. It ensures that combined components communicate correctly and work together without interface issues.

Tests communication between integrated modules.
Identifies interface and data exchange defects.
Ensures seamless interaction among software components.

Integration Testing Approaches

Top-Down Approach
Bottom-Up Approach

Top-Down Approach
In Top-Down Integration Testing, testing starts from the top-level module and moves down to the lower-level modules.

Stubs

Stubs are developed by software developers to use them in place of modules, if the respective modules aren't developed, missing in developing stage, or are unavailable currently while Top-down testing of modules
Stubs are basically known as a "called programs" and are used in the Top-down integration testing.

Bottom-Up Approach
In Bottom-Up Integration Testing, testing starts from the lower-level modules and moves up to the top-level modules.

Drivers

Drivers serve the same purpose as stubs, but drivers are used in Bottom-up integration testing and are also more complex than stubs.
Drivers are the "calling program" and are used in bottom-up integration testing.

System Testing

System Testing evaluates the complete and integrated software application to verify that it meets all specified functional and non-functional requirements. It is performed in an environment similar to production.

Tests the complete application from end to end.
Verifies functional and non-functional requirements.
Ensures the software behaves correctly in real-world scenarios.

Error vs Bug vs Defect

Error
A mistake made by the developer/programmer.
Bug
A problem in the software caused by an error and found during testing.
Defect
When the actual result does not match the expected result or requirement.

Software Testing

Veera Ganapathi — Mon, 17 Aug 2026 14:41:46 +0000

What is Software testing?

Software testing is the process of evaluating a software application to verify that it works as expected and meets specified requirements. It helps identify defects, errors, and missing functionalities before the software is delivered to users.

What is testcase?

A test case is a set of conditions or steps used to verify that a software application works as expected. It includes inputs, execution steps, and expected results. Test cases help ensure the system meets requirements and is free of defects.

Steps:

Open the login page.
Enter a valid username.
Enter a valid password.
Click the Login button.

Expected Result:
The user should be logged in successfully.

Actual Result:
The result we get after performing the test.

Status:
Pass / Fail

What is a Test Scenario?

A Test Scenario is a high-level condition or functionality that needs to be tested.

Example: Login Page

Under this scenario, we can have multiple test cases:

JavaScript Fetch API

Veera Ganapathi — Wed, 05 Aug 2026 15:13:16 +0000

Fetch API in JavaScript

The Fetch API is a modern interface in JavaScript that allows you to make HTTP requests.
It replaces the older XMLHttpRequest method and provides a cleaner and more flexible way to fetch resources asynchronously.
The Fetch API uses Promises, making it easier to work with asynchronous data.

Syntax

fetch(url, options)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

url: The API endpoint from which data is fetched.
options (optional): Specifies method, headers, body, etc.
response.json(): Parses the response as JSON.
.catch(error): Handles any errors that occur during the request.

How Fetch API Works?

A request is sent to the specified URL.
The server processes the request and sends a response.
The response is converted to JSON (or another format) using .json().
Errors are handled using .catch() or try-catch blocks.

Task 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API</title>
    <style>
        #api{
            display:grid;
            grid-template-columns:1fr 1fr 1fr 1fr;
            gap:20px;
        }
        .card {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            width: 200px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;


        }
        h1{
            text-align:center;
        }
    </style>
</head>
<body>

    <h1>Store Products</h1>
    <div id="api"></div>

    <script>




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

    let apiData = document.getElementById("api");

    json.forEach(product => {

        apiData.innerHTML +=
        '<div class="card">' +
            '<img src="' + product.image + '" width="100" height="100">' +
            '<p>Title: ' + product.title + '</p>' +
            '<h4>Price: $' + product.price + '</h4>' +
        '</div>';

    });

});

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

Output

Python Operators

Veera Ganapathi — Mon, 03 Aug 2026 16:18:33 +0000

Python Logical Operators:

Logical operators are used to combine conditional statements. Python has three logical operators:

and- Returns True if both statements are true
or- Returns True if one of the statements is true
not - Reverses the result, returns False if the result is true

age = 25
has_ticket = True
has_coupon = False

# Example 1: 
if age >= 18 and has_ticket:
    print("Allowed entry.")  

# Example 2: 
if has_ticket or has_coupon:
    print("Valid for entry or discount.") 

# Example 3: 
if not has_coupon:
    print("No coupon provided.")

Relational operators or Comparison operators:

Comparison operators are used to compare two values:

user_age = 20
voting_age = 18


if user_age >= voting_age:
    print("You are eligible to vote!")
else:
    print("You are too young to vote.")


print(10 == 20) 
print(10 != 20)

What is Runtime?

Runtime is the period when a Python program is executing, and the computer is performing the instructions written in the code.

Python Functions

Python functions are reusable blocks of code used to perform a specific task.
They help organize programs into smaller sections and execute the same logic whenever needed by calling the function.

def fun():
    print("Welcome to Python")

fun()

Function Arguments

Arguments are values passed to a function when it is called. They allow functions to receive input data and perform operations using those values.

def evenOdd(x):
    if (x % 2 == 0):
        return "Even"
    else:
        return "Odd"

print(evenOdd(16))
print(evenOdd(7))

Method Overloading

Method overloading is a feature of object-oriented programming where a class can have multiple methods with the same name but different parameters.
To overload method, we must change the number of parameters or the type of parameters, or both.

Error in python

SyntaxError: Missing colons :, unclosed parenthesis (), or quotes "".
IndentationError: Incorrect spacing or mixing tabs and spaces.
TypeError: Combining incompatible data types, like adding a string to an integer.

DOM Mini Project Part-2

Veera Ganapathi — Mon, 03 Aug 2026 15:25:19 +0000

Task 7

Uppercase converter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uppercase</title>
</head>
<body>
    <h1 id="upper">hello</h1>
    <button onclick="change()">Change to Uppercase</button>
    <script>
        function change()
        {
        let upperCase=document.getElementById("upper").innerText;
        result=upperCase.toUpperCase();
        document.getElementById("upper").innerText=result;
        }
    </script>
</body>
</html>

Output

Before Click

After Click

Task 8

Simple greeting alert box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple greeting alert box</title>
</head>
<body>
    <input type="text" id="greet">
    <button onclick="greet()">Greet</button>
    <script>
        function greet()
        {
            let name = document.getElementById("greet").value;
            alert("Hello, " + name + "!");
        }
    </script>
</body>
</html>

Before

After

Task 9

Calculator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>
<body>
    <input type="text" id="val1">
    <input type="text" id="val2">

    <button onclick="add()">Add</button>
    <button onclick="subtract()">Subtract</button>
    <button onclick="multiply()">Multiply</button>
    <button onclick="divide()">Divide</button>
    <h1 id="res"></h1>

    <script>


        function add(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            document.getElementById("res").innerText=a+b;
        }

         function subtract(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            document.getElementById("res").innerText=a-b;
        }

         function multiply(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            document.getElementById("res").innerText=a*b;
        }

         function divide(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            if(b===0){
                document.getElementById("res").innerText="Cannot divide by zero";
            }
            else{
                document.getElementById("res").innerText=a/b;
            }
        }
    </script>

</body>
</html>

Output:

Conditional Statements (Python)

Veera Ganapathi — Fri, 31 Jul 2026 14:50:55 +0000

Conditional Statements

Conditional statements are used to control the flow of execution in a program based on specific conditions.
They allow programs to execute different blocks of code depending on whether a condition evaluates to True or False.

If Statement

If statement is used to execute a block of code only when a specified condition evaluates to True.

mark1=90
mark2=89
if mark1 > mark2:
    print("Mark1 is greater")

Short Hand if

Short-hand if is used to write if statements in a single line. It is useful when only one statement needs to be executed.

if mark1 > mark2:print("Mark1 is greater")

If else Statement

If Else statement is used to execute one block of code when the condition is True and another block when the condition is False.

if mark1 > mark2:
    print("Mark1 is greater")
else:
    print("Mark2 is greater")

Elif Statement

The elif keyword is Python's way of saying "if the previous conditions were not true, then try this condition".

mark1=90
mark2=90
if mark1 > mark2:
    print("Mark1 is greater")
    print("Hi")
    print("hello")
elif mark2 > mark1:
    print("Mark2 is greater")
else:
    print("Both Are Equal")

Output:
Both Are Equal

Programming Rules:

Never say "I don't know", say "Let me try"
Known to unknown
Don't think about entire output
think about very next step
Introduce a variable only when it simplifies the solution
Micro to macro
Dry run before you run
Every big problem split three part input, progress, output
Logic first and syntax next