Scribd
Upload
19 views23 pages

WT Practical Solution

Uploaded by

Mahipal Singh Ranawat
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
19 views23 pages

WT Practical Solution

Uploaded by

Mahipal Singh Ranawat
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

Aim: Create a form (HTML5) with the use of new semantic elements like <header>,

<footer>, <nav>, <article>.

<html>
<head>
<title>Semantic Form</title>
</head>
<body>
<header>
<h1>Contact Us</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
<article>
<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="message">Message:</label><br>
<textarea id="message" name="message"
required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</article>
<footer>
<p>&copy; 2024 Your Website. All rights reserved.</p>
</footer>
</body>
</html>
Aim: Create a form using placeholder, required autocomplete, and SVG.

<html>
<head>
<title>Form with Placeholder and SVG</title>
</head>
<body>
<form action="#" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
placeholder="Enter your username" required
autocomplete="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your password" required
autocomplete="current-password"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="Enter your email" required autocomplete="email"><br><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" placeholder="Enter
your phone number" required autocomplete="tel"><br><br>
<button type="submit">Submit</button>
</form>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
</body>
</html>
Aim: Show the basic use of CSS (Background, Borders, Font, Height, Width, Margin,
Padding)

<html>
<head>
<title>CSS Basics</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
p {
line-height: 1.6;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to CSS Basics</h1>
<p>This is a paragraph demonstrating the basic use of CSS
properties like background, borders, font, height, width, margin, and
padding.</p>
</div>
</body>
</html>
Aim: Create a webpage using Animation.
<html>
<head>
<title>Animation Demo</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 2s infinite alternate;
}

