DEV Community: Keerthana M

python string

Keerthana M — Fri, 11 Sep 2026 16:02:55 +0000

Task1:

To remove the front space before the sentence.

sentence = '                 today is friday'
space = ' '
front_space = True
for letter in sentence:
    if letter == space and front_space == True:
        continue
    else:
        front_space = False
        print(letter, end='')

OUTPUT:
today is friday

Task 2:

To remove the back space from the sentence

sentence = 'today is friday                  '
back_space = False
for letter in sentence:
    if letter == ' ' and back_space == False:
        continue
    else:
        back_space = True
        print(letter,end='')

OUTPUT:
today is friday

TASK3:

To remove the unwanted spaces from the sentence
sentence = 'today is friday' output: today is friday

sentence = 'today           is                    friday'
previous_letter = True 
for letter in sentence:
    if letter != ' ':
        print(letter, end='') 
        previous_letter = True 
    else:
        if letter == ' ' and previous_letter == True:
            print(letter,end='')
            previous_letter = False

*output: *
today is friday

Task4:

To find a word from an sentence

name = 'mahendra singh dhoni'
key = 'mahendra'
start = 0
end = len(key)
while end < len(name):
    if name[start:end] == key:
        print('Key is present at position',start)
        break
    start+=1
    end+=1
else:
    print('Key is not found')

OUTPUT:
Key is present at position 0

name = 'mahendra singh dhoni'
key = 'singh'
start = 0
end = len(key)
while end < len(name):
    if name[start:end] == key:
        print('Key is present at position',start)
        break
    start+=1
    end+=1
else:
    print('Key is not found')

OUTPUT:
Key is present at position 9

name = 'mahendra singh dhoni'
key = 'dhoni'
start = 0
end = len(key)
while end <= len(name):
if name[start:end] == key:
print('Key is present at position',start)
break
start+=1
end+=1
else:
print('Key is not found')

OUTPUT:
Key is present at position 15

python string

Keerthana M — Fri, 11 Sep 2026 15:50:14 +0000

sen = "Today is Thursday"
word_count = 0
for letter in sen:
if letter == ' ':
word_count+=1
else:
print(word_count)

sentence count:
sen = "Today is Thursday. Tomorrow is Friday."
sentence_count = 0
for letter in sen:
if letter == '.':
sentence_count+=1
else:
print(sentence_count)

count of vowels

name = 'saravanan'
vowel = 'a'
count = 0
for letter in name:
if letter == vowel:
count+=1
else:
print(count)

name = 'saravanan'
vowel = 'a'
count = 0
for letter in name:
if letter == vowel or
count+=1
else:
print(count)

PROPS DRILLING

Keerthana M — Thu, 10 Sep 2026 05:55:27 +0000

Props drilling:

Props drilling occurs when you pass data from a parent component down through multiple nested components, even if intermediate components don’t use it, to reach a deeply nested child component.
When building React applications, we often need to pass data from one component to another.
When data is passed through multiple nested components, it is called Props Drilling.

1.We are passing user from:

Main Component
to Parent
to Child
to GrandChild
Even though only GrandChild needs it, this is called Props Drilling.
Why is Props Drilling a Problem?

Makes code messy
Hard to maintain
Unnecessary passing of props
Difficult in large applications

Solving Props Drilling with useContext

Instead of passing props through every component level, we can use React Context API to share data directly with the component that needs it.
Step 1: Create a Context:
create a context inside the same file:

import React, { createContext, useContext } from "react";

const UserContext = createContext();

Step 2: Wrap Components with Provider

Now wrap the components inside UserContext.Provider.

const PropsDrilling = () => {
  const user = { name: "Ram", age: 24 };

  return (
    <UserContext.Provider value={user}>
      <div>
        <h1>Main Component</h1>
        <Parent />
      </div>
    </UserContext.Provider>
  );
};

Step 3: Remove Prop Drilling

Now update components so they don’t receive user as props:

function Parent() {
  return (
    <div>
      <h2>Parent Component</h2>
      <Child />
    </div>
  );
}

function Child() {
  return (
    <div>
      <h3>Child Component</h3>
      <GrandChild />
    </div>
  );
}

Step 4: Access Data Directly in GrandChild

Now use useContext inside GrandChild:

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

  return <h4>{user.name} is in GrandChild component.</h4>;
}

New Flow (With Context)

PropsDrilling (Provider)
        ↓
     Parent
        ↓
      Child
        ↓
   GrandChild (useContext)

Without Context:

You pass user through every component.

With Context:

Only the component that needs user accesses it directly.

React

