added other units

2025-11-16 22:54:34 -05:00
parent 5bd461229a
commit ca92b603be
46 changed files with 2779 additions and 0 deletions
--- a/2/README.html
+++ b/2/README.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Todo List</title>
+  <link rel="stylesheet" href="stylesheets/style.css">
+  <link rel="stylesheet" href="stylesheets/lib/dismissible.css">
+  <link href="stylesheets/lib/lineicons.css" rel="stylesheet"> <!--Lineicons not working when used directly. Using below cdn instead. -->
+  <link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
+  <script type="module" src="js/lib/md-block.js"></script>
+</head>
+
+<body>
+    <md-block>
+        # Project Directions
+        ## Basic:
+        1. Create an array of at least three items.
+        2. Prompt the user the add an item to your array at the end.
+        3. Display this array, with your new item, on your document, using the join() method to make all items one String
+        
+        ## Intermediate:
+        1. Create an input element and a button.
+        2. The user should input what element they want to add to the array and click the button.
+        3. The item should be added to a random spot in the array.
+        4. The array should then be displayed on the document.
+        
+        ## Advanced:
+        1. Create a To Do List, where the user can input any item they want in an input element and display that item in a numbered list on the document.
+        2. Create another input element where the user can input a number on the ordered list of the element they want to delete.
+        3. When an element is added or deleted, the list should be updated with all the elements in the array at that time.
+        4. Numbers should be in order and updated, i.e. if there are items 1, 2, and 3, and the user deletes item 2, item 3 should now be numbered 2, and item 1 remains the same.
+    </md-block>
+</body>
+<footer>
+    <p>&copy Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
+</footer>
+
+</html>
--- a/2/README.md
+++ b/2/README.md
--- a/2/index.html
+++ b/2/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Todo List</title>
+  <link rel="stylesheet" href="stylesheets/style.css">
+  <link rel="stylesheet" href="stylesheets/lib/dismissible.css">
+  <link href="stylesheets/lib/lineicons.css" rel="stylesheet"> <!--Lineicons not working when used directly. Using below cdn instead. -->
+  <link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
+  <script type="module" src="js/lib/md-block.js"></script>
+</head>
+<header>
+  <div id="dismissible-container"></div>
+  <h1>Todo-List Project</h1>
+  <h2>Intro to Computer Programing</h2>
+  <h3>See footer for more info</h3>
+</header>
+<body>
+  <main class="app">
+    <section class="greeting">
+      <h2 class="title">
+        Todo List for: <input type="text" id="name" placeholder="Name here" onkeypress="enterKeyPressed(event)"/>
+      </h2>
+      <h3>Press enter to save name</h3>
+    </section>
+    <section class="create-todo">
+      <h3>CREATE A TASK</h3>
+      <form id="new-todo-form">
+        <h4>What have you been pushing off?</h4>
+        <input type="text" placeholder="e.g. Clean Room" name="content" id="content" />
+        <h4>Pick a level of priority</h4>
+        <div class="options">
+          <label>
+            <input type="radio" name="category" id="category1" value="important" />
+            <span class="bubble important"></span>
+            <div>Important</div>
+          </label>
+          <label>
+            <input type="radio" name="category" id="category2" value="later" />
+            <span class="bubble later"></span>
+            <div>I'll do it later</div>
+          </label>
+        </div>
+        <input type="button" value="Add todo" id="submit" onclick="submission()"/>
+        <section class="todo-list">
+          <div class="list" id="todo-list"></div>
+          <table id="todoTable">
+            <thead>
+              <tr>
+                <th>Todo List:</th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+        </section>
+        <h4>Extra options</h4>
+        <div class="options">
+          <label>
+            <input type="button" name="category" id="cmd" onclick="renderPDF()" />
+
+            <div>Print Todo List</div>
+          </label>
+
+          <label>
+            <input type="button" name="full-screen" id="full-screen" onclick='window.open(href="todoOnly.html")' />
+            <div>Open Todo-List Viewer</div>
+          </label>
+        </div>
+      </form>
+    </section>
+
+  </main>
+
+  <script src="js/lib/dismissible.js"></script>
+  <script src="js/script.js"></script>
+  <script src="js/submission.js"></script>
+</body>
+<footer>
+  <p>&copy Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
+
+</footer>
+
+</html>
--- a/2/instructions.txt
+++ b/2/instructions.txt
@@ -0,0 +1,16 @@
+// BASIC:
+// 1. Create an array of at least three items.
+// 2. Prompt the user the add an item to your array at the end.
+// 3. Display this array, with your new item, on your document, using the join() method to make all items one String
+
+// INTERMEDIATE:
+// 1. Create an input element and a button.
+// 2. The user should input what element they want to add to the array and click the button.
+// 3. The item should be added to a random spot in the array.
+// 4. The array should then be displayed on the document.
+
+// ADVANCED:
+// 1. Create a To Do List, where the user can input any item they want in an input element and display that item in a numbered list on the document.
+// 2. Create another input element where the user can input a number on the ordered list of the element they want to delete.
+// 3. When an element is added or deleted, the list should be updated with all the elements in the array at that time.
+// 4. Numbers should be in order and updated, i.e. if there are items 1, 2, and 3, and the user deletes item 2, item 3 should now be numbered 2, and item 1 remains the same.
--- a/2/js/lib/dismissible.js
+++ b/2/js/lib/dismissible.js
@@ -0,0 +1,92 @@
+(function (window) {
+  class Dismissible {
+
+    /**
+     *
+     * @param {HTMLElement} root Root Element
+     */
+    constructor(root, config = {
+      icons: {
+        dismiss: ['lni', 'lni-16', 'lni-close'],
+        info: ['lni', 'lni-32', 'lni-popup'],
+        success: ['lni', 'lni-32', 'lni-checkmark-circle'],
+        error: ['lni', 'lni-32', 'lni-warning']
+      }
+    }) {
+      this._container = root;
+      this._config = config;
+      this._container.classList.add('dismissible-container');
+    }
+
+    show(level, message, icon) {
+      this.dismiss();
+
+      const dismissible = this._createDismissible(level, message, icon);
+      this._container.appendChild(dismissible);
+    }
+
+    dismiss() {
+      while (this._container.firstChild) {
+        this._container.firstChild.remove();
+      }
+    }
+
+    error(message) {
+      this.show('error', message, this._config.icons.error);
+    }
+
+    info(message) {
+      this.show('info', message, this._config.icons.info);
+    }
+
+    success(message) {
+      this.show('success', message, this._config.icons.success);
+    }
+
+    _createDismissible(level, message, icon) {
+      const dismissible = document.createElement('div');
+
+      dismissible.classList.add('dismissible');
+      dismissible.classList.add(level);
+
+      dismissible.appendChild(this._createIcon(icon));
+      dismissible.appendChild(this._createMessage(message));
+      dismissible.appendChild(this._createDismissButton());
+
+      return dismissible;
+    }
+
+    _createDismissButton() {
+      const {
+        icons
+      } = this._config;
+
+      const button = document.createElement('button');
+      button.classList.add('dismiss');
+      button.addEventListener('click', () => this.dismiss());
+
+      const buttonIcon = document.createElement('i');
+      buttonIcon.classList.add(...icons.dismiss);
+
+      button.appendChild(buttonIcon);
+
+      return button;
+    }
+
+    _createMessage(message) {
+      const element = document.createElement('div');
+      element.classList.add('dismissible-message');
+      element.innerText = message;
+      return element;
+    }
+
+    _createIcon(icon, text) {
+      const element = document.createElement('i');
+      element.classList.add(...icon, 'dismissible-icon');
+      return element;
+    }
+  }
+
+  window.Dismissible = Dismissible;
+
+})(window);
--- a/2/js/lib/md-block.js
+++ b/2/js/lib/md-block.js
@@ -0,0 +1,301 @@
+/**
+ * <md-block> custom element
+ * @author Lea Verou
+ */
+
+ let marked = window.marked;
+ let DOMPurify = window.DOMPurify;
+ let Prism = window.Prism;
+ 
+ export const URLs = {
+     marked: "https://cdn.jsdelivr.net/npm/marked/src/marked.min.js",
+     DOMPurify: "https://cdn.jsdelivr.net/npm/dompurify@2.3.3/dist/purify.es.min.js"
+ }
+ 
+ // Fix indentation
+ function deIndent(text) {
+     let indent = text.match(/^[\r\n]*([\t ]+)/);
+ 
+     if (indent) {
+         indent = indent[1];
+ 
+         text = text.replace(RegExp("^" + indent, "gm"), "");
+     }
+ 
+     return text;
+ }
+ 
+ export class MarkdownElement extends HTMLElement {
+     constructor() {
+         super();
+ 
+         this.renderer = Object.assign({}, this.constructor.renderer);
+ 
+         for (let property in this.renderer) {
+             this.renderer[property] = this.renderer[property].bind(this);
+         }
+     }
+ 
+     get rendered() {
+         return this.getAttribute("rendered");
+     }
+ 
+     get mdContent () {
+         return this._mdContent;
+     }
+ 
+     set mdContent (html) {
+         this._mdContent = html;
+         this._contentFromHTML = false;
+ 
+         this.render();
+     }
+ 
+     connectedCallback() {
+         Object.defineProperty(this, "untrusted", {
+             value: this.hasAttribute("untrusted"),
+             enumerable: true,
+             configurable: false,
+             writable: false
+         });
+ 
+         if (this._mdContent === undefined) {
+             this._contentFromHTML = true;
+             this._mdContent = deIndent(this.innerHTML);
+         }
+ 
+         this.render();
+     }
+ 
+     async render () {
+         if (!this.isConnected || this._mdContent === undefined) {
+             return;
+         }
+ 
+         if (!marked) {
+             marked = import(URLs.marked).then(m => m.marked);
+         }
+ 
+         marked = await marked;
+ 
+         marked.setOptions({
+             gfm: true,
+             smartypants: true,
+             langPrefix: "language-",
+         });
+ 
+         marked.use({renderer: this.renderer});
+ 
+         let html = this._parse();
+ 
+         if (this.untrusted) {
+             let mdContent = this._mdContent;
+             html = await MarkdownElement.sanitize(html);
+             if (this._mdContent !== mdContent) {
+                 // While we were running this async call, the content changed
+                 // We don’t want to overwrite with old data. Abort mission!
+                 return;
+             }
+         }
+ 
+         this.innerHTML = html;
+ 
+         if (!Prism && URLs.Prism && this.querySelector("code")) {
+             Prism = import(URLs.Prism);
+ 
+             if (URLs.PrismCSS) {
+                 let link = document.createElement("link");
+                 link.rel = "stylesheet";
+                 link.href = URLs.PrismCSS;
+                 document.head.appendChild(link);
+             }
+         }
+ 
+         if (Prism) {
+             await Prism; // in case it's still loading
+             Prism.highlightAllUnder(this);
+         }
+ 
+         if (this.src) {
+             this.setAttribute("rendered", this._contentFromHTML? "fallback" : "remote");
+         }
+         else {
+             this.setAttribute("rendered", this._contentFromHTML? "content" : "property");
+         }
+ 
+         // Fire event
+         let event = new CustomEvent("md-render", {bubbles: true, composed: true});
+         this.dispatchEvent(event);
+     }
+ 
+     static async sanitize(html) {
+         if (!DOMPurify) {
+             DOMPurify = import(URLs.DOMPurify).then(m => m.default);
+         }
+ 
+         DOMPurify = await DOMPurify; // in case it's still loading
+ 
+         return DOMPurify.sanitize(html);
+     }
+ };
+ 
+ export class MarkdownSpan extends MarkdownElement {
+     constructor() {
+         super();
+     }
+ 
+     _parse () {
+         return marked.parseInline(this._mdContent);
+     }
+ 
+     static renderer = {
+         codespan (code) {
+             if (this._contentFromHTML) {
+                 // Inline HTML code needs to be escaped to not be parsed as HTML by the browser
+                 // This results in marked double-escaping it, so we need to unescape it
+                 code = code.replace(/&amp;(?=[lg]t;)/g, "&");
+             }
+             else {
+                 // Remote code may include characters that need to be escaped to be visible in HTML
+                 code = code.replace(/</g, "&lt;");
+             }
+ 
+             return `<code>${code}</code>`;
+         }
+     }
+ }
+ 
+ export class MarkdownBlock extends MarkdownElement {
+     constructor() {
+         super();
+     }
+ 
+     get src() {
+         return this._src;
+     }
+ 
+     set src(value) {
+         this.setAttribute("src", value);
+     }
+ 
+     get hmin() {
+         return this._hmin || 1;
+     }
+ 
+     set hmin(value) {
+         this.setAttribute("hmin", value);
+     }
+ 
+     get hlinks() {
+         return this._hlinks ?? null;
+     }
+ 
+     set hlinks(value) {
+         this.setAttribute("hlinks", value);
+     }
+ 
+     _parse () {
+         return marked.parse(this._mdContent);
+     }
+ 
+     static renderer = Object.assign({
+         heading (text, level, _raw, slugger) {
+             level = Math.min(6, level + (this.hmin - 1));
+             const id = slugger.slug(text);
+             const hlinks = this.hlinks;
+ 
+             let content;
+ 
+             if (hlinks === null) {
+                 // No heading links
+                 content = text;
+             }
+             else {
+                 content = `<a href="#${id}" class="anchor">`;
+ 
+                 if (hlinks === "") {
+                     // Heading content is the link
+                     content += text + "</a>";
+                 }
+                 else {
+                     // Headings are prepended with a linked symbol
+                     content += hlinks + "</a>" + text;
+                 }
+             }
+ 
+             return `
+                 <h${level} id="${id}">
+                     ${content}
+                 </h${level}>`;
+         },
+ 
+         code (code, language, escaped) {
+             if (this._contentFromHTML) {
+                 // Inline HTML code needs to be escaped to not be parsed as HTML by the browser
+                 // This results in marked double-escaping it, so we need to unescape it
+                 code = code.replace(/&amp;(?=[lg]t;)/g, "&");
+             }
+             else {
+                 // Remote code may include characters that need to be escaped to be visible in HTML
+                 code = code.replace(/</g, "&lt;");
+             }
+ 
+             return `<pre class="language-${language}"><code>${code}</code></pre>`;
+         }
+     }, MarkdownSpan.renderer);
+ 
+     static get observedAttributes() {
+         return ["src", "hmin", "hlinks"];
+     }
+ 
+     attributeChangedCallback(name, oldValue, newValue) {
+         if (oldValue === newValue) {
+             return;
+         }
+ 
+         switch (name) {
+             case "src":
+                 let url;
+                 try {
+                     url = new URL(newValue, location);
+                 }
+                 catch (e) {
+                     return;
+                 }
+ 
+                 let prevSrc = this.src;
+                 this._src = url;
+ 
+                 if (this.src !== prevSrc) {
+                     fetch(this.src)
+                     .then(response => {
+                         if (!response.ok) {
+                             throw new Error(`Failed to fetch ${this.src}: ${response.status} ${response.statusText}`);
+                         }
+ 
+                         return response.text();
+                     })
+                     .then(text => {
+                         this.mdContent = text;
+                     })
+                     .catch(e => {});
+                 }
+ 
+                 break;
+             case "hmin":
+                 if (newValue > 0) {
+                     this._hmin = +newValue;
+ 
+                     this.render();
+                 }
+                 break;
+             case "hlinks":
+                 this._hlinks = newValue;
+                 this.render();
+         }
+     }
+ }
+ 
+ 
+ customElements.define("md-block", MarkdownBlock);
+ customElements.define("md-span", MarkdownSpan);
--- a/2/js/script.js
+++ b/2/js/script.js
@@ -0,0 +1,36 @@
+if((localStorage.length % 4 === 0) && (localStorage.length > 1)) {
+  if (confirm('Previous todo-list data was found. Do you want to restore this data?')) {
+    console.log('Restored from localStorage');
+    new Dismissible(document.querySelector('#dismissible-container')).success('Previous todo-list data was restored.');
+  } else {
+    console.log('Local Storage cleared');
+    localStorage.clear();
+  }
+}
+else if(localStorage.getItem("ID: 1 - Item ID:") == "1"){
+  new Dismissible(document.querySelector('#dismissible-container')).error('Previous todo-list data was found but appears to be corrupted. Previous data will not be restored.');
+  localStorage.clear();
+}
+else if(localStorage.length > 0) {
+  if (confirm('Local Storage data, unreleated to your todo-list, was found in your cache. This needs to be cleared for the website to function properly.')) {
+    console.log('Local Storage cleared');
+    localStorage
+  } else {
+    console.log('Local Storage NOT cleared!');
+    console.log('Website may not function properly!');
+    new Dismissible(document.querySelector('#dismissible-container')).info('Local storage not cleared, website may not function properly!');
+  }
+}
+
+function enterKeyPressed(event){
+  var key = event.key || event.keyCode;
+  if (key === 'Enter' || key === 13) {
+    console.log("enter");
+    document.getElementById(content.id).focus();
+    new Dismissible(document.querySelector('#dismissible-container')).success('Name saved!');
+  }
+  else
+  {
+    console.log("not enter");
+  }
+};
--- a/2/js/submission.js
+++ b/2/js/submission.js
@@ -0,0 +1,54 @@
+submissionCounter = 0;
+if (localStorage.length % 4 === 0) {
+    if(localStorage.length >0 ){
+    submissionCounter = localStorage.length / 4 ;
+    console.log(submissionCounter);
+    for(i = 1; i < submissionCounter + 1; i++ ){
+        var tbodyRef = document.getElementById('todoTable').getElementsByTagName('tbody')[0];
+        var newRow = tbodyRef.insertRow();
+        var newCell = newRow.insertCell();
+        var newCell2 = newRow.insertCell();
+        var newCell3 = newRow.insertCell();
+        var newCell4 = newRow.insertCell();
+        var newText = document.createTextNode("Item ID: " + localStorage.getItem("ID: " + i + " - Item ID:"));
+        newCell.appendChild(newText);
+        var newText2 = document.createTextNode("Name: " + localStorage.getItem("ID: " + i + " - Name:"));
+        newCell2.appendChild(newText2);
+        var newText3 = document.createTextNode("Task: " + localStorage.getItem("ID: " + i + " - Task:"));
+        newCell3.appendChild(newText3);
+        var newText4 = document.createTextNode("Priorty: " + localStorage.getItem("ID: " + i + " - Priority:"));
+        newCell4.appendChild(newText4);
+    }
+    }
+}
+function submission(){
+    document.getElementById('content').value="";
+    document.getElementById('content').placeholder="e.g. Clean Room";
+    for(var i=0;i<document.getElementsByName("category").length;i++){
+        document.getElementsByName("category")[i].checked = false;
+    }
+    submissionCounter ++;
+    localStorage.setItem("ID: " + submissionCounter + " - Item ID:", submissionCounter);
+    localStorage.setItem("ID: " + submissionCounter + " - Name:", document.getElementById('name').value);
+    localStorage.setItem("ID: " + submissionCounter + " - Task:", document.getElementById('content').value);
+    if(document.getElementById('category1').checked){
+        localStorage.setItem("ID: " + submissionCounter + " - Priority:", "High");
+    }
+    else {
+        localStorage.setItem("ID: " + submissionCounter + " - Priority:", "Low");
+    }
+    var tbodyRef = document.getElementById('todoTable').getElementsByTagName('tbody')[0];
+      var newRow = tbodyRef.insertRow();
+      var newCell = newRow.insertCell();
+      var newCell2 = newRow.insertCell();
+      var newCell3 = newRow.insertCell();
+      var newCell4 = newRow.insertCell();
+      var newText = document.createTextNode("Item ID: " + localStorage.getItem("ID: " + submissionCounter + " - Item ID:"));
+      newCell.appendChild(newText);
+      var newText2 = document.createTextNode("Name: " + localStorage.getItem("ID: " + submissionCounter + " - Name:"));
+      newCell2.appendChild(newText2);
+      var newText3 = document.createTextNode("Task: " + localStorage.getItem("ID: " + submissionCounter + " - Task:"));
+      newCell3.appendChild(newText3);
+      var newText4 = document.createTextNode("Priorty: " + localStorage.getItem("ID: " + submissionCounter + " - Priority:"));
+      newCell4.appendChild(newText4);
+}
--- a/2/js/viewOnly.js
+++ b/2/js/viewOnly.js
@@ -0,0 +1,28 @@
+
+    submissionCounter = 0;
+    if (localStorage.length % 4 === 0) {
+        if(localStorage.length >0 ){
+        submissionCounter = localStorage.length / 4 ;
+        console.log(submissionCounter);
+        for(i = 1; i < submissionCounter + 1; i++ ){
+            var tbodyRef = document.getElementById('todoTableReadOnly').getElementsByTagName('tbody')[0];
+            var newRow = tbodyRef.insertRow();
+            var newCell = newRow.insertCell();
+            var newCell2 = newRow.insertCell();
+            var newCell3 = newRow.insertCell();
+            var newCell4 = newRow.insertCell();
+            var newText = document.createTextNode("Item ID: " + localStorage.getItem("ID: " + i + " - Item ID:"));
+            newCell.appendChild(newText);
+            var newText2 = document.createTextNode("Name: " + localStorage.getItem("ID: " + i + " - Name:"));
+            newCell2.appendChild(newText2);
+            var newText3 = document.createTextNode("Task: " + localStorage.getItem("ID: " + i + " - Task:"));
+            newCell3.appendChild(newText3);
+            var newText4 = document.createTextNode("Priorty: " + localStorage.getItem("ID: " + i + " - Priority:"));
+            newCell4.appendChild(newText4);
+        }
+        }
+    }
+
+    setInterval(function(){
+        location.reload();
+      }, 5000);
--- a/2/replit.nix
+++ b/2/replit.nix
@@ -0,0 +1,6 @@
+{ pkgs }: {
+  deps = [
+    pkgs.nodePackages.vscode-langservers-extracted
+    pkgs.nodePackages.typescript-language-server
+  ];
+}
--- a/2/stylesheets/lib/dismissible.css
+++ b/2/stylesheets/lib/dismissible.css
@@ -0,0 +1,113 @@
+:root {
+  /* Animation Props */
+  --dismissible-animation-overshoot: 10%;
+  --dismissible-animation-duration: 0.6s;
+  --dismissible-animation-timing-function: ease-in-out;
+  /* Theme Props */
+  --dismissible-background-error: #ed1c24;
+  --dismissible-color-error: #fff;
+  --dismissible-background-success: #10c15c;
+  --dismissible-color-success: #fff;
+  --dismissible-background-info: #0b22e2;
+  --dismissible-color-info: #fff;
+  /* Misc */
+  --dismissible-box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
+}
+
+.dismissible-container {
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.dismissible {
+  position: relative;
+  padding: 2rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  transform: translateY(-100%);
+  animation-name: drop-in;
+  animation-direction: normal;
+  animation-duration: var(--dismissible-animation-duration);
+  animation-timing-function: var(--dismissible-animation-timing-function);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  box-shadow: var(--dismissible-box-shadow);
+}
+
+.dismissible .dismissible-message {
+  flex: 1;
+  padding: 0 2rem;
+  font-size: 1.25rem;
+}
+
+.dismissible::after {
+  content: "";
+  position: absolute;
+  height: var(--dismissible-animation-overshoot);
+  width: 100%;
+  bottom: 100%;
+  left: 0;
+}
+
+.dismissible.error {
+  background: var(--dismissible-background-error);
+  color: var(--dismissible-color-error);
+}
+
+.dismissible.error::after {
+  background: var(--dismissible-background-error);
+}
+
+.dismissible.info {
+  background: var(--dismissible-background-info);
+  color: var(--dismissible-color-info);
+}
+
+.dismissible.info::after {
+  background: var(--dismissible-background-info);
+}
+
+.dismissible.success {
+  background: var(--dismissible-background-success);
+  color: var(--dismissible-color-success);
+}
+
+.dismissible.success::after {
+  background: var(--dismissible-background-success);
+}
+
+.dismiss {
+  color: inherit;
+  appearance: none;
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  background: inherit;
+}
+
+.dismiss:hover {
+  background: rgba(0, 0, 0, 0.12);
+}
+
+@keyframes drop-in {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  50% {
+    transform: translateY(var(--dismissible-animation-overshoot));
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
--- a/2/stylesheets/lib/lineicons.css
+++ b/2/stylesheets/lib/lineicons.css
--- a/2/stylesheets/style.css
+++ b/2/stylesheets/style.css
@@ -0,0 +1,256 @@
+header{
+	height: 100px;
+	text-align: center;
+}
+
+:root {
+	--primary: #3e72ea;
+	--important: #ee4c3a;
+	--later: var(--primary);
+	--light: #EEE;
+	--grey: #888;
+	--dark: #313154;
+	--danger: #ff5b57;
+
+	--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+	--important-glow: 0px 0px 8px rgba(238, 76, 58, 0.75);
+	--later-glow: 0px 0px 8px rgba(62, 114, 234, 0.75);
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: 'montserrat', sans-serif;
+}
+
+input:not([type="radio"]):not([type="checkbox"]), button {
+	appearance: none;
+	border: none;
+	outline: none;
+	background: none;
+	cursor: initial;
+}
+
+
+
+section {
+	margin-top: 2rem;
+	margin-bottom: 2rem;
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+}
+
+h3 {
+	color: var(--dark);
+	font-size: 1rem;
+	font-weight: 400;
+	margin-bottom: 0.5rem;
+}
+
+h4 {
+	color: var(--grey);
+	font-size: 0.875rem;
+	font-weight: 700;
+	margin-bottom: 0.5rem;
+}
+
+.greeting .title {
+	display: flex;
+}
+
+.greeting .title input {
+	margin-left: 0.5rem;
+	flex: 1 1 0%;
+	min-width: 0;
+}
+
+.greeting .title, 
+.greeting .title input {
+	color: var(--dark);
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+.create-todo input[type="text"] {
+	display: block;
+	width: 100%;
+	font-size: 1.125rem;
+	padding: 1rem 1.5rem;
+	color: var(--dark);
+	background-color: #FFF;
+	border-radius: 0.5rem;
+	box-shadow: var(--shadow);
+	margin-bottom: 1.5rem;
+}
+
+.create-todo .options {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-gap: 1rem;
+	margin-bottom: 1.5rem;
+}
+
+.create-todo .options label {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: #FFF;
+	padding: 1.5rem;
+	box-shadow: var(--shadow);
+	border-radius: 0.5rem;
+	cursor: pointer;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+	display: none;
+}
+
+.bubble {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	border-radius: 999px;
+	border: 2px solid var(--important);
+	box-shadow: var(--important-glow);
+}
+
+.bubble.later {
+	border-color: var(--later);
+	box-shadow: var(--later-glow);
+}
+
+.bubble::after {
+	content: '';
+	display: block;
+	opacity: 0;
+	width: 0px;
+	height: 0px;
+	background-color: var(--important);
+	box-shadow: var(--important-glow);
+	border-radius: 999px;
+	transition: 0.2s ease-in-out;
+}
+
+.bubble.later::after {
+	background-color: var(--later);
+	box-shadow: var(--later-glow);
+}
+
+input:checked ~ .bubble::after {
+	width: 10px;
+	height: 10px;
+	opacity: 1;
+}
+
+.create-todo .options label div {
+	color: var(--dark);
+	font-size: 1.125rem;
+	margin-top: 1rem;
+}
+
+#submit {
+	display: block;
+	width: 100%;
+	font-size: 1.125rem;
+	padding: 1rem 1.5rem;
+	color: #FFF;
+	font-weight: 700;
+	text-transform: uppercase;
+	background-color: var(--primary);
+	box-shadow: var(--later-glow);
+	border-radius: 0.5rem;
+	cursor: pointer;
+	transition: 0.2s ease-out;
+}
+
+#submit:hover {
+	opacity: 0.75;
+}
+
+.todo-list .list {
+	margin: 1rem 0;
+}
+td {
+	border: 1px solid;
+}
+table {
+	width: 100%;
+	border-collapse: collapse;
+}
+.todo-list .todo-item {
+	display: flex;
+	align-items: center;
+	background-color: #FFF;
+	padding: 1rem;
+	border-radius: 0.5rem;
+	box-shadow: var(--shadow);
+	margin-bottom: 1rem;
+}
+
+.todo-item label {
+	display: block;
+	margin-right: 1rem;
+	cursor: pointer;
+}
+
+.todo-item .todo-content {
+	flex: 1 1 0%;
+}
+
+.todo-item .todo-content input {
+	color: var(--dark);
+	font-size: 1.125rem;
+}
+
+.todo-item .actions {
+	display: flex;
+	align-items: center;
+}
+
+.todo-item .actions button {
+	display: block;
+	padding: 0.5rem;
+	border-radius: 0.25rem;
+	color: #FFF;
+	cursor: pointer;
+	transition: 0.2s ease-in-out;
+}
+
+.todo-item .actions button:hover {
+	opacity: 0.75;
+}
+
+.todo-item .actions .edit {
+	margin-right: 0.5rem;
+	background-color: var(--primary);
+}
+
+.todo-item .actions .delete {
+	background-color: var(--danger);
+}
+
+.todo-item.done .todo-content input {
+	text-decoration: line-through;
+	color: var(--grey);
+}
+  footer {
+  margin-top: 2rem;
+	margin-bottom: 2rem;
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+}
+#DataGrid {
+  height: 423px;
+}
+
+body {
+	background: var(--light);
+	color: var(--dark);
+}
+
--- a/2/todoOnly.html
+++ b/2/todoOnly.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Todo List</title>
+  <link rel="stylesheet" href="stylesheets/style.css">
+  <link rel="stylesheet" href="stylesheets/lib/dismissible.css">
+  <link href="stylesheets/lib/lineicons.css" rel="stylesheet"> <!--Lineicons not working when used directly. Using below cdn instead. -->
+  <link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
+  <script type="module" src="js/lib/md-block.js"></script>
+</head>
+<header>
+  <h1>This is a viewer for your todo-list</h1>
+  <h2>The content on this page is view only</h2>
+  <h3>This page will refresh automatically every 5 seconds. See footer for more info.</h3>
+</header>
+<body>
+  <main class="app">
+    <section class="greeting">
+      <h2 class="title">
+        Todo List for: <h2 id="nameForTodoOnly"></h2>
+      </h2>
+    </section>
+    <section class="create-todo">
+        <section class="todo-list">
+          <div class="list" id="todo-list"></div>
+          <table id="todoTableReadOnly">
+            <thead>
+              <tr>
+                <th>Todo List:</th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+        </section>
+      </form>
+    </section>
+
+  </main>
+
+  <script src="js/viewOnly.js"></script>
+</body>
+<footer>
+    <p>&copy Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
+
+</footer>
+
+</html>