From ca92b603beefcd02db9e6bd5676397204c2e1138 Mon Sep 17 00:00:00 2001
From: Benjamin Adovasio <111182300+Benjamin-Adovasio@users.noreply.github.com>
Date: Sun, 16 Nov 2025 22:54:34 -0500
Subject: [PATCH] added other units
---
2.html => Final/2.html | 0
3.html => Final/3.html | 0
4.html => Final/4.html | 0
5.html => Final/5.html | 0
6.html => Final/6.html | 0
index.html => Final/index.html | 0
options.html => Final/options.html | 0
script.js => Final/script.js | 0
style.css => Final/style.css | 0
Template/index.html | 16 +
Template/script.js | 0
Template/style.css | 0
Unit 4/Day 2/index.html | 21 +
Unit 4/Day 2/script.js | 35 ++
Unit 4/Day 2/style.css | 0
Unit 5/Code Share/README.html | 38 ++
Unit 5/Code Share/README.md | 0
Unit 5/Code Share/index.html | 90 ++++
Unit 5/Code Share/instructions.txt | 16 +
Unit 5/Code Share/js/lib/dismissible.js | 92 ++++
Unit 5/Code Share/js/lib/md-block.js | 301 ++++++++++++
Unit 5/Code Share/js/script.js | 75 +++
Unit 5/Code Share/js/submission.js | 69 +++
Unit 5/Code Share/js/viewOnly.js | 28 ++
Unit 5/Code Share/replit.nix | 6 +
.../stylesheets/lib/dismissible.css | 113 +++++
.../Code Share/stylesheets/lib/lineicons.css | 1 +
Unit 5/Code Share/stylesheets/style.css | 270 ++++++++++
Unit 5/Code Share/todoOnly.html | 49 ++
Unit 5/Day 2/README.html | 38 ++
Unit 5/Day 2/README.md | 0
Unit 5/Day 2/index.html | 84 ++++
Unit 5/Day 2/instructions.txt | 16 +
Unit 5/Day 2/js/lib/dismissible.js | 92 ++++
Unit 5/Day 2/js/lib/md-block.js | 301 ++++++++++++
Unit 5/Day 2/js/script.js | 36 ++
Unit 5/Day 2/js/submission.js | 54 ++
Unit 5/Day 2/js/viewOnly.js | 28 ++
Unit 5/Day 2/replit.nix | 6 +
Unit 5/Day 2/stylesheets/lib/dismissible.css | 113 +++++
Unit 5/Day 2/stylesheets/lib/lineicons.css | 1 +
Unit 5/Day 2/stylesheets/style.css | 256 ++++++++++
Unit 5/Day 2/todoOnly.html | 49 ++
Unit 6/Canvas Project/index.html | 17 +
Unit 6/Canvas Project/script.js | 463 ++++++++++++++++++
Unit 6/Canvas Project/style.css | 5 +
46 files changed, 2779 insertions(+)
rename 2.html => Final/2.html (100%)
rename 3.html => Final/3.html (100%)
rename 4.html => Final/4.html (100%)
rename 5.html => Final/5.html (100%)
rename 6.html => Final/6.html (100%)
rename index.html => Final/index.html (100%)
rename options.html => Final/options.html (100%)
rename script.js => Final/script.js (100%)
rename style.css => Final/style.css (100%)
create mode 100644 Template/index.html
create mode 100644 Template/script.js
create mode 100644 Template/style.css
create mode 100644 Unit 4/Day 2/index.html
create mode 100644 Unit 4/Day 2/script.js
create mode 100644 Unit 4/Day 2/style.css
create mode 100644 Unit 5/Code Share/README.html
create mode 100644 Unit 5/Code Share/README.md
create mode 100644 Unit 5/Code Share/index.html
create mode 100644 Unit 5/Code Share/instructions.txt
create mode 100644 Unit 5/Code Share/js/lib/dismissible.js
create mode 100644 Unit 5/Code Share/js/lib/md-block.js
create mode 100644 Unit 5/Code Share/js/script.js
create mode 100644 Unit 5/Code Share/js/submission.js
create mode 100644 Unit 5/Code Share/js/viewOnly.js
create mode 100644 Unit 5/Code Share/replit.nix
create mode 100644 Unit 5/Code Share/stylesheets/lib/dismissible.css
create mode 100644 Unit 5/Code Share/stylesheets/lib/lineicons.css
create mode 100644 Unit 5/Code Share/stylesheets/style.css
create mode 100644 Unit 5/Code Share/todoOnly.html
create mode 100644 Unit 5/Day 2/README.html
create mode 100644 Unit 5/Day 2/README.md
create mode 100644 Unit 5/Day 2/index.html
create mode 100644 Unit 5/Day 2/instructions.txt
create mode 100644 Unit 5/Day 2/js/lib/dismissible.js
create mode 100644 Unit 5/Day 2/js/lib/md-block.js
create mode 100644 Unit 5/Day 2/js/script.js
create mode 100644 Unit 5/Day 2/js/submission.js
create mode 100644 Unit 5/Day 2/js/viewOnly.js
create mode 100644 Unit 5/Day 2/replit.nix
create mode 100644 Unit 5/Day 2/stylesheets/lib/dismissible.css
create mode 100644 Unit 5/Day 2/stylesheets/lib/lineicons.css
create mode 100644 Unit 5/Day 2/stylesheets/style.css
create mode 100644 Unit 5/Day 2/todoOnly.html
create mode 100644 Unit 6/Canvas Project/index.html
create mode 100644 Unit 6/Canvas Project/script.js
create mode 100644 Unit 6/Canvas Project/style.css
diff --git a/2.html b/Final/2.html
similarity index 100%
rename from 2.html
rename to Final/2.html
diff --git a/3.html b/Final/3.html
similarity index 100%
rename from 3.html
rename to Final/3.html
diff --git a/4.html b/Final/4.html
similarity index 100%
rename from 4.html
rename to Final/4.html
diff --git a/5.html b/Final/5.html
similarity index 100%
rename from 5.html
rename to Final/5.html
diff --git a/6.html b/Final/6.html
similarity index 100%
rename from 6.html
rename to Final/6.html
diff --git a/index.html b/Final/index.html
similarity index 100%
rename from index.html
rename to Final/index.html
diff --git a/options.html b/Final/options.html
similarity index 100%
rename from options.html
rename to Final/options.html
diff --git a/script.js b/Final/script.js
similarity index 100%
rename from script.js
rename to Final/script.js
diff --git a/style.css b/Final/style.css
similarity index 100%
rename from style.css
rename to Final/style.css
diff --git a/Template/index.html b/Template/index.html
new file mode 100644
index 0000000..d5acf96
--- /dev/null
+++ b/Template/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ replit
+
+
+
+
+
+
+
+
+
diff --git a/Template/script.js b/Template/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/Template/style.css b/Template/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/Unit 4/Day 2/index.html b/Unit 4/Day 2/index.html
new file mode 100644
index 0000000..8536df5
--- /dev/null
+++ b/Unit 4/Day 2/index.html
@@ -0,0 +1,21 @@
+
+
+
+Unit 4 Day 2
+
+
+
+
Count "s" and "S" characters
+
+
+
+
Output:
+
+
Capitalize every odd number letter and lowercase every even number letter
+
+
+
+
Output:
+
+
+
\ No newline at end of file
diff --git a/Unit 4/Day 2/script.js b/Unit 4/Day 2/script.js
new file mode 100644
index 0000000..86cdb23
--- /dev/null
+++ b/Unit 4/Day 2/script.js
@@ -0,0 +1,35 @@
+function program1(inputString){
+ document.getElementById("out1").innerHTML="";
+ let inputArray = Array.from(inputString);
+ let regex = /s/gm;
+ let counter = 0;
+ for (i = 0; i < inputArray.length; i++) {
+ if (regex.test(inputArray[i])) {
+ counter++;
+ }
+ else {
+ console.log("not an s");
+ }
+ }
+ document.getElementById("out1").innerHTML=counter;
+}
+function program2(inputString){
+ document.getElementById("out2").innerHTML="";
+ let inputArray = Array.from(inputString);
+ for (i = 0; i < inputArray.length; i++) {
+ if (i % 2 == 0) {
+ console.log("odd");
+ let outputCharacter = inputArray[i].toUpperCase();
+ let existingText = document.getElementById("out2").textContent;
+ document.getElementById("out2").innerHTML= existingText + outputCharacter;
+ }
+ else {
+ console.log("not an s");
+ let outputCharacter = inputArray[i].toLowerCase();
+ let existingText = document.getElementById("out2").textContent;
+ document.getElementById("out2").innerHTML= existingText + outputCharacter;
+ }
+ }
+
+ // document.getElementById("out1").innerHTML= localStorage;
+}
\ No newline at end of file
diff --git a/Unit 4/Day 2/style.css b/Unit 4/Day 2/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/Unit 5/Code Share/README.html b/Unit 5/Code Share/README.html
new file mode 100644
index 0000000..8510f5f
--- /dev/null
+++ b/Unit 5/Code Share/README.html
@@ -0,0 +1,38 @@
+
+
+
+
+ Todo List
+
+
+
+
+
+
+
+
+
+ # 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.
+
+
+
+
+
\ No newline at end of file
diff --git a/Unit 5/Code Share/README.md b/Unit 5/Code Share/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/Unit 5/Code Share/index.html b/Unit 5/Code Share/index.html
new file mode 100644
index 0000000..5d225e6
--- /dev/null
+++ b/Unit 5/Code Share/index.html
@@ -0,0 +1,90 @@
+
+
+
+
+ Todo List
+
+
+
+
+
+
+
+
+
Todo-List Project
+
Intro to Computer Programing
+
See footer for more info
+
+
+
+
+
+
+
Step 1: Add your name
+
+ Todo List for:
+
+
Press enter to continue
+
+
+
Step 2: Create a task
+
CREATE A TASK
+
+
Press enter to continue
+
+
Step 3: Select a priority
+
Pick a level of priority
+
+
+
+
+
Step 4: Submit!
+
+
+
+
+
+
+
Todo List:
+
+
+
+
+
+
+
Step 5: Extra options
+
Extra options
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Unit 5/Code Share/instructions.txt b/Unit 5/Code Share/instructions.txt
new file mode 100644
index 0000000..65fd5e2
--- /dev/null
+++ b/Unit 5/Code Share/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.
\ No newline at end of file
diff --git a/Unit 5/Code Share/js/lib/dismissible.js b/Unit 5/Code Share/js/lib/dismissible.js
new file mode 100644
index 0000000..02be45e
--- /dev/null
+++ b/Unit 5/Code Share/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);
\ No newline at end of file
diff --git a/Unit 5/Code Share/js/lib/md-block.js b/Unit 5/Code Share/js/lib/md-block.js
new file mode 100644
index 0000000..7059890
--- /dev/null
+++ b/Unit 5/Code Share/js/lib/md-block.js
@@ -0,0 +1,301 @@
+/**
+ * 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(/&(?=[lg]t;)/g, "&");
+ }
+ else {
+ // Remote code may include characters that need to be escaped to be visible in HTML
+ code = code.replace(/${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 = ``;
+
+ if (hlinks === "") {
+ // Heading content is the link
+ content += text + "";
+ }
+ else {
+ // Headings are prepended with a linked symbol
+ content += hlinks + "" + text;
+ }
+ }
+
+ return `
+
+ ${content}
+ `;
+ },
+
+ 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(/&(?=[lg]t;)/g, "&");
+ }
+ else {
+ // Remote code may include characters that need to be escaped to be visible in HTML
+ code = code.replace(/${code}`;
+ }
+ }, 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);
\ No newline at end of file
diff --git a/Unit 5/Code Share/js/script.js b/Unit 5/Code Share/js/script.js
new file mode 100644
index 0000000..650d78b
--- /dev/null
+++ b/Unit 5/Code Share/js/script.js
@@ -0,0 +1,75 @@
+toggleCounter = 1;
+toggleHelp();
+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");
+ }
+};
+
+function enterKeyPressedTask(event){
+ var key = event.key || event.keyCode;
+ if (key === 'Enter' || key === 13) {
+ console.log("enter");
+ document.getElementById('category1').focus();
+ }
+ else
+ {
+ console.log("not enter");
+ }
+};
+
+function toggleHelp(){
+ toggleCounter ++;
+ if (toggleCounter % 2 == 0) {
+ for (var i = 0; i < document.getElementsByClassName("help").length; i ++) {
+ document.getElementsByClassName("help")[i].style.display = 'none';
+ }
+ } else {
+ for (var i = 0; i < document.getElementsByClassName("help").length; i ++) {
+ document.getElementsByClassName("help")[i].style.display = 'initial';
+ }
+ }
+}
+
+function todoViewer(choice){
+ if (choice == 'popup'){
+newwindow=window.open(href='todoOnly.html','name','height=700,width=700');
+ if (window.focus) {newwindow.focus()}
+ return false;
+ }
+
+ else if(choice == 'tab'){
+ window.open(href='todoOnly.html');
+ }
+}
\ No newline at end of file
diff --git a/Unit 5/Code Share/js/submission.js b/Unit 5/Code Share/js/submission.js
new file mode 100644
index 0000000..a26090f
--- /dev/null
+++ b/Unit 5/Code Share/js/submission.js
@@ -0,0 +1,69 @@
+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(){
+ 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 newCell5 = 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);
+ var newText5 = document.createElement("button");
+ newText5.innerHTML = "test";
+ newText5.onclick = function(){
+ newRow.remove();
+ localStorage.removeItem("ID: " + submissionCounter + " - Item ID:");
+ localStorage.removeItem("ID: " + submissionCounter + " - Name:");
+ localStorage.removeItem("ID: " + submissionCounter + " - Task:");
+
+ };
+ newCell5.appendChild(newText5);
+ document.getElementById('content').value="";
+ document.getElementById('content').placeholder="e.g. Clean Room";
+ for(var i=0;i0 ){
+ 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);
\ No newline at end of file
diff --git a/Unit 5/Code Share/replit.nix b/Unit 5/Code Share/replit.nix
new file mode 100644
index 0000000..82dea6f
--- /dev/null
+++ b/Unit 5/Code Share/replit.nix
@@ -0,0 +1,6 @@
+{ pkgs }: {
+ deps = [
+ pkgs.nodePackages.vscode-langservers-extracted
+ pkgs.nodePackages.typescript-language-server
+ ];
+}
\ No newline at end of file
diff --git a/Unit 5/Code Share/stylesheets/lib/dismissible.css b/Unit 5/Code Share/stylesheets/lib/dismissible.css
new file mode 100644
index 0000000..67e0b3e
--- /dev/null
+++ b/Unit 5/Code Share/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);
+ }
+}
\ No newline at end of file
diff --git a/Unit 5/Code Share/stylesheets/lib/lineicons.css b/Unit 5/Code Share/stylesheets/lib/lineicons.css
new file mode 100644
index 0000000..757eb24
--- /dev/null
+++ b/Unit 5/Code Share/stylesheets/lib/lineicons.css
@@ -0,0 +1 @@
+@font-face{font-family:lineicons;src:url(fonts/LineIcons.eot);src:url(fonts/LineIcons.eot) format('embedded-opentype'),url(fonts/LineIcons.woff2) format('woff2'),url(fonts/LineIcons.woff) format('woff'),url(fonts/LineIcons.ttf) format('truetype'),url(fonts/LineIcons.svg) format('svg');font-weight:400;font-style:normal}.lni{display:inline-block;font:normal normal normal 1em/1 'LineIcons';speak:none;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.lni-sm{font-size:.8em}.lni-lg{font-size:1.2em}.lni-16{font-size:16px}.lni-32{font-size:32px}.lni-bg-square,.lni-bg-circle{padding:.35em;background-color:#eee}.lni-bg-circle{border-radius:50%}.lni-ul{padding-left:0;list-style-type:none}.lni-ul>li{display:flex;align-items:flex-start;line-height:1.4}.lni-ul>li>.lni{margin-right:.4em;line-height:inherit}.lni-is-spinning{-webkit-animation:lni-spin 2s infinite linear;-moz-animation:lni-spin 2s infinite linear;animation:lni-spin 2s infinite linear}@-webkit-keyframes lni-spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes lni-spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframes lni-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.lni-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.lni-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.lni-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.lni-flip-y{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);-webkit-transform:scale(-1,1);-moz-transform:scale(-1,1);-ms-transform:scale(-1,1);-o-transform:scale(-1,1);transform:scale(-1,1)}.lni-flip-x{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:scale(1,-1);-moz-transform:scale(1,-1);-ms-transform:scale(1,-1);-o-transform:scale(1,-1);transform:scale(1,-1)}.lni-500px::before{content:"\ea02"}.lni-add-files::before{content:"\ea03"}.lni-alarm-clock::before{content:"\ea04"}.lni-alarm::before{content:"\ea05"}.lni-airbnb::before{content:"\ea06"}.lni-adobe::before{content:"\ea07"}.lni-amazon-pay::before{content:"\ea08"}.lni-amazon::before{content:"\ea09"}.lni-amex::before{content:"\ea0a"}.lni-anchor::before{content:"\ea0b"}.lni-amazon-original::before{content:"\ea0c"}.lni-android-original::before{content:"\ea0d"}.lni-android::before{content:"\ea0e"}.lni-angellist::before{content:"\ea0f"}.lni-angle-double-down::before{content:"\ea10"}.lni-angle-double-left::before{content:"\ea11"}.lni-angle-double-right::before{content:"\ea12"}.lni-angle-double-up::before{content:"\ea13"}.lni-angular::before{content:"\ea14"}.lni-apartment::before{content:"\ea15"}.lni-app-store::before{content:"\ea16"}.lni-apple-pay::before{content:"\ea17"}.lni-apple::before{content:"\ea18"}.lni-archive::before{content:"\ea19"}.lni-arrow-down-circle::before{content:"\ea1a"}.lni-arrow-left-circle::before{content:"\ea1b"}.lni-arrow-left::before{content:"\ea1c"}.lni-arrow-right-circle::before{content:"\ea1d"}.lni-arrow-right::before{content:"\ea1e"}.lni-arrow-top-left::before{content:"\ea1f"}.lni-arrow-top-right::before{content:"\ea20"}.lni-arrow-up-circle::before{content:"\ea21"}.lni-arrow-up::before{content:"\ea22"}.lni-arrows-horizontal::before{content:"\ea23"}.lni-arrows-vertical::before{content:"\ea24"}.lni-atlassian::before{content:"\ea25"}.lni-aws::before{content:"\ea26"}.lni-arrow-down::before{content:"\ea27"}.lni-ambulance::before{content:"\ea28"}.lni-agenda::before{content:"\ea29"}.lni-backward::before{content:"\ea2a"}.lni-baloon::before{content:"\ea2b"}.lni-ban::before{content:"\ea2c"}.lni-bar-chart::before{content:"\ea2d"}.lni-behance-original::before{content:"\ea2e"}.lni-bitbucket::before{content:"\ea2f"}.lni-bitcoin::before{content:"\ea30"}.lni-blackboard::before{content:"\ea31"}.lni-blogger::before{content:"\ea32"}.lni-bluetooth::before{content:"\ea33"}.lni-bold::before{content:"\ea34"}.lni-bolt-alt::before{content:"\ea35"}.lni-bolt::before{content:"\ea36"}.lni-book::before{content:"\ea37"}.lni-bookmark-alt::before{content:"\ea38"}.lni-bookmark::before{content:"\ea39"}.lni-bootstrap::before{content:"\ea3a"}.lni-bricks::before{content:"\ea3b"}.lni-bridge::before{content:"\ea3c"}.lni-briefcase::before{content:"\ea3d"}.lni-brush-alt::before{content:"\ea3e"}.lni-brush::before{content:"\ea3f"}.lni-bubble::before{content:"\ea40"}.lni-bug::before{content:"\ea41"}.lni-bulb::before{content:"\ea42"}.lni-bullhorn::before{content:"\ea43"}.lni-burger::before{content:"\ea44"}.lni-bus::before{content:"\ea45"}.lni-cake::before{content:"\ea46"}.lni-calculator::before{content:"\ea47"}.lni-calendar::before{content:"\ea48"}.lni-camera::before{content:"\ea49"}.lni-candy-cane::before{content:"\ea4a"}.lni-candy::before{content:"\ea4b"}.lni-capsule::before{content:"\ea4c"}.lni-car-alt::before{content:"\ea4d"}.lni-car::before{content:"\ea4e"}.lni-caravan::before{content:"\ea4f"}.lni-cart-full::before{content:"\ea50"}.lni-cart::before{content:"\ea51"}.lni-certificate::before{content:"\ea52"}.lni-checkbox::before{content:"\ea53"}.lni-checkmark-circle::before{content:"\ea54"}.lni-checkmark::before{content:"\ea55"}.lni-chef-hat::before{content:"\ea56"}.lni-chevron-down-circle::before{content:"\ea57"}.lni-chevron-down::before{content:"\ea58"}.lni-chevron-left-circle::before{content:"\ea59"}.lni-chevron-left::before{content:"\ea5a"}.lni-chevron-right-circle::before{content:"\ea5b"}.lni-chevron-right::before{content:"\ea5c"}.lni-chevron-up-circle::before{content:"\ea5d"}.lni-chevron-up::before{content:"\ea5e"}.lni-chrome::before{content:"\ea5f"}.lni-circle-minus::before{content:"\ea60"}.lni-circle-plus::before{content:"\ea61"}.lni-clipboard::before{content:"\ea62"}.lni-close::before{content:"\ea63"}.lni-cloud-check::before{content:"\ea64"}.lni-cloud-download::before{content:"\ea65"}.lni-cloud-network::before{content:"\ea66"}.lni-cloud-sync::before{content:"\ea67"}.lni-cloud-upload::before{content:"\ea68"}.lni-cloud::before{content:"\ea69"}.lni-cloudy-sun::before{content:"\ea6a"}.lni-code-alt::before{content:"\ea6b"}.lni-code::before{content:"\ea6c"}.lni-codepen::before{content:"\ea6d"}.lni-coffee-cup::before{content:"\ea6e"}.lni-cog::before{content:"\ea6f"}.lni-cogs::before{content:"\ea70"}.lni-coin::before{content:"\ea71"}.lni-comments-alt::before{content:"\ea72"}.lni-comments-reply::before{content:"\ea73"}.lni-comments::before{content:"\ea74"}.lni-compass::before{content:"\ea75"}.lni-construction-hammer::before{content:"\ea76"}.lni-construction::before{content:"\ea77"}.lni-consulting::before{content:"\ea78"}.lni-control-panel::before{content:"\ea79"}.lni-cpanel::before{content:"\ea7a"}.lni-creative-commons::before{content:"\ea7b"}.lni-credit-cards::before{content:"\ea7c"}.lni-crop::before{content:"\ea7d"}.lni-cross-circle::before{content:"\ea7e"}.lni-crown::before{content:"\ea7f"}.lni-css3::before{content:"\ea80"}.lni-cup::before{content:"\ea81"}.lni-customer::before{content:"\ea82"}.lni-cut::before{content:"\ea83"}.lni-dashboard::before{content:"\ea84"}.lni-database::before{content:"\ea85"}.lni-delivery::before{content:"\ea86"}.lni-dev::before{content:"\ea87"}.lni-diamond-alt::before{content:"\ea88"}.lni-diamond::before{content:"\ea89"}.lni-diners-club::before{content:"\ea8a"}.lni-dinner::before{content:"\ea8b"}.lni-direction-alt::before{content:"\ea8c"}.lni-direction-ltr::before{content:"\ea8d"}.lni-direction-rtl::before{content:"\ea8e"}.lni-direction::before{content:"\ea8f"}.lni-discord::before{content:"\ea90"}.lni-discover::before{content:"\ea91"}.lni-display-alt::before{content:"\ea92"}.lni-display::before{content:"\ea93"}.lni-docker::before{content:"\ea94"}.lni-dollar::before{content:"\ea95"}.lni-domain::before{content:"\ea96"}.lni-download::before{content:"\ea97"}.lni-dribbble::before{content:"\ea98"}.lni-drop::before{content:"\ea99"}.lni-dropbox-original::before{content:"\ea9a"}.lni-dropbox::before{content:"\ea9b"}.lni-drupal-original::before{content:"\ea9c"}.lni-drupal::before{content:"\ea9d"}.lni-dumbbell::before{content:"\ea9e"}.lni-edge::before{content:"\ea9f"}.lni-emoji-cool::before{content:"\eaa0"}.lni-emoji-friendly::before{content:"\eaa1"}.lni-emoji-happy::before{content:"\eaa2"}.lni-emoji-sad::before{content:"\eaa3"}.lni-emoji-smile::before{content:"\eaa4"}.lni-emoji-speechless::before{content:"\eaa5"}.lni-emoji-suspect::before{content:"\eaa6"}.lni-emoji-tounge::before{content:"\eaa7"}.lni-empty-file::before{content:"\eaa8"}.lni-enter::before{content:"\eaa9"}.lni-envato::before{content:"\eaaa"}.lni-envelope::before{content:"\eaab"}.lni-eraser::before{content:"\eaac"}.lni-euro::before{content:"\eaad"}.lni-exit-down::before{content:"\eaae"}.lni-exit-up::before{content:"\eaaf"}.lni-exit::before{content:"\eab0"}.lni-eye::before{content:"\eab1"}.lni-facebook-filled::before{content:"\eab2"}.lni-facebook-messenger::before{content:"\eab3"}.lni-facebook-original::before{content:"\eab4"}.lni-facebook-oval::before{content:"\eab5"}.lni-facebook::before{content:"\eab6"}.lni-figma::before{content:"\eab7"}.lni-files::before{content:"\eab8"}.lni-firefox-original::before{content:"\eab9"}.lni-firefox::before{content:"\eaba"}.lni-fireworks::before{content:"\eabb"}.lni-first-aid::before{content:"\eabc"}.lni-flag-alt::before{content:"\eabd"}.lni-flag::before{content:"\eabe"}.lni-flags::before{content:"\eabf"}.lni-flickr::before{content:"\eac0"}.lni-basketball::before{content:"\eac1"}.lni-behance::before{content:"\eac2"}.lni-forward::before{content:"\eac3"}.lni-frame-expand::before{content:"\eac4"}.lni-flower::before{content:"\eac5"}.lni-full-screen::before{content:"\eac6"}.lni-funnel::before{content:"\eac7"}.lni-gallery::before{content:"\eac8"}.lni-game::before{content:"\eac9"}.lni-gift::before{content:"\eaca"}.lni-git::before{content:"\eacb"}.lni-github-original::before{content:"\eacc"}.lni-github::before{content:"\eacd"}.lni-goodreads::before{content:"\eace"}.lni-google-drive::before{content:"\eacf"}.lni-google-pay::before{content:"\ead0"}.lni-fresh-juice::before{content:"\ead1"}.lni-folder::before{content:"\ead2"}.lni-bi-cycle::before{content:"\ead3"}.lni-graph::before{content:"\ead4"}.lni-grid-alt::before{content:"\ead5"}.lni-grid::before{content:"\ead6"}.lni-google-wallet::before{content:"\ead7"}.lni-grow::before{content:"\ead8"}.lni-hammer::before{content:"\ead9"}.lni-hand::before{content:"\eada"}.lni-handshake::before{content:"\eadb"}.lni-harddrive::before{content:"\eadc"}.lni-headphone-alt::before{content:"\eadd"}.lni-headphone::before{content:"\eade"}.lni-heart-filled::before{content:"\eadf"}.lni-heart-monitor::before{content:"\eae0"}.lni-heart::before{content:"\eae1"}.lni-helicopter::before{content:"\eae2"}.lni-helmet::before{content:"\eae3"}.lni-help::before{content:"\eae4"}.lni-highlight-alt::before{content:"\eae5"}.lni-highlight::before{content:"\eae6"}.lni-home::before{content:"\eae7"}.lni-hospital::before{content:"\eae8"}.lni-hourglass::before{content:"\eae9"}.lni-html5::before{content:"\eaea"}.lni-image::before{content:"\eaeb"}.lni-inbox::before{content:"\eaec"}.lni-indent-decrease::before{content:"\eaed"}.lni-indent-increase::before{content:"\eaee"}.lni-infinite::before{content:"\eaef"}.lni-information::before{content:"\eaf0"}.lni-instagram-filled::before{content:"\eaf1"}.lni-instagram-original::before{content:"\eaf2"}.lni-instagram::before{content:"\eaf3"}.lni-invention::before{content:"\eaf4"}.lni-graduation::before{content:"\eaf5"}.lni-invest-monitor::before{content:"\eaf6"}.lni-island::before{content:"\eaf7"}.lni-italic::before{content:"\eaf8"}.lni-java::before{content:"\eaf9"}.lni-javascript::before{content:"\eafa"}.lni-jcb::before{content:"\eafb"}.lni-joomla-original::before{content:"\eafc"}.lni-joomla::before{content:"\eafd"}.lni-jsfiddle::before{content:"\eafe"}.lni-juice::before{content:"\eaff"}.lni-key::before{content:"\eb00"}.lni-keyboard::before{content:"\eb01"}.lni-keyword-research::before{content:"\eb02"}.lni-hacker-news::before{content:"\eb03"}.lni-google::before{content:"\eb04"}.lni-laravel::before{content:"\eb05"}.lni-layers::before{content:"\eb06"}.lni-layout::before{content:"\eb07"}.lni-leaf::before{content:"\eb08"}.lni-library::before{content:"\eb09"}.lni-licencse::before{content:"\eb0a"}.lni-life-ring::before{content:"\eb0b"}.lni-line-dashed::before{content:"\eb0c"}.lni-line-dotted::before{content:"\eb0d"}.lni-line-double::before{content:"\eb0e"}.lni-line-spacing::before{content:"\eb0f"}.lni-line::before{content:"\eb10"}.lni-lineicons-alt::before{content:"\eb11"}.lni-lineicons::before{content:"\eb12"}.lni-link::before{content:"\eb13"}.lni-linkedin-original::before{content:"\eb14"}.lni-linkedin::before{content:"\eb15"}.lni-list::before{content:"\eb16"}.lni-lock-alt::before{content:"\eb17"}.lni-lock::before{content:"\eb18"}.lni-magnet::before{content:"\eb19"}.lni-magnifier::before{content:"\eb1a"}.lni-mailchimp::before{content:"\eb1b"}.lni-map-marker::before{content:"\eb1c"}.lni-map::before{content:"\eb1d"}.lni-mashroom::before{content:"\eb1e"}.lni-mastercard::before{content:"\eb1f"}.lni-medall-alt::before{content:"\eb20"}.lni-medall::before{content:"\eb21"}.lni-medium::before{content:"\eb22"}.lni-laptop::before{content:"\eb23"}.lni-investment::before{content:"\eb24"}.lni-laptop-phone::before{content:"\eb25"}.lni-megento::before{content:"\eb26"}.lni-mic::before{content:"\eb27"}.lni-microphone::before{content:"\eb28"}.lni-menu::before{content:"\eb29"}.lni-microscope::before{content:"\eb2a"}.lni-money-location::before{content:"\eb2b"}.lni-minus::before{content:"\eb2c"}.lni-mobile::before{content:"\eb2d"}.lni-more-alt::before{content:"\eb2e"}.lni-mouse::before{content:"\eb2f"}.lni-move::before{content:"\eb30"}.lni-music::before{content:"\eb31"}.lni-network::before{content:"\eb32"}.lni-night::before{content:"\eb33"}.lni-nodejs-alt::before{content:"\eb34"}.lni-nodejs::before{content:"\eb35"}.lni-notepad::before{content:"\eb36"}.lni-npm::before{content:"\eb37"}.lni-offer::before{content:"\eb38"}.lni-opera::before{content:"\eb39"}.lni-package::before{content:"\eb3a"}.lni-page-break::before{content:"\eb3b"}.lni-pagination::before{content:"\eb3c"}.lni-paint-bucket::before{content:"\eb3d"}.lni-paint-roller::before{content:"\eb3e"}.lni-pallet::before{content:"\eb3f"}.lni-paperclip::before{content:"\eb40"}.lni-more::before{content:"\eb41"}.lni-pause::before{content:"\eb42"}.lni-paypal-original::before{content:"\eb43"}.lni-microsoft::before{content:"\eb44"}.lni-money-protection::before{content:"\eb45"}.lni-pencil::before{content:"\eb46"}.lni-paypal::before{content:"\eb47"}.lni-pencil-alt::before{content:"\eb48"}.lni-patreon::before{content:"\eb49"}.lni-phone-set::before{content:"\eb4a"}.lni-phone::before{content:"\eb4b"}.lni-pin::before{content:"\eb4c"}.lni-pinterest::before{content:"\eb4d"}.lni-pie-chart::before{content:"\eb4e"}.lni-pilcrow::before{content:"\eb4f"}.lni-plane::before{content:"\eb50"}.lni-play::before{content:"\eb51"}.lni-plug::before{content:"\eb52"}.lni-plus::before{content:"\eb53"}.lni-pointer-down::before{content:"\eb54"}.lni-pointer-left::before{content:"\eb55"}.lni-pointer-right::before{content:"\eb56"}.lni-pointer-up::before{content:"\eb57"}.lni-play-store::before{content:"\eb58"}.lni-pizza::before{content:"\eb59"}.lni-postcard::before{content:"\eb5a"}.lni-pound::before{content:"\eb5b"}.lni-power-switch::before{content:"\eb5c"}.lni-printer::before{content:"\eb5d"}.lni-producthunt::before{content:"\eb5e"}.lni-protection::before{content:"\eb5f"}.lni-pulse::before{content:"\eb60"}.lni-pyramids::before{content:"\eb61"}.lni-python::before{content:"\eb62"}.lni-pointer::before{content:"\eb63"}.lni-popup::before{content:"\eb64"}.lni-quotation::before{content:"\eb65"}.lni-radio-button::before{content:"\eb66"}.lni-rain::before{content:"\eb67"}.lni-quora::before{content:"\eb68"}.lni-react::before{content:"\eb69"}.lni-question-circle::before{content:"\eb6a"}.lni-php::before{content:"\eb6b"}.lni-reddit::before{content:"\eb6c"}.lni-reload::before{content:"\eb6d"}.lni-restaurant::before{content:"\eb6e"}.lni-road::before{content:"\eb6f"}.lni-rocket::before{content:"\eb70"}.lni-rss-feed::before{content:"\eb71"}.lni-ruler-alt::before{content:"\eb72"}.lni-ruler-pencil::before{content:"\eb73"}.lni-ruler::before{content:"\eb74"}.lni-rupee::before{content:"\eb75"}.lni-save::before{content:"\eb76"}.lni-school-bench-alt::before{content:"\eb77"}.lni-school-bench::before{content:"\eb78"}.lni-scooter::before{content:"\eb79"}.lni-scroll-down::before{content:"\eb7a"}.lni-search-alt::before{content:"\eb7b"}.lni-search::before{content:"\eb7c"}.lni-select::before{content:"\eb7d"}.lni-seo::before{content:"\eb7e"}.lni-service::before{content:"\eb7f"}.lni-share-alt::before{content:"\eb80"}.lni-share::before{content:"\eb81"}.lni-shield::before{content:"\eb82"}.lni-shift-left::before{content:"\eb83"}.lni-shift-right::before{content:"\eb84"}.lni-ship::before{content:"\eb85"}.lni-shopify::before{content:"\eb86"}.lni-shopping-basket::before{content:"\eb87"}.lni-shortcode::before{content:"\eb88"}.lni-shovel::before{content:"\eb89"}.lni-shuffle::before{content:"\eb8a"}.lni-signal::before{content:"\eb8b"}.lni-sketch::before{content:"\eb8c"}.lni-skipping-rope::before{content:"\eb8d"}.lni-skype::before{content:"\eb8e"}.lni-slack::before{content:"\eb8f"}.lni-slice::before{content:"\eb90"}.lni-slideshare::before{content:"\eb91"}.lni-slim::before{content:"\eb92"}.lni-reply::before{content:"\eb93"}.lni-sort-alpha-asc::before{content:"\eb94"}.lni-remove-file::before{content:"\eb95"}.lni-sort-amount-dsc::before{content:"\eb96"}.lni-sort-amount-asc::before{content:"\eb97"}.lni-soundcloud::before{content:"\eb98"}.lni-souncloud-original::before{content:"\eb99"}.lni-spiner-solid::before{content:"\eb9a"}.lni-revenue::before{content:"\eb9b"}.lni-spinner::before{content:"\eb9c"}.lni-spellcheck::before{content:"\eb9d"}.lni-spotify::before{content:"\eb9e"}.lni-spray::before{content:"\eb9f"}.lni-sprout::before{content:"\eba0"}.lni-snapchat::before{content:"\eba1"}.lni-stamp::before{content:"\eba2"}.lni-star-empty::before{content:"\eba3"}.lni-star-filled::before{content:"\eba4"}.lni-star-half::before{content:"\eba5"}.lni-star::before{content:"\eba6"}.lni-stats-down::before{content:"\eba7"}.lni-spinner-arrow::before{content:"\eba8"}.lni-steam::before{content:"\eba9"}.lni-stackoverflow::before{content:"\ebaa"}.lni-stop::before{content:"\ebab"}.lni-strikethrough::before{content:"\ebac"}.lni-sthethoscope::before{content:"\ebad"}.lni-stumbleupon::before{content:"\ebae"}.lni-sun::before{content:"\ebaf"}.lni-support::before{content:"\ebb0"}.lni-surf-board::before{content:"\ebb1"}.lni-swift::before{content:"\ebb2"}.lni-syringe::before{content:"\ebb3"}.lni-tab::before{content:"\ebb4"}.lni-tag::before{content:"\ebb5"}.lni-target-customer::before{content:"\ebb6"}.lni-target-revenue::before{content:"\ebb7"}.lni-target::before{content:"\ebb8"}.lni-taxi::before{content:"\ebb9"}.lni-stats-up::before{content:"\ebba"}.lni-telegram-original::before{content:"\ebbb"}.lni-telegram::before{content:"\ebbc"}.lni-text-align-center::before{content:"\ebbd"}.lni-text-align-justify::before{content:"\ebbe"}.lni-text-align-left::before{content:"\ebbf"}.lni-text-format-remove::before{content:"\ebc0"}.lni-text-align-right::before{content:"\ebc1"}.lni-text-format::before{content:"\ebc2"}.lni-thought::before{content:"\ebc3"}.lni-thumbs-down::before{content:"\ebc4"}.lni-thumbs-up::before{content:"\ebc5"}.lni-thunder-alt::before{content:"\ebc6"}.lni-thunder::before{content:"\ebc7"}.lni-ticket-alt::before{content:"\ebc8"}.lni-ticket::before{content:"\ebc9"}.lni-timer::before{content:"\ebca"}.lni-train-alt::before{content:"\ebcb"}.lni-train::before{content:"\ebcc"}.lni-trash::before{content:"\ebcd"}.lni-travel::before{content:"\ebce"}.lni-tree::before{content:"\ebcf"}.lni-trees::before{content:"\ebd0"}.lni-trello::before{content:"\ebd1"}.lni-trowel::before{content:"\ebd2"}.lni-tshirt::before{content:"\ebd3"}.lni-tumblr::before{content:"\ebd4"}.lni-twitch::before{content:"\ebd5"}.lni-twitter-filled::before{content:"\ebd6"}.lni-twitter-original::before{content:"\ebd7"}.lni-twitter::before{content:"\ebd8"}.lni-ubuntu::before{content:"\ebd9"}.lni-underline::before{content:"\ebda"}.lni-unlink::before{content:"\ebdb"}.lni-unlock::before{content:"\ebdc"}.lni-upload::before{content:"\ebdd"}.lni-user::before{content:"\ebde"}.lni-users::before{content:"\ebdf"}.lni-ux::before{content:"\ebe0"}.lni-vector::before{content:"\ebe1"}.lni-video::before{content:"\ebe2"}.lni-vimeo::before{content:"\ebe3"}.lni-visa::before{content:"\ebe4"}.lni-vk::before{content:"\ebe5"}.lni-volume-high::before{content:"\ebe6"}.lni-volume-low::before{content:"\ebe7"}.lni-volume-medium::before{content:"\ebe8"}.lni-volume-mute::before{content:"\ebe9"}.lni-volume::before{content:"\ebea"}.lni-wallet::before{content:"\ebeb"}.lni-warning::before{content:"\ebec"}.lni-website-alt::before{content:"\ebed"}.lni-website::before{content:"\ebee"}.lni-wechat::before{content:"\ebef"}.lni-weight::before{content:"\ebf0"}.lni-whatsapp::before{content:"\ebf1"}.lni-wheelbarrow::before{content:"\ebf2"}.lni-wheelchair::before{content:"\ebf3"}.lni-windows::before{content:"\ebf4"}.lni-wordpress-filled::before{content:"\ebf5"}.lni-wordpress::before{content:"\ebf6"}.lni-world-alt::before{content:"\ebf7"}.lni-world::before{content:"\ebf8"}.lni-write::before{content:"\ebf9"}.lni-yahoo::before{content:"\ebfa"}.lni-ycombinator::before{content:"\ebfb"}.lni-yen::before{content:"\ebfc"}.lni-youtube::before{content:"\ebfd"}.lni-zip::before{content:"\ebfe"}.lni-zoom-in::before{content:"\ebff"}.lni-zoom-out::before{content:"\ec00"}.lni-teabag::before{content:"\ec01"}.lni-stripe::before{content:"\ec02"}.lni-spotify-original::before{content:"\ec03"}
\ No newline at end of file
diff --git a/Unit 5/Code Share/stylesheets/style.css b/Unit 5/Code Share/stylesheets/style.css
new file mode 100644
index 0000000..6f184e2
--- /dev/null
+++ b/Unit 5/Code Share/stylesheets/style.css
@@ -0,0 +1,270 @@
+/* Color Scheme:
+#044389
+#fcff4b
+#ffad05
+#7cafc4
+#5995ed */
+header{
+ height: 150px;
+ text-align: center;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+
+::placeholder{
+ color: var(--c4);
+}
+
+:root {
+ --c1: #044389;
+ --c2: #fcff4b;
+ --c3: #ffad05;
+ --c4: #7cafc4;
+ --c5: #5995ed;
+ --important: rgba(238, 76, 58);
+ --later: rgba(62, 114, 234);
+
+ --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;
+ color: var(--c4);
+}
+
+
+
+section {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+
+h3 {
+ color: var(--c3);
+ font-size: 1rem;
+ font-weight: 400;
+ margin-bottom: 0.5rem;
+}
+
+h4 {
+ color: var(--c2);
+ 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(--c2);
+ 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(--c3);
+ 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;
+ color: var(--c4);
+}
+
+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, #help {
+ display: block;
+ width: 100%;
+ font-size: 1.125rem;
+ padding: 1rem 1.5rem;
+ color: var(--c5);
+ font-weight: 700;
+ text-transform: uppercase;
+ background-color: var(--c2);
+ 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(--c1);
+ color: var(--c2);
+}
+
diff --git a/Unit 5/Code Share/todoOnly.html b/Unit 5/Code Share/todoOnly.html
new file mode 100644
index 0000000..e090519
--- /dev/null
+++ b/Unit 5/Code Share/todoOnly.html
@@ -0,0 +1,49 @@
+
+
+
+
+ Todo List
+
+
+
+
+
+
+
+
This is a viewer for your todo-list
+
The content on this page is view only
+
This page will refresh automatically every 5 seconds. See footer for more info.
+
+
+
+
+
+ Todo List for:
+
+
+
+
+
+
+
+
+
Todo List:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Unit 5/Day 2/README.html b/Unit 5/Day 2/README.html
new file mode 100644
index 0000000..8510f5f
--- /dev/null
+++ b/Unit 5/Day 2/README.html
@@ -0,0 +1,38 @@
+
+
+
+
+ Todo List
+
+
+
+
+
+
+
+
+
+ # 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.
+
+
+
+
+
\ No newline at end of file
diff --git a/Unit 5/Day 2/README.md b/Unit 5/Day 2/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/Unit 5/Day 2/index.html b/Unit 5/Day 2/index.html
new file mode 100644
index 0000000..d65c020
--- /dev/null
+++ b/Unit 5/Day 2/index.html
@@ -0,0 +1,84 @@
+
+
+
+
+ Todo List
+
+
+
+
+
+
+
+
+
Todo-List Project
+
Intro to Computer Programing
+
See footer for more info
+
+
+
+
+
+ Todo List for:
+
+
Press enter to save name
+
+
+
CREATE A TASK
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Unit 5/Day 2/instructions.txt b/Unit 5/Day 2/instructions.txt
new file mode 100644
index 0000000..65fd5e2
--- /dev/null
+++ b/Unit 5/Day 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.
\ No newline at end of file
diff --git a/Unit 5/Day 2/js/lib/dismissible.js b/Unit 5/Day 2/js/lib/dismissible.js
new file mode 100644
index 0000000..02be45e
--- /dev/null
+++ b/Unit 5/Day 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);
\ No newline at end of file
diff --git a/Unit 5/Day 2/js/lib/md-block.js b/Unit 5/Day 2/js/lib/md-block.js
new file mode 100644
index 0000000..7059890
--- /dev/null
+++ b/Unit 5/Day 2/js/lib/md-block.js
@@ -0,0 +1,301 @@
+/**
+ * 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(/&(?=[lg]t;)/g, "&");
+ }
+ else {
+ // Remote code may include characters that need to be escaped to be visible in HTML
+ code = code.replace(/${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 = ``;
+
+ if (hlinks === "") {
+ // Heading content is the link
+ content += text + "";
+ }
+ else {
+ // Headings are prepended with a linked symbol
+ content += hlinks + "" + text;
+ }
+ }
+
+ return `
+
+ ${content}
+ `;
+ },
+
+ 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(/&(?=[lg]t;)/g, "&");
+ }
+ else {
+ // Remote code may include characters that need to be escaped to be visible in HTML
+ code = code.replace(/${code}`;
+ }
+ }, 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);
\ No newline at end of file
diff --git a/Unit 5/Day 2/js/script.js b/Unit 5/Day 2/js/script.js
new file mode 100644
index 0000000..e32580c
--- /dev/null
+++ b/Unit 5/Day 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");
+ }
+};
diff --git a/Unit 5/Day 2/js/submission.js b/Unit 5/Day 2/js/submission.js
new file mode 100644
index 0000000..8119d92
--- /dev/null
+++ b/Unit 5/Day 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;i0 ){
+ 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);
\ No newline at end of file
diff --git a/Unit 5/Day 2/replit.nix b/Unit 5/Day 2/replit.nix
new file mode 100644
index 0000000..82dea6f
--- /dev/null
+++ b/Unit 5/Day 2/replit.nix
@@ -0,0 +1,6 @@
+{ pkgs }: {
+ deps = [
+ pkgs.nodePackages.vscode-langservers-extracted
+ pkgs.nodePackages.typescript-language-server
+ ];
+}
\ No newline at end of file
diff --git a/Unit 5/Day 2/stylesheets/lib/dismissible.css b/Unit 5/Day 2/stylesheets/lib/dismissible.css
new file mode 100644
index 0000000..67e0b3e
--- /dev/null
+++ b/Unit 5/Day 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);
+ }
+}
\ No newline at end of file
diff --git a/Unit 5/Day 2/stylesheets/lib/lineicons.css b/Unit 5/Day 2/stylesheets/lib/lineicons.css
new file mode 100644
index 0000000..757eb24
--- /dev/null
+++ b/Unit 5/Day 2/stylesheets/lib/lineicons.css
@@ -0,0 +1 @@
+@font-face{font-family:lineicons;src:url(fonts/LineIcons.eot);src:url(fonts/LineIcons.eot) format('embedded-opentype'),url(fonts/LineIcons.woff2) format('woff2'),url(fonts/LineIcons.woff) format('woff'),url(fonts/LineIcons.ttf) format('truetype'),url(fonts/LineIcons.svg) format('svg');font-weight:400;font-style:normal}.lni{display:inline-block;font:normal normal normal 1em/1 'LineIcons';speak:none;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.lni-sm{font-size:.8em}.lni-lg{font-size:1.2em}.lni-16{font-size:16px}.lni-32{font-size:32px}.lni-bg-square,.lni-bg-circle{padding:.35em;background-color:#eee}.lni-bg-circle{border-radius:50%}.lni-ul{padding-left:0;list-style-type:none}.lni-ul>li{display:flex;align-items:flex-start;line-height:1.4}.lni-ul>li>.lni{margin-right:.4em;line-height:inherit}.lni-is-spinning{-webkit-animation:lni-spin 2s infinite linear;-moz-animation:lni-spin 2s infinite linear;animation:lni-spin 2s infinite linear}@-webkit-keyframes lni-spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes lni-spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframes lni-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.lni-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.lni-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.lni-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.lni-flip-y{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);-webkit-transform:scale(-1,1);-moz-transform:scale(-1,1);-ms-transform:scale(-1,1);-o-transform:scale(-1,1);transform:scale(-1,1)}.lni-flip-x{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:scale(1,-1);-moz-transform:scale(1,-1);-ms-transform:scale(1,-1);-o-transform:scale(1,-1);transform:scale(1,-1)}.lni-500px::before{content:"\ea02"}.lni-add-files::before{content:"\ea03"}.lni-alarm-clock::before{content:"\ea04"}.lni-alarm::before{content:"\ea05"}.lni-airbnb::before{content:"\ea06"}.lni-adobe::before{content:"\ea07"}.lni-amazon-pay::before{content:"\ea08"}.lni-amazon::before{content:"\ea09"}.lni-amex::before{content:"\ea0a"}.lni-anchor::before{content:"\ea0b"}.lni-amazon-original::before{content:"\ea0c"}.lni-android-original::before{content:"\ea0d"}.lni-android::before{content:"\ea0e"}.lni-angellist::before{content:"\ea0f"}.lni-angle-double-down::before{content:"\ea10"}.lni-angle-double-left::before{content:"\ea11"}.lni-angle-double-right::before{content:"\ea12"}.lni-angle-double-up::before{content:"\ea13"}.lni-angular::before{content:"\ea14"}.lni-apartment::before{content:"\ea15"}.lni-app-store::before{content:"\ea16"}.lni-apple-pay::before{content:"\ea17"}.lni-apple::before{content:"\ea18"}.lni-archive::before{content:"\ea19"}.lni-arrow-down-circle::before{content:"\ea1a"}.lni-arrow-left-circle::before{content:"\ea1b"}.lni-arrow-left::before{content:"\ea1c"}.lni-arrow-right-circle::before{content:"\ea1d"}.lni-arrow-right::before{content:"\ea1e"}.lni-arrow-top-left::before{content:"\ea1f"}.lni-arrow-top-right::before{content:"\ea20"}.lni-arrow-up-circle::before{content:"\ea21"}.lni-arrow-up::before{content:"\ea22"}.lni-arrows-horizontal::before{content:"\ea23"}.lni-arrows-vertical::before{content:"\ea24"}.lni-atlassian::before{content:"\ea25"}.lni-aws::before{content:"\ea26"}.lni-arrow-down::before{content:"\ea27"}.lni-ambulance::before{content:"\ea28"}.lni-agenda::before{content:"\ea29"}.lni-backward::before{content:"\ea2a"}.lni-baloon::before{content:"\ea2b"}.lni-ban::before{content:"\ea2c"}.lni-bar-chart::before{content:"\ea2d"}.lni-behance-original::before{content:"\ea2e"}.lni-bitbucket::before{content:"\ea2f"}.lni-bitcoin::before{content:"\ea30"}.lni-blackboard::before{content:"\ea31"}.lni-blogger::before{content:"\ea32"}.lni-bluetooth::before{content:"\ea33"}.lni-bold::before{content:"\ea34"}.lni-bolt-alt::before{content:"\ea35"}.lni-bolt::before{content:"\ea36"}.lni-book::before{content:"\ea37"}.lni-bookmark-alt::before{content:"\ea38"}.lni-bookmark::before{content:"\ea39"}.lni-bootstrap::before{content:"\ea3a"}.lni-bricks::before{content:"\ea3b"}.lni-bridge::before{content:"\ea3c"}.lni-briefcase::before{content:"\ea3d"}.lni-brush-alt::before{content:"\ea3e"}.lni-brush::before{content:"\ea3f"}.lni-bubble::before{content:"\ea40"}.lni-bug::before{content:"\ea41"}.lni-bulb::before{content:"\ea42"}.lni-bullhorn::before{content:"\ea43"}.lni-burger::before{content:"\ea44"}.lni-bus::before{content:"\ea45"}.lni-cake::before{content:"\ea46"}.lni-calculator::before{content:"\ea47"}.lni-calendar::before{content:"\ea48"}.lni-camera::before{content:"\ea49"}.lni-candy-cane::before{content:"\ea4a"}.lni-candy::before{content:"\ea4b"}.lni-capsule::before{content:"\ea4c"}.lni-car-alt::before{content:"\ea4d"}.lni-car::before{content:"\ea4e"}.lni-caravan::before{content:"\ea4f"}.lni-cart-full::before{content:"\ea50"}.lni-cart::before{content:"\ea51"}.lni-certificate::before{content:"\ea52"}.lni-checkbox::before{content:"\ea53"}.lni-checkmark-circle::before{content:"\ea54"}.lni-checkmark::before{content:"\ea55"}.lni-chef-hat::before{content:"\ea56"}.lni-chevron-down-circle::before{content:"\ea57"}.lni-chevron-down::before{content:"\ea58"}.lni-chevron-left-circle::before{content:"\ea59"}.lni-chevron-left::before{content:"\ea5a"}.lni-chevron-right-circle::before{content:"\ea5b"}.lni-chevron-right::before{content:"\ea5c"}.lni-chevron-up-circle::before{content:"\ea5d"}.lni-chevron-up::before{content:"\ea5e"}.lni-chrome::before{content:"\ea5f"}.lni-circle-minus::before{content:"\ea60"}.lni-circle-plus::before{content:"\ea61"}.lni-clipboard::before{content:"\ea62"}.lni-close::before{content:"\ea63"}.lni-cloud-check::before{content:"\ea64"}.lni-cloud-download::before{content:"\ea65"}.lni-cloud-network::before{content:"\ea66"}.lni-cloud-sync::before{content:"\ea67"}.lni-cloud-upload::before{content:"\ea68"}.lni-cloud::before{content:"\ea69"}.lni-cloudy-sun::before{content:"\ea6a"}.lni-code-alt::before{content:"\ea6b"}.lni-code::before{content:"\ea6c"}.lni-codepen::before{content:"\ea6d"}.lni-coffee-cup::before{content:"\ea6e"}.lni-cog::before{content:"\ea6f"}.lni-cogs::before{content:"\ea70"}.lni-coin::before{content:"\ea71"}.lni-comments-alt::before{content:"\ea72"}.lni-comments-reply::before{content:"\ea73"}.lni-comments::before{content:"\ea74"}.lni-compass::before{content:"\ea75"}.lni-construction-hammer::before{content:"\ea76"}.lni-construction::before{content:"\ea77"}.lni-consulting::before{content:"\ea78"}.lni-control-panel::before{content:"\ea79"}.lni-cpanel::before{content:"\ea7a"}.lni-creative-commons::before{content:"\ea7b"}.lni-credit-cards::before{content:"\ea7c"}.lni-crop::before{content:"\ea7d"}.lni-cross-circle::before{content:"\ea7e"}.lni-crown::before{content:"\ea7f"}.lni-css3::before{content:"\ea80"}.lni-cup::before{content:"\ea81"}.lni-customer::before{content:"\ea82"}.lni-cut::before{content:"\ea83"}.lni-dashboard::before{content:"\ea84"}.lni-database::before{content:"\ea85"}.lni-delivery::before{content:"\ea86"}.lni-dev::before{content:"\ea87"}.lni-diamond-alt::before{content:"\ea88"}.lni-diamond::before{content:"\ea89"}.lni-diners-club::before{content:"\ea8a"}.lni-dinner::before{content:"\ea8b"}.lni-direction-alt::before{content:"\ea8c"}.lni-direction-ltr::before{content:"\ea8d"}.lni-direction-rtl::before{content:"\ea8e"}.lni-direction::before{content:"\ea8f"}.lni-discord::before{content:"\ea90"}.lni-discover::before{content:"\ea91"}.lni-display-alt::before{content:"\ea92"}.lni-display::before{content:"\ea93"}.lni-docker::before{content:"\ea94"}.lni-dollar::before{content:"\ea95"}.lni-domain::before{content:"\ea96"}.lni-download::before{content:"\ea97"}.lni-dribbble::before{content:"\ea98"}.lni-drop::before{content:"\ea99"}.lni-dropbox-original::before{content:"\ea9a"}.lni-dropbox::before{content:"\ea9b"}.lni-drupal-original::before{content:"\ea9c"}.lni-drupal::before{content:"\ea9d"}.lni-dumbbell::before{content:"\ea9e"}.lni-edge::before{content:"\ea9f"}.lni-emoji-cool::before{content:"\eaa0"}.lni-emoji-friendly::before{content:"\eaa1"}.lni-emoji-happy::before{content:"\eaa2"}.lni-emoji-sad::before{content:"\eaa3"}.lni-emoji-smile::before{content:"\eaa4"}.lni-emoji-speechless::before{content:"\eaa5"}.lni-emoji-suspect::before{content:"\eaa6"}.lni-emoji-tounge::before{content:"\eaa7"}.lni-empty-file::before{content:"\eaa8"}.lni-enter::before{content:"\eaa9"}.lni-envato::before{content:"\eaaa"}.lni-envelope::before{content:"\eaab"}.lni-eraser::before{content:"\eaac"}.lni-euro::before{content:"\eaad"}.lni-exit-down::before{content:"\eaae"}.lni-exit-up::before{content:"\eaaf"}.lni-exit::before{content:"\eab0"}.lni-eye::before{content:"\eab1"}.lni-facebook-filled::before{content:"\eab2"}.lni-facebook-messenger::before{content:"\eab3"}.lni-facebook-original::before{content:"\eab4"}.lni-facebook-oval::before{content:"\eab5"}.lni-facebook::before{content:"\eab6"}.lni-figma::before{content:"\eab7"}.lni-files::before{content:"\eab8"}.lni-firefox-original::before{content:"\eab9"}.lni-firefox::before{content:"\eaba"}.lni-fireworks::before{content:"\eabb"}.lni-first-aid::before{content:"\eabc"}.lni-flag-alt::before{content:"\eabd"}.lni-flag::before{content:"\eabe"}.lni-flags::before{content:"\eabf"}.lni-flickr::before{content:"\eac0"}.lni-basketball::before{content:"\eac1"}.lni-behance::before{content:"\eac2"}.lni-forward::before{content:"\eac3"}.lni-frame-expand::before{content:"\eac4"}.lni-flower::before{content:"\eac5"}.lni-full-screen::before{content:"\eac6"}.lni-funnel::before{content:"\eac7"}.lni-gallery::before{content:"\eac8"}.lni-game::before{content:"\eac9"}.lni-gift::before{content:"\eaca"}.lni-git::before{content:"\eacb"}.lni-github-original::before{content:"\eacc"}.lni-github::before{content:"\eacd"}.lni-goodreads::before{content:"\eace"}.lni-google-drive::before{content:"\eacf"}.lni-google-pay::before{content:"\ead0"}.lni-fresh-juice::before{content:"\ead1"}.lni-folder::before{content:"\ead2"}.lni-bi-cycle::before{content:"\ead3"}.lni-graph::before{content:"\ead4"}.lni-grid-alt::before{content:"\ead5"}.lni-grid::before{content:"\ead6"}.lni-google-wallet::before{content:"\ead7"}.lni-grow::before{content:"\ead8"}.lni-hammer::before{content:"\ead9"}.lni-hand::before{content:"\eada"}.lni-handshake::before{content:"\eadb"}.lni-harddrive::before{content:"\eadc"}.lni-headphone-alt::before{content:"\eadd"}.lni-headphone::before{content:"\eade"}.lni-heart-filled::before{content:"\eadf"}.lni-heart-monitor::before{content:"\eae0"}.lni-heart::before{content:"\eae1"}.lni-helicopter::before{content:"\eae2"}.lni-helmet::before{content:"\eae3"}.lni-help::before{content:"\eae4"}.lni-highlight-alt::before{content:"\eae5"}.lni-highlight::before{content:"\eae6"}.lni-home::before{content:"\eae7"}.lni-hospital::before{content:"\eae8"}.lni-hourglass::before{content:"\eae9"}.lni-html5::before{content:"\eaea"}.lni-image::before{content:"\eaeb"}.lni-inbox::before{content:"\eaec"}.lni-indent-decrease::before{content:"\eaed"}.lni-indent-increase::before{content:"\eaee"}.lni-infinite::before{content:"\eaef"}.lni-information::before{content:"\eaf0"}.lni-instagram-filled::before{content:"\eaf1"}.lni-instagram-original::before{content:"\eaf2"}.lni-instagram::before{content:"\eaf3"}.lni-invention::before{content:"\eaf4"}.lni-graduation::before{content:"\eaf5"}.lni-invest-monitor::before{content:"\eaf6"}.lni-island::before{content:"\eaf7"}.lni-italic::before{content:"\eaf8"}.lni-java::before{content:"\eaf9"}.lni-javascript::before{content:"\eafa"}.lni-jcb::before{content:"\eafb"}.lni-joomla-original::before{content:"\eafc"}.lni-joomla::before{content:"\eafd"}.lni-jsfiddle::before{content:"\eafe"}.lni-juice::before{content:"\eaff"}.lni-key::before{content:"\eb00"}.lni-keyboard::before{content:"\eb01"}.lni-keyword-research::before{content:"\eb02"}.lni-hacker-news::before{content:"\eb03"}.lni-google::before{content:"\eb04"}.lni-laravel::before{content:"\eb05"}.lni-layers::before{content:"\eb06"}.lni-layout::before{content:"\eb07"}.lni-leaf::before{content:"\eb08"}.lni-library::before{content:"\eb09"}.lni-licencse::before{content:"\eb0a"}.lni-life-ring::before{content:"\eb0b"}.lni-line-dashed::before{content:"\eb0c"}.lni-line-dotted::before{content:"\eb0d"}.lni-line-double::before{content:"\eb0e"}.lni-line-spacing::before{content:"\eb0f"}.lni-line::before{content:"\eb10"}.lni-lineicons-alt::before{content:"\eb11"}.lni-lineicons::before{content:"\eb12"}.lni-link::before{content:"\eb13"}.lni-linkedin-original::before{content:"\eb14"}.lni-linkedin::before{content:"\eb15"}.lni-list::before{content:"\eb16"}.lni-lock-alt::before{content:"\eb17"}.lni-lock::before{content:"\eb18"}.lni-magnet::before{content:"\eb19"}.lni-magnifier::before{content:"\eb1a"}.lni-mailchimp::before{content:"\eb1b"}.lni-map-marker::before{content:"\eb1c"}.lni-map::before{content:"\eb1d"}.lni-mashroom::before{content:"\eb1e"}.lni-mastercard::before{content:"\eb1f"}.lni-medall-alt::before{content:"\eb20"}.lni-medall::before{content:"\eb21"}.lni-medium::before{content:"\eb22"}.lni-laptop::before{content:"\eb23"}.lni-investment::before{content:"\eb24"}.lni-laptop-phone::before{content:"\eb25"}.lni-megento::before{content:"\eb26"}.lni-mic::before{content:"\eb27"}.lni-microphone::before{content:"\eb28"}.lni-menu::before{content:"\eb29"}.lni-microscope::before{content:"\eb2a"}.lni-money-location::before{content:"\eb2b"}.lni-minus::before{content:"\eb2c"}.lni-mobile::before{content:"\eb2d"}.lni-more-alt::before{content:"\eb2e"}.lni-mouse::before{content:"\eb2f"}.lni-move::before{content:"\eb30"}.lni-music::before{content:"\eb31"}.lni-network::before{content:"\eb32"}.lni-night::before{content:"\eb33"}.lni-nodejs-alt::before{content:"\eb34"}.lni-nodejs::before{content:"\eb35"}.lni-notepad::before{content:"\eb36"}.lni-npm::before{content:"\eb37"}.lni-offer::before{content:"\eb38"}.lni-opera::before{content:"\eb39"}.lni-package::before{content:"\eb3a"}.lni-page-break::before{content:"\eb3b"}.lni-pagination::before{content:"\eb3c"}.lni-paint-bucket::before{content:"\eb3d"}.lni-paint-roller::before{content:"\eb3e"}.lni-pallet::before{content:"\eb3f"}.lni-paperclip::before{content:"\eb40"}.lni-more::before{content:"\eb41"}.lni-pause::before{content:"\eb42"}.lni-paypal-original::before{content:"\eb43"}.lni-microsoft::before{content:"\eb44"}.lni-money-protection::before{content:"\eb45"}.lni-pencil::before{content:"\eb46"}.lni-paypal::before{content:"\eb47"}.lni-pencil-alt::before{content:"\eb48"}.lni-patreon::before{content:"\eb49"}.lni-phone-set::before{content:"\eb4a"}.lni-phone::before{content:"\eb4b"}.lni-pin::before{content:"\eb4c"}.lni-pinterest::before{content:"\eb4d"}.lni-pie-chart::before{content:"\eb4e"}.lni-pilcrow::before{content:"\eb4f"}.lni-plane::before{content:"\eb50"}.lni-play::before{content:"\eb51"}.lni-plug::before{content:"\eb52"}.lni-plus::before{content:"\eb53"}.lni-pointer-down::before{content:"\eb54"}.lni-pointer-left::before{content:"\eb55"}.lni-pointer-right::before{content:"\eb56"}.lni-pointer-up::before{content:"\eb57"}.lni-play-store::before{content:"\eb58"}.lni-pizza::before{content:"\eb59"}.lni-postcard::before{content:"\eb5a"}.lni-pound::before{content:"\eb5b"}.lni-power-switch::before{content:"\eb5c"}.lni-printer::before{content:"\eb5d"}.lni-producthunt::before{content:"\eb5e"}.lni-protection::before{content:"\eb5f"}.lni-pulse::before{content:"\eb60"}.lni-pyramids::before{content:"\eb61"}.lni-python::before{content:"\eb62"}.lni-pointer::before{content:"\eb63"}.lni-popup::before{content:"\eb64"}.lni-quotation::before{content:"\eb65"}.lni-radio-button::before{content:"\eb66"}.lni-rain::before{content:"\eb67"}.lni-quora::before{content:"\eb68"}.lni-react::before{content:"\eb69"}.lni-question-circle::before{content:"\eb6a"}.lni-php::before{content:"\eb6b"}.lni-reddit::before{content:"\eb6c"}.lni-reload::before{content:"\eb6d"}.lni-restaurant::before{content:"\eb6e"}.lni-road::before{content:"\eb6f"}.lni-rocket::before{content:"\eb70"}.lni-rss-feed::before{content:"\eb71"}.lni-ruler-alt::before{content:"\eb72"}.lni-ruler-pencil::before{content:"\eb73"}.lni-ruler::before{content:"\eb74"}.lni-rupee::before{content:"\eb75"}.lni-save::before{content:"\eb76"}.lni-school-bench-alt::before{content:"\eb77"}.lni-school-bench::before{content:"\eb78"}.lni-scooter::before{content:"\eb79"}.lni-scroll-down::before{content:"\eb7a"}.lni-search-alt::before{content:"\eb7b"}.lni-search::before{content:"\eb7c"}.lni-select::before{content:"\eb7d"}.lni-seo::before{content:"\eb7e"}.lni-service::before{content:"\eb7f"}.lni-share-alt::before{content:"\eb80"}.lni-share::before{content:"\eb81"}.lni-shield::before{content:"\eb82"}.lni-shift-left::before{content:"\eb83"}.lni-shift-right::before{content:"\eb84"}.lni-ship::before{content:"\eb85"}.lni-shopify::before{content:"\eb86"}.lni-shopping-basket::before{content:"\eb87"}.lni-shortcode::before{content:"\eb88"}.lni-shovel::before{content:"\eb89"}.lni-shuffle::before{content:"\eb8a"}.lni-signal::before{content:"\eb8b"}.lni-sketch::before{content:"\eb8c"}.lni-skipping-rope::before{content:"\eb8d"}.lni-skype::before{content:"\eb8e"}.lni-slack::before{content:"\eb8f"}.lni-slice::before{content:"\eb90"}.lni-slideshare::before{content:"\eb91"}.lni-slim::before{content:"\eb92"}.lni-reply::before{content:"\eb93"}.lni-sort-alpha-asc::before{content:"\eb94"}.lni-remove-file::before{content:"\eb95"}.lni-sort-amount-dsc::before{content:"\eb96"}.lni-sort-amount-asc::before{content:"\eb97"}.lni-soundcloud::before{content:"\eb98"}.lni-souncloud-original::before{content:"\eb99"}.lni-spiner-solid::before{content:"\eb9a"}.lni-revenue::before{content:"\eb9b"}.lni-spinner::before{content:"\eb9c"}.lni-spellcheck::before{content:"\eb9d"}.lni-spotify::before{content:"\eb9e"}.lni-spray::before{content:"\eb9f"}.lni-sprout::before{content:"\eba0"}.lni-snapchat::before{content:"\eba1"}.lni-stamp::before{content:"\eba2"}.lni-star-empty::before{content:"\eba3"}.lni-star-filled::before{content:"\eba4"}.lni-star-half::before{content:"\eba5"}.lni-star::before{content:"\eba6"}.lni-stats-down::before{content:"\eba7"}.lni-spinner-arrow::before{content:"\eba8"}.lni-steam::before{content:"\eba9"}.lni-stackoverflow::before{content:"\ebaa"}.lni-stop::before{content:"\ebab"}.lni-strikethrough::before{content:"\ebac"}.lni-sthethoscope::before{content:"\ebad"}.lni-stumbleupon::before{content:"\ebae"}.lni-sun::before{content:"\ebaf"}.lni-support::before{content:"\ebb0"}.lni-surf-board::before{content:"\ebb1"}.lni-swift::before{content:"\ebb2"}.lni-syringe::before{content:"\ebb3"}.lni-tab::before{content:"\ebb4"}.lni-tag::before{content:"\ebb5"}.lni-target-customer::before{content:"\ebb6"}.lni-target-revenue::before{content:"\ebb7"}.lni-target::before{content:"\ebb8"}.lni-taxi::before{content:"\ebb9"}.lni-stats-up::before{content:"\ebba"}.lni-telegram-original::before{content:"\ebbb"}.lni-telegram::before{content:"\ebbc"}.lni-text-align-center::before{content:"\ebbd"}.lni-text-align-justify::before{content:"\ebbe"}.lni-text-align-left::before{content:"\ebbf"}.lni-text-format-remove::before{content:"\ebc0"}.lni-text-align-right::before{content:"\ebc1"}.lni-text-format::before{content:"\ebc2"}.lni-thought::before{content:"\ebc3"}.lni-thumbs-down::before{content:"\ebc4"}.lni-thumbs-up::before{content:"\ebc5"}.lni-thunder-alt::before{content:"\ebc6"}.lni-thunder::before{content:"\ebc7"}.lni-ticket-alt::before{content:"\ebc8"}.lni-ticket::before{content:"\ebc9"}.lni-timer::before{content:"\ebca"}.lni-train-alt::before{content:"\ebcb"}.lni-train::before{content:"\ebcc"}.lni-trash::before{content:"\ebcd"}.lni-travel::before{content:"\ebce"}.lni-tree::before{content:"\ebcf"}.lni-trees::before{content:"\ebd0"}.lni-trello::before{content:"\ebd1"}.lni-trowel::before{content:"\ebd2"}.lni-tshirt::before{content:"\ebd3"}.lni-tumblr::before{content:"\ebd4"}.lni-twitch::before{content:"\ebd5"}.lni-twitter-filled::before{content:"\ebd6"}.lni-twitter-original::before{content:"\ebd7"}.lni-twitter::before{content:"\ebd8"}.lni-ubuntu::before{content:"\ebd9"}.lni-underline::before{content:"\ebda"}.lni-unlink::before{content:"\ebdb"}.lni-unlock::before{content:"\ebdc"}.lni-upload::before{content:"\ebdd"}.lni-user::before{content:"\ebde"}.lni-users::before{content:"\ebdf"}.lni-ux::before{content:"\ebe0"}.lni-vector::before{content:"\ebe1"}.lni-video::before{content:"\ebe2"}.lni-vimeo::before{content:"\ebe3"}.lni-visa::before{content:"\ebe4"}.lni-vk::before{content:"\ebe5"}.lni-volume-high::before{content:"\ebe6"}.lni-volume-low::before{content:"\ebe7"}.lni-volume-medium::before{content:"\ebe8"}.lni-volume-mute::before{content:"\ebe9"}.lni-volume::before{content:"\ebea"}.lni-wallet::before{content:"\ebeb"}.lni-warning::before{content:"\ebec"}.lni-website-alt::before{content:"\ebed"}.lni-website::before{content:"\ebee"}.lni-wechat::before{content:"\ebef"}.lni-weight::before{content:"\ebf0"}.lni-whatsapp::before{content:"\ebf1"}.lni-wheelbarrow::before{content:"\ebf2"}.lni-wheelchair::before{content:"\ebf3"}.lni-windows::before{content:"\ebf4"}.lni-wordpress-filled::before{content:"\ebf5"}.lni-wordpress::before{content:"\ebf6"}.lni-world-alt::before{content:"\ebf7"}.lni-world::before{content:"\ebf8"}.lni-write::before{content:"\ebf9"}.lni-yahoo::before{content:"\ebfa"}.lni-ycombinator::before{content:"\ebfb"}.lni-yen::before{content:"\ebfc"}.lni-youtube::before{content:"\ebfd"}.lni-zip::before{content:"\ebfe"}.lni-zoom-in::before{content:"\ebff"}.lni-zoom-out::before{content:"\ec00"}.lni-teabag::before{content:"\ec01"}.lni-stripe::before{content:"\ec02"}.lni-spotify-original::before{content:"\ec03"}
\ No newline at end of file
diff --git a/Unit 5/Day 2/stylesheets/style.css b/Unit 5/Day 2/stylesheets/style.css
new file mode 100644
index 0000000..ed66358
--- /dev/null
+++ b/Unit 5/Day 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);
+}
+
diff --git a/Unit 5/Day 2/todoOnly.html b/Unit 5/Day 2/todoOnly.html
new file mode 100644
index 0000000..e090519
--- /dev/null
+++ b/Unit 5/Day 2/todoOnly.html
@@ -0,0 +1,49 @@
+
+
+
+
+ Todo List
+
+
+
+
+
+
+
+
This is a viewer for your todo-list
+
The content on this page is view only
+
This page will refresh automatically every 5 seconds. See footer for more info.
+
+
+
+
+
+ Todo List for:
+
+
+
+
+
+
+
+
+
Todo List:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Unit 6/Canvas Project/index.html b/Unit 6/Canvas Project/index.html
new file mode 100644
index 0000000..243561d
--- /dev/null
+++ b/Unit 6/Canvas Project/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ Canvas Project
+
+
+
+
+
+