Bharat Vainsh

Web Application Development

Practical-1

<!DOCTYPE html>

<html>

<head>

<title>Weather Dashboard</title>

<style>

body{

font-family:Arial;

background:#f2f2f2;

text-align:center;

}

.container{

width:350px;

margin:50px auto;

background:white;

padding:20px;

border-radius:10px;

box-shadow:0 0 10px gray;

}

input{

padding:8px;

width:200px;

}

button{

padding:8px 15px;

}

#loading{

color:blue;

}

#error{

color:red;

}

</style>

</head>

<body>

<h2>Weather Dashboard</h2>

<button onclick="getWeather()">Search</button>

</div>

async function getWeather(){

let city=document.getElementById("city").value;

if(city==""){

alert("Enter City Name");

return;

}

document.getElementById("loading").innerHTML="Loading...";

document.getElementById("error").innerHTML="";

try{

// Step 1: Get Latitude & Longitude

let geo=await fetch(

"https://geocoding-api.open-meteo.com/v1/search?name="+city

);

let geoData=await geo.json();

if(!geoData.results){

throw new Error("City Not Found");

}

let lat=geoData.results[0].latitude;

let lon=geoData.results[0].longitude;

// Step 2: Get Weather

let weather=await fetch(

"https://api.open-meteo.com/v1/forecast?latitude="+lat+ "&longitude="+lon+ "&current=temperature_2m,relative_humidity_2m");

let data=await weather.json();

document.getElementById("loading").innerHTML="";

document.getElementById("cityName").innerHTML=

"City : "+geoData.results[0].name;

document.getElementById("temperature").innerHTML=

"Temperature : "+data.current.temperature_2m+" °C";

document.getElementById("humidity").innerHTML=

"Humidity : "+data.current.relative_humidity_2m+" %";

document.getElementById("condition").innerHTML=

"Weather : Clear";

}

catch(error){

document.getElementById("loading").innerHTML="";

document.getElementById("error").innerHTML=

error.message;

}

</script>

</body>

</html>

Practical-2

<!DOCTYPE html>

<html>

<head>

<title>IT Semester 5 Timetable</title>

</head>

<body>

<h2 align="center">IT - Semester 5 Timetable (W.E.F. 01/07/2026)</h2>

<tr>

<th>Monday</th>

<th>Tuesday</th>

<th>Wednesday</th>

<th>Thursday</th>

<th>Friday</th>

<th>Saturday</th>

</tr>

<tr>

<td>ADBMS</td>

B1-DS<br>

B2-WAD<br>

B3-ADBMS<br>

B4-CS

</td>

</tr>

<tr>

<td>ADBMS</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>ADBMS</td>

<td>MOPEC</td>

</tr>

<tr>

<td>MOPEC</td>

</tr>

</table>

<br>

<h3>Subjects</h3>

<ul>

<li>AAD - Algorithm Analysis and Design</li>

<li>DS - Data Science</li>

<li>WAD - Web Application Development</li>

<li>ADBMS - Advanced Database Management System</li>

<li>CS - Cyber Security</li>

<li>MOPEC - Fuzzy Logic and Genetic Programming</li>

</ul>

</body>

</html>

Practical-3

<!DOCTYPE html>

<html>

<head>

<title>Web Program</title>

</head>

<body>

function greet(name)

{

document.write("hello",name);

return name;

}

greet("james");

</script>

</body>

</html>

Practical-4

<!DOCTYPE html>

<html>

<head>

<title>Local Storage Example</title>

</head>

<body>

<h2>Student Information</h2>

<label>Enter Student Name:</label>

<button onclick="displayData()">Display</button>

<button onclick="deleteData()">Delete</button>

<button onclick="clearData()">Clear All</button>

// Save data in Local Storage

function saveData()

{

var name = document.getElementById("name").value;

localStorage.setItem("studentName", name);

document.getElementById("result").innerHTML =

"Data Saved Successfully!";

}

// Display data from Local Storage

function displayData()

{

var name = localStorage.getItem("studentName");

if (name != null)

{

document.getElementById("result").innerHTML =

"Student Name: " + name;

}

else

{

document.getElementById("result").innerHTML =

"No data found!";

}

// Delete one item

function deleteData()

{

localStorage.removeItem("studentName");

document.getElementById("result").innerHTML =

"Data Deleted Successfully!";

}

// Delete all Local Storage data

function clearData()

{

localStorage.clear();

document.getElementById("result").innerHTML =

"All Data Cleared!";

}

</script>

</body>

</html>

Practical-5

<!DOCTYPE html>

<html>

<head>

<title>Web Program</title>

</head>

<body>

function countdown(n) {

for (let i = 1; i <= n; ++i)

{

setTimeout(function()

{

console.log(i);

}, i * 1000);

}

countdown(5); // Call the countdown function with a number to start the countdown

</script>

</body>

</html>

Bharat Vainsh

Saturday, 29 August 2026

Web Application Development-HTML-CSS-JS