Scribd
Upload
14 views

Html

The document contains multiple HTML templates for various forms and features, including a student registration form, a scrolling marquee, a timetable, and stylish contact forms. Each template includes CSS for styling and layout, ensuring user-friendly interfaces. The forms capture essential information such as personal details, course selection, and messages, with interactive elements like buttons and dropdowns.

Uploaded by

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

Html

The document contains multiple HTML templates for various forms and features, including a student registration form, a scrolling marquee, a timetable, and stylish contact forms. Each template includes CSS for styling and layout, ensuring user-friendly interfaces. The forms capture essential information such as personal details, course selection, and messages, with interactive elements like buttons and dropdowns.

Uploaded by

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

1)Registration Form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;

}
form{
border: 2px solid black;
/* margin: 30px;
padding: 50px; */
border-radius:30px;
background-color: black;
color: white;
width: 60vw;
}
form h1{
text-align: center;
}
.box{
margin-left: 55px;
/* margin-right: 55px; */
}
input, #course,#address{
margin: 20px;
}
.button{
text-align: center;
}
button{
padding: 2px 5px;
margin-top: 20px;
border-radius: 10px;
}
button:hover{
background-color: blue;
}
</style>
</head>
<body>
<form action="">
<h1>STUDENT REGISTRATION FORM</h1><br>
<div class="box">
<label for="name1">FIRST NAME:</label>
<input type="text" name="name1" id="name1" placeholder="Enter your
first name"><br>
<label for="name2">MIDDLE NAME:</label>
<input type="text" name="name2" id="name2" placeholder="Enter your
middle name"><br>
<label for="name3">LAST NAME:</label>
<input type="text" name="name3" id="name3" placeholder="Enter your last
name"><br>
<label for="course">COURSE:</label>
<select name="course" id="course">
<option value="B.Tech">B.Tech</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select><br>
<label for="gender">GENDER:</label><br>
<input type="radio" name="gender" id="male">
<label for="male">MALE</label><br>
<input type="radio" name="gender" id="female">
<label for="female">FEMALE</label><br>
<input type="radio" name="gender" id="others">
<label for="others">OTHERS</label><br>
<label for="phone">PHONE NO.:</label>
<input type="text" name="phone" id="phone" placeholder="+91"><br>
<label for="address">ADDRESS:</label><br>
<textarea name="address" id="address" cols="60" rows="5"
placeholder="Enter your address"></textarea><br>
<label for="email">EMAIL:</label>
<input type="email" name="email" id="email" placeholder="Enter your
email"><br>
<label for="pass">PASSWORD</label>
<input type="password" name="pass" id="pass" placeholder="Enter your
password"><br>
<label for="repass">RE-TYPE PASSWORD</label>
<input type="password" name="repass" id="repass" placeholder="Re-Type
your password"><br>
</div>
<div class="button">
<button>SUBMIT</button>
</div>
</form>
</body>
</html>

2)Marquee

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Text with Marquee</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
}
.marquee-container {
border: 2px solid #007BFF;
background-color: #ffffff;
padding: 10px;
margin: 20px auto;
width: 80%;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Scrolling Text Example</h1>
<div class="marquee-container">
<marquee behavior="scroll" direction="left" scrollamount="5">
Welcome to the Scrolling Text Example! Enjoy the smooth movement of text
across the screen.
</marquee>
</div>

<h2>Different Marquee Styles</h2>


<div class="marquee-container">
<marquee behavior="alternate" direction="right" scrollamount="10">
This text bounces from side to side!
</marquee>
</div>

<div class="marquee-container">
<marquee behavior="scroll" direction="up" scrollamount="3" height="100">
Vertical scrolling is also possible with the marquee tag.
</marquee>
</div>
</body>
</html>

3)Time Table

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Table</title>
<style>
td{
color:blue;
/* padding: 10px; */
}
.a{
color: red;
}
h1{
text-align: center;

}
.box{
text-align: center;
margin-left: 15vw;
}

