Scribd
Upload
139 views34 pages

Web Lab File

Uploaded by

saloniaggarwal0304
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
139 views34 pages

Web Lab File

Uploaded by

saloniaggarwal0304
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

DR. B. R.

AMBEDKAR NATIONAL INSTITUTE OF


TECHNOLOGY JALANDHAR-144011, PUNJAB
(INDIA)

DEPARTMENT OF INFORMATION TECHNOLOGY

A
PRACTICAL FILE
ON

WEB DEVELOPMENT LAB (ITPC-327)

Submitted To- Submitted By-


Dr. Sarla More Saloni
Assistant Professor 21124028
Department of Information Technology Group G4
B. Tech (IT)
PRACTICAL-1

1. Create a static website to display CV.

HTML CODE:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saloni Aggarwal- Resume</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
background: rgb(255, 255, 255);
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(51, 217, 129, 1)
100%);
}

.container {
background-color: #ffffff;
max-width: 800px;
margin: 20px auto;
padding: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1,
h2,
h3 {
color: #333;
}

.info {
margin-bottom: 20px;
}

.section-title {
border-bottom: 2px solid #333;
padding-bottom: 10px;
margin-bottom: 20px;
}

.project-title {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}

.project-description {
font-size: 14px;
color: #666;
}

.project-link {
color: #007bff;
}

.award {
margin-top: 10px;
}
</style>
</head>

<body>
<div class="container">
<div class="info text-center">
<h1>Saloni Aggarwal</h1>
<p>Email: [email protected]</p>
<p>Mobile: +91-123-456-7890</p>
<p>Github: https://github.com/SALONI-AGGARWAL0304</p>
<p>Leetcode:https://leetcode.com/saloni_aggarwal/</p>
<p>GFG:
https://auth.geeksforgeeks.org/user/saloniaggarwaouc3/?utm_source=geeksforgeeks&utm_m
edium=my_profile&utm_campaign=auth_user </p>
</div>

<div class="section-title">
<h2>Education</h2>
</div>
<div class="education">
<p><strong>Dr B R Ambedkar National Institute of Technology, Jalandhar,
Punjab</strong></p>
<p>Bachelor of Technology (B.Tech) [Year of Admission] - Present</p>
<p>Relevant Courses: Formal Languages and Automata Theory (FLAT), Data Structures
and Algorithms (DSA),
Design and Analysis of Algorithms (DAA), Java Programming, Web Development
(DMW), Computer Networking
(CN), etc.</p>
</div>

<div class="section-title">
<h2>Skills Summary</h2>
</div>
<div class="skills">
<p><strong>Languages:</strong> C, C++, JAVA </p>
<p><strong>Coding Platforms:</strong> Leetcode, GFG, Codechef, Coding Studio</p>
<p><strong>Skills:</strong> Frontend developer </p>
<p><strong>Soft Skills:</strong> Leadership skills , Communication skills , Smart and
hard worker </p>
</div>

<div class="section-title">
<h2>Projects</h2>
</div>
<div class="projects">
<p class="project-title">HelpRight NITJ Tech</p>
<p class="project-description">Web App CSS, JavaScript, React</p>
<p><a class="project-link" href="#">HelpRight: Click Here</a></p>

<p class="project-title">Imge Generator using Text</p>


<p class="project-description">Nodejs</p>
<p><a class="project-link" href="https://imagegen-afn7.onrender.com/">ImageGen:
Click Here</a></p>

<p class="project-title">MileStone</p>
<p class="project-description">Website CSS, JavaScript, Bootstrap, HTML ,
Typescript</p>
<p><a class="project-link"
href="https://astonishing-frangipane-e0ef31.netlify.app/index.html">MileStone: Click
Here</a></p>

<p class="project-title">Fokus</p>
<p class="project-description">Website CSS, JavaScript, Bootstrap, HTML ,
Typescript</p>
<p><a class="project-link"
href="ubiquitous-smakager-37ac36.netlify.apphttps://ubiquitous-smakager-37ac36.netlify.app
/">Fokus: Click Here</a></p>
</div>

<div class="section-title">
<h2>Honors and Awards</h2>
</div>
<div class="awards">
<p class="award">Ideathon 2.0 first-round qualified - Feb 2023</p>
<p class="award">Hackathon 4.0 participation - March 2023</p>
<p class="award">100+ Questions solved on LeetCode and got the January consistency
badge 2023</p>
<p class="award">300+ coding points on GFG </p>
<p class="award">Participation in Devcreate hackathon 2.0 - Sep 2022</p>
<p class="award">Participation in Devcreate hackathon - August 2021</p>
</div>
</div>
</body>
</html>

CSS CODE:
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
}

