DEV Community: Keerthana M

python Day3

Keerthana M — Thu, 30 Jul 2026 12:36:27 +0000

Python Conditions and If statements:

Python supports the usual logical conditions from mathematics:

Equals: a == b
Not Equals: a != b
Less than: a < b
Less than or equal to: a <= b
Greater than: a > b
Greater than or equal to: a >= b

These conditions can be used in several ways, most commonly in "if statements" and loops.
An "if statement" is written by using the if keyword.
The if statement evaluates a condition (an expression that results in True or False).
If the condition is true, the code block inside the if statement is executed.
If the condition is false, the code block is skipped.

1.IF STATEMENT:

a = 33
b = 200

if b > a:
  print("b is greater than a")

OUTPUT:

b is greater than a

2.Multiple Statements in If Block

Multiple statements inside an if block. All statements must be indented at the same level.

Example

Multiple statements in an if block:

age = 20
if age >= 18:
  print("You are an adult")
  print("You can vote")
  print("You have full legal rights")

OUTPUT:

You are an adult You can vote You have full legal rights

3.Python Elif Statement

The elif keyword is Python's way of saying "if the previous conditions were not true, then try this condition".
The elif keyword allows you to check multiple expressions for True and execute a block of code as soon as one of the conditions evaluates to True.

EXAMPLE:

a = 33
b = 33
if b > a:
  print("b is greater than a")
elif a == b:
  print("a and b are equal")

OUTPUT:
a and b are equal

4.Multiple Elif Statements:

Many elif statements as you need. Python will check each condition in order and execute the first one that is true.
Use elif when you have multiple mutually exclusive conditions to check.
This is more efficient than using multiple separate if statements because Python stops checking once it finds a true condition.

Example
Testing multiple conditions:

score = 75

if score >= 90:
  print("Grade: A")
elif score >= 80:
  print("Grade: B")
elif score >= 70:
  print("Grade: C")
elif score >= 60:
  print("Grade: D")

OUTPUT:
Grade: C

5. Python Else Statement

The else keyword catches anything which isn't caught by the preceding conditions.
The else statement is executed when the if condition (and any elif conditions) evaluate to False.

a = 200
b = 33
if b > a:
  print("b is greater than a")
elif a == b:
  print("a and b are equal")
else:
  print("a is greater than b")

OUTPUT:
a is greater than b

6.Else Without Elif
How Else Works

The else statement provides a default action when none of the previous conditions are true.
Think of it as a "catch-all" for any scenario not covered by your if and elif statements.

Note: The else statement must come last. You cannot have an elif after an else.

An else without the elif: Example

a = 200
b = 33
if b > a:
  print("b is greater than a")
else:
  print("b is not greater than a")

OUTPUT:

b is not greater than a

Complete If-Elif-Else Chain

Combine if, elif, and else to create a comprehensive decision-making structure.

Example
7. Temperature classifier:

temperature = 22

if temperature > 30:
  print("It's hot outside!")
elif temperature > 20:
  print("It's warm outside")
elif temperature > 10:
  print("It's cool outside")
else:
  print("It's cold outside!")

OUTPUT:

It's warm outside

ELEMENT SELECTORS

Keerthana M — Wed, 29 Jul 2026 16:42:17 +0000

ELEMENT SELECTORS IN DOM:
Element Selector:

JavaScript element selectors are built-in DOM methods used to target, select, and manipulate HTML elements on a webpage.
Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by CSS selectors
Finding HTML elements by HTML object collections

Id selector:
1. document.getElementById():

Finds a single unique element by its strict id attribute.

Example:
const header = document.getElementById("head");

<h1 id="main" >keerthana</h1>
    <script>
        const element= document.getElementById("main");
        console.log(element.innerText);
    </script>

OUTPUT:
keerthana

class selector:

2. document.getElementsByClassName():

Finds all elements sharing a specific class attribute.

Example:
const buttons = document.getElementsByClassName("btn");

<h1 class="main" >hello sir</h1>
    <script>
        const element1= document.getElementsByClassName("main");
        console.log(element1[0].innerText);
    </script>

OUTPUT:

hello sir

Tag selector:
3. document.getElementsByTagName():

Finds all elements matching a specific HTML tag.

Example:
const paragraphs = document.getElementsByTagName('p');

<h1>keerthana</h1>
    <script>
        const tag= document.getElementsByTagName("h1");

        console.log(tag[0].innerText);
    </script>

OUTPUT:
Keerthana

Queryselector:

4. document.querySelector():

Finds the first element that matches the specified CSS selector.

Example:
const mainNav = document.querySelector('#nav');

<h1 class="main" >hello world</h1>
    <script>
        const query= document.querySelector(".main");
        console.log(query.innerText);
    </script>

OUTPUT:
hello world

QueryselectorAll:

5. document.querySelectorAll():

Finds all elements that match the specified CSS selector.

Example:
const cards = document.querySelectorAll('.card');

<h2 class="main" >hello</h2>


    <script>
        const queryAll= document.querySelectorAll("h2");
        console.log(queryAll[0].innerText);
    </script>

OUTPUT:

hello

DOM TASK

Keerthana M — Tue, 28 Jul 2026 16:37:54 +0000

TASK 1:

COUNTER:

when a plus button is clicked it should increment the count.
when a sub(-) button is clicked it should decrement the count.
when a reset button is pressed it should be turn back to "0"

PROGRAM:

<h1>count <span id="count"> 0</span></h1>
        <button id="increment" onclick="addition()">+</button>
        <button id="decrement" onclick="subraction()">-</button>
        <button id="reset" onclick="reset()">reset</button>
        <script>
            let count=0;
            function addition(){
                const element = document.getElementById("count");
                count++;
                element.innerText = count;
            }
            function subraction(){
                const element = document.getElementById("count");
                count--;
                element.innerText = count;
            }
            function reset(){
                const element = document.getElementById("count");
                count=0;
                element.innerText = count;
            }
        </script>

OUTPUT:

TASK 2:
LIVE CHARACTER COUNT:

<input id="userinput" 
        oninput="character()"  type="text" >
       <h1 id="result">0</h1>

       <script>

        function character(){
            const inputbox= document.getElementById("userinput").value.length;
            const  result = document.getElementById("result");
            result.innerText = inputbox;
        } 

       </script>

OUTPUT:

TASK 3:

PASSWORD SHOW AND HIDE WITH 2 BUTTONS:

<input id="user-input" type="password" >
       <button id="show" onclick="getshow()">show</button>
       <button id="hide" onclick="gethide()">hide</button>

       <script>

        function getshow(){
            const element= document.getElementById("user-input");
            if(element.type=="password"){
                element.type="text";
            }
        }
        function gethide(){
            const element= document.getElementById("user-input");
             if(element.type=="text"){
                element.type="password";
            }
        }

       </script>

OUTPUT:

TASK 4:
show/hide password with icon:

<div class="div">

            <input id="one" type="password">

            <button onclick="showtext()" id="btn"><i id="three" style="padding: 20px;font-size: xx-large;" class="fa-solid fa-eye"></i></button>
        </div>
        <script>
         function showtext(){
        const showbtn = document.getElementById("one")
        const btn2 = document.getElementById("btn");
        if(showbtn.type == "password"){
            showbtn.type = "text"
            btn2.innerHTML = '<i style="padding: 20px;font-size: xx-large;" class="fa-solid fa-eye-slash"></i>' 
        }else{
            showbtn.type = "password";
            btn2.innerHTML = '<i id="three" style="padding: 20px;font-size: xx-large;" class="fa-solid fa-eye"></i>'
        }
        console.log(document.getElementById("three")); 
    }
    </script>

OUTPUT:

HIDE:

SHOW:

DOM TASK

Keerthana M — Tue, 28 Jul 2026 14:31:15 +0000

TASK 1:

COUNTER:

when a plus button is clicked it should increment the count.
when a sub(-) button is clicked it should decrement the count.
when a reset button is pressed it should be turn back to "0"

PROGRAM:

<h1>count <span id="count"> 0</span></h1>
        <button id="increment" onclick="addition()">+</button>
        <button id="decrement" onclick="subraction()">-</button>
        <button id="reset" onclick="reset()">reset</button>
        <script>
            let count=0;
            function addition(){
                const element = document.getElementById("count");
                count++;
                element.innerText = count;
            }
            function subraction(){
                const element = document.getElementById("count");
                count--;
                element.innerText = count;
            }
            function reset(){
                const element = document.getElementById("count");
                count=0;
                element.innerText = count;
            }
        </script>

OUTPUT:

TASK 2:
** LIVE CHARACTER COUNT:**

 <input id="userinput" 
        oninput="character()"  type="text" >
       <h1 id="result">0</h1>

       <script>

        function character(){
            const inputbox= document.getElementById("userinput").value.length;
            const  result = document.getElementById("result");
            result.innerText = inputbox;
        } 

       </script>

OUTPUT:

python day2

Keerthana M — Tue, 28 Jul 2026 13:32:39 +0000

PYTHON INSTALLATION

Python current version is 3.14.6
Python is a Forward compatibility
In Linux default there is a python we can access the python through terminal

In window we have to download the python.

python.org--->python--->download.
After installation in windows we have to type the IDLE.

What is IDLE ?

IDLE- (Integrated Development and Learning Environment).
It will give the result immediately when you begin the code
The shell is a interactive interpreter
It provide the output for each line of the code immediately.

EXAPMPLE PROGRAM:

5+10
output: 15

25/10
output:2.5

*Advantage *

In python we need not to declare data type like other programming Language. Eample:

name="keerthana"
print("Welcome", name, "!") //comma seperation makes space btw words
output:
Welcome keerthana !

name="keerthana"
print("Welcome"+name+"!") // plus operator here concatinates.
output:
Welcomekeerthana!

name ---> reference variable/identifier
print----> Function (action)
= ----> Assignment Operator .it assigns the value to an variable.

FUNCTION OVERLOADING:

Same Function name but different type of arguments
For Eg:

The above program has the same function name print but different type of arguments. as we discussed above.

python day2

Keerthana M — Tue, 28 Jul 2026 13:27:09 +0000

PYTHON INSTALLATION

Python current version is 3.14.6

Python is a Forward compatibility

In Linux default there is a python we can access the python through terminal

In window we have to download the python.

python.org--->python--->download.

After download and installation in windows we have to type the IDLE.

What is IDLE ?

IDLE stands for Integrated Development and Learning Environment.

It will give the result immediately when you begin the code

The shell is a interactive interpreter

It provide the output for each line of the code immediately.
EXAPMPLE PROGRAM:

5+10
output: 15

25/10
output:2.5

Advantage of python is we need not to declare data type like other programming Language.

name="shobi"
print("Welcome", name, "!")
output:
Welcome shobi !

name="shobi"
print("Welcome"+name+"!")
output:
Welcomeshobi!

Both are the same program but the difference is in 1st program i used (,) in a print. 2nd program i used(+) in a print

if i give a (,) means it give the space

if i give a(+) means it doesnot give the space it will concatenate .

name ---> reference variable/identifier
print----> Function (action)
= ----> Assignment Operator it will assign the right side value to the left side reference variable.

FUNCTION OVERLOADING:

Same Function name but different type of arguments
For Eg:

The above program has the same function name print but different type of arguments like in 1st program we use a (,) in 2nd program we use a (+).

DOM

Keerthana M — Mon, 27 Jul 2026 14:21:55 +0000

-DOM (Document Object Model)
-DOM is used to access UI (view) in Browser.

Model-> Logic

1. Why DOM?

The Document Object Model (DOM) is a programming interface that represents the structure of a web document (HTML, XML, SVG) as a tree of nodes.

OBJECT:

const h1{
     id:"heading1",
     innerText:"Hello",
     style:{
         color:red,}

DOM METHODS:

document.getElementById(id_name);
It is used to access the id of an element from the Document.
document.getElementByClass(Class_name);
It is used to access the Class of an element from the Document.

EVENT:

Even is an Action, In which Action take place in the browser. (Like: Onclick, Select, click, scroll, type, hover).

Example:

To print Hello using "Id" when a button is clicked.

OUTPUT:

object
Hello

console.log(element.innerText);  //Hello
            element-> Object
            innerText ->CSSStyleProperties

To change the word **hello to payilagam **when the button is clicked.

OUTPUT:

BEFORE:

Hello
Hii
Hello world
check text

After:

payilagam
Hii
Hello world
check text

when an on button is clicked the bulb should be turned off and when the button is again clicked, the bulb should turn on.

<button id="btn"  onclick="togglebulb()">Turn ON</button> 
<img  id="bulb" src="https://www.w3schools.com/js/pic_bulboff.gif">


        <script> 

        function togglebulb(){
            const element= document.getElementById("bulb");
            console.log(element.innerText);
            //image logic
            const bnt=document.getElementById("btn");
            bulb.src="https://www.w3schools.com/js/pic_bulbon.gif";

        }
       </script>

OUTPUT:
BEFORE:

AFTER:

DOM

Keerthana M — Mon, 27 Jul 2026 14:16:29 +0000

-DOM (Document Object Model)
-DOM is used to access UI (view) in Browser.

Model-> Logic

1. Why DOM?

The Document Object Model (DOM) is a programming interface that represents the structure of a web document (HTML, XML, SVG) as a tree of nodes.

OBJECT:

const h1{
     id:"heading1",
     innerText:"Hello",
     style:{
         color:red,}

DOM METHODS:

document.getElementById(id_name);
It is used to access the id of an element from the Document.
document.getElementByClass(Class_name);
It is used to access the Class of an element from the Document.

EVENT:

Even is an Action, In which Action take place in the browser. (Like: Onclick, Select, click, scroll, type, hover).

Example:

To print Hello using "Id" when a button is clicked.

OUTPUT:

object
Hello

console.log(element.innerText);  //Hello
            element-> Object
            innerText ->CSSStyleProperties

To change the word **hello to payilagam **when the button is clicked.

OUTPUT:

BEFORE:

Hello
Hii
Hello world
check text

After:

payilagam
Hii
Hello world
check text

when an on button is clicked the bulb should be turned off and when the button is again clicked, the bulb should turn on.

<button id="btn"  onclick="togglebulb()">Turn ON</button> 
<img  id="bulb" src="https://www.w3schools.com/js/pic_bulboff.gif">


        <script> 

        function togglebulb(){
            const element= document.getElementById("bulb");
            console.log(element.innerText);
            //image logic
            const bnt=document.getElementById("btn");
            bulb.src="https://www.w3schools.com/js/pic_bulbon.gif";

        }
       </script>

OUTPUT:
BEFORE:

AFTER:

python.

Keerthana M — Sun, 26 Jul 2026 17:34:47 +0000

Python: (version 3.14.6)

what is python:

Python is a popular programming language. It was created by Guido van Rossum, and released in 1991.

It is used for:

web development (server-side),
software development,
mathematics,
system scripting.

why python:

Python works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc).
Python has a simple syntax similar to the English language.
Python can connect to database systems. It can also read and modify files.

Features of python:

simple and easy to learn
it is open source
Object oriented programming
High level programming language
Dynamically typed
Interpreted language
Extensive library
platform independent

Django : Model view template Archotecture.
Springboot: model view controller architecture.

Definition:

-library: It contains Pre defined programs
-Binary Form: Computer Knoen language
-platform: hardware + Software.

To be known:
1.D/B high level & low level.

2. Assembly language:

Assembly language is a low-level programming language that provides a way to communicate directly with a computer's processor. It acts as an intermediate layer between machine code (binary instructions) and high-level programming languages like Python or C. Assembly uses mnemonics, which are human-readable representations of machine instructions, making it easier to write and understand compared to raw binary.
For example, instead of writing binary 10110000, you can write MOV AX, 10, which moves the value 10 into the AX register.

3.what is programming language:

A programming language is a formal system of communication used to write instructions that a computer can execute. It serves as a bridge between human logic and machine execution, allowing developers to create software, applications, and systems. Programming languages use a defined syntax and set of rules to translate human-readable code into machine-readable binary (1s and 0s) for execution.

4. what is scripting:

Scripting is primarily used to automate tasks, create dynamic content, and enhance interactivity in various environments.
Scripting is widely applied in both client-side and server-side contexts, enabling seamless communication between systems and enhancing user experiences.

5. what is interpreter:

An interpreter translates the program line by line.
The interpreter is smaller in size.
It is flexible.
Error localization is easier.
The interpreter facilitates the implementation of computer programming language constructs.

6. what is compiler:

A compiler translates a program in a single run.
It consumes less time.
CPU utilization is more.
Both syntactic and semantic errors can be checked concurrently.
It is easily supported by many high-level languages like C, C++, JAVA, etc.

7.D/B python and cpython:

8. what is jython:

Jython is an implementation of the Python programming language designed to run on the Java platform.

9. Iron python:

IronPython is an open-source implementation of the Python programming language that targets the.
NET and Mono frameworks.

ARRAY SORT METHODS .

Keerthana M — Thu, 23 Jul 2026 18:05:39 +0000

JavaScript Array Sort:

Array sort():

The sort() method sorts an array alphabetically.

example:
const names = ["sam","ram","john"]; names.sort(); console.log(names);

output:
["sam","ram","john"]

Array reverse():

The reverse() method reverses the elements in an array.

example:
const names1 = ["sam","ram","john"];
names1.reverse();
console.log(names1);

output:
["john", "ram", "sam"]

By combining sort() and reverse(), you can sort an array in descending order.

example:
const names2 = ["sam", "ram", "john", "kavi"]; names2.sort(); names2.reverse(); console.log(names2);
output:
["sam","ram","kavi", "john"]

Array toSorted():

The toSorted() method as a safe way to sort an array without altering the original array.
The difference between toSorted() and sort() is that the first method creates a new array, keeping the original array unchanged, while the last method alters the original array.

example:

const months = ["Jan", "Feb", "Mar", "Apr"]; const sorted = months.toSorted(); console.log(sorted); console.log(months);

output:
[ "Apr", "Feb", "Jan", "Mar" ]
[ "Jan", "Feb", "Mar", "Apr" ]

Array toReversed():

The toReversed() method as a safe way to reverse an array without altering the original array.
The difference between toReversed() and reverse() is that the first method creates a new array, keeping the original array unchanged, while the last method alters the original array.

example:

const months1 = ["Jan", "Feb", "Mar", "Apr"]; const reversed = months1.toReversed(); console.log(reversed); console.log(months1);
output:
[ "Apr", "Mar", "Feb", "Jan" ]
[ "Jan", "Feb", "Mar", "Apr" ]

2.Numeric Sort:

The sort() function sorts values as strings.

example:
const points = [40, 100, 1, 5, 25, 10]; console.log(points.sort(function (a, b) { return a - b })); console.log(points);
output:
[ 1, 5, 10, 25, 40, 100 ]
[ 1, 5, 10, 25, 40, 100 ]

Random Sort:
(TO BE DISCUSSED)

Math.min():

You can use Math.min.apply to find the lowest number in an array.

example:

const points2 = [40, 100, 1, 5, 25, 10]; function myArrayMin(arr) { return Math.min.apply(null, arr); } const minimum = myArrayMin(points2); console.log(minimum); console.log(points2);

output:
1
[ 40, 100, 1, 5, 25, 10 ]

Math.max():
You can use Math.max.apply to find the highest number in an array.

example:
const points3 = [40, 100, 1, 5, 25, 10]; function myArrayMax(array) { return Math.max.apply(null, array); } const maximum = myArrayMax(points3); console.log(maximum); console.log(points3);

output:
100
[ 40, 100, 1, 5, 25, 10 ]

Ref: W3 Schools

ARRAY ITERATIONS IN JS.

Keerthana M — Thu, 23 Jul 2026 17:09:29 +0000

1. Array forEach() :

This forEach method call a function in a each array element.
It doenot return any array.
It will give three arguments like values, index, array.

Example:

const num = [10,20,30,40]; const display=function(i){ console.log("this is a function",i); } num.forEach(display); // this line will call the display function.

Output:
this is a function 10
this is a function 20
this is a function 30
this is a function 40

Example:
const num = [10,20,30,40]; const display = function(i,j,k){ console.log("this is a function",i,j,k); } num.forEach(display); //this line will call the display function.

output:
this is a function 10 0 [ 10, 20, 30, 40 ]
this is a function 20 1 [ 10, 20, 30, 40 ]
this is a function 30 2 [ 10, 20, 30, 40 ]
this is a function 40 3 [ 10, 20, 30, 40 ]

This method give the value, index and array.

CallBack Function:

Callback function is a function is passed into a argument for the another function which is executed later to complete a specific task.
There are 2 type of callback function are:

Synchronous Callbacks
Asynchronous Callbacks

function home(click){ click(); } function greet(){ console.log("welcome to the callback Function Tutor"); } home(greet);
output:
welcome to the callback Function Tutor

Map:

This function is also similar to the forEach method but this method return the value.
It will create a new array does not disturb the original array.

Example:
const num = [10,20,30,40]; const display=function(i){ // console.log("this is a function",i); return i*2; } console.log(num.map(display)); console.log(num);
output:
[ 20, 40, 60, 80 ]
[ 10, 20, 30, 40 ]

Example:

const numbers = [45,10,25,30,60]; function display (value, index, array ){ return value * 2; } const forEachReturn = numbers.forEach(display); const MapReturn = numbers.map(display); console.log(forEachReturn); console.log(MapReturn) console.log(numbers);
output:
undefined
[ 90, 20, 50, 60, 120 ]
[ 45, 10, 25, 30, 60 ]

example:
const numbers2 = [1, 2, 3]; const resultForEach = numbers2.forEach(num => num * 2); console.log(resultForEach); const resultMap = numbers2.map(num => num * 2); console.log(resultMap);

output:
undefined
[ 2, 4, 6 ]

example:
const users = [ { id: 1, name: "Sam" }, { id: 2, name: "Alex" } ]; const usernames = users.map(user => user.name); console.log(usernames); const username = users.forEach(user => user.name); console.log(username)
output:
Array [ "Sam", "Alex" ]
undefined

example:
const sparseArr = [1, , 3, , 5]; sparseArr.forEach(n => console.log(n)); const mapped = sparseArr.map(n => n * 2); console.log(mapped);
output:
1
3
5
[ 2, <1 empty slot>, 6, <1 empty slot>, 10 ]

Difference between forEach() and map():

ARRAY ITERATIONS IN JS.

Keerthana M — Wed, 22 Jul 2026 16:06:07 +0000

1. Array forEach() :

This forEach method call a function in a each array element.
It doenot return any array.
It will give three arguments like values, index, array.

Example:

const num = [10,20,30,40]; const display=function(i){ console.log("this is a function",i); } num.forEach(display); // this line will call the display function.

Output:
this is a function 10
this is a function 20
this is a function 30
this is a function 40

Example:
const num = [10,20,30,40]; const display = function(i,j,k){ console.log("this is a function",i,j,k); } num.forEach(display); //this line will call the display function.

output:
this is a function 10 0 [ 10, 20, 30, 40 ]
this is a function 20 1 [ 10, 20, 30, 40 ]
this is a function 30 2 [ 10, 20, 30, 40 ]
this is a function 40 3 [ 10, 20, 30, 40 ]

This method give the value, index and array.

CallBack Function:

Callback function is a function is passed into a argument for the another function which is executed later to complete a specific task.
There are 2 type of callback function are:

Synchronous Callbacks
Asynchronous Callbacks

function home(click){ click(); } function greet(){ console.log("welcome to the callback Function Tutor"); } home(greet);
output:
welcome to the callback Function Tutor

Map:

This function is also similar to the forEach method but this method return the value.
It will create a new array does not disturb the original array.

Example:

example:
const numbers2 = [1, 2, 3]; const resultForEach = numbers2.forEach(num => num * 2); console.log(resultForEach); const resultMap = numbers2.map(num => num * 2); console.log(resultMap);

output:
undefined
[ 2, 4, 6 ]