SHRI G.S.
INSTITUTE OF TECHNOLOGY
& SCIENCE, INDORE-452003
Skill Laboratory
Session 2024-2025
Assignment 3
JavaScript Assignment
Batch – 2nd year , B2
STUDENT NAME:
Vaibhav Rathi - 0801IT231140
COURSE NAME - SKILL LAB
INSTRUCTOR NAME - Mr. SHASHANK SHARMA
SUBMISSION DATE - 10 / 03 / 2025
Assignment 1: Interactive Landing Page
Code-<!-- Assignment 1: Interactive Landing Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Landing Page</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
transition: background 0.3s, color 0.3s;
}
.container {
margin-top: 100px;
}
button {
background:rgb(16, 16, 104);
padding: 10px 20px;
margin: 10px;
border: none;
cursor: pointer;
border-radius: 20px;
font-size: 20px;
color: rgb(231, 224, 214)
}
.theme-dark {
background: #333;
color: rgb(235, 178, 7);
}
.theme-dark button {
background: white;
color: black;
}
</style>
</head>
<body>
<div class="container">
<h1 id="welcome-text">Welcome to Our Website!</h1>
<button onclick="changeText()">Change Text</button>
<button onclick="toggleTheme()">Toggle Theme</button>
</div>
<script>
function changeText() {
document.getElementById("welcome-text").innerText = "Thank You for Visiting!";
}
function toggleTheme() {
document.body.classList.toggle("theme-dark");
}
</script>
</body></html>
`
■ Assignment 2: Digital
Clock HTML-<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #000428, #004e92);
color: white;
flex-direction: column;
}
.container {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px cyan;
}
h1 {
margin-bottom: 10px;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
}
.clock {
font-size: 50px;
font-weight: bold;
text-shadow: 0 0 20px cyan;
}
</style>
</head>
<body>
<div class="container">
<h1>Digital Clock</h1>
<div class="clock" id="clock"></div>
</div>
<script>
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('clock').innerText = ${hours}:${minutes}:${seconds};
}
setInterval(updateClock, 1000);
updateClock(); // Call once to prevent delay
</script>
</body>
</html>
Assignment 3: Form Validation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f4;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
text-align: center;
}
input {
width: 100%;
padding: 8px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
.error {
color: red;
font-size: 12px;
}
.success {
color: green;
font-weight: bold;
text-align: center;
}
button {
width: 100%;
padding: 10px;
background: blue;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: darkblue;
}
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form id="registrationForm">
<input type="text" id="name" placeholder="Enter Name">
<div class="error" id="nameError"></div>
<input type="email" id="email" placeholder="Enter Email">
<div class="error" id="emailError"></div>
<input type="password" id="password" placeholder="Enter Password">
<div class="error" id="passwordError"></div>
<input type="password" id="confirmPassword" placeholder="Confirm Password">
<div class="error" id="confirmPasswordError"></div>
<button type="submit">Register</button>
<div class="success" id="successMessage"></div>
</form>
</div>
<script>
document.getElementById("registrationForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form from submitting
// Getting input values
let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
let password = document.getElementById("password").value.trim();
let confirmPassword = document.getElementById("confirmPassword").value.trim();
let isValid = true;
// Name Validation
if (name === "") {
document.getElementById("nameError").innerText = "Name is required!";
isValid = false;
} else {
document.getElementById("nameError").innerText = "";
}
// Email Validation
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
document.getElementById("emailError").innerText = "Enter a valid email!";
isValid = false;
} else {
document.getElementById("emailError").innerText = "";
}
// Password Validation
if (password.length < 6) {
document.getElementById("passwordError").innerText = "Password must be at least 6 characters!";
isValid = false;
} else {
document.getElementById("passwordError").innerText = "";
}
// Confirm Password Validation
if (confirmPassword !== password) {
document.getElementById("confirmPasswordError").innerText = "Passwords do not match!";
isValid = false;
} else {
document.getElementById("confirmPasswordError").innerText = "";
}
// Final Check
if (isValid) {
document.getElementById("successMessage").innerText = "Form Submitted Successfully!";
} else {
document.getElementById("successMessage").innerText = "";
}
});
</script>
</body>
</html>
Assignment 4: Image Slideshow (Without JavaScript Libraries)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Food Image Slideshow</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #4b0000, #ffb84d); /* Mithai Theme */
font-family: Arial, sans-serif;
perspective: 1200px;
.carousel-container {
position: relative;
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
.carousel {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
.carousel img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
.carousel img:nth-child(1) { transform: rotateY(0deg) translateZ(350px); }
.carousel img:nth-child(2) { transform: rotateY(72deg) translateZ(350px); }
.carousel img:nth-child(3) { transform: rotateY(144deg) translateZ(350px); }
.carousel img:nth-child(4) { transform: rotateY(216deg) translateZ(350px); }
.carousel img:nth-child(5) { transform: rotateY(288deg) translateZ(350px); }
.buttons {
margin-top: 20px;
button {
padding: 12px 18px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
margin: 8px;
transition: 0.3s;
.prev {
background: #b30000; /* Royal Red */
color: white;
font-weight: bold;
border: 2px solid #ffcc66; /* Soft golden border */
border-radius: 8px;
padding: 12px 18px;
cursor: pointer;
transition: 0.3s;
.next {
background: #ffb84d; /* Golden-Yellow */
color: white;
font-weight: bold;
border: 2px solid #800000; /* Maroon border */
border-radius: 8px;
padding: 12px 18px;
cursor: pointer;
transition: 0.3s;
button:hover {
opacity: 0.8;
transform: scale(1.05);
} </style>
</head>
<body>
<h2 style="color: white; margin-bottom: 10px;"> 3D Food Slideshow </h2>
<div class="carousel-container">
<div class="carousel" id="carousel">
<img src="data:image/jpeg;" alt="Food 2">
<img src="data:image/jpegjH//Z" alt="Food 4">
<img src="data:image5>
Assignment 5: To-Do List (Basic Task Manager)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple To-Do List</title>
<style>
/* Clean & Minimal Background */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #6a11cb, #2575fc);
font-family: Arial, sans-serif;
color: white;
}
h2 {
font-size: 26px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
/* Task Input Section */
.todo-container {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
width: 350px;
text-align: center;
}
input {
width: 70%;
padding: 8px;
border-radius: 5px;
border: none;
font-size: 16px;
outline: none;
}
/* Add Task Button */
.add-btn {
background: #ffcc66;
color: #333;
font-weight: bold;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
margin-left: 5px;
transition: 0.3s;
}
.add-btn:hover {
background: #ff9900;
transform: scale(1.05);
}
/* Task List */
.task-list {
margin-top: 15px;
list-style: none;
padding: 0;
}
.task-item {
background: rgba(255, 255, 255, 0.9);
color: black;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
/* Delete Button */
.delete-btn {
background: red;
color: white;
border: none;
padding: 6px 10px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.delete-btn:hover {
background: darkred;
}</style>
</head>
<body>
<h2>Simple To-Do List</h2>
<div class="todo-container">
<input type="text" id="taskInput" placeholder="Enter a task...">
<button class="add-btn" onclick="addTask()"> Add</button>
<ul class="task-list" id="taskList"></ul>
</div>
<script>
let tasks = [];
function addTask() {
let taskInput = document.getElementById("taskInput");
let taskText = taskInput.value.trim();
if (taskText === "") {
alert(" Please enter a valid task!");
return;
}
tasks.push(taskText);
taskInput.value = "";
renderTasks();
}
function deleteTask(index) {
tasks.splice(index, 1);
renderTasks();
}
function renderTasks() {
let taskList = document.getElementById("taskList");
taskList.innerHTML = "";
tasks.forEach((task, index) => {
let li = document.createElement("li");
li.classList.add("task-item");
li.innerHTML = ${task} <button class="delete-btn" onclick="deleteTask(${index})"> </button>;
taskList.appendChild(li);
});
}
</script></body>
</html>