h1 {
margin-bottom: 20px;
}

table {
border-collapse: collapse;
width: 70%;
margin: 0 auto;
}

td {
padding: 10px;
border: 1px solid #ccc;
}

.label {
font-weight: bold;
width: 30%;
}

WEBSITE:
2. Create a static website to display information technology page .

HTML CODE:

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IT Department - Dr. BR Ambedkar NIT</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.sidebar {
background-color: #333;
color: #fff;
width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 2rem;
box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.2);
}

header {
background-color: #1e2e47;
color: #fff;
text-align: center;
padding: 2rem 0;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
header img {
width: 100px;
height: auto;
}
nav {
background-color: #34495e;
color: #fff;
text-align: center;
padding: 2rem 2rem;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 1rem;
transition: color 0.3s;
transition: color 0.3s, transform 0.3s;
display: block;
padding: 1rem 0;
width: 100%;
text-align: center;
transition: color 0.3s, background-color 0.3s;
}
nav a:hover {

transform: translateY(-2px);
/* <!-- color: #1e2e47;
background-color: #1e2e47; --> */
}
.container {
margin-left: 250px;
padding: 2rem;
background-color: #f5f5f5;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.content {
margin-top: 0;
}
h2 {
color: #1e2e47;
}
p{
color: #666;
}
footer {
background-color: #34495e;
color: #fff;
text-align: center;
padding: 1rem 0;
}
</style>
</head>
<body>
<header>
<img src="nitj.jpeg" alt="NIT Logo">
<h1>IT Department</h1>
<p>Dr. BR Ambedkar National Institute of Technology</p>
</header>
<div class="sidebar">
<img src="nitj.jpeg" alt="NIT Logo">
<nav>
<a href="#about">About Us</a>
<a href="#programs">Programs</a>
<a href="#faculty">Faculty</a>
<a href="#cybernauts">Cyber nauts</a>
<a href="#contact">Contact</a>
</nav>
</div>
<div class="container">
<section id="about" class="content">
<h2>About Us</h2>
<p>Welcome to the IT Department of Dr. BR Ambedkar NIT. We strive to
provide cutting-edge education and
research in the field of Information Technology.</p>
</section>
<section id="programs" class="content">
<h2>Programs</h2>
<p>Explore our wide range of IT programs designed to prepare students for
the challenges of the digital age.
</p>
</section>
<section id="faculty" class="content">
<h2>Faculty</h2>
<p>Meet our dedicated and experienced faculty members who are passionate
about shaping the future of IT
professionals.</p>
</section>
<section id="cybernauts" class="content">
<h2>Cyber nauts - IT Department Club</h2>
<p>Cyber nauts is a vibrant club within our IT Department that focuses on
cybersecurity, coding, and
innovation. Join us to explore the exciting world of technology together!</p>
</section>
<section id="contact" class="content">
<h2>Contact</h2>
<p>If you have any questions or inquiries, feel free to contact us at <a
href="mailto:[email protected]">[email protected]</a></p>
</section>
</div>
<footer>
<p>&copy; 2023 IT Department - Dr. BR Ambedkar NIT</p>
</footer>
</body>
</html>
WEBSITE:
LAB-2

1. Create a interactive World map

HTML CODE:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
#map {
height: 600px;
}
</style>
<title>Interactive World Map</title>
</head>

<body>
<div id="map"></div>
<script>
const map = L.map('map').setView([0, 0], 2);
//js code creates a leaflet map instance and sets initial
// initial view at coordinates [0,0] and zoom value to 2
// Add the OpenStreetMap tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Sample data for annotations


