{"id":9052,"date":"2022-10-08T18:02:00","date_gmt":"2022-10-08T17:02:00","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=9052"},"modified":"2023-10-28T23:48:54","modified_gmt":"2023-10-28T22:48:54","slug":"js-html-and-css-todo-list-saves-list-to-json-file","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/js-html-and-css-todo-list-saves-list-to-json-file\/","title":{"rendered":"JS, HTML and CSS Todo List – Saves List to JSON File"},"content":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

\"\"<\/p>\n

This Portfolio Project was built on exercises in Kyle Cook's WEBDev JS and CSS courses:<\/p>\n

https:\/\/www.youtube.com\/c\/WebDevSimplified<\/a><\/p>\n

He also has a Calculator and Clock project, with code, that was used and modified a little to fit inside the main page using Iframes.<\/p>\n

Clock<\/a><\/p>\n

Calc<\/a><\/p>\n

The basic Todo List HTML and CSS from Kyle's courses - (without the complete JS for saving the list permanently to a JSON array file of K:V pairs, that was written for me (as I've just started learning JS, HTML and CSS) by Joe Moore of www.databasejoe.com<\/a> ) - is:<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>Simple List<\/title>\r\n<link rel=\"stylesheet\" href=\"styles.css\">\r\n<script src=\"script.js\" defer><\/script>\r\n<\/head>\r\n<body>\r\n<div id=\"list\">\r\n\r\n<\/div>\r\n\r\n<form id=\"new-item-form\">\r\n<label for=\"item-input\">New Item<\/label>\r\n<input type=\"text\" id=\"item-input\">\r\n<button type=\"submit\">Add Item<\/button>\r\n<\/form>\r\n<\/body>\r\n<\/html><\/pre>\n
\/\/ 1. Select all elements\r\nconst form = document.querySelector(\"#new-item-form\")\r\nconst list = document.querySelector(\"#list\")\r\nconst input = document.querySelector(\"#item-input\")\r\n\r\n\/\/ 2. When I submit the form add a new element\r\nform.addEventListener(\"submit\", e => {\r\n  e.preventDefault()\r\n\r\n  \/\/ 1. Create a new item\r\n  const item = document.createElement(\"div\")\r\n  item.innerText = input.value\r\n  item.classList.add(\"list-item\")\r\n\r\n  \/\/ 2. Add that item to the list\r\n  list.appendChild(item)\r\n\r\n  \/\/ 3. Clear input\r\n  input.value = \"\"\r\n\r\n  \/\/ 4. Setup event listener to delete item when clicked\r\n  item.addEventListener(\"click\", () => {\r\n    item.remove()\r\n  })\r\n})<\/pre>\n
.list-item {\r\n  cursor: pointer;\r\n  width: min-content;\r\n}\r\n\r\n.list-item:hover {\r\n  color: red;\r\n  text-decoration: line-through;\r\n}<\/pre>\n
My additions for saving the List and colorising the page, with the Iframes :<\/p>\n
index.html:<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <title>Todo List<\/title>\r\n  <script type=\"text\/javascript\"><\/script>\r\n  <link rel=\"stylesheet\" href=\"todo.css\">\r\n<script defer=\"\" src=\"todo.js\"><\/script> \r\n<\/head>\r\n  <body>\r\n    \r\n    <section class=\"section-one\">\r\n      <div id=\"frame\"><iframe id=\"scaled-frame\" src=\"Calc\/calc.html\"><\/iframe><\/div>\r\n      <h1 class=\"h1\">To Do List<\/h1>\r\n      <div><iframe id=\"scaled-frame\" src=\"Clock\/clock.html\"><\/iframe><\/div>\r\n    <\/section>\r\n\r\n    <section class=\"section-two\">\r\n      <form id=\"new-item-form\">\r\n        <div id=\"list\"><\/div>\r\n        <label class=\"new-item\" for=\"item-input\">New Item:<\/label>\r\n        <input id=\"item-input\" type=\"text\">\r\n        <button class=\"btn\" id=\"list-item\" type=\"submit\">Add Item To List<\/button>\r\n        <button id=\"save\" type=\"button\">Save List<\/button>\r\n      <\/form>\r\n    <\/section>\r\n\r\n  <\/body>\r\n<\/html><\/pre>\n
CSS:<\/p>\n
* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  font-family: cursive;\r\n  color: white;\r\n  background: linear-gradient(to right, rgb(31, 33, 34) , rgb(106, 110, 110));   \r\n}\r\n\r\n.section-one {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n\/* iframes for calc and clock*\/\r\n.frame {\r\n  width: 480px;\r\n  height: 500px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* iframes for calc and clock*\/\r\n#scaled-frame {\r\n  width: 330px;\r\n  height: 320px;\r\n  border: 0px;\r\n}\r\n\r\n\/* ToDo text *\/\r\n.h1 {\r\n  font-size: 4rem;\r\n  justify-content: center;\r\n  padding: 100px;\r\n}\r\n\r\n\/* input form and list add\/save buttons *\/\r\n.section-two {\r\n  font-family: 'Courier New';\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n#item-input {\r\n  background-color: #CCC;\r\n  font-family: 'Courier New';\r\n  padding: 0;  \r\n}\r\n\r\n.new-item {\r\n  font-family: 'Courier New';\r\n  border: 2px solid black;\r\n  margin: 20px;\r\n  padding: 4px;\r\n  font-size: 1.0rem;\r\n  color: white;\r\n  margin: 10px;\r\n  background-color: grey;\r\n  border-radius: 1000px;\r\n}\r\n\r\n.new-item:hover {\r\n  cursor: pointer;\r\n  background-color: #171717;\r\n}\r\n\r\n\r\n\r\n.list-item {\r\n  font-family: cursive;\r\n  margin-bottom: 10px;\r\n  margin-top: 10px;\r\n  margin-left: 105px;\r\n  color: yellow;\r\n  justify-content: center;\r\n  width: max-content;\r\n}\r\n\r\n.list-item:hover {\r\n  color: red;\r\n  text-decoration: line-through;\r\n  cursor: pointer;\r\n}\r\n\r\n.btn {\r\n  font-family: 'Courier New';\r\n  font-size: 1.0rem;\r\n  color: white;\r\n  padding: 4px;\r\n  margin: 10px;\r\n  background-color: grey;\r\n  border-radius: 1000px;\r\n}\r\n\r\n.btn:hover {\r\n  cursor: pointer;\r\n  background-color: #171717;\r\n}\r\n\r\n#save {\r\n  font-family: 'Courier New', Courier, monospace;\r\n  font-size: 1.0rem;\r\n  display: flex;\r\n  margin-top: 20px;\r\n  border-radius: 10000px;\r\n  font-size: 1.0rem;\r\n  color: white;\r\n  margin: 10px;\r\n  background-color: grey;\r\n  border-radius: 1000px;\r\n}\r\n\r\n#save:hover {\r\n  cursor: pointer;\r\n  background-color: #171717;\r\n}\r\n<\/pre>\n
original messy JS:<\/p>\n
\/\/ Program Plan:\r\n\/\/ 1: Select All Elements\r\nconst form = document.querySelector(\"#new-item-form\");\r\nconst input = document.querySelector(\"#item-input\");\r\nconst list = document.querySelector(\"#list\");\r\nconst items = [];\r\nconst saveLink = document.getElementById(\"save\");\r\nsaveLink.addEventListener(\"click\", () => {\r\n  const jsonObj = { items: items };\r\n  const jsonString = JSON.stringify(jsonObj);\r\n  saveFileAsDialog(jsonString, \"items.json\");\r\n});\r\n\r\n\/\/ 2: When I submit form, add new item to the list\r\nfetchItemsFromArray();\r\nform.addEventListener(\"submit\", (e) => {\r\n  e.preventDefault();\r\n\r\n  console.log(input.value);\r\n\r\n  \/\/ 1: Create new item\r\n  writeToItemsJsonFile(input.value);\r\n\r\n  \/\/ const item = document.createElement(\"div\");\r\n  \/\/ item.innerText = input.value;\r\n  \/\/ item.classList.add(\"list-item\");\r\n  \/\/ \/\/ console.log(item) Once checked working, remove log.\r\n\r\n  \/\/ \/\/ 2: Add item to list:\r\n  \/\/ \/\/   Check it works and shows in browser:\r\n  \/\/ list.appendChild(item);\r\n\r\n  \/\/ 3: Clear input after item added by setting input to empty string:\r\n  input.value = \"\";\r\n\r\n  \/\/ 4: Setup event listener to delete clicked item:\r\n});\r\n\r\nfunction writeToItemsJsonFile(value) {\r\n  console.log(\"This is writing to file\" + value);\r\n  \/\/ append to items array\r\n  items.push(value);\r\n  const jsonObj = { items: items };\r\n  const jsonString = JSON.stringify(jsonObj);\r\n\r\n  saveFileAsDialog(jsonString, \"items.json\");\r\n\r\n  \/\/write to live document page\r\n  const el = document.createElement(\"div\");\r\n  el.innerText = value;\r\n  el.classList.add(\"list-item\");\r\n  \/\/ console.log(item) Once checked working, remove log.\r\n\r\n  \/\/ 2: Add item to list:\r\n  \/\/   Check it works and shows in browser:\r\n  list.appendChild(el);\r\n}\r\n\r\nfunction saveFileAsDialog(data, filename) {\r\n  \/\/ data is the string type, that contains the contents of the file.\r\n  \/\/ filename is the default file name, some browsers allow the user to change this during the save dialog.\r\n\r\n  \/\/ Note that we use octet\/stream as the mimetype\r\n  \/\/ this is to prevent some browsers from displaying the\r\n  \/\/ contents in another browser tab instead of downloading the file\r\n  var blob = new Blob([data], { type: \"octet\/stream\" });\r\n\r\n  \/\/BLOB = Binary Large Object\r\n  if (window.navigator.msSaveBlob) {\r\n    window.navigator.msSaveBlob(blob, filename);\r\n  } else {\r\n    \/\/Everything else\r\n    var url = window.URL.createObjectURL(blob);\r\n    var a = document.createElement(\"a\");\r\n    document.body.appendChild(a);\r\n    a.href = url;\r\n    a.download = filename;\r\n\r\n    setTimeout(() => {\r\n      \/\/setTimeout hack is required for older versions of Safari\r\n\r\n      a.click();\r\n\r\n      \/\/Cleanup\r\n      window.URL.revokeObjectURL(url);\r\n      document.body.removeChild(a);\r\n    }, 1);\r\n  }\r\n}\r\n\r\nfunction fetchItemsFromArray() {\r\n  console.log(\"fetch items array\");\r\n  fetch(\"items.json\")\r\n    .then((response) => response.json())\r\n    .then((json) => itemsloop(json));\r\n}\r\n\r\nfunction itemsloop(json) {\r\n  json.items.forEach((item) => htmlStyle(item));\r\n}\r\n\r\nfunction htmlStyle(item) {\r\n  createJsonObject(item);\r\n\r\n  const el = document.createElement(\"div\");\r\n  el.innerText = item;\r\n  el.classList.add(\"list-item\");\r\n  \/\/ console.log(item) Once checked working, remove log.\r\n\r\n  \/\/ 2: Add item to list:\r\n  \/\/   Check it works and shows in browser:\r\n  list.appendChild(el);\r\n\r\n  el.addEventListener(\"click\", (e) => {\r\n    el.remove(); \/\/ Remove from DOM list\r\n\r\n    \/\/ Remove item from array\r\n    const itemToRemove = e.target.innerHTML;\r\n    items.pop(itemToRemove);\r\n  });\r\n}\r\n\r\nfunction createJsonObject(itemToAdd) {\r\n  items.push(itemToAdd);\r\n}\r\n<\/pre>\n
The 70's calculator font is \"calculator.ttf\" from the web.<\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
<\/path><\/svg><\/i> \"Loading\"<\/p>\n
<\/div>\n
This Portfolio Project was built on exercises in Kyle Cook's WEBDev JS and CSS courses: https:\/\/www.youtube.com\/c\/WebDevSimplified He also has a Calculator and Clock project, with code, that was used and modified a little to fit inside the main page using Iframes. Clock Calc The basic Todo List HTML and CSS from Kyle's courses - (without ...\u00a0 JS, HTML and CSS Todo List – Saves List to JSON File<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-9052","post","type-post","status-publish","format-standard","hentry","category-post"],"a3_pvc":{"activated":true,"total_views":3,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/comments?post=9052"}],"version-history":[{"count":12,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9052\/revisions"}],"predecessor-version":[{"id":10081,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9052\/revisions\/10081"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=9052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=9052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=9052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}