</style>
</head>
<body>
<h1>TIME TABLE</h1>
<div class="box">

<table border="5px">
<thead>
<tr>
<th>DAY/TIME</th>
<th>09:15-10:05</th>
<th>10:10-11:00</th>
<th>11:05-11:55</th>
<th>12:00-12:50</th>
<th>12:55-13:45</th>
<th>13:50-14:40</th>
<th>14:45-15:35</th>
<th>15:40-16:30</th>
<th>16:35-17:25</th>
</tr>
</thead>
<tbody>
<tr>
<th>Monday</th>
<td>CSE204<div class="a">Mr Dipra Mitra</div>Academics-254</td>
<td>FREN148<div class="a">Dr Abhaya Ranjan</div>Academics-
254</td>
<td><b>BREAK</b></td>
<td>CSE302<div class="a">Mr Prince
Vijay</div>Academics-254</td>
<td colspan="5"><b>OVER</b></td>

</tr>
<tr>
<th>Tuesday</th>
<td colspan="2"></td>
<td>BS309<div class="a">Dr Dolly</div>Academics-254</td>
<td>CSIT301<div class="a">Mr Kumar
Gaurav</div>Academics-254</td>
<td colspan="2"><b>BREAK</b></td>
<td>CSE204<div class="a">Mr Dipra Mitra</div>Academics-254</td>
<td colspan="2"><b>OVER</b></td>
</tr>
<tr>
<th>Wednesday</th>
<td colspan="2">IT404<div class="a">Mr Dipra
Mitra</div>Academics-Computer Lab-IT 222</td>
<td><b>BREAK</b></td>
<td>CSE302<div class="a">Mr Prince
Vijay</div>Academics-254</td>
<td colspan="2"><b>BREAK</b></td>
<td>CSIT301<div class="a">Mr Kumar
Gaurav</div>Academics-254</td>
<td colspan="2">CSE302<div class="a">Mr Prince
Vijay</div>Academics-Computer Lab 220</td>
</tr>
<tr>
<th>Thursday</th>
<td colspan="2">CSIT301<div class="a">Mr Kumar
Gaurav</div>Academics-Computer Lab-IT 220</td>
<td><b>BREAK</b></td>
<td>CSE302<div class="a">Mr Prince
Vijay</div>Academics-254</td>
<td>IT404<div class="a">Mr Dipra Mitra</div>Academics-254</td>
<td><b>BREAK</b></td>
<td>BS309<div class="a">Dr Dolly</div>Academics-254</td>
<td>CSE204<div class="a">Mr Dipra Mitra</div>Academics-254</td>
<td><b>OVER</b></td>
</tr>
<tr>
<th>Friday</th>
<td>FREN148<div class="a">Dr Abhaya Ranjan</div>Academics-
254</td>
<td>BS309<div class="a">Dr Dolly</div>Academics-254</td>
<td><b>BREAK</b></td>
<td colspan="2">IT404<div class="a">Mr Dipra
Mitra</div>Academics-254</td>
<td colspan="4"><b>OVER</b></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

4)Form With CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.form-container {
background: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.form-container h2 {
margin-bottom: 20px;
font-size: 24px;
color: #333333;
text-align: center;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
font-size: 14px;
color: #555555;
margin-bottom: 5px;
}

.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: #007BFF;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.form-group textarea {
resize: vertical;
height: 100px;
}

.form-group button {
width: 100%;
padding: 10px;
font-size: 16px;
background: #007BFF;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
}

.form-group button:hover {
background: #0056b3;
}
</style>
</head>
<body>

<div class="form-container">
<h2>Contact Us</h2>
<form action="/submit" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name"
required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email"
required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Write your message"
required></textarea>
</div>
<div class="form-group">
<label for="reason">Reason for Contact</label>
<select id="reason" name="reason" required>
<option value="">Select an option</option>
<option value="support">Support</option>
<option value="feedback">Feedback</option>
<option value="inquiry">General Inquiry</option>
</select>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>

