DEV Community: Kavin Loyola S

Array Methods in JS

Kavin Loyola S — Thu, 16 Jul 2026 14:07:59 +0000

Array Methods

JavaScript provides a variety of built-in methods to manipulate and traverse arrays efficiently. These methods enhance code readability and productivity by offering functionalities like adding, removing, and transforming elements, as well as searching, sorting, and iterating through array elements.

length

The length property returns the length (size) of an array. and it can also be used to set the length of an array.


const vijay = ['Jananayagan','Goat','Leo','Beast'];
let size = vijay.length;
console.log(size);

o/p - 4

toString()

this method returns the elements of an array as a comma separated string,
Every JavaScript object has a toString() method.


const vijay = ['Jananayagan','Goat','Leo','Beast'];
let movies = vijay.toString();
console.log(movies);

o/p - Jananayagan,Goat,Leo,Beast

at()

this method returns an indexed element from an array, and it returns the same as [].it allows negative bracket indexing like [-1] to access elements from the end of an object / array / string.


const vijay = ['Jananayagan','Goat','Leo','Beast'];
let movies = vijay.at(-2);
console.log(movies);

o/p - Leo

join()

The join() method also joins all array elements into a string, and It behaves just like toString(), but in addition you can specify the separator:

const vijay = ['Jananayagan','Goat','Leo','Beast'];
let movies = vijay.join('-');
console.log(movies);

o/p - Jananayagan-Goat-Leo-Beast

pop()

The pop() method removes the last element from an array, and it returns the value that was "popped out".


const vijay = ['Jananayagan','Goat','Leo','Beast'];
let movies = vijay.pop();
console.log(vijay);
console.log(movies);

o/p - (3) ['Jananayagan', 'Goat', 'Leo'] 
      Beast

push()

The push() method adds a new element to an array (at the end).


const vijay = ['Jananayagan','Goat','Leo','Beast'];
let movies = vijay.push('leo 2');
console.log(vijay);

o/p - (5) ['Jananayagan', 'Goat', 'Leo', 'Beast', 'leo 2']

shift()

the shift() method removes the first array element and "shifts" all other elements to a lower index, and it returns the value that was "shifted out".


const vijay = ['Jananayagan','Goat','Leo','Beast'];
let movies = vijay.shift();
console.log(vijay);
console.log(movies);

o/p - (3) ['Goat', 'Leo', 'Beast']
      Jananayagan

unshift()

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements, and it returns the new array length.


const vijay = ['Jananayagan','Goat','Leo','Beast'];
let movies = vijay.unshift('Leo 2');
console.log(vijay);

o/p - (5) ['Leo 2', 'Jananayagan', 'Goat', 'Leo', 'Beast']

Array.isArray()

The Array.isArray() method in JavaScript is used to check whether a given value is an array. It returns a boolean (true or false).

const vijay = ['Jananayagan','Goat','Leo','Beast'];
console.log(Array.isArray(vijay));

o/p - true

delete()

Using delete() leaves undefined holes in the array, instead Use pop() or shift() methods.


const vijay = ['Jananayagan','Goat','Leo','Beast'];
delete vijay[0];
console.log(vijay);

o/p - (4) [empty, 'Goat', 'Leo', 'Beast']

concat()

The concat() method creates a new array by merging (concatenating) existing arrays, and it does not change the existing arrays. It always returns a new array, and it can take any number of array arguments.


const vijay = ['Jananayagan','Goat','Leo','Beast'];
const year = [2026,2024,2023,2022];
const movies=vijay.concat(year);
console.log(movies);

o/p - (8) ['Jananayagan', 'Goat', 'Leo', 'Beast', 2026, 2024, 2023, 2022]

copyWithin()

The copyWithin() method in JavaScript is used to copy a part of an array to another position within the same array, without changing its length. It overwrites existing elements rather than adding new ones.


const vijay = ['Jananayagan','Goat','Leo','Beast'];
let movies=vijay.copyWithin(2,0);
console.log(vijay);

