0% found this document useful (0 votes)
17 views8 pages

IT Workshop Exp

The document contains code for form validation using JavaScript, ensuring user inputs for name, email, phone, and password meet specific criteria. It also includes sections on shell programming in Linux, HTML and CSS basics, JavaScript interactivity, and an image slider implementation. Each section outlines experiments with corresponding tasks and code examples.

Uploaded by

adithyaraj989
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
17 views8 pages

IT Workshop Exp

The document contains code for form validation using JavaScript, ensuring user inputs for name, email, phone, and password meet specific criteria. It also includes sections on shell programming in Linux, HTML and CSS basics, JavaScript interactivity, and an image slider implementation. Each section outlines experiments with corresponding tasks and code examples.

Uploaded by

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

Form validation

<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 (name == "" || name.length < 3)


{
errorMessage += "Name must be at least 3 characters long.\n";
}

let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

if (!emailPattern.test(email))
{
errorMessage += "Enter a valid email address.\n";
}

let phonePattern = /^[0-9]{10}$/;

if (!phonePattern.test(phone))
{
errorMessage += "Enter a valid 10-digit phone number.\n";
}

let passwordPattern = /^(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{6,}$/;

if (!passwordPattern.test(password))
{
errorMessage += "Password must be at least 6 characters and include a number & a special
character.\n";
}

if (password !== confirmPassword)


{
errorMessage += "Passwords do not match.\n";
}

if (errorMessage !== "")


{
alert(errorMessage);
return false;
}

alert("Form submitted successfully!");


return true;
}
</script>
</head>
<body>
<h2>JavaScript Form Validation</h2>
<form onsubmit="return validateForm()">

<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>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword" name="confirmPassword"><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.

Linux may use one of the following most popular shells:

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 ).

Exp 7.1 Sum of two numbers


Exp 7.2 Even or Odd
Exp 7.3 Positive, Negative or Zero
Exp 7.4 Biggest of two numbers
Exp 7.5 Biggest of three numbers
Exp 7.6 Sum of 1st n numbers using while
Exp 7.7 Sum of 1st n even numbers using For

(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>

<h1>Image Slider with Buttons</h1>

<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"));

// Show the desired image


images[index].classList.add("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

You might also like