Scribd
Upload
18 views23 pages

Iwtfile 2

Good

Uploaded by

Aditya Narayan
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
18 views23 pages

Iwtfile 2

Good

Uploaded by

Aditya Narayan
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/ 23

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 [email protected] or
connect with me on LinkedIn.</p>
</section>

<footer>
<p>&copy; 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>

You might also like