diff --git a/Kumari Anjali/layout.css b/Kumari Anjali/layout.css new file mode 100644 index 0000000..41ec4e9 --- /dev/null +++ b/Kumari Anjali/layout.css @@ -0,0 +1,208 @@ +import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + height: 100%; + background-color: rgb(124, 65, 85); + color: #333; + font-family: Lato, sans-serif; +} + + +/* image */ + +.img { + width: 500px; + height: 300px; + margin-left: 400px; +} + + +/* MAIN HEADING */ + +h1 { + font-size: 4rem; + font-weight: 50; + margin: 1rem 0 3rem; + text-align: center; + color: #fff; + font-family: 'Roboto Condensed'; +} + +.container { + display: block; + width: 600px; + margin: 100px auto 0; +} + +ul { + margin: 0; + padding: 0; +} + +li * { + float: left; +} + +li, +h3 { + clear: both; + list-style: none; + color: black; + font-size: 30px; +} + +input, +button { + outline: none; +} + + +/* INPUT SECTION */ + +#new-task { + padding: 0.5rem 1rem; + height: 50px; + outline: none; + border: none; + background-color: white; + width: 400px; + font-size: 1.15rem; + margin: 0.25rem; + border-radius: 25px; +} + + +/* EDIT SECTION */ + +.editbar { + padding: 0.5rem 1rem; + height: 50px; + outline: none; + border: none; + background-color: white; + width: 400px; + font-size: 1.15rem; + margin: 0.25rem; + border-radius: 25px; +} + +button:hover { + opacity: 0.7; + color: white; +} + + +/* ADD BUTTON */ + +.addButton { + height: 50px; + width: 100px; + border-radius: 30%; + outline: none; + border: none; + color: white; + margin: 0.25px; + font-weight: bold; + background-color: coral; + cursor: pointer; +} + + +/*DELETE BUTTON*/ + +.delete { + height: 50px; + width: 80px; + border-radius: 30%; + font-size: 1.1rem; + font-family: sans-serif; + background: none; + outline: none; + color: red; + margin: 0 10; + background-color: rgb(20, 19, 19); + border: none; + cursor: pointer; +} + + +/*EDIT BUTTON */ + +.edit { + height: 50px; + width: 80px; + border-radius: 30%; + font-size: 1.1rem; + font-family: sans-serif; + background: none; + outline: none; + color: lime; + background-color: black; + border: none; + cursor: pointer; +} + + +/* New Task */ + +label[for='new-task'] { + display: block; + margin: 0 0 20px; +} + + +/* Task list */ + +li { + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; + color: white; +} + +.checkbox { + margin: 0 10px; + position: relative; + top: 15px; + width: 20px; + border-radius: 100%; +} + +li>label { + font-size: 18px; + line-height: 40px; + width: 237px; + padding: 0 0 0 11px; +} + +li>input[type="text"] { + width: 226px; +} + + +/* Completed */ + +#completed-tasks label { + text-decoration: line-through; + color: white; +} + + +/* Edit Task */ + +ul li input[type=text] { + display: none; +} + +ul li.editMode input[type=text] { + display: block; +} + +ul li.editMode label { + display: none; +} \ No newline at end of file diff --git a/Kumari Anjali/list.html b/Kumari Anjali/list.html new file mode 100644 index 0000000..5b29bfb --- /dev/null +++ b/Kumari Anjali/list.html @@ -0,0 +1,50 @@ + + + + Todo List + + + + + +
+
+
+
+ +
+
+
+
+

To do List

+
+

+ +

+ +

Todo

+ + +

Completed

+ +
+ + + + + + diff --git a/Kumari Anjali/todo.js b/Kumari Anjali/todo.js new file mode 100644 index 0000000..191a9eb --- /dev/null +++ b/Kumari Anjali/todo.js @@ -0,0 +1,163 @@ +var Input = document.getElementById("new-task"); //Add a new task. +var addButton = document.getElementsByTagName("button")[0]; //first button +var incompleteTaskHolder = document.getElementById("incomplete-tasks"); //ul of #incomplete-tasks +var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks + + +//New task list item +var createNewTaskElement = function(taskString) { + + var listItem = document.createElement("li"); + + //input (checkbox) + var checkBox = document.createElement("input"); //checkbx + //label + var label = document.createElement("label"); //label + //input (text) + var editInput = document.createElement("input"); //text + //button.edit + var editButton = document.createElement("button"); //edit button + + //button.delete + var deleteButton = document.createElement("button"); //delete button + + label.innerText = taskString; + + + checkBox.type = "checkbox"; + editInput.type = "text"; + + editButton.innerText = "Edit"; + editButton.className = "edit"; + deleteButton.innerText = "Delete"; + deleteButton.className = "delete"; + + + + + listItem.appendChild(checkBox); + listItem.appendChild(label); + listItem.appendChild(editInput); + listItem.appendChild(editButton); + listItem.appendChild(deleteButton); + return listItem; +} + + + +var addTask = function() { + console.log("Add Task..."); + //Create a new list item with the text from the #new-task: + var listItem = createNewTaskElement(taskInput.value); + + //Append listItem to incompleteTaskHolder + incompleteTaskHolder.appendChild(listItem); + bindTaskEvents(listItem, taskCompleted); + + taskInput.value = ""; + +} + +//Edit an existing list. + +var editTask = function() { + console.log("Edit Task..."); + console.log("Change 'edit' to 'save'"); + + + var listItem = this.parentNode; + + var editInput = listItem.querySelector('input[type=text]'); + var label = listItem.querySelector("label"); + var containsClass = listItem.classList.contains("editMode"); + //If class of the parent is .editmode + if (containsClass) { + + + //label becomes the inputs value. + label.innerText = editInput.value; + } else { + editInput.value = label.innerText; + } + + //toggle + listItem.classList.toggle("editMode"); +} + + + + +//Delete task. +var deleteTask = function() { + console.log("Delete Task..."); + + var listItem = this.parentNode; + var ul = listItem.parentNode; + //Remove the parent list item from the list. + ul.removeChild(listItem); + +} + + +//Mark task completed in the checkbox +var taskCompleted = function() { + console.log("Complete Task..."); + + //Append the task list item to the #completed-tasks + var listItem = this.parentNode; + completedTasksHolder.appendChild(listItem); + bindTaskEvents(listItem, taskIncomplete); + +} + + +var taskIncomplete = function() { + console.log("Incomplete Task..."); + //Mark task as incomplete. + var listItem = this.parentNode; + incompleteTaskHolder.appendChild(listItem); + bindTaskEvents(listItem, taskCompleted); +} + + + +var Request = function() { + console.log("Request"); +} + + +//Set the click handler to the addTask function. +addButton.onclick = addTask; +addButton.addEventListener("click", addTask); +addButton.addEventListener("click", Request); + + +var bindTaskEvents = function(taskListItem, checkBoxEventHandler) { + console.log("bind list item events"); + //select ListItems children + var checkBox = taskListItem.querySelector("input[type=checkbox]"); + var editButton = taskListItem.querySelector("button.edit"); + var deleteButton = taskListItem.querySelector("button.delete"); + + + editButton.onclick = editTask; + + deleteButton.onclick = deleteTask; + + checkBox.onchange = checkBoxEventHandler; +} + +//cycle over incompleteTask list +for (var i = 0; i < incompleteTaskHolder.children.length; i++) { + + bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted); +} + + + + +//cycle over completedTasks +for (var i = 0; i < completedTasksHolder.children.length; i++) { + + bindTaskEvents(completedTasksHolder.children[i], taskIncomplete); +} \ No newline at end of file