Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>ToDo List App</title>
- <style id="jsbin-css">
- tr {
- cursor: pointer;
- }
- tr:hover {
- background: #ddd;
- }
- tr.urgent {
- color: #FF0000;
- }
- tr.critical {
- color: #FFA500;
- }
- tr.normal {
- color: #008000;
- }
- tr.ifyoucan {
- color: #3987c9;
- }
- tr.checked {
- color: #808080;
- text-decoration: line-through;
- }
- </style>
- </head>
- <body>
- <input type="text" id="task" style="width: 400px;" autocomplete="off" placeholder="Add new task description..." minlength="6" maxlength="42" required>
- <select id="priority" autocomplete="off">
- <option value="Urgent">Urgent</option>
- <option value="Critical">Critical</option>
- <option value="Normal" selected="selected">Normal</option>
- <option value="If You Can">If You Can</option>
- </select>
- <input type="button" id="addRow" value="Add" onclick="addRow();" />
- <br>
- <hr>
- <br>
- <table id="table1" width="50%">
- <tbody>
- <tr class=critical onclick="markAsChecked(this);">
- <td>Attend Selection Day</td>
- <td>Critical</td>
- </tr>
- <tr class=normal onclick="markAsChecked(this);">
- <td>Register to Full Stack Web Course</td>
- <td>Normal</td>
- </tr>
- <tr class=ifyoucan onclick="markAsChecked(this);">
- <td>Go see X-Men apocalypse movie</td>
- <td>If You Can</td>
- </tr>
- </tbody>
- </table>
- <script id="jsbin-javascript">
- function addRow() {
- var task = document.getElementById("task").value;
- var priority = document.getElementById("priority").value;
- var className = document.getElementById("priority").value;
- if (task === '') {
- alert("You must write something!");
- } else if (task.length < 6) {
- alert("Minimum length is 6 characters!");
- } else {
- var table = document.getElementById("table1");
- var row = table.insertRow(0);
- var cell1 = row.insertCell(0);
- var cell2 = row.insertCell(1);
- cell1.innerHTML = task;
- cell2.innerHTML = priority;
- row.className = className.replace(/\s+/g, '').toLowerCase();
- row.setAttribute("onclick", "markAsChecked(this);");
- sortPriority();
- }
- }
- function sortPriority() {
- var table, rows, switching, i, x, y, x1, y1;
- table = document.getElementById("table1");
- switching = true;
- while (switching) {
- switching = false;
- rows = table.getElementsByTagName("TR");
- for (i = 0; i < (rows.length - 1); i++) {
- x = rows[i].getElementsByTagName("TD")[1];
- y = rows[i + 1].getElementsByTagName("TD")[1];
- if (x.innerHTML === "Urgent") {
- x1 = 1;
- } else if (x.innerHTML === "Critical") {
- x1 = 2;
- } else if (x.innerHTML === "Normal") {
- x1 = 3;
- } else {
- x1 = 4;
- }
- if (y.innerHTML === "Urgent") {
- y1 = 1;
- } else if (y.innerHTML === "Critical") {
- y1 = 2;
- } else if (y.innerHTML === "Normal") {
- y1 = 3;
- } else {
- y1 = 4;
- }
- if (x1 > y1) {
- rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
- switching = true;
- break;
- }
- }
- }
- sortTasks();
- }
- function sortTasks() {
- var table, rows, switching, i, x, y, x1, y1;
- table = document.getElementById("table1");
- switching = true;
- while (switching) {
- switching = false;
- rows = table.getElementsByTagName("TR");
- for (i = 0; i < (rows.length - 1); i++) {
- x = rows[i].getElementsByTagName("TD")[0];
- y = rows[i + 1].getElementsByTagName("TD")[0];
- x1 = rows[i].getElementsByTagName("TD")[1];
- y1 = rows[i + 1].getElementsByTagName("TD")[1];
- if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase() &&
- x1.innerHTML === y1.innerHTML) {
- rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
- switching = true;
- break;
- }
- }
- }
- }
- function markAsChecked(row){
- row.setAttribute("class", "checked");
- }
- document.getElementById("task")
- .addEventListener("keyup", function(event) {
- event.preventDefault();
- if (event.keyCode == 13) {
- document.getElementById("addRow").click();
- }
- });
- </script>
- <script id="jsbin-source-css" type="text/css">tr {
- cursor: pointer;
- }
- tr:hover {
- background: #ddd;
- }
- tr.urgent {
- color: #FF0000;
- }
- tr.critical {
- color: #FFA500;
- }
- tr.normal {
- color: #008000;
- }
- tr.ifyoucan {
- color: #3987c9;
- }
- tr.checked {
- color: #808080;
- text-decoration: line-through;
- }</script>
- <script id="jsbin-source-javascript" type="text/javascript">function addRow() {
- var task = document.getElementById("task").value;
- var priority = document.getElementById("priority").value;
- var className = document.getElementById("priority").value;
- if (task === '') {
- alert("You must write something!");
- } else if (task.length < 6) {
- alert("Minimum length is 6 characters!");
- } else {
- var table = document.getElementById("table1");
- var row = table.insertRow(0);
- var cell1 = row.insertCell(0);
- var cell2 = row.insertCell(1);
- cell1.innerHTML = task;
- cell2.innerHTML = priority;
- row.className = className.replace(/\s+/g, '').toLowerCase();
- row.setAttribute("onclick", "markAsChecked(this);");
- sortPriority();
- }
- }
- function sortPriority() {
- var table, rows, switching, i, x, y, x1, y1;
- table = document.getElementById("table1");
- switching = true;
- while (switching) {
- switching = false;
- rows = table.getElementsByTagName("TR");
- for (i = 0; i < (rows.length - 1); i++) {
- x = rows[i].getElementsByTagName("TD")[1];
- y = rows[i + 1].getElementsByTagName("TD")[1];
- if (x.innerHTML === "Urgent") {
- x1 = 1;
- } else if (x.innerHTML === "Critical") {
- x1 = 2;
- } else if (x.innerHTML === "Normal") {
- x1 = 3;
- } else {
- x1 = 4;
- }
- if (y.innerHTML === "Urgent") {
- y1 = 1;
- } else if (y.innerHTML === "Critical") {
- y1 = 2;
- } else if (y.innerHTML === "Normal") {
- y1 = 3;
- } else {
- y1 = 4;
- }
- if (x1 > y1) {
- rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
- switching = true;
- break;
- }
- }
- }
- sortTasks();
- }
- function sortTasks() {
- var table, rows, switching, i, x, y, x1, y1;
- table = document.getElementById("table1");
- switching = true;
- while (switching) {
- switching = false;
- rows = table.getElementsByTagName("TR");
- for (i = 0; i < (rows.length - 1); i++) {
- x = rows[i].getElementsByTagName("TD")[0];
- y = rows[i + 1].getElementsByTagName("TD")[0];
- x1 = rows[i].getElementsByTagName("TD")[1];
- y1 = rows[i + 1].getElementsByTagName("TD")[1];
- if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase() &&
- x1.innerHTML === y1.innerHTML) {
- rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
- switching = true;
- break;
- }
- }
- }
- }
- function markAsChecked(row){
- row.setAttribute("class", "checked");
- }
- document.getElementById("task")
- .addEventListener("keyup", function(event) {
- event.preventDefault();
- if (event.keyCode == 13) {
- document.getElementById("addRow").click();
- }
- });</script></body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement