IT Workshop Exp
IT Workshop Exp
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm()
{
let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
let phone = document.getElementById("phone").value.trim();
let password = document.getElementById("password").value.trim();
let confirmPassword = document.getElementById("confirmPassword").value.trim();
let errorMessage = "";
if (!emailPattern.test(email))
{
errorMessage += "Enter a valid email address.\n";
}
if (!phonePattern.test(phone))
{
errorMessage += "Enter a valid 10-digit phone number.\n";
}
if (!passwordPattern.test(password))
{
errorMessage += "Password must be at least 6 characters and include a number & a special
character.\n";
}
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Aa
Exp No.7
Shell Programming in Linux(bash)
A Linux shell is a facility that allows the user to communicate directly with the kernel in the human -
readable form. It translates command-line instructions. The default Linux shell is the Bourne Again SHell
(BASH).
Computer understand the language of O's and l's called binary language, In early days of computing,
instruction are provided using binary language, which is difficult for all of us, to read and write. So in O/s
there is special program called Shell. Shell accepts your instruction or commands in English and translate
it into computers native binary language. This is what shell does for us.
Its environment provided for user interaction. Shell is a command language interpreter that executes
commands read from the standard input device (keyboard) or from a file.
Any of the above shell reads command from user (via Keyboard or Mouse) and tells Linux O/s what users
want. If we are giving commands from keyboard it is called command line interface ( Usually in-front of
$ prompt, This prompt is depend upon your shell and Environment that you set or by your System
Administrator, therefore you may get different prompt ).
(right side of the record : Paste code, Left side of the record : write output)
Exp No.8
HTML, CSS
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are fundamental technologies for
web development. HTML provides the structure of a webpage, while CSS controls its presentation and
styling.
Exp No 8.1 Webpage
Exp No 8.2 Table
Exp No 8.3 Registration Form
Exp No 8.4 CSS : inline CSS, Internal CSS, External CSS
(right side of the record : Paste code, Left side of the record : paste output)
Exp No. 9
Javascript
JavaScript (JS) is a powerful, lightweight, and versatile programming language used to make web pages
interactive. It is a client-side language (executed in the browser) but can also be used on the server
(Node.js).
Exp No 9.1 Sum of two numbers
Exp No 9.2 Form Validation
(right side of the record : Paste code, Left side of the record : paste output)
Exp No 10
Image Slider
(right side of the record : Paste code, Left side of the record : paste output)
Code
<html>
<head>
<title>Image Slider with Buttons</title>
<style>
body
{
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
.slider
{
width: 600px;
height: 300px;
margin: 20px auto;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
}
.slider img
{
width: 100%;
height: 100%;
display: none; /* Hide all images by default */
}
.slider img.active
{
display: block; /* Show only the active image */
}
.buttons
{
margin-top: 10px;
}
.buttons button
{
padding: 10px 20px;
margin: 0 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slider">
<img src="C:\Users\user\OneDrive\Desktop\backup april 2025\image1.png" alt="1">
<img src="C:\Users\user\OneDrive\Desktop\backup april 2025\image2.png" alt="2">
<img src="C:\Users\user\OneDrive\Desktop\backup april 2025\image3.png" alt="3">
</div>
<div class="buttons">
<button onclick="showPrevious()">Previous</button>
<button onclick="showNext()">Next</button>
</div>
<script>
let currentIndex = 0;
const images = document.querySelectorAll(".slider img");
function showImage(index)
{
// Hide all images
images.forEach(img => img.classList.remove("active"));
function showNext() {
currentIndex = (currentIndex + 1) % images.length; // Loop to the first image
showImage(currentIndex);
}
function showPrevious() {
currentIndex = (currentIndex - 1 + images.length) % images.length; // Loop to the last image
showImage(currentIndex);
}
</script>
</body>
</html>
Output