Department of Computer Engineering
Academic Year: 2025-26
Year: SE Semester: III
Subject:JAVA lab
Name of Student: Priyangee Kha
Roll No.: 31
Moodle Id: 24102108
Date of Performance: 1 9 - 9 - 2 5
Date of Submission: 19-9-25
Name of Instructor: Prof. Kadambari
EXPERIMENT NO. 7
Aim: Develop a static website using HTML, CSS, and JavaScript.
Program:
Index.html-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>My Static Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Welcome to My Static Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Hello, Dear Student!</h2>
<p>This is a sample static website built using HTML, CSS, and JavaScript.</p>
<button onclick="showMessage()">Click Me</button>
<p id="message"></p>
</section>
</main>
<footer>
<p>Full Stack Java</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Script.js-
function showMessage() {
const message = document.getElementById("message");
message.textContent = "Thank you for clicking! Enjoy browsing ";
}
Style.css-
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}
header {
background-color: #007acc;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
margin-top: 10px;
}
nav li {
margin: 0 15px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
main {
padding: 20px;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
footer {
background-color: #eee;
text-align: center;
padding: 15px;
margin-top: 40px;
}
Output:
EXERCISE 7.2-
Aim: 1. HTML Structure:
○ Input field for new tasks.
○ "Add Task" button.
○ Unordered list to display tasks.
2. CSS Styling:
○ Style the input field, button, and list.
○ Differentiate completed tasks with a line-through effect.
3. JavaScript Functionality:
○ Handle adding new tasks.
○ Handle removing tasks.
○ Toggle completion status on task click.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 50px auto;
}
input[type="text"] {
width: 70%;
padding: 10px;
box-sizing: border-box;
}
button {
padding: 10px;
margin-left: 5px;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
padding: 10px;
background-color: #ecf0f1;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
li.completed {
text-decoration: line-through;
background-color: #bdc3c7;
}
.remove-btn {
background-color: #e74c3c;
border: none;
color: white;
padding: 5px 8px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>To-Do List</h2>
<input type="text" id="taskInput" placeholder="Enter a new
task">
<button id="addTaskBtn">Add Task</button>
<ul id="taskList"></ul>
<script>
const addTaskBtn =
document.getElementById("addTaskBtn");
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
addTaskBtn.addEventListener("click", function(){
const taskText = taskInput.value.trim();
if(taskText !== ""){
const li = document.createElement("li");
li.textContent = taskText;
const removeBtn =
document.createElement("button");
removeBtn.textContent = "Remove";
removeBtn.classList.add("remove-btn");
li.appendChild(removeBtn);
taskList.appendChild(li);
taskInput.value = "";
}
});
// Event delegation for removing and completing tasks
taskList.addEventListener("click", function(event){
const target = event.target;
if(target.classList.contains("remove-btn")){
const li = target.parentElement;
taskList.removeChild(li);
} else {
target.classList.toggle("completed");
}
});
</script>
</body>
</html>
Output:
EXERCISE 7.1-
Aim: Create an application that shows a new motivational or funny quote every time a
button is clicked.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Generator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f4f8;
color: #333;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
#quote-display {
font-size: 2.5em;
font-weight: 700;
max-width: 800px;
min-height: 100px;
margin-bottom: 30px;
transition: color 0.5s ease-in-out;
border-radius: 12px;
padding: 20px;
}
#quote-display p {
margin: 0;
line-height: 1.4;
}
.new-quote-btn {
padding: 15px 30px;
font-size: 1.2em;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.new-quote-btn:hover {
background-color: #45a049;
transform: translateY(-2px);
}
.new-quote-btn:active {
transform: translateY(0);
}
/* Responsive design for smaller screens */
@media (max-width: 768px) {
#quote-display {
font-size: 1.5em;
min-height: 80px;
}
.new-quote-btn {
padding: 12px 24px;
font-size: 1em;
}
}
</style>
</head>
<body>
<p id="quote-display">Click the button to get a quote!</p>
<button class="new-quote-btn" onclick="generateQuote()">New Quote</button>
<script>
const quotes = [
"The only way to do great work is to love what you do. - Steve Jobs",
"The future belongs to those who believe in the beauty of their dreams. - Eleanor Roosevelt",
"It is during our darkest moments that we must focus to see the light. - Aristotle Onassis",
"The best time to plant a tree was 20 years ago. The second best time is now. - Chinese Proverb",
"What you get by achieving your goals is not as important as what you become by achieving your
goals. - Zig Ziglar",
"Don't cry because it's over, smile because it happened. - Dr. Seuss",
"You miss 100% of the shots you don't take. - Wayne Gretzky",
"The greatest glory in living lies not in never falling, but in rising every time we fall. - Nelson
Mandela",
"I have not failed. I've just found 10,000 ways that won't work. - Thomas A. Edison",
"Life is what happens when you're busy making other plans. - John Lennon"
];
const colors = [
"#ff6f61", "#6b5b95", "#88b04b", "#f7cac9", "#92a8d1",
"#034f84", "#fbe122", "#d5c6e0", "#ffc72c", "#a9cce3"
];
function generateQuote() {
const quoteDisplay = document.getElementById('quote-display');
const randomIndex = Math.floor(Math.random() * quotes.length);
const randomColor = colors[Math.floor(Math.random() * colors.length)];
quoteDisplay.textContent = quotes[randomIndex];
quoteDisplay.style.color = randomColor;
}
// Generate a quote on initial load
window.onload = generateQuote;
</script>
</body>
</html>
Output:
Conclusion:
Thus we have studied that HTML, CSS, and JavaScript are the essential building blocks of
web development, each serving a unique purpose while complementing one another. HTML
provides the structure and content, CSS enhances the design and visual appeal, and
JavaScript introduces interactivity and functionality. By integrating these three technologies,
developers can create complete, dynamic, and user-friendly web applications that meet
modern design and usability standards.