Keerthana M — Tue, 08 Sep 2026 06:04:49 +0000

PROPS:

Props are used to pass data from a parent component to a child component
React Props are like function arguments in JavaScript and attributes in HTML.
To send props into a component, use the same syntax as HTML attributes:

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" />
);

The component receives the argument as a props object:

function Parent(props) {
  return <h1>Hello, {props.name}!</h1>;
}
function Child() {
  return <Parent name="John" />;
}

Destructuring props

function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello,I'm {name}!</h1>
      <p>I am {age} years old.</p>
    </div>
  );
}

function App() {
  return <Greeting name="Kiruthiga" age={21} />;
}

What are the ways to use props

Passing Strings

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="Alice" />;
}

Passing Numbers

function Student({ marks }) {
  return <p>Marks: {marks}</p>;
}

function App() {
  return <Student marks={95} />;
}

Passing Boolean Values

function User({ isLoggedIn }) {
  return (
    <h1>{isLoggedIn ? "Welcome!" : "Please Login"}</h1>
  );
}

function App() {
  return <User isLoggedIn={true} />;
}

Passing Arrays

Array props can be accessed using the indexes.

function Fruits({ items }) {
  return (
    <ul>
      {items.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

function App() {
  return <Fruits items={["Apple", "Banana", "Orange"]} />;
}

Passing Objects

The component treats objects like objects, and you can use the dot notation to access the properties.

function Employee({ emp }) {
  return (
    <div>
      <h2>{emp.name}</h2>
      <p>{emp.role}</p>
    </div>
  );
}

function App() {
  const employee = {
    name: "John",
    role: "Developer",
  };

  return <Employee emp={employee} />;
}

Passing Functions

function Button({ handleClick }) {
  return <button onClick={handleClick}>Click Me</button>;
}

function App() {
  function greet() {
    alert("Hello!");
  }

  return <Button handleClick={greet} />;
}

python pattern program

Keerthana M — Tue, 08 Sep 2026 05:49:38 +0000

program:

for row in range(1,6):
    for col in range(1,6):
        print("*", end =' ')
    print()

output:

* * * * * 
 * * * * * 
 * * * * * 
 * * * * * 
 * * * * *

program:

for row in range(1,6):
    print(row, end =' ')
    for col in range(1,row):
        print("*", end =' ')
    print()

output:

1 2 * 3 * * 4 * * * 5 * * * *
program:

for row in range(2,7):
    for col in range(1,row):
        print("*", end =' ')
    print()

output:

* 
 * * 
 * * * 
 * * * * 
 * * * * *

program:

for row in range(2,7):
    for col in range(1,row):
        print(col, end =' ')
    print()

output:
1 1 2 1 2 3 1 2 3 4 1 2 3 4 5

program:

for row in range(2,7):
    for col in range(1,row):
        print(col - row, end =' ')
    print()

output:
-1 -2 -1 -3 -2 -1 -4 -3 -2 -1 -5 -4 -3 -2 -1

program:

for row in range(1,6):
    for col in range(1,row + 1):
        print(row, end =' ')
    print()

output:
1 2 2 3 3 3 4 4 4 4 5 5 5 5 5

program:

for row in range(1,6):
    for col in range(1,row + 1):
        print(row * col, end =' ')
    print()

output:
1 2 4 3 6 9 4 8 12 16 5 10 15 20 25

program:

for row in range(2,7):
    for col in range(1,row):
        print(row * col, end =' ')
    print()

output:
2 3 6 4 8 12 5 10 15 20 6 12 18 24 30

program:

for row in range(2,7):
    for col in range(1,row):
        print((row - 1) * col, end =' ')
    print()

output:
1 2 4 3 6 9 4 8 12 16 5 10 15 20 25

program:

for row in range(1,6):
    for col in range(1,row + 1):
        print((col + 1) * row, end =' ')
    print()

output:
2 4 6 6 9 12 8 12 16 20 10 15 20 25 30

program:

for row in range(2,7):
    for col in range(1,row):
        print((row - col) -1, end =' ')
    print()

output:
0 1 0 2 1 0 3 2 1 0 4 3 2 1 0

React useEffect Hooks

Keerthana M — Tue, 01 Sep 2026 17:04:29 +0000

React useEffect Hooks

The useEffect Hook allows you to perform side effects in your components.

syntax:

import { useEffect } from 'react';
useEffect(() => {
  // 1. Your side-effect logic goes here

  return () => {
    // 2. Optional cleanup function goes here
  };
}, [dependencies]); // 3. Optional dependency array

side effects are:

Fetching data,
Directly updating the DOM,
Timers.

Data Fetching: Fetch data from an API when the component mounts or when a specific state value changes.
Event Listeners: Add or remove event listeners, such as scroll or resize, when the component is mounted or unmounted.
Timers and Intervals:Manage time-based operations like setting up intervals, timeouts, or animations.
Updating Document Title: Change the document title when a component is mounted or unmounted.

UseEffect runs on every render. That means that when the count changes, a render happens, which then triggers another effect.
This is not what we want. There are several ways to control when side effects run.
It include the second parameter which accepts an array. We can optionally pass dependencies to useEffect in this array.

1. No dependency passed:

useEffect(() => {
  //Runs on every render
});

2. An empty array:

useEffect(() => {
  //Runs only on the first render
}, []);

3.Dependencies

The useEffect hook accepts two arguments: a function and an optional array of dependencies.
The function contains the side effect logic, and the array specifies when the effect should re-run.

useEffect(() => {
// Effect logic here
}, [dependency1, dependency2]);

4. Props or state values:

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

Effect Cleanup

Some effects require cleanup to reduce memory leaks.
Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed.
We do this by including a return function at the end of the useEffect Hook.

useEffect(() => {
const timer = setTimeout(() => {
setCount((count) => count + 1);
}, 1000);

return () => clearTimeout(timer);
}, []);

python validators

Keerthana M — Tue, 01 Sep 2026 16:26:02 +0000

Euclidean Algorithm

In mathematics, the Euclidean algorithm or Euclid's algorithm, is an efficient method for computing the **greatest common divisor (GCD) **of two integers, the largest number that divides them both without a remainder.
Simple method to find the HCF/GCD (Highest Common Factor) of two numbers

def hcf(a, b):
    while b != 0:
        a, b = b, a % b
    print("HCF =", a)
a = int(input("Enter first number: "))
b = int(input("Enter second number: "))
hcf(a, b)

Output:
Enter first number: 12 Enter second number: 24 HCF = 12

Luhn Algorithm - Credit Card Validation

The Luhn algorithm (also called the modulus 10 or mod 10 algorithm) is a checksum method developed by Hans Peter Luhn to validate identification numbers such as credit card numbers, IMEI numbers, and other numeric identifiers.
It’s widely used in payment systems to detect common input errors before processing transactions.

def check(card):
    total = 0
    count = 0
    while card > 0:
        digit = card % 10
        if count % 2 == 1:
            digit = digit * 2
            if digit > 9:
                digit = digit - 9
        total = total + digit
        card = card // 10
        count = count + 1
    if total % 10 == 0:
        print("Valid")
    else:
        print("Invalid")
card = int(input("Enter card number: "))
check(card)

Output:
Enter card number: 1234567890 Invalid

Pan Card Validation

def pan_check(pan):
    if len(pan) != 10:
        print("Invalid PAN")
        return
    i = 0
    while i < 5:
        if not pan[i].isalpha():
            print("Invalid PAN")
            return
        i += 1
    i = 5
    while i < 9:
        if not pan[i].isdigit():
            print("Invalid PAN")
            return
        i += 1
    if not pan[9].isalpha():
        print("Invalid PAN")
    else:
        print("Valid PAN")
pan = input("Enter PAN: ")
pan_check(pan)

Output:
Enter PAN: ABCDE1234F Valid PAN

Aadhaar Card Validation

Aadhaar card validation ensures that your 12-digit Aadhaar number is correctly formatted and officially active in the UIDAI database.
Official Aadhaar Validation

Select 'Verify Aadhaar Number' under Aadhaar Services.
Enter your 12-digit Aadhaar number and the security code.
Click 'Verify' If your Aadhaar is valid and active, the system will confirm its status. If it is deactivated or invalid, an error message will appear
Official validation confirms that your Aadhaar is recognized by UIDAI and can be used for government services, banking

def aadhaar_check(aadhaar):
    if len(aadhaar) != 12:
        print("Invalid Aadhaar")
        return
    count = 0
    while count < 12:
        if not aadhaar[count].isdigit():
            print("Invalid Aadhaar")
            return
        count += 1
    print("Valid Aadhaar")
aadhaar = input("Enter Aadhaar number: ")
aadhaar_check(aadhaar)

Output:
Enter Aadhaar number: 123456789045 Valid Aadhaar

binary, decimal, octal

Keerthana M — Tue, 01 Sep 2026 16:10:00 +0000

BINARY TO DECIMAL

def binary_to_decimal(binary):
    decimal = 0
    power = 1
    while binary > 0:
        digit = binary % 10
        decimal = decimal + digit * power
        power =power*2
        binary = binary // 10
    print("Decimal =", decimal)
num = int(input("Enter a binary number: "))
binary_to_decimal(num)

OUTPUT:
Enter a binary number: 1010 Decimal = 10

binary = 101
 decimal = 0
 power = 0
 while binary > 0: 
     decimal = decimal + (binary%10 * 2 ** power)
     binary = binary//10
     power+=1

 print(decimal)

OUTPUT:
5

DESIMAL TO BINARY:

def decimal_to_binary(num):
    binary = ""
    while num > 0:
        digit = num % 2
        binary = str(digit) + binary
        num = num // 2
    print("Binary =", binary)
num = int(input("Enter a decimal number: "))
decimal_to_binary(num)

OUTPUT:
Enter a decimal number: 5 Binary = 101

BINARY TO OCTAL:

def binary_to_octal(binary):
    decimal = 0
    power = 1
    while binary > 0:
        digit = binary % 10
        decimal = decimal + digit * power
        power = power * 2
        binary = binary // 10
    octal = ""
    while decimal > 0:
        digit = decimal % 8
        octal = str(digit) + octal
        decimal = decimal // 8
    print("Octal =", octal)
num = int(input("Enter binary number: "))
binary_to_octal(num)

OUTPUT:
Enter binary number: 1010 Octal = 12

React task_day-2

Keerthana M — Mon, 31 Aug 2026 16:33:38 +0000

3)Show/Hide Text
You want to show paragraph only when button is clicked.
What kind of state works best?
Why boolean is suitable here?

ShowHide.jsx


import {useState} from "react";
function ShowHide(){
    const[click,setClick]=useState("");

    function show(){
        setClick("React is a JavaScript library used to build interactive user interfaces (UI) for websites and web applications. It was created by Facebook (Meta) and is one of the most popular tools for front-end development.")
        console.log("Show")

    }
    return(
        <div>
            <h1>Show-Hide Button</h1>
            <button onClick={show}>Show</button>
            <p>{click}</p>
        </div>
    )
}
export default ShowHide;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import ShowHide from './Show-Hide'


function App() {

  return (

<ShowHide/>
  )
}

export default App

OUTPUT:

4)Character Counter
User types in textarea. You show number of characters.
How do you track text length?
Should you store both text and length in state?

CountChar.jsx

import {useState} from 'react';

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

    function char(event){
        let userInput = event.target.value
        setCount(userInput.length);
        // console.log("count") 
    }

    return(
       <div>
         <input type="Text" onChange={char}></input>
        <p> Count:{count}</p>
       </div>
    )
}
export default CountChar;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import CountChar from './CountChar'

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

  return (
    <CountChar />
  )
}

