Question

You must implement a dynamic webpage the provides a basic task-list functionality. In particular, you page...

You must implement a dynamic webpage the provides a basic task-list functionality. In particular, you page should provide a user an interface to add and remove a task as well as mark a task as completed. For this version of the assignment, the tasks will be added directly in the HTML page by manipulating the DOM. Moreover, you should maintain an array that stores task details. Each task comprise of three fields:

  • task-title: which is a one-line description of the task
  • task-priority: which can be one of low-, medium- or high-priority.
  • task-status: Which can be, either completed, or pending

Requirements

Your implementation should address the following requirements:

  • Your code must be implemented using JavaScript running in the browser.
  • Your JavaScript code must be implemented in a separate file, and linked to your HTML (i.e. do not write the JavaScript code directly in the HTML)
  • Your HTML page should provide a form to allow the user to specify the details of a new task (i.e. task-title, as text; task-priority, as a select tag; and a task-status as a radio button selection), and a submit button.
  • Adding a task should append that task in an array as well as append the task-list in the HTML (i.e. append a new <li> item with the task details to the DOM). The task should display all task information, and provide additional controls to allow a user to 'remove' that task (i.e. have a remove button next to the task) and to mark the task as complete (i.e. have a mark as complete button next to the task)
  • Programmatically register an 'onsubmit' event that will handle adding a new task to the DOM.
  • Programmatically register events to handle the remove and mark as complete.
  • When removing a task, remove it both from the array and the DOM.
  • When marking a task as complete, have that task shown as strike-through, by programmatically updating its CSS styles (for example, set the text-decoration property).
  • Use HTML, CSS and Bootstrap to style your page. Your styling of the task-list page must be visually appealing and the content of the page must be relevant to this assignment.
  • Your HTML page, the CSS styling and your separate javascript file, along with any other resources you might use (ie. images) must be hosted on github-pages and be accessible through the web. Store all files for this assignment under a subfolder called "Assignment02" under your main repository.
Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Working code implemented in and appropriate comments provided for better understanding.

Here I am attaching code for these files:

  • index.html
  • todo.css
  • todo.js

index.html:

<!DOCTYPE html5>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<link rel = "stylesheet" href = "todo.css">
<script src = "todo.js"> </script>
<title>To do list</title>
</head>

<body>
<h1>To do List</h1>
<img src = "https://image.flaticon.com/icons/png/512/1567/1567073.png"/>
<ul id = "task_list">

</ul>
<form id = "new-task">New Task
<input class = "task-title" id = "task-title" autocomplete="off" autofocus placeholder="New Task" type = "text">

<label for = "task-priority">Task Priority</label>
<select name = "task-priority" id = "task-priority">
<option value="low">low</option>
<option value="med">med</option>
<option value="high">high</option>
</select>

<label for = "task-status">Task Status</label>
<input class = "task-status" name = "task-status" type = "radio" value = "pending"> Pending
<input class = "task-status" name = "task-status" type = "radio" value = "completed"> Completed


<input id = "submit" type = "submit">
</form>
</body>
</html>

todo.css:

body {
text-align: center;
background-color: azure;
}
img {
height: 200px;
width: 200px;
}
li{
padding-top:2px;
border: 2px black solid;
}

todo.js:

document.addEventListener('DOMContentLoaded', function() {
var tasks = [];
document.querySelector('#new-task').onsubmit = function (event){
event.preventDefault();
const li = document.createElement('li');
  

let task_text = document.querySelector('#task-title').value;
let task_priority = document.querySelector('#task-priority').value;
let task_status;// = document.querySelectorAll('name[task-status]').value;
let task_status_inputs = document.querySelectorAll('[name=task-status]');

for (let i = 0; i< task_status_inputs.length;i++){
if (task_status_inputs[i].checked){
task_status = task_status_inputs[i].value;
}
}

let new_task_html = `<div class = "new-task-html"> <span> ${task_text} </span> <span>| ${task_priority} </span> <span> | ${task_status} </span> </div>
  
<button class = "mark-complete"> Mark as Complete </button> <button class = "remove"> Remove </button>`;
//let new_task_priority = ` <span> ${task_priority} </span>`;
//let new_task_status = `<span> ${task_status} </span>`;

li.innerHTML = new_task_html

//li.innerHTML = document.querySelector('#task').value;
tasks.push(task_text);
document.querySelector('#task_list').append(li);
document.querySelector('#task-title').value = '';

return false;
  
}

document.addEventListener('click', function(event){
element = event.target;
if (element.className === 'remove'){
element.parentElement.remove();
//tasks.remove(element);
}
if (element.className === 'mark-complete' || element.className === 'completed'){
//document.querySelector('#task-title').strike();
element.parentElement.querySelector('.new-task-html').style.textDecoration = "line-through";
element.task_status = "completed";
}
})


});

Sample Output Screenshots:

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Please linked both files. For this assignment you need to create a ToDo list using Javascript,...
Please linked both files. For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link...
ALL CODE MUST BE IN C++ Before you begin, you must write yourself a LinkedList class...
ALL CODE MUST BE IN C++ Before you begin, you must write yourself a LinkedList class and a Node class (please name your classes exactly ​as I did here). Please follow the below specifications for the two classes. Node.cpp ● This must be a generic class. ● Should contain a generic member variable that holds the nodes value. ● Should contain a next and prev Node* as denoted here. ● All member variables should be private. ● Use public and...
Please create a python module named homework.py and implement the functions outlined below. Below you will...
Please create a python module named homework.py and implement the functions outlined below. Below you will find an explanation for each function you need to implement. When you are done please upload the file homework.py to Grader Than. Please get started as soon as possible on this assignment. This assignment has many problems, it may take you longer than normal to complete this assignment. This assignment is supposed to test you on your understanding of reading and writing to a...
Please read the article and answear about questions. Determining the Value of the Business After you...
Please read the article and answear about questions. Determining the Value of the Business After you have completed a thorough and exacting investigation, you need to analyze all the infor- mation you have gathered. This is the time to consult with your business, financial, and legal advis- ers to arrive at an estimate of the value of the business. Outside advisers are impartial and are more likely to see the bad things about the business than are you. You should...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT