DEV Community: Athithya Sivasankarar

React useContext + useNavigate Scenarios

Athithya Sivasankarar — Fri, 29 May 2026 08:00:59 +0000

1. Login Scenario

Problem

User enters name in Login page and moves to Dashboard page.
Dashboard should display the username.

App.jsx

import React, { createContext, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Login from "./components/Login";
import Dashboard from "./components/Dashboard";

export const UserContext = createContext();

function App() {

  const [user, setUser] = useState("");

  return (

    <UserContext.Provider value={{ user, setUser }}>

      <BrowserRouter>

        <Routes>

          <Route path="/" element={<Login />} />

          <Route
            path="/dashboard"
            element={<Dashboard />}
          />

        </Routes>

      </BrowserRouter>

    </UserContext.Provider>

  );
}

export default App;

Login.jsx

import React, { useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../App";

function Login() {

  const [name, setName] = useState("");

  const { setUser } = useContext(UserContext);

  const navigate = useNavigate();

  const handleLogin = () => {
    setUser(name);
    navigate("/dashboard");
  };

  return (
    <div>

      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
        Login
      </button>

    </div>
  );
}

export default Login;

Dashboard.jsx

import React, { useContext } from "react";

import { UserContext } from "../App";

function Dashboard() {

  const { user } = useContext(UserContext);

  return (

    <div>

      <h1>Dashboard</h1>

      <h2>Welcome {user}</h2>

    </div>

  );
}

export default Dashboard;

2. Logout Scenario

Problem

User clicks Logout button and should return to Login page.
Stored user data should also be cleared.

App.jsx

import React, { createContext, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Login from "./components/Login";
import Dashboard from "./components/Dashboard";

export const UserContext = createContext();

function App() {
  const [user, setUser] = useState("");

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </BrowserRouter>
    </UserContext.Provider>
  );
}

export default App;

Login.jsx

import React, { useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../App";

function Login() {
  const [name, setName] = useState("");

  const { setUser } = useContext(UserContext);

  const navigate = useNavigate();

  const handleLogin = () => {
    setUser(name);
    navigate("/dashboard");
  };

  return (
    <div>
      <h1>Login</h1>

      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
        Login
      </button>
    </div>
  );
}

export default Login;

Dashboard.jsx

import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../App";

function Dashboard() {

  const { setUser } = useContext(UserContext);

  const navigate = useNavigate();

  const handleLogout = () => {
    setUser("");
    navigate("/");
  };

  return (
    <div>

      <button onClick={handleLogout}>
        Logout
      </button>

    </div>
  );
}

export default Dashboard;

3. Name Sharing Scenario

Problem

User enters name in Home page.
Profile page should display the same name.

App.jsx

import React, { createContext, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./components/Home";
import Profile from "./components/Profile";

export const UserContext = createContext();

function App() {
  const [user, setUser] = useState("");

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </BrowserRouter>
    </UserContext.Provider>
  );
}

export default App;

Home.jsx

import React, { useContext } from "react";
import { UserContext } from "../App";

function Home() {

  const { user, setUser } = useContext(UserContext);

  return (
    <div>

      <input

        type="text"
        value={user}
        onChange={(e) => setUser(e.target.value)}
      />

    </div>
  );
}

export default Home;

Profile.jsx

import React, { useContext } from "react";
import { UserContext } from "../App";

function Profile() {

  const { user } = useContext(UserContext);

  return (
    <div>
      <h1>{user}</h1>
    </div>
  );
}

export default Profile;

4. Button Navigation Scenario

Problem

User clicks Next button in Home page and About page should open.

App.jsx

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home.jsx

import React from "react";
import { useNavigate } from "react-router-dom";

function Home() {

  const navigate = useNavigate();

  return (
    <div>

      <button onClick={() => navigate("/about")}>
        Next
      </button>

    </div>
  );
}

export default Home;

About.jsx

import React from "react";

function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  );
}

export default About;

5. Back Navigation Scenario

Problem

User opens Details page and clicks Back button to return previous page.

App.jsx

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./components/Home";
import Details from "./components/Details";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/details" element={<Details />} />
      </Routes>
    </BrowserRouter>
  );
}

jsx
import React from "react";
import { useNavigate } from "react-router-dom";

function Home() {
const navigate = useNavigate();

return (

Home Page

  <button onClick={() => navigate("/details")}>
    Go To Details
  </button>
</div>

);
}

export default Home;

export default App;

jsx

Home.jsx

Details.jsx

import React from "react";
import { useNavigate } from "react-router-dom";

function Details() {

  const navigate = useNavigate();

  return (
    <div>

      <button onClick={() => navigate(-1)}>
        Back
      </button>

    </div>
  );
}

export default Details;

Solving Train Station Problems Using Python While Loop

Athithya Sivasankarar — Thu, 28 May 2026 17:59:02 +0000

Problem Statement

We have two trains:

Train 1 stops at every 3rd station
Train 2 stops at every 5th station

We need to find:

First station where both trains meet
All stations where both trains meet
Total count of common stations
Last common station

We will check stations from 1 to 300.

1. First Station Where Both Trains Meet

station_no = 1

while station_no <= 300:

    if station_no % 3 == 0 and station_no % 5 == 0:
        print("First meeting station:", station_no)
        break

    station_no = station_no + 1

Output

First meeting station: 15

2. All Stations Where Both Trains Meet

station_no = 1

while station_no <= 300:

    if station_no % 3 == 0 and station_no % 5 == 0:
        print(station_no)

    station_no = station_no + 1

Some outputs:

3. Count of Common Stations

station_no = 1
count = 0

while station_no <= 300:

    if station_no % 3 == 0 and station_no % 5 == 0:
        count = count + 1

    station_no = station_no + 1

print("Total common stations:", count)

4. Last Common Station

station_no = 1
last_station = 0

while station_no <= 300:

    if station_no % 3 == 0 and station_no % 5 == 0:
        last_station = station_no

    station_no = station_no + 1

print("Last common station:", last_station)

BrowserRouter, Routes, Link, and useNavigate

Athithya Sivasankarar — Wed, 27 May 2026 18:12:02 +0000

What is React Router?

React Router is a library used for navigation in React applications.

It helps users move between pages without refreshing the browser.

To install React Router:

npm install react-router-dom

1. BrowserRouter

BrowserRouter is the main wrapper for routing.

It keeps your UI synchronized with the browser URL.

Example:

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {

  return (
    <BrowserRouter>

      <nav>
        <Link to="/">Home</Link>


        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />
      </Routes>

    </BrowserRouter>
  );
}

export default App;

Why do we use BrowserRouter?

Without BrowserRouter, routing will not work.

It enables:

URL handling
Navigation
Route management

2. Routes and Route

Routes is used to group all routes.

Route defines which component should load for a specific URL.

Example:

import { Routes, Route } from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

export default App;

Explanation
Path Component Loaded
/ Home
/about About

When users visit /about, React shows the About component.

3. Link

Normally, HTML uses tags for navigation.

But in React Router, we use Link.

Why?

Because reloads the page.
Link changes pages without refreshing.

Example:

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <div>
      <Link to="/">Home</Link>
      <br />

      <Link to="/about">About</Link>
    </div>
  );
}

export default Navbar;

Output
Clicking Home goes to Home page
Clicking About goes to About page
No page refresh happens

4. useNavigate Hook

useNavigateis used for programmatic navigation.

This means navigation happens using JavaScript code.

Example:

After login
After form submission
Redirecting users

Example:

import { useNavigate } from "react-router-dom";

function Login() {

  const navigate = useNavigate();

  function handleLogin() {
    alert("Login Successful");

    navigate("/home");
  }

  return (
    <div>
      <button onClick={handleLogin}>
        Login
      </button>
    </div>
  );
}

export default Login;

Explanation

When the button is clicked:

Alert message appears
User automatically moves to /home
Complete Example

import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useNavigate
} from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Login() {

  const navigate = useNavigate();

  function loginUser() {
    navigate("/");
  }

  return (
    <button onClick={loginUser}>
      Go Home
    </button>
  );
}

function App() {

  return (
    <BrowserRouter>

      <Link to="/">Home</Link>
      <br />

      <Link to="/about">About</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
      </Routes>

    </BrowserRouter>
  );
}

export default App;

Advantages of React Router
Fast navigation
No page refresh
Better user experience
Easy routing system
Works well for SPAs

Python Program to Double Flowers in Each Temple

Athithya Sivasankarar — Tue, 26 May 2026 17:49:18 +0000

Problem Statement

A devotee starts with 1 flower and visits 7 temples.
At each temple, the number of flowers doubles.

Write a Python program to find how many flowers the devotee has after visiting all 7 temples.

Program:

flowers = 1 temples_covered = 7 while temples_covered>0: temples_covered = temples_covered - 1 flowers = flowers * 2 print(flowers)

output:

useContext Hook in React

Athithya Sivasankarar — Mon, 25 May 2026 15:15:38 +0000

React has many hooks that make development easier. One useful hook is the useContext hook. It helps us share data between components without passing props again and again.

What is useContext?

useContext is a React Hook used to access data from a Context.

Normally, data is passed from parent to child using props. When many components need the same data, passing props through every component becomes difficult. This problem is called prop drilling.

useContext solves this problem.

Why use useContext?

We use useContext to:

Share data globally
Avoid prop drilling
Make code cleaner
Manage themes, login details, language settings, etc.
Steps to Use useContext

Create Context

import { createContext } from "react";

const UserContext = createContext();

Provide Context

import React from "react";
import { UserContext } from "./UserContext";
import Child from "./Child";

function App() {
  const name = "Athithya";

  return (
    <UserContext.Provider value={name}>
      <Child />
    </UserContext.Provider>
  );
}

export default App;

Use Context

import React, { useContext } from "react";
import { UserContext } from "./UserContext";

function Child() {
  const user = useContext(UserContext);

  return <h1>Hello {user}</h1>;
}