</body>
</html>

5)Form with different style

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh; */
}
form {
border: 2px solid #333;
border-radius: 20px;
background-color: #333;
color: #fff;
width: 90%;
max-width: 600px;
padding: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

form h1 {
text-align: center;
margin-bottom: 20px;
color: #00aaff;
}

.box {
margin: 0 20px;
}

.box label {
display: block;
margin: 10px 0 5px;
}

input,
select,
textarea {
width: calc(100% - 40px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
}

input:focus,
select:focus,
textarea:focus {
border-color: #00aaff;
outline: none;
box-shadow: 0 0 5px rgba(0, 170, 255, 0.5);
}

#course {
width: 100%;
}

.gender-group {
margin-bottom: 20px;
}

.gender-group input {
margin-right: 10px;
}
.button {
text-align: center;
}

button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #00aaff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0077cc;
}

</style>
</head>
<body>
<form action="" method="post">
<h1>Student Registration Form</h1>
<div class="box">
<label for="name1">First Name:</label>
<input type="text" name="name1" id="name1" placeholder="Enter your
first name" required>

<label for="name2">Middle Name:</label>


<input type="text" name="name2" id="name2" placeholder="Enter your
middle name">

<label for="name3">Last Name:</label>


<input type="text" name="name3" id="name3" placeholder="Enter your last
name" required>

<label for="course">Course:</label>
<select name="course" id="course" required>
<option value="">Select your course</option>
<option value="B.Tech">B.Tech</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>

<label>Gender:</label>
<div class="gender-group">
<input type="radio" name="gender" id="male" value="male" required>
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>
<input type="radio" name="gender" id="others" value="others">
<label for="others">Others</label>
</div>

<label for="phone">Phone No.:</label>


<input type="tel" name="phone" id="phone" placeholder="+91" required
pattern="[0-9]{10}" title="Enter a valid 10-digit phone number">

<label for="address">Address:</label>
<textarea name="address" id="address" cols="30" rows="5"
placeholder="Enter your address"></textarea>

<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Enter your
email" required>

<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" placeholder="Enter your
password" required>

<label for="repass">Re-type Password:</label>


<input type="password" name="repass" id="repass" placeholder="Re-type
your password" required>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>

6)to add btn and ordered list in page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Button and Ordered List</title>
</head>
<body>

<h2>Student Registration Form</h2>


<form action="#" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>

<!-- Submit Button -->


<button type="submit">Register</button>
</form>

<h2>Registration Steps</h2>
<ol>
<li>Enter your full name in the form above.</li>
<li>Provide a valid email address.</li>
<li>Choose a secure password.</li>
<li>Click the "Register" button to submit the form.</li>
</ol>
</body>
</html>

7)Form validation using PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Form Validation</title>
<style>
.error { color: #FF0000; }
</style>
</head>
<body>

<?php
// Define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z-' ]*$/", $name)) {
$nameErr = "Only letters and white space allowed";
}
}

if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
if (!preg_match("/\b(?:http:\/\/|https:\/\/)?[a-z0-9-]+(\.[a-z0-9-]+)*(\.
[a-z]{2,})\b/i", $website)) {
$websiteErr = "Invalid URL";
}
}

if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}

if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}

// Function to sanitize form data


function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

<h2>PHP Form Validation Example</h2>


<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
Name: <input type="text" name="name" value="<?php echo $name; ?>">
<span class="error">* <?php echo $nameErr; ?></span>
<br><br>
Email: <input type="text" name="email" value="<?php echo $email; ?>">
<span class="error">* <?php echo $emailErr; ?></span>
<br><br>
Website: <input type="text" name="website" value="<?php echo $website; ?>">
<span class="error"><?php echo $websiteErr; ?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;
?></textarea>
<br><br>
Gender:
<input type="radio" name="gender" <?php if (isset($gender) &&
$gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="male")
echo "checked";?> value="male">Male
<span class="error">* <?php echo $genderErr; ?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && !$nameErr && !$emailErr && !$websiteErr
&& !$genderErr) {
echo "<h2>Your Input:</h2>";
echo "Name: $name<br>";
echo "Email: $email<br>";
echo "Website: $website<br>";
echo "Comment: $comment<br>";
echo "Gender: $gender";
}
?>

</body>
</html>
** Form Validation - PHP

8)Quiz and calculate result using js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz App</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.quiz-container {
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 600px;
padding: 20px;
}

.quiz-container h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}

.question {
margin-bottom: 20px;
}

.question h3 {
margin-bottom: 10px;
}

.question label {
display: block;
margin-bottom: 5px;
}

button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3;
}

.result {
text-align: center;
margin-top: 20px;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>JavaScript Quiz</h1>
<form id="quizForm">
<!-- Question 1 -->
<div class="question">
<h3>1. What is the capital of France?</h3>
<label><input type="radio" name="q1" value="A"> Berlin</label>
<label><input type="radio" name="q1" value="B"> Madrid</label>
<label><input type="radio" name="q1" value="C"> Paris</label>
<label><input type="radio" name="q1" value="D"> Rome</label>
</div>

<!-- Question 2 -->


<div class="question">
<h3>2. What does HTML stand for?</h3>
<label><input type="radio" name="q2" value="A"> Hyper Text Makeup
Language</label>
<label><input type="radio" name="q2" value="B"> Hyper Text Markup
Language</label>
<label><input type="radio" name="q2" value="C"> Home Tool Markup
Language</label>
<label><input type="radio" name="q2" value="D"> Hyperlink Text
Management Language</label>
</div>

<!-- Question 3 -->


<div class="question">
<h3>3. What is 2 + 2?</h3>
<label><input type="radio" name="q3" value="A"> 3</label>
<label><input type="radio" name="q3" value="B"> 4</label>
<label><input type="radio" name="q3" value="C"> 5</label>
<label><input type="radio" name="q3" value="D"> 6</label>
</div>

<button type="button" onclick="calculateResult()">Submit</button>


</form>
<div class="result" id="result"></div>
</div>

<script>
function calculateResult() {
// Correct answers
const answers = {
q1: 'C', // Paris
q2: 'B', // Hyper Text Markup Language
q3: 'B' // 4
};
let score = 0;

// Get the form


const form = document.getElementById('quizForm');
const formData = new FormData(form);

// Calculate the score


for (const [question, correctAnswer] of Object.entries(answers)) {
const userAnswer = formData.get(question);
if (userAnswer === correctAnswer) {
score++;
}
}

// Display the result


const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `You scored ${score} out of $
{Object.keys(answers).length}!`;
}
</script>
</body>
</html>

9)validation Form using JS