export default App

OUTPUT:

5)Form with Multiple Inputs
You have 5 input fields (name, email, phone, city, password).
Better to use:
5 separate useState?
OR one object state?
Why?
What problem happens if you update object state incorrectly?

MultipleInput.jsx

import { useState } from "react"
function MultipleInput(){
    const [file,setFile]=useState({
        name:'',
        mail:'',
        phone:'',
        city:'',
        password:''
    })
    const [ show,setShow]=useState(false)

    function form(e){
        setFile({...file,[e.target.name]:e.target.value})
    }
    function submit(){
        setShow(true)    
    }
    return(
        <div>
            <input type='text' placeholder="enter a name" onChange={form} value={file.name} name='name'></input><br></br>
            <input type='email' placeholder="enter a mail" onChange={form} value={file.mail} name='mail'></input><br></br>
            <input type='text' placeholder="enter a phone" onChange={form} value={file.phone} name='phone'></input><br></br>
            <input type='text' placeholder="enter your city" onChange={form} value={file.city} name='city'></input><br></br>
            <input type='password'placeholder="enter a password" onChange={form} value={file.password} name='password'></input><br></br>
            <button onClick={submit}>submit</button><br></br>Details
            {show && 
            <>
            <p>Name:{file.name}</p>
            <p>Email:{file.mail}</p>
            <p>Phone:{file.phone}</p>
            <p>City:{file.city}</p>
            <p>Password:{file.password}</p>
            </>
            }   
        </div>
    )
}

export default MultipleInput;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import Input from './Input'


function App() {

  return (
    <Input/>
  )
}

export default App;

react

Keerthana M — Fri, 28 Aug 2026 16:34:13 +0000

1)Toggle Button:
You build a button that switches between:
"ON" ↔ "OFF"
What type of state should you use?
What is the best initial value?

Toogle.jsx

import { useState } from "react";
function Toogle() {
    const [Switch, setSwitch] = useState("https://www.w3schools.com/js/pic_bulboff.gif");

    function on() {
        setSwitch("https://www.w3schools.com/js/pic_bulbon.gif");
        console.log("ON");
    }
    function off() {
        setSwitch("https://www.w3schools.com/js/pic_bulboff.gif");
        console.log("OFF");
    }
    return (
        <div>
            <h1>Toogle Button</h1>
            <img
                src={Switch} alt="Bulb"
            />
            <button onClick={on}>ON</button>
            <button onClick={off}>OFF</button>
        </div>
    )
}
export default Toogle;

App.jsx


import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import Toogle from './Toogle'

function App() {

  return (
            <Toogle/>
  )
}

export default App

** OUTPUT:**

2) Input Field Value:
You have a text input.
User types name and you want to display:
Hello, Vijay
Why must the input value be stored in useState?
What happens if you use a normal variable?