const annotations = [
{ lat: 51.5074, lon: -0.1278, text: "London" },
{ lat: 40.7128, lon: -74.0060, text: "New York" },
// Add more annotations as needed
];

// Add markers with hover annotations


annotations.forEach(annotation => {
const marker = L.marker([annotation.lat, annotation.lon]).addTo(map);
marker.bindTooltip(annotation.text, { permanent: false, direction: 'top' });
});
</script>
</body>
</html>

WEBSITE:

2. Create a interactive calculator using HTML , CSS , JS

HTML CODE:

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="sc.css">
<title>Scientific Calculator</title>
</head>

<body>
<div class="calculator">
<div class="screen">
<input type="text" id="display" readonly>
</div>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="performOperation('+')">+</button>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="performOperation('-')">-</button>
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="performOperation('*')">*</button>
<button onclick="performOperation('sqrt')">√</button>
<button onclick="appendNumber(0)">0</button>
<button onclick="performOperation('/')">/</button>
<button onclick="performOperation('sin')">sin</button>
<button onclick="performOperation('cos')">cos</button>
<button onclick="performOperation('tan')">tan</button>
<button onclick="performOperation('asin')">sin<sup>-1</sup></button>
<button onclick="performOperation('acos')">cos<sup>-1</sup></button>
<button onclick="performOperation('atan')">tan<sup>-1</sup></button>
<button class="equal" onclick="calculate()">=</button>
</div>
</div>
<script src="sc.js"></script>
</body>

</html>

CSS CODE :

/* Reset and main styles (same as before) */

.calculator {
background-color: #2c3e50;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
}

/* Additional styling for specific buttons */


.clear,
.equal {
background-color: #e74c3c;
color: white;
}

.clear:hover,
.equal:hover {
background-color: #c0392b;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 20px;
}

button {
font-size: 20px;
padding: 15px;
border: none;
border-radius: 5px;
background-color: #3498db;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #2980b9;
}

#display {
font-size: 24px;
width: 100%;
border: none;
outline: none;
background-color: transparent;
text-align: right;
padding: 10px;
margin-bottom: 10px;
color: #ecf0f1;
}

JS CODE :

let currentInput = '';


let currentOperation = '';
let firstOperand = '';

function updateDisplay() {
document.getElementById('display').value = currentInput;
}

function appendNumber(number) {
currentInput += number;
updateDisplay();
}

function performOperation(operation) {
if (currentInput !== '') {
if (firstOperand === '') {
firstOperand = currentInput;
currentInput = '';
} else {
calculate();
}
currentOperation = operation;
updateDisplay();
}
}

function calculate() {
if (currentInput !== '' && firstOperand !== '') {
let result;
const num1 = parseFloat(firstOperand);
const num2 = parseFloat(currentInput);

switch (currentOperation) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
case 'sqrt':
result = Math.sqrt(num1);
break;
case 'sin':
result = Math.sin(num1);
break;
case 'cos':
result = Math.cos(num1);
break;
case 'tan':
result = Math.tan(num1);
break;
case 'asin':
result = Math.asin(num1);
break;
case 'acos':
result = Math.acos(num1);
break;
case 'atan':
result = Math.atan(num1);
break;
default:
break;
}

currentInput = result.toString();
firstOperand = '';
currentOperation = '';
updateDisplay();
}
}

function performOperation(operation) {
if (currentInput !== '') {
if (firstOperand === '') {
firstOperand = currentInput;
currentInput = '';
} else {
calculate();
}
currentOperation = operation;
updateDisplay();
}
}

function clearDisplay() {
currentInput = '';
firstOperand = '';
currentOperation = '';
updateDisplay();
}

function calculateSquareRoot() {
if (currentInput !== '') {
const num = parseFloat(currentInput);
const result = Math.sqrt(num);
currentInput = result.toString();
updateDisplay();
}
}

updateDisplay();

WEBSITE:
LAB-3

1. Create a website to show frames

HTML CODE(content.html):

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Website</title>
</head>
<frameset rows="20%, 80%">
<frameset cols="50%, 50%">
<frame src="header.html" name="headerFrame">
<frame src="header2.html" name="headerFrame">
</frameset>