o/p - (4) ['Jananayagan', 'Goat', 'Jananayagan', 'Goat']

here in the above one (2,0) 2 is target - where the copied elements will be placed, 0 is start - the index where copying begins.

splice()

The splice() method can be used to add new items to an array.

const vijay = ['Jananayagan','Goat','Leo','Beast'];
vijay.splice(2,0,'Theri','Master');
console.log(vijay);

o/p - (6) ['Jananayagan', 'Goat', 'Theri', 'Master', 'Leo', 'Beast']

The first parameter (2) defines the position where new elements should be added (spliced in).The second parameter (0) defines how many elements should be removed.

The splice() method returns an array with the deleted items.

const vijay = ['Jananayagan','Goat','Leo','Beast'];
vijay.splice(2,2,'Theri','Master');
console.log(vijay);

o/p - (4) ['Jananayagan', 'Goat', 'Theri', 'Master']

Array in JS

Kavin Loyola S — Wed, 15 Jul 2026 16:40:58 +0000

Array

In JavaScript, an array is a special type of object used to store multiple values in a single variable. Arrays can hold any data type — numbers, strings, objects, or a mix. And Array can be determined as [].

How Array works ?

let tam = 81;                              
let eng = 87;                     const marks = [81,87,50,65,93];
let mat = 50;          =>                  
let sci = 65;       convert to
let soc = 93;         Array

Array Indexing

In JavaScript, indexing refers to accessing elements in indexed collections like arrays, strings, and typed arrays using a zero-based index.

Arrays store elements in an ordered list.
Index starts at 0 for the first element.

for example

const marks = [81,87,50,65,93];
for(let i=0;i<5;i++){
   console.log(marks[i]);
}

o/p - 81 87 50 65 93

Big Number

const marks = [81,87,50,65,93];
let big=marks[0];
for(let i=0;i<5;i++){
    if(marks[i]>big){
        big=marks[i];
    }
}
console.log(big);

o/p - 93

Small Number

const marks = [81,87,50,65,93];
let small=marks[0];
for(let i=0;i<5;i++){
    if(marks[i]<small){
        small=marks[i];
    }
}
console.log(small);

o/p - 50

Constructor Function

Kavin Loyola S — Tue, 14 Jul 2026 17:22:31 +0000

Constructor

It automatically called when object is created, and it name should be starts with uppercase letter. In constructor, this refers to current object. it initializing object specific values.

how to create ?

To define a constructor function, we use the function keyword followed by the function name and parameters. Inside the function, we use the this keyword to assign properties and methods to the object being created. For example,


function laptop (price,brand,storage) {
    this.price=price;
    this.brand=brand;
    this.storage=storage;
}
laptop.price=40000;
laptop.brand="acer";
laptop.storage=512;
console.log(laptop.price);

o/p - 40000

Adding methods

this.device = function(){
    return 'PC';
}
const buy = new Laptop;
console.log(buy.device());

o/p - PC

Object in JS

Kavin Loyola S — Mon, 13 Jul 2026 16:50:54 +0000

Object

Objects are variables that can store both values and functions, and it is a collection of properties. Methods are actions that can be performed on objects.

const person = {
    name: "Kavin",
    age: 22,
    Dept: "CSE"
};
console.log(person.name);

0/p - Kavin

Properties

A JavaScript object is a collection of properties, and Properties can be changed, added, and deleted. there are some ways to access the object properties in these ways :

Dot Notation
Bracket Notation
Expression

Methods

Methods are actions that can be performed on objects, and Methods are functions stored as property values.

const person = {
  name: "Kavin",
  age: 21,
  info: function() {
      console.log("name");
  }
};
person.info();
console.log(person.name);

o/p - name
      Kavin

CRUD

const mobile = {
     brand: "Realme",
     ram : 16,
     storage : 128,
     price : 20000
};
mobile.model = 9;
console.log(mobile);
mobile.ram = 8;
delete mobile.price;
console.log(mobile);