@keyframes move {
from {left: 0;}
to {left: calc(100% - 100px);}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Aim: Show the use of Flexbox, Grid layouts, and Media Queries.

<html>
<head>
<title>Layout Demo</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.container {
display: flex;
flex-direction: column;
height: 100vh;
}

header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

nav {
background-color: #666;
color: #fff;
padding: 10px;
text-align: center;
}

.main-content {
flex-grow: 1;
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

@media (min-width: 768px) {


.container {
flex-direction: row;
}

nav, .main-content {
width: 20%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<nav>
<h2>Navigation</h2>
</nav>
<div class="main-content">
<h2>Main Content</h2>
</div>
<footer>
<h3>Footer</h3>
</footer>
</div>
</body>
</html>
Aim: Show the use of Variable, Function, Condition, and Loops.

<html>
<head>
<title>JavaScript Basics</title>
<script>
// Variables
let name = "John";
let age = 30;

// Function
function greet() {
return "Hello, " + name + "!";
}

// Condition
let isAdult = age >= 18;

// Loop
let numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
</script>
</head>
<body>
<h1>JavaScript Basics</h1>
<p>Name: <span id="name"></span></p>
<p>Age: <span id="age"></span></p>
<p>Greeting: <span id="greeting"></span></p>
<p>Is Adult: <span id="isAdult"></span></p>
<p>Sum of Numbers: <span id="sum"></span></p>

<script>
// Outputting values
document.getElementById("name").textContent = name;
document.getElementById("age").textContent = age;
document.getElementById("greeting").textContent = greet();
document.getElementById("isAdult").textContent = isAdult ?
"Yes" : "No";
document.getElementById("sum").textContent = sum;
</script>
</body>
</html>
Aim: Create a responsive webpage and use a viewport.

<html>
<head>
<title>Responsive Design</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}

p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}

@media (max-width: 768px) {


p {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Design</h1>
<p>This is a paragraph demonstrating a responsive design. The
font size decreases on smaller screens.</p>
</div>
</body></html>
Aim: Create an HTML form with error handling using built-in JavaScript functions. This
form includes validation for a name, email, and password.

<html>
<head>
<title>Form with Error Handling</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm" action="#" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<span id="nameError" class="error"></span><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<span id="emailError" class="error"></span><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br>
<span id="passwordError" class="error"></span><br>

<input type="submit" value="Submit">


</form>

<script>
document.getElementById("myForm").addEventListener("submit",
function(event) {
let name = document.getElementById("name").value.trim();
let email =
document.getElementById("email").value.trim();
let password =
document.getElementById("password").value.trim();
let nameError = document.getElementById("nameError");
let emailError = document.getElementById("emailError");
let passwordError =
document.getElementById("passwordError");
let isValid = true;

if (name === "") {


nameError.textContent = "Name is required";
isValid = false;
} else {
nameError.textContent = "";
}

if (email === "") {


emailError.textContent = "Email is required";
isValid = false;
} else {
emailError.textContent = "";
}

if (password === "") {


passwordError.textContent = "Password is required";
isValid = false;
} else {
passwordError.textContent = "";
}

if (!isValid) {
event.preventDefault(); // Prevent form submission if
there are errors
}
});
</script>
</body>
</html>
Aim: Create a simple calculator using JavaScript operators.
<html lang="en">
<head>
<title>Simple Calculator</title>
</head>
<body>
<h2>Simple Calculator</h2>
<label for="num1">Number 1:</label>
<input type="text" id="num1"><br><br>
<label for="num2">Number 2:</label>
<input type="text" id="num2"><br><br>
<button onclick="add()">Add</button>
<button onclick="subtract()">Subtract</button>
<button onclick="multiply()">Multiply</button>
<button onclick="divide()">Divide</button><br><br>
<label for="result">Result:</label>
<span id="result"></span>

<script>
function add() {
let num1 =
parseFloat(document.getElementById("num1").value);
let num2 =
parseFloat(document.getElementById("num2").value);
document.getElementById("result").textContent = num1 +
num2;
}

function subtract() {
let num1 =
parseFloat(document.getElementById("num1").value);
let num2 =
parseFloat(document.getElementById("num2").value);
document.getElementById("result").textContent = num1 -
num2;
}

function multiply() {
let num1 =
parseFloat(document.getElementById("num1").value);
let num2 =
parseFloat(document.getElementById("num2").value);
document.getElementById("result").textContent = num1 *
num2;
}

function divide() {
let num1 =
parseFloat(document.getElementById("num1").value);
let num2 =
parseFloat(document.getElementById("num2").value);
if (num2 !== 0) {
document.getElementById("result").textContent = num1
/ num2;
} else {
document.getElementById("result").textContent =
"Cannot divide by zero";
}
}
</script>
</body>
</html>
Aim: Create a page using jQuery effects and also get/post.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>jQuery Effects</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fadeInBtn">Fade In</button>
<button id="fadeOutBtn">Fade Out</button>
<button id="slideToggleBtn">Slide Toggle</button>

<div id="content" style="display: none;">


<h2>jQuery Effects Demo</h2>
<p>This is a paragraph demonstrating jQuery effects.</p>
</div>

<script>
$(document).ready(function() {
$("#fadeInBtn").click(function() {
$("#content").fadeIn();
});

$("#fadeOutBtn").click(function() {
$("#content").fadeOut();
});

$("#slideToggleBtn").click(function() {
$("#content").slideToggle();
});
});
</script>
</body>
</html>
Create a HTML5 page using jQuery methods. (animate(),stop(),slide())

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>jQuery Animation Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
margin: 20px;
text-align: center;
color: white;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>

<div id="box">Click Me!</div>

<script>
$(document).ready(function(){
var $box = $('#box');

$box.click(function(){
$(this).stop().animate({
left: '+=100px',
opacity: '0.5'
}, 1000).animate({
left: '-=100px',
opacity: '1'
}, 1000);
});

$(document).on('click', function(e){
if (!$(e.target).closest('#box').length) {
$box.stop().animate({
left: '0',
opacity: '1'
}, 500);
}
});

$('#toggleButton').click(function(){
$('#toggleContent').slideToggle();
});
});
</script>

</body>
</html>
Show the use of Bootstrap Component (button), plugins, grid system.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>jQuery Animation with Bootstrap</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstra
p.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.
min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
margin: 20px;
text-align: center;
color: white;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-6">
<h1>jQuery Animation Demo</h1>
<div id="box">Click Me!</div>
</div>
<div class="col-md-6">
<h1>Bootstrap Modal</h1>
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#exampleModal">
Open Modal
</button>
</div>
</div>
</div>

<!-- Modal -->


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal
title</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
This is a Bootstrap modal example.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>

<script>
$(document).ready(function(){
var $box = $('#box');

$box.click(function(){
$(this).stop().animate({
left: '+=100px',
opacity: '0.5'
}, 1000).animate({
left: '-=100px',
opacity: '1'
}, 1000);
});

$(document).on('click', function(e){
if (!$(e.target).closest('#box').length) {
$box.stop().animate({
left: '0',
opacity: '1'
}, 500);
}
});
});
</script>

</body>
</html>
Create an Employee Registration Page in PHP and Perform CRUD operation with all
validations using JavaScript.

Index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Employee Registration</title>
<script src="validation.js"></script>
</head>
<body>
<h1>Employee Registration</h1>
<form id="employeeForm" action="process.php" method="POST"
onsubmit="return validateForm()">
<input type="hidden" id="employeeId" name="employeeId">
<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="designation">Designation:</label>
<input type="text" id="designation" name="designation"
required><br><br>

<label for="salary">Salary:</label>
<input type="number" id="salary" name="salary"
required><br><br>

<input type="submit" value="Submit">


</form>

<h2>Employee List</h2>
<div id="employeeList">
<!-- Employee list will be displayed here -->
</div>
<script>
// Function to fetch and display employee list
function fetchEmployees() {
fetch('fetch.php')
.then(response => response.text())
.then(data => {
document.getElementById('employeeList').innerHTML =
data;
});
}
fetchEmployees(); // Initial fetch

// Function to refresh employee list after CRUD operations


function refreshList() {
fetchEmployees();
}

// Function to fill the form with employee details for


editing
function fillForm(id, name, email, designation, salary) {
document.getElementById('employeeId').value = id;
document.getElementById('name').value = name;
document.getElementById('email').value = email;
document.getElementById('designation').value =
designation;
document.getElementById('salary').value = salary;
}
</script>
</body>
</html>

Fetch.php:
<?php
// Database connection
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);


if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch operation
$sql = "SELECT * FROM employees";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "Name: " . $row["name"]. " - Email: " . $row["email"]. "
- Designation: " . $row["designation"]. " - Salary: " .
$row["salary"]. " <button onclick='fillForm(".$row['id'].",
\"".$row['name']."\", \"".$row['email']."\",
\"".$row['designation']."\", ".$row['salary'].")'>Edit</button><br>";
}
} else {
echo "0 results";
}
$conn->close();
?>

Process.php:
<?php
// Database connection
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);


if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Insert operation
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (!empty($_POST["employeeId"])) {
$id = $_POST["employeeId"];
$name = $_POST["name"];
$email = $_POST["email"];
$designation = $_POST["designation"];
$salary = $_POST["salary"];

$sql = "UPDATE employees SET name='$name', email='$email',


designation='$designation', salary=$salary WHERE id=$id";

if ($conn->query($sql) === TRUE) {


echo "Record updated successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
} else {
$name = $_POST["name"];
$email = $_POST["email"];
$designation = $_POST["designation"];
$salary = $_POST["salary"];

$sql = "INSERT INTO employees (name, email, designation,


salary) VALUES ('$name', '$email', '$designation', $salary)";

if ($conn->query($sql) === TRUE) {


echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
}

$conn->close();
?>

You might also like