DEV Community: subash

Python Beginner Practise

subash — Sun, 07 Jun 2026 12:41:30 +0000

count = 0
while count < 5:
    print("1", end=" ")
    count+=1

OUTPUT;

count = 1
while count <= 5:
    print(count, end=" ")
    count+=1

OUTPUT;

while count <= 9:
    print(count, end=" ")
    count+=2

OUTPUT;

count = 3
while count <= 15:
    print(count, end=" ")
    count+=3

OUTPUT;

count = 15
while count >= 3:
    print(count, end=" ")
    count-=3

OUTPUT;

count = 10
while count >= 2:
    print(count, end=" ")
    count-=2

OUTPUT;


count = 9
while count >= 1:
    print(count, end=" ")
    count-=2

OUTPUT;

count = 1
while count <= 100:
    if count % 3 == 0 and count % 5 == 0:
        print(count)
    count+=1

OUTPUT;


count = 1
while count <= 100:
    if count % 3 == 0 or count % 5 == 0:
        print(count)
    count+=1

OUTPUT;

10.

givennumber = 15
count = 1
while count <= givennumber:
    if givennumber % count == 0:
        print(count)
    count+=1

OUTPUT;

11.

givennumber = 15
count = 1
total = 0
while count <= givennumber:
    if givennumber % count == 0:
        print(count)
        total+=count
    count+=1    

print("total :",total)

OUTPUT;

12.



givennumber = 15
count = 1
total = 0
while count <= givennumber/2:
    if givennumber % count == 0:
        print(count)
        total+=count
    count+=1    
if total == givennumber:
    print("perfect number because total and givennumber are same")
else:
     print(" not a perfect number,because total and givennumber are not same")

output;

13.

givennumber = 37

if givennumber < 2:
    print("not a prime number")
else:
    count = 2

    while count <= givennumber//2:
        if givennumber % count == 0:
            print("not a prime number")
            break
        count += 1
    else:
        print("prime number")

OUTPUT;

14.







references
https://dev.to/sivakumar_mathiyalagan_/python-exercise-37cg

React project using useState, useContext , useNavigate and browser Router

subash — Fri, 29 May 2026 14:49:12 +0000


import { createContext, useState } from "react";
import {BrowserRouter, Route, Routes, Link} from "react-router-dom"
import Dashboard from "./dashboard";
import Loginpage from "./loginpage";
import Profilepage from "./Profilepage";

export const userContext = createContext();
function App(){
const [name, setName] = useState("")
return(
    <>
    <userContext.Provider value = {{name, setName}}>
        <BrowserRouter>
        <Link to="/">profilepage</Link>
        <Link to="/dashboard">Dashboard</Link>

        <Link to="/loginpage">Loginpage</Link>
        <Routes>
            <Route path="/" element={<Profilepage/>}/>
            <Route path="/dashboard" element={<Dashboard/>}/>
            <Route path="/loginpage" element={<Loginpage/>}/>   
        </Routes>
        </BrowserRouter>
    </userContext.Provider>
    </>
)
}

export default App;

This is App component connect here we will assign the path through the route and create Link, to go another component, it is the replacement of tag, userContext is used to share the data components together easily, it is the solution of props drilling also,

First we create use navigate and we put it that in variable , that variable is userContext at the same time we should export it, then we create a function App() after that function we should export that function, because after export only we can able to connect component together,
Link only present in inside the BrowserRouter.

then create variable through the useState inside the App function

then we write return () , return only able to keep only one div, so w should create one div and we put these in it. inside return we should provide .

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

function Loginpage(){
     const {setName} = useContext(userContext);
     const navigate = useNavigate();

     function handleClick(){
        navigate("/dashboard")
     }

     return(

     <>
     <h1>Login page</h1>
     <input type="text" placeholder="entername" onChange={(e) => setName(e.target.value )} />

     <button onClick={handleClick}>login</button>

     </>)



}

export default Loginpage;

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

function Dashboard(){
    const {name} = useContext(userContext);
     const navigate = useNavigate();

     function logout(){
        navigate("/")

     }

     return(

     <>
     <h1>Dash Board</h1>

     <h2>welcome {name}</h2>


     <button onClick={logout}>logout</button>

     </>
     );



}

export default Dashboard;

import { useContext } from "react";
import { userContext } from "./App";
function Profilepage(){
  const { name } = useContext(userContext);
    return (
    <div>

      <h1>Profile Page</h1>

      <h2>User Name : {name}</h2>

    </div>
  );
}

export default Profilepage;

Logical while loop for beginner through the story

subash — Thu, 28 May 2026 13:46:35 +0000

1.train1 is stop every 3rd station and train2 is stop every fifth station , we should print train 1 ,every 3rd station and train 2 every 5th station , if two trains meet same station then we print both ?

train = 0
while train < 30:
    train = train + 1 

    if train % 3 == 0 and train % 5 == 0:
        print("both")

    elif train % 3 == 0:
        print("Train1")
    elif train % 5 == 0:
        print("Train2")

output:

Here train is count of station , and while loop condition is train less than 30 , then train will increase by one in inside the while loop,
then we do if and elif , first if, if train divisible by 3 and 5 then i print "both", elif train divisible by 3 then we will print train1 and elif train divisible by 5 then train2 what we print.

Here we should put the (and) condition first why because if we put 3 or 5 of instead of both , then what will happen is incase if condition get true then elif not working. we also want to both divisible of 3 and 5 right.in case 3 and 5 also get divisible at that time if we put 3 divisible in if condition incase that will true then elif condition will not work , so we missed the both train meeting station.

2.Train1 will stop everry 3rd station , train 2 will stop every 8th station , we should print the station no and station count and which is last station number?


train = 0
count = 0
while train < 300:
    train = train + 1 

    if train % 3 == 0 and train % 8 == 0:
        count+=1
        print("station no :",train)
print("totalstation is ",count)

Output:

same concept like except some condition,
here we create count variable to print total count station where is two train will meet, and we print all stations numbers.

we have to duscuss about how to print last station .

while loop through the story

subash — Wed, 27 May 2026 12:15:44 +0000

In this story one thief and one police , there is 40feet distance between them, thief try to escape from police , but he to cover only 2 feet in a step, but police cover 5 feet in a single step, police how many feets needs to catch thief ?

theif = 40
police = 0

while theif > police:
    theif += 2
    police += 5
print(theif)

OUTPUT;
68

First we create variable for thief and police , police is 0 and thief is 40 , because 40 is the distances of them , then we create while loop when police greater than thief , this while loop is stop, inside the while loop increase by 2 and police increase by 5 feet after while loop end , i was printed thief.
now we understand police needs 68 feet to catch thief

In this story there are two trains , train1 is stop every third station , and train2 is stop every 5th station , Question is which station these two trains will meet.

train = 0

while train < 30:
    train = train + 1 

    if train % 3 == 0 and train % 5 == 0:
        print("train will meet in ", train)

OUTPUT:
train will meet in 15
train will meet in 30

First i created one variable commonly train and it's value is 0 , i set while loop condition with in 30 that's mean until 29 this while will run , then inside while loop have train = train + 1,
and if condition , what the if condition is if train count is divisible by 3 and 5 then this condition will true , then execute what inside the condition , now print
train will meet in 15
train will meet in 30

we have confusion in 30 , like how it run because while loop condition is < 30 , after that in inside of while loop 29 +1 , then only we did if condition so it will print (30).

While loop and factorial

subash — Tue, 26 May 2026 14:15:15 +0000

Frog is fallen 50 feet borewell, each day that will go up 2 feet and return down 1.25 feet , question is how days needs to frag come out of the borewell, we have to create code for this senario.


feet = 50
up = 2
down = 1.25
day = 0
while feet>0:
    feet = feet - up + down
    day = day + 1