o/p - { brand: "Realme", ram : 16, storage : 128, price : 20000 }
      {brand: 'Realme', ram: 8, storage: 128, model: 9}

Function in JavaScript

Kavin Loyola S — Thu, 09 Jul 2026 16:26:44 +0000

Function

A function in JavaScript is a reusable block of code designed to perform a specific task. It can take inputs (parameters) and return an output.

Function Declaration

a function should be declared by their name and the function name should be called at end to specify tasks.

Types of Function

Named Function

function drive()
{
   console.log("car");
}
drive();

o/p - car

Function Expression

let drive = function() {
   return 'car';
}
console.log(drive());

o/p - car

Anonymous function

const drive = function() {
  return "Drive slowly";
};
console.log(drive());

o/p - Drive slowly

Arrow function

let add = (num) => num + 2;
console.log(add(5));

o/p - 7

JS Looping

Kavin Loyola S — Wed, 08 Jul 2026 14:45:35 +0000

While
It repeatedly executes block of codes until the specified condition is true.

for Example:

Divisors of given number ?

let givenNo=15;
i=1;
while(i<=givenNo)
{
   if(givenNo%i==0){
     console.log(i);
   }
i++;
}

o/p - 1 3 5 15

For

it repeatedly executes a block of code as long as a specified condition is true, using initialization, condition, and increment/decrement expressions.

for example:

for(let i=1;i<=7;i++)
{
   console.log(i);
}

o/p - 1 2 3 4 5 6 7

do - while

it executes a block of code at least once and then continues looping as long as a specified condition is true.

let i=5;
do{
   console.log("Hello");
   i++;
}while(i<5);

o/p - Hello

JS

Kavin Loyola S — Mon, 06 Jul 2026 15:52:54 +0000

Nested - if

let mark=40;
let att=77;
if(mark>=35){
   if(att>75){
      console.log("Eligible for Trip");
   }
}else{
   console.log("Not Eligible");
}

o/p - Eligible for Trip

Ternary Operator

Syntax

condition ? true : false ;

Switch

The switch case statement in JavaScript is used to execute different blocks of code based on the value of an expression. It is often preferred over multiple if / else if statements when checking a single variable against many possible values, as it improves readability and maintainability.

let switchNo = 2;
switch(switchNo)
{
    case 1:
        console.log("fan");
        break;
    case 2:
        console.log("light");
        break;
    case 3:
        console.log("ac");
        break;
    default:
        console.log("enter valid input");
}

o/p - light

Undefined

if the input value is not in the list or case means it will show as undefined.

default

it is used for, if the user or someone gives wrong input value means the default case will be shown.

While loop

It keeps looping until the condition is true or false.

JS Operators

Kavin Loyola S — Fri, 03 Jul 2026 18:14:45 +0000

++ / Increment operator

let n=1;
n=n+1; / n++
console.log(n);

o/p - 2

-- / Decrement operator

let n=2;
n=n-1; / n--
console.log(n);

o/p - 1

let i=5;
console.log(i++); -> Post increment
o/p - 6

let i=7;
console.log(++i); -> Pre increment
o/p - 8

2**5 = 2^5 = 2*2*2*2*2 = 32

Comparison Operator

10 == 10 -> true
10 == "10" -> true

only checks values.

===

10 === 10 -> true
10 === "10" -> true

checks value and data types.

!= / Not equal

10 != 10 -> false

Logical Operators

c=34;
r=8;
c>=32 && r>=8;

o/p - true

c=34;
r=8;
c>= 32 || r>8;

o/p=true

Conditional Statements / Control flow Statements

for example:

let age=18;
if(age>=18){
   console.log("drive");
}else{
   console.log("not drive");
}

o/p - drive

JS Datatypes & Operators

Kavin Loyola S — Thu, 02 Jul 2026 17:53:51 +0000

Variable Declaration

In JavaScript declaring variables is different from other Programming Languages, for example:

i = 10;
i = 20;
console.log(i);

but this allows duplicate variables.

var i =10;
i = 20;
console.log(i);

this also allows duplicate variables.

let i = 10;
let i = 20;
console.log(i);

this is the method we use for variable declaration. because it doesn't allows duplicates.

const i = 10;

this is used for constant value and doesn't changeable.

<script> - inside this tag we write JavaScript. and it will only run
in console and not on webpage/UI.

console.log( ) is used for printing Statements.

Operators

10 + 5 

o/p - 15

"leo" + 2

o/p - leo2

if we add (+) string to any values it also acts as string.

10 - 2

o/p - 8

10 - "2" 

o/p - 8

the above is the example for type casting, here the string converts into int and - .

10 * 2

o/p - 20

"5" * 5

o/p - 25

here is the another example for type casting.

10 / 2

o/p - 5

10 / "2"

o/p - 5

It takes Quotient as answer.

10 % 3

o/p - 1

it takes remainder as answer.

Software Development Life Cycle

Kavin Loyola S — Thu, 02 Jul 2026 17:52:46 +0000

SDLC

SDLC is a Structured process used to plan, design, test, deploy and maintain software efficiently while meeting business and user requirements.

Phases

Planning

Establishes project goals, scope, and feasibility. Teams identify resources, potential risks, and create a high-level project plan

Requirements gathering

Collects all the Documents and Requirements from stakeholders to ensure clarity and alignment.

Design

Translates requirements into technical specifications. High-Level Design (HLD) defines architecture and major modules, while Low-Level Design (LLD) details component logic, APIs, and workflows.

Development

Developers write code according to the design specifications, This phase is the Architecture. And it involves unit testing and integration of components. Coding standards, version control, and documentation are critical to maintain quality and consistency.

Testing

Testing is a critical phase in the Software Development Life Cycle, bridging development and deployment. Its main purpose is to identify defects early, verify that the software meets functional and non-functional requirements, and ensure it satisfies user expectations.

Deployment

The tested software is released to the production environment. Deployment may be staged or full-scale, depending on the project. This phase ensures that the software is accessible to end-users and functions as intended in the live environment.

Maintenance

Post-deployment support addresses bug fixes, updates, and enhancements. Maintenance ensures long-term usability, performance optimization, and adaptation to changing user needs or technology environments.

BRS - Business Requirements Specification document.
FRS - Functional Requirements Specification.

JavaScript

Kavin Loyola S — Mon, 29 Jun 2026 16:43:33 +0000

JavaScript

It is developed in 1995 and with the name of Mocha. it is the time where java is evolving and for marketing purpose they changed their name into JavaScript and it is created within 10 hours of a time.

Diff between Interpreter And Compiler ?

Interpreter

It Executes line by line code until error occurs.

Compiler

It Executes only the full code has no error.

Environment

Node.js - A free Open-source runtime environment that enables developers to create servers, webapps, command line tools and scripts.

Data types

it consists of two types. like,

Primitive :

String
Number
Boolean

Non - Primitive :

Object

String

it consists of words and sentences.

Number

it consists of numbers / integers.

BigInt

it consists of Big numbers and big integers like more than 4 - bits.

Boolean

it consists of statements like true or false / yes or no.

Binary

it refers to a number system that uses only two symbols, typically 0 and 1, to represent values. and its only the machine understanding language.

Bit

it helps to convert the human language to machine level language.

1 Byte = 8 Bit.

JavaScript is a Dynamic type language.

Difference Between Static and Dynamic ?

Static - in that we have to mention their data types.

Dynamic - in that we don't have to mention data types.

College Web Clone

Kavin Loyola S — Fri, 26 Jun 2026 06:09:47 +0000

Code

