IT 1507 Web Technology Lab Department of Information Technology 2023-2024
EX No: 3 Client Side Scripts for Validating Web Form Controls using DHTML
Date:
AIM:
To write a Client-Side script for validating web form controls using DHTML.
ALGORITHM / DESCRIPTION:
Step 1: Set up your HTML form
Create an HTML form with the required input fields and a submit button. Assign unique IDs
to each input element that needs validation.
Step 2: Define the validation function
Create a JavaScript function that will be called when the form is submitted. This function
will validate the form controls and display error messages if necessary.
Step 3: Add form submission event listener
Add an event listener to the form element, which will call the validateForm() function when
the form is submitted.
Step 4: Style the error messages (optional)
If you want to style the error messages, you can add CSS styles to display them in a more
visually appealing way.
Step 5: Test your form validation
Save your HTML file and open it in a web browser. Try submitting the form without filling
in the required fields, and you should see the error messages being displayed.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.head{
text-align: center;
background-color: rgb(121, 119, 218);
border: 3px groove purple;
}
.main{
border: 3px solid #5f5f5f;
margin: 5% 10%;
padding: 20px;
}
tr{
padding:10px;
}
td{
padding:10px;
St. Joseph’s College Of Engineering 7
IT 1507 Web Technology Lab Department of Information Technology 2023-2024
}
.but{
border: 2px inset rgb(65, 49, 209);
border-radius: 30px;
width:100px;
height:30px;
background-color: rgb(121, 119, 218);
}
function email()
{
def.innerText="";
var name3=document.getElementById("mailid").value;
if(name3.length<1)
{
def.innerText="filled should be filled";
f1=0;
}
var re2=new RegExp("^[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$");
if(!re2.test(name3))
{
def.innerText="invalid id";
f1=0;
}
}
</style>
</head>
<body>
<header class="head">
<h2>Registration form</h2>
</header>
<div class="main">
<center>
<table>
<tr>
<td>User name:</td>
<td><input type="text" id="uname" placeholder="enter user name" required/></td>
</tr><br>
<tr></tr>
<tr>
<td>email:</td>
<td><input type="email" id="email" placeholder="enter email" required/></td>
</tr><tr></tr>
<tr>
<td>password:</td>
St. Joseph’s College Of Engineering 8
IT 1507 Web Technology Lab Department of Information Technology 2023-2024
<td><input type="password" id="password" placeholder="enter password"
required/></td>
</tr><tr></tr>
<tr>
<td>phone no:</td>
<td><input type="number" id="number" placeholder="enter phone no" required/></td>
</tr><tr></tr>
<tr>
<td>select domain:</td>
<td>
<select name="cars" id="domain">
<option value="">please select anyone</option>
<option value="front-end">front-end</option>
<option value="back-end">back-end</option>
<option value="machine-learning">machine-learning</option>
<option value="cloud">cloud</option>
</select></td>
</tr>
</table><br>
<button class="but" onclick="submit()">Submit</button><br>
</center>
</div>
<script>
function submit(){
var name=document.getElementById("uname").value;
var email=document.getElementById("email").value;
var pass=document.getElementById("password").value;
var num=document.getElementById("number").value;
var domain=document.getElementById("domain").value;
document.write("<center><h4> User Name="+name+"<br>email="+email+"<br>phone
number="+num+"<br>domain="+domain+"<br>Detials are stored please check
it!</h2></center>");
window.alert(name+",thankyou for your response")
}
</script>
</body>
</html>
St. Joseph’s College Of Engineering 9
IT 1507 Web Technology Lab Department of Information Technology 2023-2024
OUTPUT:
RESULT:
St. Joseph’s College Of Engineering 10
IT 1507 Web Technology Lab Department of Information Technology 2023-2024
EX No: 4 Design Image Slide Show and Digital clock using Javascript and DOM
Date:
AIM:
To design Image Slide Show and digital clock using Javascript and DOM.
ALGORITHM / DESCRIPTION:
Step 1: Set up the HTML structure
Define elements for the slideshow container, images, and clock display.
Step 2: Create the CSS for styling
Style your slideshow container and clock using CSS. Save this in a file named “styles.css”.
Step 3: Implement the JavaScript logic
Create a JavaScript file named “script.js” and implement the logic for the slideshow and
digital clock.
Image Slideshow: A slideshow container displays images one after another. The images will
transition every 2 seconds (as specified in the setTimeout function).
Digital Clock: A digital clock displays the current time. The time will update every second
(setTimeout function), and the hours, minutes, and seconds changing in real-time.
Step 4: Link everything together
Make sure your HTML file references the CSS file and JavaScript file you created.
Step 5: Add images
Replace "image1.jpg", "image2.jpg", and "image3.jpg" with the actual paths of your images.
St. Joseph’s College Of Engineering 11
IT 1507 Web Technology Lab Department of Information Technology 2023-2024
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
/* Style for the slideshow container */
.slideshow-container {
max-width: 600px;
position: relative;
margin: auto;
}
/* Hide all slides by default */
.mySlides {
display: none;
}
/* Style for the digital clock */
#clock {
font-size: 24px;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides">
<img src="image1.jpg" style="width:100%">
</div>
St. Joseph’s College Of Engineering 12
IT 1507 Web Technology Lab Department of Information Technology 2023-2024
<div class="mySlides">
<img src="image2.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="image3.jpg" style="width:100%">
</div>
</div>
<div id="clock"></div>
<script>
// Slideshow script
var slideIndex = 0;
showSlides();
function showSlides() {
var slides = document.getElementsByClassName("mySlides");
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
// Digital clock script
function updateClock() {
var now = new Date();
var hours = now.getHours();
St. Joseph’s College Of Engineering 13
IT 1507 Web Technology Lab Department of Information Technology 2023-2024
var minutes = now.getMinutes();
var seconds = now.getSeconds();
// Add leading zeros if needed
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
var currentTime = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock").textContent = currentTime;
setTimeout(updateClock, 1000); // Update every second
}
updateClock(); // Initial call to start the clock
</script>
</body>
</html>
OUTPUT:
RESULT:
St. Joseph’s College Of Engineering 14
IT 1507 Web Technology Lab Department of Information Technology 2023-2024
EX No: 5 Develop an online quiz system using Javascript and DOM
Date:
AIM:
To design and develop a web application to implement an online quiz system using
Javascript and DOM.
ALGORITHM / DESCRIPTION:
Step 1: Project Setup:
Create a project directory and organize your files. You'll need HTML, CSS, and JavaScript
files. Here's a basic structure:
- index.html
- style.css
- script.js
Step 2: HTML Structure:
Set up the basic HTML structure for your quiz application. Define containers for questions,
options, and buttons.
Step 3: CSS Styling:
Style your quiz interface using CSS to make it visually appealing and user-friendly.
Step 4: JavaScript Logic:
Implement the quiz logic using JavaScript and the DOM.
St. Joseph’s College Of Engineering 15
