Shopping list Homework

Change class name on click in jQuery

by Adelina Lipsa

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Shopping list</title>
    <link href="shopping_list.css" rel="stylesheet" type="text/css">
</head>

<body>
        <div id="container">
            <div id="shopping_list">
                <h2>YOUR SHOPPING LIST</h2>
                <form>
                <input type="text" id="item" onkeypress="return entsub(event,this.form)">
                <button onclick="addItem()" id="addButton" type="button" onkeypress="if(event.keyCode==13){SearchKeyword('/pages/results.aspx','SearchBox');return false;};">Add item</button>
                </form>
                <button onclick="sortAsc()" class="sort_asc">Sort Asc</button>
                <button onclick="sortDesc()" class="sort_desc">Sort Desc</button>
                <table id="table">
                    <thead id="thead"></thead> 
                    <tbody id="tbody"></tbody>
                </table>
    </div>
    </div>
    <script src="shopping_list.js"></script>
</body>

</html>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #4abdac;
  min-width: 250px;
}

h2 {
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#container {
  background-color: #FC4A1A;
  max-width: 500px;
  height: 100%;
  margin: auto;
  color: #f7b733;
  border-radius: 25px;
  padding: 15px;
}

#item {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

#addButton,
.sort_asc,
.sort_desc {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.sort_desc:hover {
  background-color: #bbb;
}

.sort_asc:hover {
  background-color: #bbb;
}

#addButton:hover {
  background-color: #bbb;
}

td:hover {
  background: #ddd;
  transition: 500ms;
}

table {
  clear: left;
  word-break: break-all;
}

.bought {
  text-decoration: line-through;
}

JavaScript

function addItem() {
  var list = document.getElementById("item").value;
  var table = "<tr><td id='listedItem'>" + list + "</td><td><button onclick='bought()' id='bought'>Mark as bought</button></td>";
  document.getElementById('thead').innerHTML = "<tr><td><b>Item description<b><td><b>Action</b></td></tr>";
  document.getElementById('tbody').innerHTML += table;
}

/*function bought(element) {
  let prevEl = $(element).prev();
  if (prevEl.hasClass('bought')) {
    prevEl.removeClass('bought')
  } else {
    prevEl.addClass('bought')
  }
}
*/

$("td:button").click(function() {
  $('#bought').wrap("<strike>");
  //$(this).css("text-decoration", "line-through");
});



function sortAsc() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("table");
  switching = true;

  while (switching) {
    switching = false;
    rows = table.rows;

    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[0];
      y = rows[i + 1].getElementsByTagName("td")[0];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

function sortDesc() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("table");
  switching = true;
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[0];
      y = rows[i + 1].getElementsByTagName("td")[0];
      if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}