export default Child;

Output
Hello Athithya

useEffect Hook in React

Athithya Sivasankarar — Fri, 22 May 2026 07:30:41 +0000

React provides many Hooks that make functional components powerful and easy to manage. One of the most important Hooks is useEffect.

The useEffect Hook is used to perform side effects in React components.

What is a Side Effect?

A side effect is any action that happens outside the normal rendering process of a component.

Examples:

Fetching data from an API
Updating the webpage title
Using timers
Adding event listeners

Syntax of useEffect

useEffect(() => {

}, []);

The first part is a function containing the side effect.
The second part is the dependency array.
Example of useEffect

import { useEffect } from "react";
function App() {
useEffect(() => {
        console.log("Component Rendered");
    }, []);

    return (
        <h1>Hello React</h1>
    );
}

export default App;
Explanation
The message prints when the component renders for the first time.
The empty dependency array [] means it runs only once.
Dependency Array

The dependency array controls when the effect runs.

Empty Array

useEffect(() => {
    console.log("Runs once");
}, []);

Runs only once after the first render.

With Dependency

useEffect(() => {
    console.log("Runs when count changes");
}, [count]);

Runs whenever count changes.

Why Use useEffect?

useEffect helps developers:

Handle API calls
Manage timers
Update DOM content
Perform actions after rendering

Introduction to React

Athithya Sivasankarar — Thu, 14 May 2026 08:35:36 +0000

What is React?

React is a JavaScript library used to build user interfaces (UI). It helps developers create websites and web applications easily by dividing the UI into small reusable components.

React is mainly used for:

Creating single-page applications
Building fast and interactive websites
Managing dynamic content efficiently

Example:
Instead of reloading the entire webpage, React updates only the part that changes. This makes websites faster and smoother.

Who Created React?

React was created by Jordan Walke, a software engineer at Meta

React was first used inside Facebook in 2011 and later released to the public in 2013 as an open-source library.

Why Was React Created?

Before React, building large and dynamic websites was difficult because updating the user interface repeatedly made applications slow and hard to manage.

React was created to solve these problems:

Improve website performance
Make code reusable using components
Simplify UI development
Handle dynamic data efficiently

React introduced the concept of the Virtual DOM, which updates only necessary parts of the webpage instead of reloading the whole page.

This made web applications faster and easier to maintain.

What is the Difference Between a Library and a Framework?

Library	Framework
A library provides specific functions for developers.	A framework provides a complete structure for building applications.
Developers control the flow of the program.	The framework controls the flow of the program.
Used for solving particular tasks.	Used for building full applications.
Example: React	Example: Angular

Simple Understanding
Library = You are in control.
Framework = The framework is in control.

React is called a library because it mainly focuses on building user interfaces.

What is a Framework?

A framework is a collection of tools, rules, and libraries that provides a complete structure for developing applications.

Frameworks help developers:

Organize code properly
Reduce development time
Follow standard practices
Build complete applications faster

Examples of frameworks:

Angular
Django
Spring Boot

What is a Build Tool in React?
A build tool helps developers create, run, and optimize React applications.

Build tools perform tasks such as:

Converting modern JavaScript code into browser-compatible code
Bundling files together
Improving performance
Starting development servers

Popular React build tools:

Vite
Webpack
Create React App
Example

When developers write React code:

const element = <h1>Hello</h1>;

Browsers cannot understand JSX directly.

The build tool converts it into normal JavaScript that browsers can understand.

Weather app using fetch

Athithya Sivasankarar — Wed, 13 May 2026 09:04:09 +0000

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
  </head>

  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      height: 100vh;
      background-color: lightblue;
      font-family: Arial;
    }

    #container {
      border: 1px solid black;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 30px;
      border-radius: 10px;
      background-color: white;
      /* text-align: center; */
      box-shadow: 0px 0px 10px gray;
    }

    #input_btn {
      justify-content: center;
      align-items: center;
      padding: 20px;
      margin: 20px;
      width: 250px;
      font-size: 16px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      background-color: blue;
      color: white;
      border-radius: 5px;
    }

    button:hover {
      background-color: darkblue;
    }

  </style>

  <body>
    <div id="container">
      <h1>Weather App</h1>

      <input id="input_btn" placeholder="Enter City Name..." type="text" />

      <button onclick="checkWeather()">Search</button>

      <h3 id="temp"></h3>

      <h3 id="humidity"></h3>

      <h3 id="wind"></h3>
    </div>

    <script>
      async function checkWeather() {
        const city = document.getElementById("input_btn").value;

        const apiKey = "396c18706adae198e87e52584942c909";

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

        const data = await res.json();

        // console.log(data);

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

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

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

        temp.innerText = `🌡 Temperature : ${data.main.temp} °C`;

        humidity.innerText = `💧 Humidity : ${data.main.humidity}%`;

        wind.innerText = `🌬 Wind Speed : ${data.wind.speed} km/h`;
      }
    </script>
  </body>
</html>

output:

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();