Scribd
Upload
39 views8 pages

CS202 Assignment 2 Solution Fall 2024

Uploaded by

mohsinalimosphinali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views8 pages

CS202 Assignment 2 Solution Fall 2024

Uploaded by

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

CS202 ASSIGNMENT 2 SOLUTION FALL 2024

Due Date: 30-Dec-2024


Total Marks: 20

DO NOT COPY PASTE THE SAME

FOR CORRECT PAID SOLUTION IN REQUIRED FORMAT


WHATSAPP +923162965677

Assignment Submission Instruction:


You have to just upload .html file which will have the code of HTML, CSS, JavaScript, and
jQuery.

Assignment in any other format (extension) i.e., word, pdf, txt, or any other format will not be
accepted and will be awarded with zero marks.

SOLUTION

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Management App</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
h1 {
color: #28a745;
}
#dateTime {
font-size: 1.2rem;
margin: 10px 0;
font-weight: bold;
}
#description {
margin: 10px 0;
font-style: italic;
}
button {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
margin-bottom: 20px;
}
button:hover {
background-color: #218838;
}
ul {
list-style: none;
padding: 0;
}
li {
background-color: #e9ecef;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s;
}
li:hover {
background-color: #ced4da;
}
#taskInput {
padding: 10px;
width: 60%;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
#addTaskButton {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
}
#addTaskButton:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h1>Task Management App</h1>
<p id="description">This app helps you manage your tasks effectively.</p>
<div id="dateTime"></div>
<button id="toggleDescription">Show/Hide Paragraph</button>
<ul id="taskList">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
<li>Task 4</li>
<li>Task 5</li>
</ul>
<input type="text" id="taskInput" placeholder="Enter a new task">
<button id="addTaskButton">Add Task</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Update the date and time every second
function updateDateTime() {
const now = new Date();
const formattedTime = now.toLocaleString();
$("#dateTime").text(formattedTime);
}
setInterval(updateDateTime, 1000);

// Toggle paragraph visibility


$("#toggleDescription").click(function() {
$("#description").toggle();
});

// Add a new task


$("#addTaskButton").click(function() {
const newTask = $("#taskInput").val().trim();
if (newTask !== "") {
$("#taskList").append(`<li>${newTask}</li>`);
$("#taskInput").val("");
}
});

// Add hover effect to list items


$(document).on("mouseenter", "li", function() {
$(this).css("background-color", "#ced4da");
});

$(document).on("mouseleave", "li", function() {


$(this).css("background-color", "#e9ecef");
});
</script>
</body>
</html>

OUTPUT SCREENSHOT
REGARD - SARIM
WHATSAPP +923162965677

PLEASE NOTE:
Don't copy-paste the same answer.
Make sure you can make some changes to your solution file before
submitting copy paste solution will be marked zero.
If you found any mistake then correct yourself and inform me.
Before submitting an assignment must check your assignment requirement
file.
If you need some help or question about file and solutions feel free to ask.

FOR FREE ASSIGNMENTS SOLUTIONS VISIT

VUAnswer.pk

You might also like