<!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 src="https://kit.fontawesome.com/76e9f55137.js" crossorigin="anonymous"></script>
    <style>
        *{
            padding:0px;
            margin:0px;
            box-sizing:border-box;
            font-family:Arial, Helvetica, sans-serif;
        }
        .header{
            background-color: #004B7E;
            color:white;
            padding:5px 25px;
            display:flex;
            justify-content:center;
            align-items:center;
            gap:77px;
        }#cc{
            color: yellow;
            font-size:20px;
            text-decoration:none;
            animation:blinker 1s linear infinite;
        }@keyframes blinker{
            50%{
                opacity:0;
            }
        }
        .header button{
            background-color:white;
            color:black;
            padding:10px 20px;;
            border-radius:20px;
        }
        #one{
             color:blue;
             animation:blinker 1s linear infinite;
        }
        #three{
            background-image:url(https://kalasalingam.ac.in/wp-content/uploads/2023/12/unsdg_logo_updated.png);
            background-position:center;
        }.header p{
            font-size:17px;
        }
        .fa-bars{
            font-size:35px;
        }.header:hover{
            cursor:pointer;
        }.header button:hover{
            cursor:pointer;
            background-color:#004B7E;
            color:white;
        }.logo{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:40px;
            background-color:#15151520;
            padding:20px;
        }.logo img{
            width:330px;
        }.logo a{
            color:black;
            text-decoration:none;
            font-weight:bolder;
        }#res{
            animation:blinker 1s linear infinite;
        }@keyframes blinker{
            50%{
                opacity:0;
            }
        }.ads{
            display:flex;
            width:100%;
            height: 550px;
        }.ads img{
            width:100vw;
            height:100%;
            flex-shrink:0;
            animation:slider 12s linear infinite;
        }@keyframes slider{
            0%,16%{
                transform:translateX(0%);
            }
            20%,36%{
                transform:translateX(-100%);
            }40%,56%{
                transform:translateX(-200%);
            }60%,76%{
                transform:translateX(-300%);
            }80%,96%{
                transform:translateX(-400%);
            }100%{
                transform:translateX(-500%);
            }
        }#fixed{
            z-index:9999;
            transform:rotate(270deg);
            transform-origin:right bottom;
            padding:15px 25px;
            top:40%;
            right:0;
            position:fixed;
            background-color:black;
            color:white;
            text-decoration:none;
            font-weight:bolder;
        }#fix{
            z-index:9999;
            padding:15px 25px;
            bottom:2%;
            right:0;
            position:fixed;
            border-radius:10px;
            background-color:#004B7E;
            color:white;
            text-decoration:none;
        }.section{
            display:flex;
            justify-content:center;
            display:grid;
            grid-template-columns:1fr 1fr;
        }
        .left{
            justify-content:center;
        }
        .left h1{
            text-align:center;
            padding:30px;
            font-weight:bolder;
        }
        .left img{
            border:3px solid darkred;
            animation:slider 10s linear infinite;
            padding:20px;
            width:200px;
            flex-shrink:0;
            height:300px;
        }@keyframes slider{
            0%,25%{
                transform:translateX(0%);
            }
            30%,55%{
                transform:translateX(-100%);
            }60%,75%{
                transform:translateX(-200%);
            }80%,95%{
                transform:translateX(-300%);
            }100%{
                transform:translateX(-400%);
            }
        }.right{
            padding:17px;
            width:80%;
        }.right h1{
            color:darkred;
            padding:10px;
            font-weight:bolder;
        }.board h4{
            color:rgba(40, 85, 232, 0.854);
        }.board p{
            color:gray;
        }.b-box{
            position:relative;
            margin-top:25px;
            height:300px;
            overflow:hidden;
            border:1px solid gray;
        }
        .board{
            position:absolute;
            animation:slide-up 6s linear infinite;
        }@keyframes slide-up{
            0%{
                transform:translateY(100%);
            }100%{
                transform:translateY(-100%);
            }
        }.los{
            color:white;
            display:grid;
            grid-template-columns:1fr 1fr 1fr;
            height:100vh;
            margin:0% 10%;

        }.los a{
            color:white;
            text-decoration:none;
        }.los a:hover{
            color:black;
        }.li img{
            background-color:white;
            padding:15px;
            border-radius:10px;
        }.ul1{
            display:flex;
            flex-direction:column;
            margin:auto;
            padding:30px;
            gap:50px;
            font-size:larger;
            font-weight:bolder;
        }.ul2{
            display:flex;
            flex-direction:column;
            margin:auto;
            margin-bottom:35px;
            padding:30px;
            gap:30px;
            font-size:larger;
            font-weight:bolder;

        }.touch{
            background-color:rgba(0, 0, 0, .52);
            margin:auto;
            margin-bottom:90px;
            padding:7px 0px;
        }.container{
            padding:3%;
            background-image:url("https://www.kalasalingam.ac.in/wp-content/themes/kare/assest/images/courceofferbg.jpg");
        }.contact img{
            width:50px;
            margin-bottom:20px;
        }.contact{
            padding:20px;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
        }.contact:hover{
            cursor:pointer;
        }.touch h2{
            display:flex;
            flex-direction:column;
            padding:5px 40px;
        }
        .touch span{
            font-size:larger;
        }.placement{
            border:1px solid;
            width:70%;
            background-image:url(https://www.kalasalingam.ac.in/wp-content/themes/kare/assest/images/universitybilding.jpg);
        }.plus{
            font-size:25px;
            color: #262626;
            text-shadow: 0px 3px 7px rgb(255 255 255 / 58%);
            font-weight: 400;
            line-height: 30px;
        }.img1{
            background-image:url(https://www.kalasalingam.ac.in/wp-content/themes/kare/assest/images/courceofferbg.jpg);
            padding:50px;
        }.img1 img{
            padding: 20px;
            height:700px;
        }.ir{
            border:1px solid;
            background-image:url(https://www.kalasalingam.ac.in/wp-content/uploads/2021/11/world-images.jpg);
            color:white;
        }.pic img{
            width:120px;
            transition: transform 0.5s ease-in-out;
        }.cont{
            display:flex;
            gap:80px;
            margin-left:450px;
            margin-top: 50px;
            margin-bottom:30px;
        }.ir h3{
            font-size:35px;
            padding: 30px;
            margin-left:370px;
        }#b1{
            width:50%;
            margin-left:400px;
            font-size:17px;
            font-weight:bolder;
        }.pic:hover{
            transform:scale(1.1);
        }.icons{
            color: blue;
        }.icons:hover{
            color:white;
        }.footer{
            border:1px solid;
            color:white;
            background-color:#004B7EFC;
            display:flex;
            justify-content:center;
            padding:30px;
            gap:7%;
            height:100%;
        }.footer a{
            color:white;
            padding:10px;
            font-size:large;
            text-decoration:none;
        }.footer a:hover{
            color:gold;
        }.footer h4{
            padding:10px;
            font-size:larger;
        }.cat li{
            padding:20px;
        }.icons a{
            padding:10px;
            color:white;
        }.icons h4{
            color:white;
            padding:10px;
        }.icons input{
            padding:10px;
            padding-right:5px;
        }
    </style>
</head>
<body>
    <div class="header">
        <a id="cc" href="https://www.kalasalingam.ac.in/chennai/">Chennai Campus</a>
        <p>Admission Open 2026-27</p>
        <div class="button">
            <button id="one">APPLY NOW</button>
            <button id="two">IQAC</button>
            <button id="three">SDG</button>
            <button id="four">NIRF</button>
        </div>
        <p>Tel.04563 289042</p>
        <i class="fa-solid fa-bars"></i>
    </div>
    <div class="logo">
        <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2022/02/Logo.png" alt="">
        <a href="">About Us</a>
        <a href="">Admissions</a>
        <a href="">Academics</a>
        <a href="">Campus Life</a>
        <a id="res" href="">Research</a>
        <a href="">Accreditation & Ranking</a>
        <a href="">Placements</a>
    </div>
    <div class="ads">
        <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2026/06/open20262.png" alt="">
        <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2024/10/Green-Photographic-Environment-Charity-Bio-Link-Website.png" alt="">
        <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2026/06/convocation39.png" alt="">
        <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/05/industry-collaboration-banner.jpg" alt="">
        <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2025/09/NIRF-2025-NEW-RANKING-copy-scaled.jpg" alt="">
    </div>
    <a id="fixed" href="">Enquire Now!</a>
    <a id="fix" href="">Accessiblity</a>
    <div class="section">
        <div class="left">
            <h1>News & Announcements</h1>
            <img id="s1" src="images/shot1.png" alt="">
            <img id="s2" src="images/shot2.png" alt="">
            <img id="s3" src="images/shot3.png" alt="">
            <img id="s4" src="images/shot4.png" alt="">
        </div>
        <div class="right">
            <h1>Bulletin Board</h1>
            <div class="b-box">
                <div class="board">
                    <h4>39th Convocation</h4>
                    <p>The online form will be available from 4:30 PM on 22 June 2026.</p>
                    <h4>Opening of First Year Classes (2026)</h4>
                    <p>We warmly welcome you to the commencement of classes for the first year (2026-2027). The academic session will begin with an inaugural function, scheduled to begin on 3rd August 2026.</p>
                    <h4>NBA-DCS</h4>
                    <p>NBA-DCS</p>
                    <h4>BioInnovate 2026: Shaping the Future of Biotechnology</h4>
                    <p>An International Conference Organized by School of Bio, Chemical and Process Engineering Kalasalingam Academy of Research and Education and Arizona State University, USA In association with Indian Association of Applied Microbiologists (IAAM). </p>
                    <h4>QS World University Rankings - by Subjec</h4>
                    <p>KARE has been ranked 751-850 in Computer Science & Information Systems in QS World University Rankings - by Subject 2026 on 25.03.2026</p>
                    <h4>PDF Notification 2026</h4>
                    <p>PDF Notification 2026</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
    <div class="los">
        <div class="ul1">
           <h1>List of Schools</h1>
            <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/agricultureicn.png" alt="">
                <a href="">Kalasalingam School of Agriculture & Horticulture (KSAH)</a>
            </div>
            <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/automativeicn.png" alt="">
                <a href="">School of Mechanical, Aero, Auto and Civil Engineering (SMACE)</a>
            </div>
            <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/computingicn.png">
                <a href="">School of Computing (SoC)</a>
            </div>
            <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/businessicn.png">
                <a href="">Kalasalingam Business School (KBS)</a>
            </div>
             <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/advancescienceicn.png">
                <a href="">School of Advanced Sciences (SAS)</a>
            </div>
        </div>
        <div class="ul2">
            <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/architectureicn.png">
                <a href="">Kalasalingam School of Architecture (KSOA)<http/a>
            </div>
            <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/biochemicalicn.png">
                <a href="">School of Bio, Chemical and Processing Engineering (SBCE)</a>
            </div>
            <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/artseducationicn.png">
                <a href="">School of Liberal Arts and Education (SLASE)</a>
            </div>
            <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/electronicpowericn.png">
                <a href="">School of Electronics, Electrical and Biomedical Technology (SEET)</a>
            </div>
            <div class="li">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/researchprogrameicn.png">
                <a href="">Research Programmes</a>
            </div>
        </div>
        <div class="touch">
            <h2>Any doubt?<span>Get in Touch</span></h2>
            <div class="contact">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/foldericn.png">
                <a href="">Download Brochure</a>
            </div>
            <div class="contact">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/telegramchaticn.png">
                <a href="">Telegram Chat</a>
            </div>
            <div class="contact">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/whatsupchaticn.png">
                <a href="">WhatsApp Chat</a>
            </div>
            <div class="contact">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/04/visitcampus.png">
                <a href="">Visit Our Campus</a>
            </div>
        </div>
    </div>
    </div>
    <div class="img1">
        <img src="images/img1.png">
    </div>
    <div class="img2">
        <img src="images/img2.png">
    </div>
    <div class="ir">
        <h3>International Relations</h3>
        <p id="b1">Kalasalingam Academy of Research and Education has academic collaboration with the following leading foreign Universities and signed Memorandum of Understanding(MoU) with them:</p>
        <div class="cont">
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Belgium-e1639220981809.png">
                <p>Belgium</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Brazil-e1639221072997.png">
                <p>Brazil</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/United-Kingdom-e1639221138943.png">
                <p>Cambridge</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/China-e1639221281697.png">
                <p>China</p>
            </div>
        </div>
        <div class="cont">
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Malaysia-e1639222371362.png">
                <p>Malaysia</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Germany-e1639221729479.png">
                <p>Germany</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Hungary-e1639221799816.png">
                <p>Iraq</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/11/south-coria.png">
                <p>Korea</p>
            </div>
        </div>
        <div class="cont">
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Mexico-e1639222468499.png">
                <p>Mexico</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Poland-e1639222508866.png">
                <p>Poland</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Romania-e1639222557108.png">
                <p>Romania</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Switzerland-e1639222736414.png">
                <p>Switzerland</p>
            </div>
        </div>
        <div class="cont">
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Thailand-e1639223095389.png">
                <p>Thailand</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/USA-e1639223148577.png">
                <p>USA</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Taiwan-e1639222947273.png">
                <p>Taiwan</p>
            </div>
            <div class="pic">
                <img src="https://www.kalasalingam.ac.in/wp-content/uploads/2021/12/Sri-Lanka-e1639222667698.png">
                <p>Srilanka</p>
            </div>
        </div>
        <div class="cont">
            <div class="pic">
                <img src="https://kalasalingam.ac.in/wp-content/uploads/2022/12/download.jpg">
                <p>Indonesia</p>
            </div>
        </div>
    </div>
    <div class="img3">
        <img src="images/img3.png">
    </div>
    <div class="img4">
        <img src="images/img4.png">
    </div>
    <div class="img5">
        <div class="kare">
            <img src="images/img5.png">
    </div>
    </div>
    <div class="footer">
        <div class="cat">
            <ul id="list">
                <h4>International Relations</h4>
                <li><a href="">Overview</a></li>
                <li><a href="">Partner University</a></li>
                <li><a href="">Student Exchange</a></li>
                <li><a href="">Faculty Exchange</a></li>
                <li><a href="">Internatonal Admissions</a></li>
                <li><a href="">Study in India</a></li>
            </ul>
        </div>
        <div class="cat">
            <ul id="list">
                <h4>Controller Of Examinations</h4>
                <li><a href="">NAD Registration</a></li>
                <li><a href="">NAD Registration (Helpline)</a></li>
                <li><a href="">EMGRC</a></li>
                <li><a href="">URAC</a></li>
                <li><a href="">KARE e-Verification</a></li>
                <li><a href="">Contact Mail: coe@klu.ac.in</a></li>
            </ul>
        </div>
        <div class="cat">
            <ul id="list">
                <h4>Quick Links</h4>
                <li><a href="">Faculty Login</a></li>
                <li><a href="">Student Login</a></li>
                <li><a href="">Parent login</a></li>
                <li><a href="">Alumni Login</a></li>
                <li><a href="">Hostel Login</a></li>
                <li><a href="">Transport Login</a></li>
                <li><a href="">RTI</a></li>
                <li><a href="">Feedback</a></li>
                <li><a href="">Careers</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </div>
        <div class="cat">
            <ul id =list>
                <h4>Grievances & Redressal</h4>
                <li><a href="">Anti - Ragging Commitee</a></li>
                <li><a href="">Internal Complaints Committee</a></li>
                <li><a href="">Woman Empowerment Cell</a></li>
                <li><a href="">Complaint Form</a></li>
            </ul>
            <div class="icons">
                <h4>Follow KARE</h4>
                <a href=""><i class="fa-brands fa-facebook"></i></a>
                <a href=""><i class="fa-brands fa-instagram"></i></a>
                <a href=""><i class="fa-solid fa-x"></i></a>
                <a href=""><i class="fa-brands fa-youtube"></i></a>
                <h4>Subscribe Newsletter</h4>
                <input type="text" placeholder="Enter your Email">
            </div>
        </div>
    </div>
</body>
</html>

Output