Input.jsx

import { useState } from "react";

function Input() {
    const[ name, setName] = useState("");
    function change(event) {
        setName(event.target.value)
    }
    return (
        <div>
            <h1>Type your name here</h1>
            <input type="text"  value={name}
            onChange={change}></input>
            <h3>Hello ,{name}</h3>
        </div>
    )
}
export default Input;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import Input from './Input'

function App() {

  return (
    <Input/>
  )
}

export default App

OUTPUT:

React-js

Keerthana M — Thu, 27 Aug 2026 17:59:39 +0000

DIFFERENCE BETWEEN HTML AND XML:

React 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.

What is a Hook?

Hooks are functions that let you "hook into" React state and lifecycle features from functional components.
You must import Hooks from react.
Here we are using the useState Hook to keep track of the application state.
State generally refers to application data or properties that need to be tracked.

React useState Hook

The React useState Hook allows us to track state in a function component.
State generally refers to data or properties that need to be tracking in an application.

Import useState

To use the useState Hook, we first need to import it into our component.

import { useState } from "react";

Initialize useState

We initialize our state by calling useState in our function component.
useState accepts an initial state and returns two values:The current state.
A function that updates the state.
Example:
Initialize state at the top of the function component.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("red");
}

Update State

To update our state, we use our state updater function.

Example:

Use the state updater function to update the state:

<button
  type="button"
  onClick={() => setColor("blue")}
>Blue</button>

State can contain:

The useState Hook can be used to keep track of strings, numbers, booleans, arrays, objects, and any combination of these!
We could create multiple state Hooks to track individual values.
Updating Objects and Arrays in State
When state is updated, the entire state gets overwritten.
What if we only want to update the color of our car?
If we only called setCar({color: "blue"}), this would remove the brand, model, and year from our state.
We can use the JavaScript spread operator to help us.

Example:

Use the JavaScript spread operator to update only the color of the car:

const updateColor = () => {
  setCar(previousState => {
    return { ...previousState, color: "blue" }
  });
}

TASK ON REACT-JS:

Task-01

Counter program :

import { useState } from "react"

function Counter(){
    const [count, setCount] = useState(0);
    function increment(){
        setCount(count + 1)
    }
    function decrement(){
        setCount(count - 1)
    }
    function reset(){
        setCount(0)
    }

    return(
        <div className="div">
            <h1>Counter App</h1>
            <h3>Count: {count}</h3>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
            <button onClick={reset}>reset</button>
        </div>
    )
}
export default Counter;

OUTPUT:

React -js

Keerthana M — Wed, 26 Aug 2026 16:37:13 +0000

React-js:

React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components

BULB ON AND OFF USING REACT:

import { useState } from "react";

function Counter() {
const [bulb, setBulb] = useState(
"https://www.w3schools.com/js/pic_bulboff.gif"
);

function ON() {
console.log("ON");
setBulb("https://www.w3schools.com/js/pic_bulbon.gif");
}

function OFF() {
console.log("OFF");
setBulb("https://www.w3schools.com/js/pic_bulboff.gif");
}

return (
<div>
<img src={bulb} alt="Bulb" />

<button onClick={ON}>ON</button>
<button onClick={OFF}>OFF</button>
</div>
);
}

export default Counter;

What is JSX?

JSX stands for JavaScript XML.
JSX is an XML/HTML like extension to JavaScript.
JSX Expressions
Expressions can be used in JSX by wrapping them in curly {} braces.

Example

<div id="id01">Hello World!</div>

<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
    <h1>Hello {name}!</h1>,
    document.getElementById('id01'));
</script>

React Elements

React applications are usually built around a single HTML element.
React developers often call this the root node (root element)
React elements are immutable. They cannot be changed.
The only way to change a React element is to render a new element every time