IPS - 9
NAME : Jesseman Devamirtham N
REG. NO: 22BRS1112
1. Registration Form using Javascript use eldset and legend wherever
possible.
You are tasked with designing a web page for an upcoming technology
conference registration. The page should include an interactive form to
collect participant information. The form should have the following
elds:
Full Name (Text input)
Email Address (Text input with email validation)
Job Title (Text input)
Company Name (Text input)
Country (Dropdown/select input)
Workshop Selection (Radio buttons or checkboxes for selecting
preferred workshops)
Terms and Conditions (Checkbox)
Submit Button
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /
>
<title>Conference Registration</title>
<style>
body {
fi
fi
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 500px;
margin: 50px auto;
}
fieldset {
margin-bottom: 20px;
border: none;
}
legend {
font-weight: bold;
margin-bottom: 10px;
}
label {
display: flex;
align-items: center;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
select {
width: calc(100% - 10px);
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
input[type="checkbox"] {
margin-right: 5px;
}
button[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form id="registrationForm">
<fieldset>
<legend>Participant Information</legend>
<label for="fullName">Full Name:</label><br />
<input type="text" id="fullName" name="fullName" required /><br />
<label for="email">Email Address:</label><br />
<input type="email" id="email" name="email" required /><br />
<label for="jobTitle">Job Title:</label><br />
<input type="text" id="jobTitle" name="jobTitle" /><br />
<label for="company">Company Name:</label><br />
<input type="text" id="company" name="company" /><br />
<label for="country">Country:</label><br />
<select id="country" name="country">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<!-- Add more countries as needed --></select
><br />
</fieldset>
<fieldset>
<legend>Workshop Selection</legend>
<label>
<input
type="checkbox"
id="workshop1"
name="workshop"
value="Full-Stack"
/>
Full-Stack </label
><br />
<label>
<input type="checkbox" id="workshop2" name="workshop" value="AI"
/>
AI </label
><br />
<label>
<input type="checkbox" id="workshop3" name="workshop"
value="ML" />
ML </label
><br />
<label>
<input
type="checkbox"
id="workshop4"
name="workshop"
value="Robotics"
/>
Robotics </label
><br />
</fieldset>
<fieldset>
<legend>Terms and Conditions</legend>
<label>
<input type="checkbox" id="terms" name="terms" required />
I agree to the terms and conditions </label
><br />
</fieldset>
<button type="submit">Submit</button>
</form>
<script>
document
.getElementById("registrationForm")
.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the form from submitting
// Collect form data
const formData = new FormData(this);
const data = {};
formData.forEach((value, key) => {
data[key] = value;
});
// Display form data
console.log(data);
// Here you can add code to send the form data to a server or perform any
other action
});
</script>
</body>
</html>
OUTPUT:
2. Canvas and Animation using Javascript. use z-index wherever
possible
House or
Nature or
Site layout
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Animation</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Place canvas behind other content */
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function () {
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Draw grass
function drawGrass() {
ctx.fillStyle = "#4CAF50";
ctx.fillRect(0, canvas.height * 0.7, canvas.width, canvas.height);
}
// Draw sun
function drawSun() {
ctx.beginPath();
ctx.arc(canvas.width * 0.8, canvas.height * 0.2, 50, 0, Math.PI * 2);
ctx.fillStyle = "#FFD700";
ctx.fill();
}
// Draw house
function drawHouse() {
// Draw walls
ctx.fillStyle = "#F0E68C";
ctx.fillRect(
canvas.width * 0.4,
canvas.height * 0.5,
canvas.width * 0.2,
canvas.height * 0.3
);
// Draw roof
ctx.beginPath();
ctx.moveTo(canvas.width * 0.4, canvas.height * 0.5);
ctx.lineTo(canvas.width * 0.5, canvas.height * 0.35);
ctx.lineTo(canvas.width * 0.6, canvas.height * 0.5);
ctx.closePath();
ctx.fillStyle = "#8B4513";
ctx.fill();
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw grass
drawGrass();
// Draw sun
drawSun();
// Draw house
drawHouse();
}
// Start animation
animate();
});
</script>
</body>
</html>
OUTPUT:
