Scribd
Upload
12 views

IP Assignment No 1 AY - 2023 24

The document describes an assignment to build a task management web application using HTML5, CSS3, and Bootstrap. It provides the requirements, including allowing users to add new tasks, mark tasks as completed, and provide edit and delete options. It then includes the full HTML, CSS, and JavaScript code to build the application. The code features forms to add tasks, dynamically generated lists to display tasks and completed tasks, and functions to handle interactions like adding, completing, editing, and deleting tasks.

Uploaded by

only.moviewebseries123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
12 views

IP Assignment No 1 AY - 2023 24

The document describes an assignment to build a task management web application using HTML5, CSS3, and Bootstrap. It provides the requirements, including allowing users to add new tasks, mark tasks as completed, and provide edit and delete options. It then includes the full HTML, CSS, and JavaScript code to build the application. The code features forms to add tasks, dynamically generated lists to display tasks and completed tasks, and functions to handle interactions like adding, completing, editing, and deleting tasks.

Uploaded by

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

Academic Year: 2023-24 Semester: V

Class / Branch: TE IT Name: Sarvesh Suhas Takle


Subject: IP Lab Rollno: 56
Moodle id: 22204006

Lab Outcomes (LO):

LO1 Make use of appropriate HTML tags to develop a webpage

LO2 Identify and apply the appropriate CSS tags to format data on
webpage

LO3 Develop responsive webpages using Bootstraps concept.

LO4 Apply concepts of JavaScript to develop interactive webpages.

LO5 Develop front end application using react.

LO6 Construct back end applications using Node.js and Express

Assignment No 01
Q.1. Design and develop Tak Management web application with help of HTML5, CSS3 &
Bootstrap. (BL6, LO1, LO2, LO3)

The application must satisfy the following points.

1. User should be able to add new task which should be listed under to do list.
2. After completion the task should be added to Completed Task Catogory.
3. Provide edit and delete option for each task added by user.

Code:

 HTML code :-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Manager</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Task Manager</h1>
<form id="task-form">
<input type="text" id="task-input" placeholder="Enter task">
<button type="submit" id="add-task-btn">Add Task</button>
</form>
<div id="task-list">
<h2>Tasks</h2>
<ul id="tasks">
<!-- Tasks will be dynamically added here -->
</ul>
</div>
<div id="completed-tasks">
<h2>Completed Tasks</h2>
<ul id="completed-tasks-list">
<!-- Completed tasks will be dynamically added here -->
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

 CSS code :-

/* Global Styles */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 20px;
}

h2 {
margin-top: 30px;
}

/* Form Styles */
#task-form {
display: flex;
margin-bottom: 20px;
}

#task-input {
flex: 1;
padding: 10px;
font-size: 16px;
}

#add-task-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}

/* Task List Styles */


#task-list {
background-color: #fff;
padding: 20px;
border-radius: 5px;
}

#tasks {
list-style-type: none;
padding: 0;
}

.task-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}

.task-item:last-child {
border-bottom: none;
}
.task-item .task-text {
flex: 1;
}

.task-item .task-actions {
display: flex;
gap: 10px;
}

.task-item .task-actions button {


padding: 5px 10px;
font-size: 14px;
border: none;
cursor: pointer;
}

/* Completed Tasks Styles */


#completed-tasks {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

#completed-tasks-list {
list-style-type: none;
padding: 0;
}

.completed-task-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}

.completed-task-item:last-child {
border-bottom: none;
}

.completed-task-item .task-text {
flex: 1;
}

.completed-task-item .task-actions {
display: flex;
gap: 10px;
}
.completed-task-item .task-actions button {
padding: 5px 10px;
font-size: 14px;
border: none;
cursor: pointer;
background-color: #ccc;
color: #fff;
}

 JavaScript code :-

// Task Manager
// Variables
const taskForm = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const tasksList = document.getElementById('tasks');
const completedTasksList = document.getElementById('completed-tasks-list');

// Event Listeners
taskForm.addEventListener('submit', addTask);
tasksList.addEventListener('click', taskActions);
completedTasksList.addEventListener('click', taskActions);

// Functions
function addTask(e) {
e.preventDefault();
const taskText = taskInput.value;
if (taskText !== '') {
const taskItem = document.createElement('li');
taskItem.classList.add('task-item');
taskItem.innerHTML = `
<span class="task-text">${taskText}</span>
<div class="task-actions">
<button class="mark-complete-btn">Mark as Complete</button>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</div>
`;
tasksList.appendChild(taskItem);
taskInput.value = '';
}
}

function taskActions(e) {
const target = e.target;
const taskItem = target.closest('.task-item');
if (target.classList.contains('mark-complete-btn')) {
const completedTaskItem = taskItem.cloneNode(true);
completedTaskItem.classList.remove('task-item');
completedTaskItem.classList.add('completed-task-item');
completedTasksList.appendChild(completedTaskItem);
taskItem.remove();
} else if (target.classList.contains('edit-btn')) {
const taskText = taskItem.querySelector('.task-text');
const newTaskText = prompt('Enter new task text:', taskText.textContent);
if (newTaskText !== null) {
taskText.textContent = newTaskText;
}
} else if (target.classList.contains('delete-btn')) {
taskItem.remove();
}
}

Output :-

 Clean UI
 ADD Tasks

 Tasks to Complete
 Edit the Task

 Edited Task
 Mark as Complete after Completing it

 Delete Task

Department of Information Technology | APSIT

You might also like