//Form validation using Java Script


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Form Validation</title>
<script>
function validateForm() {
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var message = "";

// Regular expression to check if name contains only letters and spaces


var nameRegex = /^[A-Za-z\s]+$/;

// Validate name: check if it's empty or contains only spaces


if (name.trim() === "") {
message += "Name must be filled out.\n";
} else if (!nameRegex.test(name) || name.trim().length === 0) {
message += "Name can only contain letters and spaces, and cannot be
just spaces.\n";
}

// Validate email: check if it's empty or in the wrong format


if (email == "") {
message += "Email must be filled out.\n";
} else if (!email.includes("@")) {
message += "Invalid email format.\n";
}

// If there are any error messages, alert them and prevent form
submission
if (message != "") {
alert(message);
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
Name: <input type="text" name="name"><br><br>
Email: <input type="text" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

10)CRUD in PHP

<?php
// Database configuration
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "gaurav";

// Establish a connection using MySQLi (Procedural Style)


$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

// DELETE: Remove a specific record


function deleteRecord($conn, $table, $condition) {
$sql = "DELETE FROM $table WHERE $condition";
if (mysqli_query($conn, $sql)) {
echo "Record deleted successfully<br>";
} else {
echo "Error deleting record: " . mysqli_error($conn) . "<br>";
}
}

// UPDATE: Update specific record(s)


function updateRecord($conn, $table, $set, $condition) {
$sql = "UPDATE $table SET $set WHERE $condition";
if (mysqli_query($conn, $sql)) {
echo "Record updated successfully<br>";
} else {
echo "Error updating record: " . mysqli_error($conn) . "<br>";
}
}

// ORDER BY: Retrieve data in a specific order


function fetchOrderedRecords($conn, $table, $columns, $orderBy) {
$sql = "SELECT $columns FROM $table ORDER BY $orderBy";
$result = mysqli_query($conn, $sql);
if ($result && mysqli_num_rows($result) > 0) {
echo "Ordered Records:<br>";
while ($row = mysqli_fetch_assoc($result)) {
print_r($row);
echo "<br>";
}
} else {
echo "No records found or error: " . mysqli_error($conn) . "<br>";
}
}

// Example Usage
deleteRecord($conn, "student", "id = 3"); // Deletes the user with id=5
updateRecord($conn, "student", "name='Ram Rahim'", "id = 2"); // Updates name for
user with id=3
fetchOrderedRecords($conn, "student", "*", "age DESC"); // Fetches all users
ordered by created_at in descending order

// Close the connection


mysqli_close($conn);
?>

11)Stack Operations

//Stack Implementation Using Java Script


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stack Operations</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input, button {
margin: 5px 0;
}
</style>
</head>
<body>

<h2>Stack Operations</h2>

<!-- Input for the value to be pushed to the stack -->


<label for="valueInput">Enter value to push:</label>
<input type="text" id="valueInput">
<button onclick="pushToStack()">Push</button>
<br>

<!-- Buttons for other stack operations -->


<button onclick="popFromStack()">Pop</button>
<button onclick="peekStack()">Peek</button>
<button onclick="printStack()">Print Stack</button>
<button onclick="getStackSize()">Get Size</button>

<br><br>

<!-- Area to display the stack status -->


<div id="stackOutput"></div>

<script>
// Stack class definition
class Stack {
constructor() {
this.items = [];
}

push(element) {
this.items.push(element);
this.display(`Pushed ${element} to the stack.`);
}

pop() {
if (this.isEmpty()) {
this.display('Stack is empty!');
return null;
}
const removedElement = this.items.pop();
this.display(`Popped ${removedElement} from the stack.`);
return removedElement;
}

peek() {
if (this.isEmpty()) {
this.display('Stack is empty!');
return null;
}
this.display(`Top element is: ${this.items[this.items.length -
1]}`);
return this.items[this.items.length - 1];
}

isEmpty() {
return this.items.length === 0;
}

size() {
this.display(`Stack size is: ${this.items.length}`);
return this.items.length;
}

printStack() {
if (this.isEmpty()) {
this.display('Stack is empty!');
} else {
this.display(`Stack elements are: ${this.items.join(', ')}`);
}
}

// Method to display messages in the HTML page


display(message) {
document.getElementById('stackOutput').innerText = message;
}
}

// Create a stack object


const stack = new Stack();
// Function to push a value to the stack
function pushToStack() {
const value = document.getElementById('valueInput').value;
if (value === '') {
stack.display('Please enter a value to push!');
} else {
stack.push(value);
document.getElementById('valueInput').value = ''; // Clear the
input field
}
}

// Function to pop a value from the stack


function popFromStack() {
stack.pop();
}

// Function to peek at the top value of the stack


function peekStack() {
stack.peek();
}

// Function to print the stack elements


function printStack() {
stack.printStack();
}

// Function to get the size of the stack


function getStackSize() {
stack.size();
}
</script>

</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy