DEV Community: Sathish

Switch case in JavaScript

Sathish — Tue, 12 Aug 2025 07:25:54 +0000

Switch case is the control flow statement it execute the different block of code based upon the expression

It is the alternative for the if-else statement

Ex:

let mark = prompt("Enter the mark");

switch(true){
case (mark>=90):
console.log("Your grade is A+");
break;

case (mark>=80):
console.log("Your grade is A");
break;

case (mark>=70):
console.log("Your grade is B+");
break;

case (mark>=60):
console.log("Your grade is B");
break;

case (mark >=50):
console.log("Your grade is C");
break;

Default:
console.log("Your are fail");
break;
}

Task:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login checks</title>
    <script>
        const username = "selvakumar";
        const password = "1234";

        let InputUsername = prompt("Enter the Username");
        let InputPassword = prompt("Enter the password");

        if (InputUsername == username && InputPassword == password) {
            alert("login Successfully");
        } else{
            alert ("Invalid Login");
        }
        const option = prompt("welcome to dashbord \n 1 view profile \n 2 settings \n 3 logout");

    </script>
</head>

<body>

</body>

</html>

Getting Input from the user in Java script

Sathish — Tue, 12 Aug 2025 07:23:54 +0000

In java script block variable can't able to access in global in function.

We using the return keyword to access the block content globally in function

Ex:

let plate = makeBriyani(Rice);

console.log(plate);

function makeBriyani(container){

container = "rice";

return "Briyani";
}

output:

Briyani

Getting the input from the user :

We using the prompt() function to get the input from the user

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let age = prompt("Enter the Age");
        if(age >=18){
            console.log("You is eligible for vote");
        }
        else{
            console.log("You is not eligible for vote"); 
        }
    </script>
</head>
<body>

</body>
</html>

Task:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let mark = prompt("Enter the mark");

        console.log(mark);

        if(mark>=90){
            console.log("Your grade is A+");
        }

        else if(mark>=80 ){
            console.log("Your grade is A");
        }

        else if(mark>=70){
            console.log("Your grade is B+");
        }

        else if(mark>=60 ){
            console.log("Your grade is B");
        }

         else if(mark>=50 ){
            console.log("Your grade is C");
        }

        else{
            alert("Your are fail");
        }
    </script>
</head>
<body>

</body>
</html>

Functions in JavaScript

Sathish — Tue, 12 Aug 2025 07:20:54 +0000

Function:

It is set of instruction to perform the task

function can be declared under the { }

Function Define in Java script:

function function name () {

}

() - this brackets are used to get the parameters from the user

Once we define the function we call at many time we want in the program running

Function calling in java script:

Function name ()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Arithmetic in JS</title>
    <script>
        function add(num1, num2) {
            console.log("Addition of numbers:", num1 + num2);
        }

        function sub(num1, num2) {
            console.log("Subtraction of numbers:", num1 - num2);
        }

        function multi(num1, num2) {
            console.log("Multiplication of numbers:", num1 * num2);
        }

        function division(num1, num2) {
            console.log("Division of numbers:", num1 / num2);
        }

        function mod(num1, num2) {
            console.log("Modulus of numbers:", num1 % num2);
        }

        // Call the functions after defining them
        add(5, 10);
        sub(10, 5);
        multi(5, 2);
        division(10, 5);
        mod(10, 5);
    </script>
</head>
<body>

</body>
</html>

Operators in JavaScript

Sathish — Tue, 12 Aug 2025 06:53:45 +0000

Arithematic Operator:

Addition (+):

This operator is used to summing the two number in program
Ex:

10 + 5 = 15

"10"+5 = 105 >> when adding the string and number addition operator act as a concatination

converting the string number in to number we using the function called parseInt() it convert only string number not a string.

parseInt("10"); -> 10

parseInt("Sathish"); -> it shows the error NaN (Not a Number)

Subtraction (-):

This operator is used to subtracting the two number in program

Ex:

10-5 = 5

"10"-5 = 5

Multiplication(*):

This operator is used to multiplying the two number in program

Division (/):
This operator is used to return the quotent of the division two number

10/2 = 5

Modulus (%):
This operator is used the return the reminder of the division two number

10%2 = 0

Returning the Exponential Value ():

Ex:
2**3 = 8

Post increment operator (++):

let i = 10;
i++;
log(i); -> result : 11

Post Decrement operator (--):

let i = 10;
i--;
log(i); result : 9

Post Decrement operator (++i):
let i = 10;
++i;
log(i); result : 10

Pre Decrement operator (--i):

let i = 10;
--i;
log(i); result : 9

Comparision Operator :

==, ===, > , < , << , >>

**Logical Operator:

**&& - And
|| - Or
!= - Not

Day 3 of learning web development with html and css...

Sathish — Fri, 11 Jul 2025 05:10:33 +0000

today i learned some intresting topics in css....

Key Features of Flexbox:

Align items horizontally or vertically

Control spacing between elements

Easily manage responsive layouts

Common Flex Properties:

justify-content: Aligns items horizontally (flex-start, center, space-between, etc.)
align-items: Aligns items vertically (stretch, center, flex-start, etc.)
flex-direction: Controls the direction (row, column, etc.)
flex-wrap: Allows items to wrap to the next line

Margin in css
in CSS, margin is the space outside an element's border. It creates space between elements.

padding in CSS
padding is the space inside an element, between its content and border. It controls the inner spacing of elements.

border-radius in CSS
border-radius is used to round the corners of an element's border box.

Day 2 of learning java full stack development

Sathish — Wed, 09 Jul 2025 16:05:17 +0000

FRONT END:
Today I Learned: HTML List Items
and learned how to use list items in HTML,

What is a List Item in HTML?

In HTML, the li tag is used to define an item in a list.

ul— an unordered list (bullets)

ol — an ordered list (numbers)

Example : Unordered List

Output:

ABOUT

PROJECT

DETAILS

CSS:

Today I learned how to center text using CSS

Center Text Horizontally The easiest way to center text horizontally is to use:

text-align: center;