<frameset cols="50%, 50%">


<frame src="DisplayCv\cv.html" name="sidebarFrame">
<frame src="It_department\IT_page.html" name="contentFrame">
</frameset>
</frameset>

</html>

HTML CODE(header1.html):

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

<head>
<meta charset="UTF-8">
<title>News Header</title>
<style>
/* Header styles */
body {
background-color: #101111;
color: white;
text-align: center;
padding: 10px;
margin: 0;
}
</style>
</head>

<body>
<h1>Welcome to CV</h1>
</body>

</html>

HTML CODE(header.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Frame Content</title>
</head>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>News Content</title>
<style>
/* Content styles */
body {
background-color: #ecf0f1;
padding: 20px;
margin: 0;
}

h2 {
color: #3498db;
}

p{
font-size: 16px;
}
</style>
</head>

<body>
<h2>Welcome to IT website</h2>

</body>

</html
WEBSITE:

2. Create a interactive India map

HTML CODE:

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>India Map</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
/* Style the map container to cover the whole viewport */
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>

<body>
<!-- Create a container for the map -->
<div id="map"></div>

<!-- Include Leaflet.js library -->


<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
let map;
let markers = [];

function initMap() {
// Initialize the map to cover the whole viewport
map = L.map('map').setView([20.5937, 78.9629], 5); // Centered at India

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Define coordinates for states (you can add more)


const states = [
{ name: 'Delhi', coordinates: [28.6139, 77.2090], image: 'state/delhi.jpeg' },
{ name: 'Mumbai', coordinates: [19.0760, 72.8777], image:
'state/mumbai.jpeg' },
{ name: 'Chennai', coordinates: [13.0827, 80.2707], image:
'state/chennai.jpeg' },
{ name: 'Chandigarh', coordinates: [30.7333, 76.7794], image:
'state/punjab.jpeg' },
{ name: 'Kolkata', coordinates: [22.5726, 88.3639], image:
'state/kolkata.jpeg' },
// Add more states here
];

// Add markers for each state


states.forEach(state => {
const marker = L.marker(state.coordinates);
marker.bindPopup(`<strong>${state.name}</strong><br><img
src="${state.image}" alt="${state.name}" width="200" height="200">`);
markers.push(marker);
marker.on('click', () => showState(state));
});

// Add markers to the map


markers.forEach(marker => {
marker.addTo(map);
});

function showState(state) {
// Create a popup with the image of the state
// const popupContent = `
// <strong>${state.name}</strong><br>
// <img src="${state.image}" alt="${state.name}" width="200"
height="200">
// `;

// // Create a popup with the image content


// const popup = L.popup().setContent(popupContent);

// // Show the popup at the state's coordinates


// L.marker(state.coordinates)
// .addTo(map)
// .bindPopup(popup)
// .openPopup();

// Open the image in a new browser tab


window.open(state.image, '_blank');

}
}

// Initialize the map when the DOM is ready


document.addEventListener('DOMContentLoaded', initMap);
</script>
</body>

</html>

WEBSITE:
LAB-4

1. Create a website using only cascading style sheets

HTML CODE(content.html):

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NIT J College Website</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></scrip
t>
<style>
body {
background-color: #f0f7ff; /* Light blue background */
}
header, .navbar {
background-color:#007bff; /* Blue navbar and header background */
color:black; /* White text for navbar and header */
}
/* Custom styles for the carousel */
.carousel-inner img {
width: 100%;
height: 400px;
}
.thought-of-the-day {
text-align: center;
background-color: #007bff; /* Blue background for "Thought of the Day" */
color: #fff; /* White text for "Thought of the Day" */
padding: 20px;
}
.logo {
max-width: 150px; /* Adjust the maximum width as needed */
}

</style>
</head>

<body>
<header>

<h1>NIT Jalandhar </h1>


<img src="https://www.nitj.ac.in/public/assets/images/logo_250.png" alt="NIT J
College Logo" class="logo">
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="aboutDropdown"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">About</a>
<div class="dropdown-menu" aria-labelledby="aboutDropdown">
<a class="dropdown-item" href="#">History</a>
<a class="dropdown-item" href="#">Mission</a>
<a class="dropdown-item" href="#">Vision</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="academicsDropdown"
role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Academics</a>
<div class="dropdown-menu" aria-labelledby="academicsDropdown">
<a class="dropdown-item" href="#">Programs</a>
<a class="dropdown-item" href="#">Admissions</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Student Life</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="departmentsDropdown"
role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Departments</a>
<div class="dropdown-menu" aria-labelledby="departmentsDropdown">
<a class="dropdown-item" href="#">IT</a>
<a class="dropdown-item" href="#">CS</a>
<a class="dropdown-item" href="#">DS</a>
<a class="dropdown-item" href="#">ECE</a>
<a class="dropdown-item" href="#">TT</a>
<a class="dropdown-item" href="#">ICE</a>
<a class="dropdown-item" href="#">IPE</a>
</div>
</li>
</ul>
</div>
</nav>

<!-- Carousel Section -->


<div id="collegeCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#collegeCarousel" data-slide-to="0" class="active"></li>
<li data-target="#collegeCarousel" data-slide-to="1"></li>
<li data-target="#collegeCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://v1.nitj.ac.in/images/slider/02_7635.jpg" alt="NIT J
College Image 1">
</div>
<div class="carousel-item">
<img src="https://v1.nitj.ac.in/images/slider/1_82336.jpg" alt="NIT J
College Image 2">
</div>
<div class="carousel-item">
<img src="https://v1.nitj.ac.in/images/slider/4_29067.jpg" alt="NIT J
College Image 3">
</div>
</div>
<a class="carousel-control-prev" href="#collegeCarousel" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#collegeCarousel" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="thought-of-the-day">
<h2>Thought of the Day</h2>
<p>"Your education is a dress rehearsal for a life that is yours to lead." - Nora
Ephron</p>
</div>

<section class="upcoming-events">
<h2>Upcoming Events</h2>
<ul>
<li>
<h3>Event 1</h3>
<p>Date: September 20, 2023</p>
<p>Description: This is the description of Event 1.</p>
</li>
<li>
<h3>Event 2</h3>
<p>Date: October 5, 2023</p>
<p>Description: This is the description of Event 2.</p>
</li>
<!-- Add more events as needed -->
</ul>
</section>

<main>
<!-- Your main content goes here -->
</main>
</body>

</html>

WEBSITE:
2. Create a website to implement stop watch

HTML CODE:

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NIT J College Website</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></scrip
t>
<style>
body {
background-color: #f0f7ff; /* Light blue background */
}
header, .navbar {
background-color:; /* Blue navbar and header background */
color:black; /* White text for navbar and header */
}
/* Custom styles for the carousel */
.carousel-inner img {
width: 100%;
height: 400px;
}
.thought-of-the-day {
text-align: center;
background-color: #007bff; /* Blue background for "Thought of the Day" */
color: #fff; /* White text for "Thought of the Day" */
padding: 20px;
}
.logo {
max-width: 150px; /* Adjust the maximum width as needed */
}

</style>
</head>

<body>
<header>

<h1>NIT Jalandhar </h1>


<img src="https://www.nitj.ac.in/public/assets/images/logo_250.png" alt="NIT J
College Logo" class="logo">
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="aboutDropdown"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">About</a>
<div class="dropdown-menu" aria-labelledby="aboutDropdown">
<a class="dropdown-item" href="#">History</a>
<a class="dropdown-item" href="#">Mission</a>
<a class="dropdown-item" href="#">Vision</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="academicsDropdown"
role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Academics</a>
<div class="dropdown-menu" aria-labelledby="academicsDropdown">
<a class="dropdown-item" href="#">Programs</a>
<a class="dropdown-item" href="#">Admissions</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Student Life</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="departmentsDropdown"
role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Departments</a>
<div class="dropdown-menu" aria-labelledby="departmentsDropdown">
<a class="dropdown-item" href="#">IT</a>
<a class="dropdown-item" href="#">CS</a>
<a class="dropdown-item" href="#">DS</a>
<a class="dropdown-item" href="#">ECE</a>
<a class="dropdown-item" href="#">TT</a>
<a class="dropdown-item" href="#">ICE</a>
<a class="dropdown-item" href="#">IPE</a>
</div>
</li>
</ul>
</div>
</nav>

<!-- Carousel Section -->


<div id="collegeCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#collegeCarousel" data-slide-to="0" class="active"></li>
<li data-target="#collegeCarousel" data-slide-to="1"></li>
<li data-target="#collegeCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://v1.nitj.ac.in/images/slider/02_7635.jpg" alt="NIT J
College Image 1">
</div>
<div class="carousel-item">
<img src="https://v1.nitj.ac.in/images/slider/1_82336.jpg" alt="NIT J
College Image 2">
</div>
<div class="carousel-item">
<img src="https://v1.nitj.ac.in/images/slider/4_29067.jpg" alt="NIT J
College Image 3">
</div>
</div>
<a class="carousel-control-prev" href="#collegeCarousel" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#collegeCarousel" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="thought-of-the-day">
<h2>Thought of the Day</h2>
<p>"Your education is a dress rehearsal for a life that is yours to lead." - Nora
Ephron</p>
</div>

<section class="upcoming-events">
<h2>Upcoming Events</h2>
<ul>
<li>
<h3>Event 1</h3>
<p>Date: September 20, 2023</p>
<p>Description: This is the description of Event 1.</p>
</li>
<li>
<h3>Event 2</h3>
<p>Date: October 5, 2023</p>
<p>Description: This is the description of Event 2.</p>
</li>
<!-- Add more events as needed -->
</ul>
</section>

<main>
<!-- Your main content goes here -->
</main>
</body>
</html>

WEBSITE:
3. Create a website to make form validataion

HTML CODE(content.html):

<!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>
function formValidation() {
var uid = document.form1.userid;
var passid = document.form1.passid;
var uname = document.form1.username;
var uadd = document.form1.address;
var uzip = document.form1.zip;
var uemail = document.form1.email;
if (userid_validation(uid, 7, 12)) {
if (userid_validation(passid, 7, 12)) {
if (allLetter(uname)) {
if (alphanumeric(uadd)) {
if (allnumeric(uzip)) {
if (ValidateEmail(uemail)) {
}
}
}
}
}
return false;
}
}
function userid_validation(uid, mx, my) {
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx) {
alert(
"user id should not be empty / length be between " +
mx +
" to " +
my
);
uid.focus();
return false;
}
return true;
}
function allLetter(uname) {
var letters = /^[A-Za-z]+$/;
if (uname.value.match(letters)) {
return true;
} else {
alert("Please input alphabet characters only in name ");
uname.focus();
return false;
}
}
function alphanumeric(uadd) {
var letters = /^[0-9a-zA-Z]+$/;
if (uadd.value.match(letters)) {
return true;
} else {
alert("Please input alphanumeric characters only in address");
uadd.focus();
return false;
}
}
function allnumeric(uzip) {
var numbers = /^[0-9]+$/;
if (uzip.value.match(numbers)) {
return true;
} else {
alert("Please input numeric characters only in zip code");
uzip.focus();
return false;
}
}
function ValidateEmail(uemail) {
var mailformat =
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (uemail.value.match(mailformat)) {
return true;
} else {
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
}
</script>
</head>
<body>
<form name="form1" onsubmit="return formValidation()">
<table
width="500"
cellpadding="3"
style="border-collapse: collapse"
>
<tr>
<td>User id</td>

<td><input type="text" name="userid" size="12" /></td>


</tr>
<tr>
<td>Password</td>

<td><input type="password" name="passid" size="12" /></td>


</tr>
<tr>
<td>Name</td>
<td><input type="text" name="username" size="50" /></td>
</tr>
<tr>
<td>Address</td>

<td><input type="text" name="address" size="50" /></td>


</tr>
<tr>
<td>ZIP Code</td>

<td><input type="text" name="zip" /></td>


</tr>
<tr>
<td>Email</td>

<td><input type="text" name="email" size="50" /></td>


</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="msex" value="Male" /> Male

<input type="radio" name="fsex" value="Female" /> Female


</td>
</tr>
<tr>

<td>
<input type="submit" name="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
WEBSITE:

You might also like