todo app

by shahryar saljoughi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="styles.css" type="text/css" rel="stylesheet">
  <link rel="stylesheet" href="js/myIconFramework/styles.css">
  <title>Document</title>
</head>
<body>
  <p class="title">Todo App</p>
  <div class="container">
    <div id="rightPanel" >
      
    </div>
    <div id="leftPanel">
      <input type="text" class="stack-item" id="descriptionInput">
      <button class="stack-item button createButton" onclick="addItem()">New todo</button>
      <hr />  
      <button class="stack-item button yellowButton" onclick="makeVisibleElementsWithClass() & hideElementsWithClass('not-completed')">Completed</button>  
      <button class="stack-item button yellowButton" onclick="makeVisibleElementsWithClass() & hideElementsWithClass('completed')">Active</button>  
      <button class="stack-item button yellowButton" onclick="makeVisibleElementsWithClass()">All</button>  
    </div>
  </div>
  <!-- order of loading scripts matter!-->
  <script src="js/myIconFramework/scripts.js"></script>
  <script src="js/scripts.js"></script>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body {
  padding: 10%;
}
.container {
  display: flex;
  margin: auto;
  width: 80%;
  flex-direction: row;
}

div#leftPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

div#rightPanel {
  flex: 3;
  flex-shrink: 1;
}

input {
  padding: 5px;
}

.stack-item {
  margin: 7px 0px 7px 0px;
  display: block;
}

.createButton {
  background-color: rgba(42, 129, 89, 0.486);
  color: white;
}

.button {
  padding: 10px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
}

.yellowButton {
  background-color: rgba(160, 160, 52, 0.507);
  color: white;
}

.yellowButton:hover {
  background-color: rgb(104, 104, 7);
}

.createButton:hover {
  background-color: rgb(74, 119, 7);
}

.todo {
  padding: 10px;
  width: 80%;
  position: relative; /*this is because it has a child who wants to be absolutely positioned!. */
  margin: 10px auto 10px auto;
}
.todo:first-child {
  margin: auto;
}
.completed {
  border: rgb(4, 129, 71) solid;
  border-radius: 10px;
  background-color: rgba(4, 129, 71, 0.43);
}
.not-completed {
  border: #0000ff6b solid;
  border-radius: 10px;
  background-color: rgba(6, 110, 230, 0.47);
}

.close {
  color: red;
  font-weight: bold;
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
}
.title {
  text-align: center;
  display: block;
  
  font-size: 50px;
}

.actionsButtonContainer {
  width: 30px;
  height: 30px; 
  position: absolute;
  right: 5px;
  margin:  auto;
  top:  0px;
  z-index: 1;
}
.svg {
  width: 100%;
  height: 100%;
  padding: 0;
}

span[class*="icon"] {
  cursor: pointer;
}

.edit-icon {
  float: right;
}

.todo-edit-mode {
  background-color: rgba(209, 218, 221, 0.329);
  border: solid blue 1px;
}

.position-right {
  float: right;
}

.hidden {
  display: none;
}
@media screen and (max-width: 992px) {
  .container {
    flex-direction: column;
...

JavaScript

function createIconModule() {
  
  var icons = [
    {
      cssClass: "actions-icon",
      svgHtml: `
      <svg viewBox="0 0 300 100" class="icf-svg" >
          <circle cx="75" cy="50" r="45" stroke="black" stroke-width="5" fill="white" />
          <circle cx="150" cy="50" r="45" stroke="black" stroke-width="5" fill="white" />
          <circle cx="235" cy="50" r="45" stroke="black" stroke-width="5" fill="white" />
      </svg>  
          `
    },
    {
      cssClass: "remove-icon",
      svgHtml: `
      <svg preserveAspectRatio="none" class="icf-svg" viewBox="0 0 100 100" viewPort>
          <polyline points="30,100 60,100 70,40 20,40 30,100" style="stroke: red;stroke-width:2;color: red;fill:  red;"></polyline>
          <polygon points="14,40, 76,40 73,32 17,32" style="stroke: red;stroke-width: 3;fill: #ff9292;"></polygon>
          <rect x="42" y="29" width="6" height="6" style="stroke: red;fill:  red;"></rect>
          <line x1="33" y1="50" x2="33" y2="75" style="stroke: #ff9292; stroke-width: 3;"></line>
          <line x1="43" y1="50" x2="43" y2="75" style="stroke: #ff9292; stroke-width: 3;"></line>
          <line x1="53" y1="50" x2="53" y2="75" style="stroke: #ff9292; stroke-width: 3;"></line>
        </svg>
      `
    },
    {
      cssClass: "edit-icon",
      svgHtml: `
      <svg viewBox="15 165 115 135" style="width:  100%; height: 100%;">
        <polygon points="15,245 50,280 5,300" style="fill:rgba(42, 129, 89, 0.486);stroke:purple;stroke-width:4"></polygon>
    	  <polygon points="25,235 60,270 130,200 95,165" style="fill:rgba(42, 129, 89, 0.486);stroke:purple;stroke-width:4"></polygon>
    </svg>
    `
    }
  ]

  function updatePage() {
    for(var icon of icons) {
      var elements = document.getElementsByClassName(icon.cssClass);
      for (var element of elements) {
        // icf stands for : icon framework. icon framework is mine!
        element.innerHTML = icon.svgHtml;
      }
    }
  }

  function...