print(day);

OUTPUT;
67

Here what was happened is we create variable and value for feet, up , down and day,
then we create while loop , while loop condition is when feet is greater than 0 then the loop will run,
what inside the loop have is feet = feet - up + down
frag jump 2 feet per day and again down 1.25 feet so we add that,
each time while running day one increase when the while condition false then print day will work because this print is present outside of the loop.

#Additive Identity
0 is additive identity
because all number are return same value while addition with anynumber that same number will return

Multiplicative Identity

1 is multiplicative identity
because all number are return same value while multiple with anynumber that same number will return

Factorial

Factorial means multiplying from 1 to n.

3!=1×2×3=6

3!=3×2×1=6

because multiple order is not change the result

First N Numbers Sum

Standard way:

1+2+3=6

It can also be:

3+2+1=6

Both are correct

Formula for first n number:

n * (n+1)/2

Python Basics for Begginer

subash — Mon, 25 May 2026 14:50:39 +0000

Python is one of the most easiest language, why because,It allows humans to think naturally and write code almost like English. That is the real reason Python became powerful also it removes unnecessary complexity.

Today, Python is used in:

Artificial Intelligence
Cybersecurity
NASA projects
Automation
Data Science
Web Development
Robotics

Condition statement;

Conditional statements help Python decide which code should execute and which code should not execute.

#1. conditional statements:

Programs cannot make decisions

Every line of code would execute in the same order

Applications would not become interactive or smart

2.Conditional statements make programs:

Intelligent

Dynamic

Interactive

Flexible

Loop Statement

Looping statements are used in Python to execute a block of code repeatedly without writing the same code again and again.
Without loops, programmers would need to write repetitive code manually, which makes programs lengthy.

program:

EXAMPLE 1;

count = 1
while count<=5:
    print(count*2, end=' ')      
    count=count+1
print(count)
print(count*2)

end is parameter

In default python put \n in end parameter ,

\n - this means print next line.
Here remove that default \n that's why output is like sequences but 8 have \n so 10 was added that sequences but 10 in default end='\n' that why 12 was gone to next line.

OUTPUT;
2 4 6 8 10 6
12

EXAMPLE -2

count = 1
while count<=5:
    print(count*2 )       #print(1, end='\n')
    count=count+1
print(count)
print(count*2)

I already told you in default end = '\n"

OUTPUT:
2
4
6
8
10
6
12

sep(separate parameter):

print(1, 2, 3, sep='-')

OUTPUT;
1-2-3

Refferal link;

https://dev.to/hariharan_sj_2003/the-backbone-of-python-conditions-and-loops-182j

what is useSate and useEffect

subash — Mon, 25 May 2026 11:24:16 +0000

useState;

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

count - is the variable
[count, setCount] - Array Destructuring
useState(0)- function call with arugument 0
this 0 will store in count variable , we can not able to change the variable directly so we should call the setCount function to change the variable value through the arugument.

what is the purpose of useState is , if we put normal variable like
let count = 0 ; then if there is any need to make variable dynamic through the loop, then it will not work because , here we write code in components right, we should call the function name what inside the components , first time only appear the variable value in UI , because we call only one time to render that function, so if we use useState then the component will automatically rerender when the changes will happen.

useEffect

What is a Side Effect?

import { useEffect, useState } from "react";

function App() {

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

  useEffect(() => {
    console.log("Count Updated");
  }, [count]);

  return (
    <>
      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </>
  );
}

export default App;

A side effect means:

Fetching data from API
Updating DOM
Setting timers
Using local storage
Running code after rendering

Easy Real-Life Example

Imagine:

Your main job = Cooking food

While cooking:

answering phone
setting timer
opening fridge

These are not the main cooking task.

They are “side tasks”.

Similarly in React:

Rendering UI = Main work
API calls / timers = Side effects

concept

useEffect(() => { console.log("Count Updated"); }, [count]);

React watches count
Whenever count changes, useEffect runs

2.useEffect(() => {
console.log("Count Updated");
}, []);
It will NOT run again

3.useEffect(() => {
console.log("Count Updated");
});

every rerender it will work

Code	Runs When
`[count]`	When `count` changes
`[]`	Only once
No array	Every render

StrictMode

It helps developers:
find errors
detect unsafe code
identify deprecated features
improve React applications

CONTROL FLOW STATEMENT

subash — Fri, 22 May 2026 16:08:26 +0000

Programming Rules:
1) Don't say I don't know
2) Let me Try
3) Known To Unknown
4) Don't Think about entire output
5) Think about very next step
6) Introduce variable if you feel it is necessary
7) Micro To Macro

BOX is memory to store,

a=10

a is references variable

now we change

a = a+5

now a value is 15 but , that box is not changed , the value will modify in the same box or memory.

count = 1
while count<=5:
print(1, end=' hi ')
count=count+1

indefault /n in end , that means print next line

PYTHON FOR SYNTAX

subash — Fri, 22 May 2026 14:50:17 +0000

website;

Usestate project

subash — Thu, 21 May 2026 08:36:15 +0000

Project-7

import { useState } from "react";


function Dropdown() {
  const [country, setCountry] = useState("");
  const [stateName, setStateName] = useState("");
  const [cityName, setCityName] = useState("");


const state = {
  india : ["tamilnadu","kerala"],
  usa : ["usaState1","usaState2"],
}
const cities = {
  tamilnadu : ["perambalur","ariyalur"],
  kerala : ["keralaState1","kerala"],
  usaState1 : ["usaState1city1","usaState2city2"],
  usaState2 : ["usaState2city1","usaState2city2"],
};


function handleCountry(e){
setCountry(e.target.value);
setStateName("");
setCityName("");

}
function handleState(e){
  setStateName(e.target.value)
  setCityName("")
}

return (
  <>
  <select value={country} onChange={handleCountry} >
    <option value="">select country</option>
    <option value="india">India</option>
    <option value="usa">USA</option>
  </select>
  <select value={stateName} onChange={handleState} >
    <option value="">select stateName</option>

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

    index
  </select>

  <select value={cityName} onChange={(e) => {setCityName(e.target.value)}}>
    <option value="">select city</option>
    {stateName && 
    cities[stateName].map((item,index) => (
      <option key={index} value={item}>{item}</option>
    ))}
  </select>

  <br />

   <h2>Country : {country}</h2>

    <h2>State : {stateName}</h2>

     <h2>City : {cityName}</h2>




  </>
)

}
 export default Dropdown;

OUTPUT;

Project-6


import { useState } from "react";

function CheckboxHandling(){

const [courses, setCourses] = useState([]);

function getUserInput(e) {
    const {value, checked} = e.target;

    checked ? setCourses([...courses, value]) : setCourses(courses.filter((course => course !== value)))

};

return (
    <>
    <label htmlFor="react">React</label>
    <input type="checkbox" id="react" value="react" onChange={getUserInput}/>

    <label htmlFor="HTML">HTML</label>
    <input type="checkbox" id="HTML" value="HTML" onChange={getUserInput}/>

    <label htmlFor="JAVASCRIPT">JAVASCRIPT</label>
    <input type="checkbox" id="JAVASCRIPT" value="JAVASCRIPT" onChange={getUserInput}/>

    <ul>
        {courses.map((course) => (
            <li>{course}</li>
        ))}
    </ul>
    </>
)


}

export default CheckboxHandling;

OUTPUT;

What is browser, DOM, Real DOM, Virtual DOM

subash — Tue, 19 May 2026 07:02:59 +0000

1.WHAT IS BROWSER?

A browser is software used to access and display websites on the internet.

2.What is DOM?

DOM - Document Object Model
The browser converts HTML into a tree-like structure called the DOM.

Example HTML:

<body>
  <h1>Hello</h1>
  <p>Welcome</p>
</body>

DOM Structure

Body
 ├── h1
 │    └── Hello
 └── p
      └── Welcome

What is Real DOM?

The Real DOM is the actual DOM created inside the browser.

It directly represents the webpage shown to the user.

DOM is created by browser, not by the browser javascript.

1.When the browser reads HTML:

<h1>Hello</h1>

the browser automatically converts it into a DOM structure internally.

Document

   └── h1
        └── "Hello"

JavaScript does not create the DOM from scratch.
JavaScript only:

*accesses the DOM
*modifies the DOM
*updates the DOM

Problems with Real DOM

Updating the Real DOM is slow because:

*The browser must recalculate layout
*Repaint the UI
*Re-render elements
If many updates happen frequently, performance becomes slower.

Especially in:

*Large applications
*Dynamic websites
*Real-time updates

virtual DOM;

The Virtual DOM is a lightweight copy of the Real DOM.
Libraries like React use Virtual DOM to improve performance.

Instead of updating the Real DOM directly:
1.React creates a Virtual DOM copy
2.Changes are made in the Virtual DOM first
3.React compares old and new Virtual DOM
4.Only changed parts are updated in the Real DOM.

This process is called Diffing.

and updating only necessary parts is called Reconciliation

Virtual DOM Working Flow;

User Action
↓
State Changes
↓
New Virtual DOM Created
↓
Compare with Old Virtual DOM
↓
Find Differences
↓
Update Only Changed Elements in Real DOM.

What is New Virtual DOM?

When data changes in React:

1.React creates another updated Virtual DOM
2.This updated version is called the New Virtual DOM

Then React compares:

Old Virtual DOM

    VS

New Virtual DOM

Why React Uses Virtual DOM

 1. Faster rendering

 2.Better performance

 3.Efficient updates

 4.Smooth user experience

 5.Easier UI management

Real DOM vs Virtual DOM

Feature	Real DOM	Virtual DOM
Speed	Slower	Faster
Updates	Updates entire structure	Updates only changed parts
Performance	Less efficient	More efficient
Memory Usage	Higher	Lightweight
User Experience	Can become slow	Smooth UI updates

The browser creates the Real DOM from HTML.
Directly updating the Real DOM can be slow.

To solve this problem, React introduced the Virtual DOM, which acts as a lightweight copy of the Real DOM.

Whenever data changes:

A New Virtual DOM is created
React compares old and new Virtual DOMs
Only necessary changes update the Real DOM

GIT Cammand

subash — Sat, 16 May 2026 04:41:07 +0000

1.subash@subash-Acer-One-14-Z8-415:~/Desktop/project/subashpadaikathu$ du -sh .
309M

It is used to find size of current cd

2.subash@subash-Acer-One-14-Z8-415:~/Desktop/project/subashpadaikathu$ du -sh .git
307M .git

It is used to find size of separate file

3.subash@subash-Acer-One-14-Z8-415:~/Desktop/project/subashpadaikathu$ rm -rf .git

This is to delete file .

4.subash@subash-Acer-One-14-Z8-415:~/Desktop/project/subashpadaikathu$ find . -type f -size +50M
./.git/objects/8b/cf66c67b966c02f2089224c867de310617ceb3

This c

So this command:
find ~/ -type f -size +90M

means:

“Search all files inside my home folder bigger than 90MB”

Step 2 — Check file details

Run:

ls -lh filename

Example:

ls -lh movie.mp4

1.VERY IMPORTANT

If the 100MB file is inside:

node_modules

Then you should NOT upload it to GitHub.

Add this to .gitignore:

node_modules/

Then remove it from Git tracking:

git rm -r --cached node_modules

Then:

git commit -m "Removed node_modules"
git push

***Step 1 — Rename local branch

Change master → main

Run:

git branch -M main

Now your local branch becomes:

***If error comes like:
rejected

remote contains work that you do not have

Then run:

git pull origin main --allow-unrelated-histories

Then again:

git push -u origin main