Bharat Vainsh: August 2026

Saturday, 29 August 2026

Web Application Development-HTML-CSS-JS

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>

Web Application Development-HTML-CSS-JS

Web Application Development

HTML-CSS-JavaScript

Practical-1

<!DOCTYPE html>

<head>

<title> Student Registration Form-Bharat Vainsh </title>

</head>

<body>

<h1 align="center">Student Registration Form</h1>

<legend><b>Personal Information</b></legend>

<label>Enrollment No:</label>

<label>Father's Name:</label>

<label>Mother's Name:</label>

<label>Date of Birth:</label>

<label>Gender:</label>

<input type="radio" name="gender" value="Male"> Male

<input type="radio" name="gender" value="Female"> Female

<input type="radio" name="gender" value="Other"> Other

<label>Blood Group:</label>

<option selected>Select</option>

</select>

</fieldset>

<br>

<legend><b>Academic Details</b></legend>

<label>Branch:</label>

<option selected>Select Branch</option>

<option>Information Technology</option>

<option>Computer Engineering</option>

<option>Mechanical Engineering</option>

<option>Civil Engineering</option>

<option>Electrical Engineering</option>

</select>

<label>Semester:</label>

<label>Section:</label>

</select>

</fieldset>

<br>

<legend><b>Contact Details</b></legend>

<label>Email:</label>

<label>Mobile:</label>

<label>Address:</label><br>

</fieldset>

<br>

<legend><b>Other Information</b></legend>

<label>Upload Photo:</label>

<label>Resume:</label>

<label>Skills:</label><br>

<input type="checkbox"> HTML

<input type="checkbox"> CSS

<input type="checkbox"> JavaScript

<input type="checkbox"> Python

<input type="checkbox"> Java

<label>Favorite Color:</label>

<label>Website:</label>

<label>Registration Time:</label>

<label>Admission Month:</label>

<label>Search Course:</label>

<label>Password:</label>

</fieldset>

<br>

I agree to the Terms and Conditions.

</form>

</body>

</html>

Practical-2

<!DOCTYPE html>

<head>

<title>Responsive Media GalleryIT-GECBhavnagar</title>

<style>

/* Universal Selector */

margin:0;

padding:0;

box-sizing:border-box;

}

/* Element Selector */

body{

font-family:Arial, sans-serif;

background:#f4f4f4;

}

/* Header */

header{

background:#004080;

color:white;

text-align:center;

padding:20px;

}

/* Class Selector */

.gallery{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:20px;

padding:20px;

}

/* Figure Design */

figure{

width:300px;

background:white;

border:2px solid gray;

padding:10px;

text-align:center;

border-radius:8px;

}

/* Group Selector */

img,

audio,

video,

iframe{

width:100%;

}

/* Image */

img{

height:200px;

}

/* Video */

video{

height:200px;

}

/* Iframe */

iframe{

height:200px;

border:none;

}

/* Caption */

figcaption{

margin-top:10px;

font-weight:bold;

color:darkblue;

}

/* Footer */

footer{

background:#004080;

color:white;

text-align:center;

padding:15px;

}

/* Responsive Design */

@media screen and (max-width:768px){

.gallery{

flex-direction:column;

align-items:center;

}

figure{

width:90%;

}

</style>

</head>

<body>

<h3>Responsive Media Gallery</h3>

<p>HTML5 Multimedia Elements with CSS</p>

</header>

<figcaption>Beautiful Nature</figcaption>

</figure>

Your browser does not support audio.

</audio>

<figcaption>Sample Audio</figcaption>

</figure>

Your browser does not support video.

</video>

<figcaption>Sample Video</figcaption>

</figure>

</iframe>

<figcaption>YouTube Video</figcaption>

</figure>

</section>

</footer>

</body>

</html>

Practical-3

<!DOCTYPE html>

<head>

<title>Computer Engineering Department</title>

</head>

<body>

<a class="navbar-brand" href="#">Computer Engineering</a>

<button class="navbar-toggler" type="button"

data-bs-toggle="collapse"

data-bs-target="#menu">

</button>

<li class="nav-item"><a class="nav-link" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" href="#">Faculty</a></li>

<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

</ul>

</div>

</nav>

</div>

</div>

</div>

</button>

</button>

</div>

<h2 class="text-center mb-4">Department Highlights</h2>

<h5 class="card-title">Computer Lab</h5>

<p class="card-text"> Well-equipped laboratories with latest systems. </p>

</div>

<h5 class="card-title">Experienced Faculty</h5>

<p class="card-text"> Highly qualified and experienced teaching staff. </p>

</div>

<h5 class="card-title">Placements</h5>

<p class="card-text"> Excellent placement opportunities in top companies.</p>

</div>

<h2 class="text-center">Contact Us</h2>

<form>

</div>

<label class="form-label">Email</label>

</div>

<label class="form-label">Message</label>

</div>

<button type="submit" class="btn btn-primary"> Send Message </button>

<button type="reset" class="btn btn-secondary">Clear </button>

</form>

</div>

</footer>

</body>

</html>

Practical-4

<!DOCTYPE html>

<html>

<head>

<title>Student Registration Validation</title>

<style>

.error{

color:red;

font-size:14px;

}

.success{

color:green;

}

</style>

</head>

<body>

<h2>Student Registration Form</h2>

Name:

Email:

Mobile:

Password:

Gender:

Male

Female

Course:

<option value="">Select Course</option>

Information Technology

</option>

Computer Engineering

</option>

Mechanical Engineering

</option>

</select>

I agree to terms and conditions

</button>

</form>

// DOM Selectors

let form = document.getElementById("studentForm");

// Event Handling

form.addEventListener("submit", function(event)

{

let valid = true;

// Get Values

let name =

document.getElementById("name").value.trim();

let email =

document.getElementById("email").value.trim();

let mobile =

document.getElementById("mobile").value.trim();

let password =

document.getElementById("password").value;

let course =

document.getElementById("course").value;

let gender =

document.querySelector(

'input[name="gender"]:checked'

);

let agree =

document.getElementById("agree").checked;

// Clear Previous Errors

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

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

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

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

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

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

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

// Name Validation

if(name=="")

{

document.getElementById("nameError").innerHTML=

"Name is required";

valid=false;

}

// Email Validation

let emailPattern =

/^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if(!emailPattern.test(email))

{

document.getElementById("emailError").innerHTML=

"Enter valid email";

valid=false;

}

// Mobile Validation

let mobilePattern =

/^[0-9]{10}$/;

if(!mobilePattern.test(mobile))

{

document.getElementById("mobileError").innerHTML=

"Enter 10 digit mobile number";

valid=false;

}

// Password Validation

if(password.length < 6)

{

document.getElementById("passwordError").innerHTML=

"Password must contain minimum 6 characters";

valid=false;

}

// Gender Validation

if(gender==null)

{

document.getElementById("genderError").innerHTML=

"Select gender";

valid=false;

}

// Course Validation

if(course=="")

{

document.getElementById("courseError").innerHTML=

"Select course";

valid=false;

}

// Checkbox Validation

if(!agree)

{

document.getElementById("agreeError").innerHTML=

"Accept terms and conditions";

valid=false;

}

// Prevent Form Submission

if(valid==false)

{

event.preventDefault();

}

else

{

document.getElementById("message").innerHTML=

"Registration Successful!";

}

});

</script>

</body>

</html>

Practical-5

<!DOCTYPE html>

<html>

<head>

<title>To-Do List Application</title>

<style>

body{

font-family:Arial;

text-align:center;

background:#f2f2f2;

}

.container{

width:400px;

margin:auto;

background:white;

padding:20px;

border-radius:10px;

}

input{

padding:8px;

width:70%;

}

button{

padding:8px;

margin:5px;

}

li{

list-style:none;

background:#ddd;

margin:10px;

padding:10px;

}

.completed{

text-decoration:line-through;

color:green;

}

</style>

</head>

<body>

<input type="text" id="task"

placeholder="Enter Task">

Add

</button>

<input type="text" id="search"

placeholder="Search Task"

onkeyup="searchTask()">

</div>

// Load tasks from Local Storage

let tasks =

JSON.parse(localStorage.getItem("tasks")) || [];

displayTasks();

// Add Task Function

function addTask()

{

let task =

document.getElementById("task").value;

if(task=="")

{

alert("Enter Task");

return;

}

tasks.push(

{

text:task,

completed:false

}

);

saveTasks();

displayTasks();

document.getElementById("task").value="";

}

// Display Tasks

function displayTasks()

{

let list =

document.getElementById("taskList");

list.innerHTML="";

tasks.forEach(function(item,index)

{

let li =

document.createElement("li");

if(item.completed)

{

li.className="completed";

}

li.innerHTML =

item.text +

"<br>" +

"<button onclick='completeTask("+index+")'>Complete</button>" +

"<button onclick='editTask("+index+")'>Edit</button>" +

"<button onclick='deleteTask("+index+")'>Delete</button>";

list.appendChild(li);

});

}

// Mark Completed

function completeTask(index)

{

tasks[index].completed =

!tasks[index].completed;

saveTasks();

displayTasks();

}

// Edit Task

function editTask(index)

{

let newTask =

prompt(

"Edit Task",

tasks[index].text

);

if(newTask!=null)

{

tasks[index].text=newTask;

saveTasks();

displayTasks();

}

// Delete Task

function deleteTask(index)

{

tasks.splice(index,1);

saveTasks();

displayTasks();

}

// Search Task

function searchTask()

{

let value =

document.getElementById("search")

.value.toLowerCase();

let list =

document.querySelectorAll("#taskList li");

list.forEach(function(item)

{

if(item.innerText

.toLowerCase()

.includes(value))

{

item.style.display="block";

}

else

{

item.style.display="none";

}

});

}

// Save Data

function saveTasks()

{

localStorage.setItem(

"tasks",

JSON.stringify(tasks)

);

}

</script>

</body>

</html>