Prestige Institute of Engineering Management
and Research, Indore
Submit By – Om pandey
B.Tech. (Artificial Intelligence and Data Science) V Semester
Lab Manual
Department : AI & DS Session: July 24- Dec 24
Name of Faculty: Mohit kadwal Semester: V
Subject: Internet & Web Technology Subject Code: AD 504
1. Web-based Calculator with HTML, JavaScript, and CSS?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
.calculator {
text-align: center;
.display {
margin-top: 50px;
width: 200px;
font-size: 1.5rem;
margin-bottom: 50px;
text-align: right;
border: 1px solid black;
.box {
background-color: beige;
border: 2px solid black;
height: 450px;
width: 300px;
.feature {
display: inline-block;
button {
width: 45px;
height: 45px;
margin: 5px;
font-size: 1.2rem;
</style>
</head>
<body>
<div class="box">
<div class="calculator">
<input type="text" class="display" id="display" disabled />
<div class="feature">
<button onclick="append('7')">7</button>
<button onclick="append('8')">8</button>
<button onclick="append('9')">9</button>
<button onclick="append('/')">/</button>
</div>
<div>
<button onclick="append('4')">4</button>
<button onclick="append('5')">5</button>
<button onclick="append('6')">6</button>
<button onclick="append('*')">*</button>
</div>
<div>
<button onclick="append('1')">1</button>
<button onclick="append('2')">2</button>
<button onclick="append('3')">3</button>
<button onclick="append('-')">-</button>
</div>
<div>
<button onclick="append('0')">0</button>
<button onclick="append('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="append('+')">+</button>
</div>
<button onclick="clearDisplay()">C</button>
</div>
</div>
<script>
const display = document.getElementById("display");
function append(value) {
display.value += value;
function calculate() {
try {
display.value = eval(display.value);
} catch {
display.value = "Error";
}
}
function clearDisplay() {
display.value = "";
</script>
</body>
</html>
__________________________________________________________________________________
2. Celsius to Fahrenheit Converter with HTML, JavaScript, and CSS?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celsius to Fahrenheit</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
input, button {
font-size: 1rem;
padding: 10px;
.box{
height: 200px;
width: 450px;
background-color: beige;
display: flex;
align-items: center;
justify-content: center;
</style>
</head>
<body>
<div>
<h1> Convert Celsius to Fahrenheit</h1>
<div class="box">
<input type="number" id="celsius" placeholder="Celsius">
<button onclick="convert()">Convert</button>
<p id="result"></p>
</div>
</div>
<script>
function convert() {
const celsius = document.getElementById('celsius').value;
const fahrenheit = (celsius * 9/5) + 32;
document.getElementById('result').textContent = `${celsius}°C = ${fahrenheit}°F`;
</script>
</body>
</html>
__________________________________________________________________________________
3.Silly Story Generator with HTML, CSS, and JavaScript?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Silly Story Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
text-align: center;
input,button {
margin: 10px;
padding: 10px;
font-size: 1rem;
</style>
</head>
<body>
<h1>Silly Story Generator</h1>
<input type="text" id="noun" placeholder="Enter a noun" />
<input type="text" id="verb" placeholder="Enter a verb" />
<input type="text" id="adjective" placeholder="Enter an adjective" />
<button onclick="generateStory()">Generate Story</button>
<p id="story"></p>
<script>
function generateStory() {
const noun = document.getElementById("noun").value;
const verb = document.getElementById("verb").value;
const adjective = document.getElementById("adjective").value;
const story = `Once upon a time, a ${adjective} ${noun} decided to ${verb} all day long.`;
document.getElementById("story").textContent = story;
</script>
</body>
</html>
__________________________________________________________________________________
4. Student Details Form with HTML and JavaScript?
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center; <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Student Details Form</title>
<style>
body {
height: 100vh;
margin: 0;
flex-direction: column;
input,
button {
margin: 10px;
padding: 10px;
font-size: 1rem;
</style>
</head>
<body>
<h1>Student Details Form</h1>
<form id="studentForm">
<input type="text" id="name" placeholder="Enter Name" required /><br />
<input type="number" id="age" placeholder="Enter Age" required /><br />
<input
type="text"
id="course"
placeholder="Enter Course"
required
/><br />
<button type="button" onclick="submitForm()">Submit</button>
</form>
<h2>Student Details:</h2>
<p id="result"></p>
<script>
function submitForm() {
const name = document.getElementById("name").value;
const age = document.getElementById("age").value;
const course = document.getElementById("course").value;
if (name && age && course) {
document.getElementById(
"result"
).textContent = `Name: ${name}, Age: ${age}, Course: ${course}`;
} else {
document.getElementById("result").textContent =
"Required details are complusory";
</script>
</body>
</html>
__________________________________________________________________________________
5. Portfolio Website with HTML and CSS?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Om Pandey - Portfolio</title>
<style>
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #f4f4f9;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
nav {
margin: 1rem 0;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 1rem;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
section {
max-width: 960px;
margin: 2rem auto;
padding: 1rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
color: #333;
}
.projects {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.project {
flex: 1 1 calc(33% - 1rem);
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1rem;
text-align: center;
transition: transform 0.3s;
}
.project img {
max-width: 100%;
border-radius: 8px;
}
footer {
text-align: center;
padding: 1rem;
background-color: #333;
color: #fff;
margin-top: 2rem;
}
footer a {
color: #4caf50;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>Om Pandey</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Hello I am Om Pandey, a passionate web developer who loves creating clean, responsive, and
user-friendly websites. With a strong foundation in HTML, CSS, and JavaScript.</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<div class="projects">
<div class="project">
<img src=" " alt="Project 1">
<h3>Virtual Herbal Garden</h3>
<p>In which given proper website of herbal uses</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>If you'd like to get in touch, feel free to reach out via email at ompandey@example.com or
connect with me on LinkedIn.</p>
</section>
<footer>
<p>© 2024 Portfolio.</p>
</footer>
</body>
</html>
___________________________________________________________________________
6. User Authentication System with PHP and MySQL?
Database Setup (MySQL):
CREATE DATABASE user_auth;
USE user_auth;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(100) NOT NULL,
password VARCHAR(255) NOT NULL
);
2. Database Connection (db.php):
This file establishes a connection to the MySQL database.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "user_auth";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error)
{ die("Connection failed: " . $conn->connect_error);
}
?>
3. User Registration (register.php):
<?php
include 'db.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$sql = "INSERT INTO users (username, password) VALUES ('$username', '$password')";
if ($conn->query($sql) === TRUE) {
echo "Registration successful! ";
} else
{ echo "Error: " . $sql . "
" . $conn->error; } }
?>
7. CSV File Upload and Graph Generation with PHP and Python?
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["csvFile"]["name"]);
$fileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));
if ($fileType !== "csv") {
echo "Only CSV files are allowed.";
exit;
}
if(move_uploaded_file($_FILES["csvFile"]["tmp_name"], $targetFile))
{
echo "The file " . htmlspecialchars(basename($_FILES["csvFile"]["name"])) . " has been uploaded.";
} else
{ echo "Sorry, there was an error uploading your file."; }
}
?>
<form action="" method="POST" enctype="multipart/form-data">
<label for="csvFile">Upload CSV File:</label>
<input type="file" name="csvFile" id="csvFile" required>
<button type="submit">Upload</button>
</form>
8. Display a time with use of JavaScript?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is Written By Javascript </h1>
<p id="demo"> It is show a Time </p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
__________________________________________________________________________________
9. Make an Alert Box in which click it display Alert Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert Box</title>
</head>
<body>
<h1>This is Alert Box When You click on alert</h1>
<script type="text/javascript">
function show_alert()
alert("I am an alert box!");
</script>
<button onclick="show_alert()">Click!</button>
</body>
</html>
__________________________________________________________________________________
10 . Built a Registration form proper Html Css Use?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Form</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f0f0f0;
.form {
background: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 300px;
.form h2 {
text-align: center;
margin-bottom: 15px;
.form label {
display: block;
margin: 10px 0 5px;
.box{
display: flex;
.form input[type="text"],
.form input[type="password"],
.form input[type="number"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
.form input[type="radio"] {
margin-right: 5px;
}
.form button {
background-color: blue;
color: azure;
padding: 10px;
width: 100%;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
.form button:hover {
background-color: darkblue;
</style>
</head>
<body>
<form class="form">
<h2>Form</h2>
<label for="username">Username</label>
<input type="text" id="username" name="username" required />
<label for="password">Password</label>
<input type="password" id="password" name="password" required />
<label for="gender">Gender</label>
<div class="box">
<input type="radio" id="male" name="gender" value="Male" required />
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female" required />
<label for="female">Female</label>
</div>
<label for="age">Age</label>
<input type="number" id="age" name="age" min="1" max="120" required />
<button type="submit">Submit</button>
</form>
</body>
</html>
11.Create a webpage with a button that increments a number displayed on the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f3f4f6;
}
.counter {
font-size: 2rem;
margin-bottom: 20px;
}
.button {
padding: 10px 20px;
font-size: 1rem;
color: white;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="counter" id="counter">0</div>
<button class="button" id="incrementButton">Increment</button>
<script>
const counterDisplay = document.getElementById('counter');
const incrementButton = document.getElementById('incrementButton');
let count = 0;
incrementButton.addEventListener('click', () => {
count++;
counterDisplay.textContent = count;
});
</script>
</body>
</html>
12. Simple JavaScript Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple JavaScript Code</title>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</body>
</html>
13. Display a greeting ("Good Morning", "Good Afternoon", or "Good Evening") based on the
current time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greeting Based on Time</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f8ff;
}
.greeting {
font-size: 2rem;
color: #333;
}
</style>
</head>
<body>
<div class="greeting" id="greeting"></div>
<script>
const currentHour = new Date().getHours();
let greeting;
if (currentHour >= 5 && currentHour < 12) {
greeting = "Good Morning";
} else if (currentHour >= 12 && currentHour < 18) {
greeting = "Good Afternoon";
} else {
greeting = "Good Evening";
}
document.getElementById('greeting').textContent = greeting;
</script>
</body>
</html>
14.Create a text area that counts and displays the number of characters entered by the user
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character Counter</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: white;
}
textarea {
width: 300px;
height: 100px;
font-size: 16px;
padding: 10px;
border: 1px solid gray;
border-radius: 5px;
margin-bottom: 10px;
resize: none;
}
.char-count {
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<textarea id="textArea" placeholder="Start typing..."></textarea>
<div class="char-count">Characters: <span id="charCount">0</span></div>
<script>
const textArea = document.getElementById('textArea');
const charCount = document.getElementById('charCount');
textArea.addEventListener('input', () => {
charCount.textContent = textArea.value.length;
});
</script>
</body>
</html>
__________________________________________________________________________________
15. Simple JavaScript Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple JavaScript</title>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt box" />
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your name","Om Pandey ");
if (name!=null && name!="")
{
document.write("Hello " + name + " How are you");
}
}
</script>
</body>
</html>
16.Write all tags which you use in html?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html & Css</title>
</head>
<body>
<h1>this is heading tag, or there are h1 to h6 are all tags which be used for headings</h1>
<p>This is paragragh</p>
<p><b>This is bold tag</b></p>
<p><u>this is Text is underline</u></p>
<span>This is span tag</span>
<div>This is div tag</div>
<header>This is header tag</header>
<nav>This is Nav tag</nav>
<a>This is an anchor tag, or tag, which used in HTML element that creates a hyperlink to a target
URL</a>
<ul>
this is unorder list
<li>Apple</li>
<li>Mango</li>
<li>Dragon-fruit</li>
</ul>
<ol>this is order list
<li>Mouse</li>
<li>Mice</li>
<li>Rat</li>
</ol>
<p>this is img tag which used to give img in web page </p>
<img src="" alt="">
<p>this tag used in form , when be used to make a from in which radio , textarea, button,
checkbox and manymore</p>
<input type="text">
<input type="radio" name="" id="">
<input type="checkbox" name="" id="">
<button>This is Button</button>
<p>this is table which used to design a table.</p>
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>
</body>
</html>
