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:
+
+ +
+ +
+ + + +
+

© Benjamin Adovasio 2022. See the README file for more information.

+ +
+ + \ 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. + + +
+

© Benjamin Adovasio 2022. See the README file for more information.

+
+ + \ 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

+
+

What have you been pushing off?

+ +

Pick a level of priority

+
+ + +
+ +
+
+ + + + + + + + +
Todo List:
+
+

Extra options

+
+ + + +
+
+
+ +
+ + + + + +
+

© Benjamin Adovasio 2022. See the README file for more information.

+ +
+ + \ 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:
+
+ +
+ +
+ + + +
+

© Benjamin Adovasio 2022. See the README file for more information.

+ +
+ + \ 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 + + + + + +

Sample Animation

+ + + + diff --git a/Unit 6/Canvas Project/script.js b/Unit 6/Canvas Project/script.js new file mode 100644 index 0000000..959f995 --- /dev/null +++ b/Unit 6/Canvas Project/script.js @@ -0,0 +1,463 @@ +let canvas=document.querySelector("canvas"); +let context=canvas.getContext("2d"); +canvas.height=innerWidth-1000; +canvas.width=innerWidth-750; +canvas.style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; border:7px solid gold"; +var ballRadius = 30; +var x = canvas.width/2; +var y = canvas.height-30; +var dx = 1; +var dy = -1; +var ballColor = "#0095DD"; +var ballRadius2 = 25; +var x2 = (canvas.width/2)-80; +var y2 = (canvas.height-30)-80; +var dx2 = -1; +var dy2 = -1; +var ballColor2 = "#32a855"; +var ballRadius3 = 25; +var x3 = (canvas.width/2)-180; +var y3 = (canvas.height-30)-180; +var dx3 = 1; +var dy3 = 1; +var ballColor3 = "#dd0034"; +var ballRadius4= 10; +var x4 = (canvas.width/2)+80; +var y4 = (canvas.height-30)-80; +var dx4 = -1; +var dy4 = 1; +var ballColor4 = "#8132a8"; +var ballRadius5= 10; +var x5 = (canvas.width/2)+40; +var y5 = (canvas.height-30)-80; +var dx5 = -1; +var dy5 = 1; +var ballColor5 = "#32a2a8"; +var ballRadius6= 10; +var x6 = (canvas.width/2)+180; +var y6 = (canvas.height-30)-80; +var dx6 = 1; +var dy6 = 1; +var ballColor6 = "#a89e32"; +var ballRadius7= 10; +var x7 = (canvas.width/2)-30; +var y7 = (canvas.height-30)-50; +var dx7 = -1; +var dy7 = -1; +var ballColor7 = "#a86f32"; + +function draw(){ + context.clearRect(0, 0, canvas.width, canvas.height); + draw1(); //Light Blue + draw2(); //Light Green + draw3(); //Red + draw4(); //Purple + draw5(); //Green/Blue + draw6(); //Dark Yellow + draw7(); //Dark Orange +} +function draw1() { + if(collisionDetection(1)=="xy"){ + dx=-dx; + dy=-dy; + console.log("1XY"); + ballColor = changeColor(); + } + else{ + if(collisionDetection(1)=="y"){ + dy=-dy; + console.log("1Y"); + ballColor = changeColor(); + } + if(collisionDetection(1)=="x"){ + dx=-dx; + console.log("1X"); + ballColor = changeColor(); + } + } + x+=dx; + y+=dy; + context.beginPath(); + context.arc(x, y, ballRadius, 0, Math.PI*2); + context.fillStyle = ballColor; + context.fill(); + context.closePath(); +} +function draw2() { + if(collisionDetection(2)=="xy"){ + dx2=-dx2; + dy2=-dy2; + console.log("2XY"); + ballColor2 = changeColor(); + } + else{ + if(collisionDetection(2)=="y"){ + dy2=-dy2; + console.log("2Y"); + ballColor2 = changeColor(); + } + if(collisionDetection(2)=="x"){ + dx2=-dx2; + console.log("2X"); + ballColor2 = changeColor(); + } + } + x2+=dx2; + y2+=dy2; + context.beginPath(); + context.arc(x2, y2, ballRadius2, 0, Math.PI*2); + context.fillStyle = ballColor2; + context.fill(); + context.closePath(); +} +function draw3() { + if(collisionDetection(3)=="xy"){ + dx3=-dx3; + dy3=-dy3; + console.log("3XY"); + ballColor3 = changeColor(); + } + else{ + if(collisionDetection(3)=="y"){ + dy3=-dy3; + console.log("3Y"); + ballColor3 = changeColor(); + } + if(collisionDetection(3)=="x"){ + dx3=-dx3; + console.log("3X"); + ballColor3 = changeColor(); + } + } + x3+=dx3; + y3+=dy3; + context.beginPath(); + context.arc(x3, y3, ballRadius3, 0, Math.PI*2); + context.fillStyle = ballColor3; + context.fill(); + context.closePath(); +} +function draw4() { + if(collisionDetection(4)=="xy"){ + dx4=-dx4; + dy4=-dy4; + console.log("4XY"); + ballColor4 = changeColor(); + } + else{ + if(collisionDetection(4)=="y"){ + dy4=-dy4; + console.log("4Y"); + ballColor4 = changeColor(); + } + if(collisionDetection(4)=="x"){ + dx4=-dx4; + console.log("4X"); + ballColor4 = changeColor(); + } + } + x4+=dx4; + y4+=dy4; + context.beginPath(); + context.arc(x4, y4, ballRadius4, 0, Math.PI*2); + context.fillStyle = ballColor4; + context.fill(); + context.closePath(); +} +function draw5() { + if(collisionDetection(5)=="xy"){ + dx5=-dx5; + dy5=-dy5; + console.log("5XY"); + ballColor5 = changeColor(); + } + else{ + if(collisionDetection(5)=="y"){ + dy5=-dy5; + console.log("5Y"); + ballColor5 = changeColor(); + } + if(collisionDetection(5)=="x"){ + dx5=-dx5; + console.log("5X"); + ballColor5 = changeColor(); + } + } + x5+=dx5; + y5+=dy5; + context.beginPath(); + context.arc(x5, y5, ballRadius5, 0, Math.PI*2); + context.fillStyle = ballColor5; + context.fill(); + context.closePath(); +} +function draw6() { + if(collisionDetection(6)=="xy"){ + dx6=-dx6; + dy6=-dy6; + console.log("6XY"); + ballColor6 = changeColor(); + } + else{ + if(collisionDetection(6)=="y"){ + dy6=-dy6; + console.log("6Y"); + ballColor6 = changeColor(); + } + if(collisionDetection(6)=="x"){ + dx6=-dx6; + console.log("6X"); + ballColor6 = changeColor(); + } + } + x6+=dx6; + y6+=dy6; + context.beginPath(); + context.arc(x6, y6, ballRadius6, 0, Math.PI*2); + context.fillStyle = ballColor6; + context.fill(); + context.closePath(); +} +function draw7() { + if(collisionDetection(7)=="xy"){ + dx7=-dx7; + dy7=-dy7; + console.log("7XY"); + ballColor7 = changeColor(); + } + else{ + if(collisionDetection(7)=="y"){ + dy7=-dy7; + console.log("7Y"); + ballColor7 = changeColor(); + } + if(collisionDetection(7)=="x"){ + dx7=-dx7; + console.log("7X"); + ballColor7 = changeColor(); + } + } + x7+=dx7; + y7+=dy7; + context.beginPath(); + context.arc(x7, y7, ballRadius7, 0, Math.PI*2); + context.fillStyle = ballColor7; + context.fill(); + context.closePath(); +} +setInterval(draw, 5); + +function collisionDetection(number){ + if (number == 1){ + if(x+dx>canvas.width-ballRadius||x+dxcanvas.height-ballRadius || y+dy< ballRadius) { + return "y"; + } + else if(Math.sqrt(((x - x2)*(x-x2))+((y-y2)*(y-y2))) <= (ballRadius+ballRadius2)){ + return "xy"; + } + else if(Math.sqrt(((x - x3)*(x-x3))+((y-y3)*(y-y3))) <= (ballRadius+ballRadius3)){ + return "xy"; + } + else if(Math.sqrt(((x-x4)*(x-x4)+(y-y4)*(y-y4))) <= (ballRadius+ballRadius4)){ + return "xy"; + } + else if(Math.sqrt(((x-x5)*(x-x5)+(y-y5)*(y-y5))) <= (ballRadius+ballRadius5)){ + return "xy"; + } + else if(Math.sqrt(((x-x6)*(x-x6)+(y-y6)*(y-y6))) <= (ballRadius+ballRadius6)){ + return "xy"; + } + else if(Math.sqrt(((x-x7)*(x-x7)+(y-y7)*(y-y7))) <= (ballRadius+ballRadius7)){ + return "xy"; + } + else{ + return false; + } + } + else if (number == 2){ + if(x2+dx2>canvas.width-ballRadius2||x2+dx2canvas.height-ballRadius2 || y2+dy2< ballRadius2) { + return "y"; + } + else if(Math.sqrt(((x2 - x)*(x2-x))+((y2-y)*(y2-y))) <= (ballRadius2+ballRadius)){ + return "xy"; + } + else if(Math.sqrt(((x2 - x3)*(x2-x3))+((y2-y3)*(y2-y3))) <= (ballRadius2+ballRadius3)){ + return "xy"; + } + else if(Math.sqrt(((x2-x4)*(x2-x4)+(y2-y4)*(y2-y4))) <= (ballRadius2+ballRadius4)){ + return "xy"; + } + else if(Math.sqrt(((x2-x5)*(x2-x5)+(y2-y5)*(y2-y5))) <= (ballRadius2+ballRadius5)){ + return "xy"; + } + else if(Math.sqrt(((x2-x6)*(x2-x6)+(y2-y6)*(y2-y6))) <= (ballRadius2+ballRadius6)){ + return "xy"; + } + else if(Math.sqrt(((x2-x7)*(x2-x7)+(y2-y7)*(y2-y7))) <= (ballRadius2+ballRadius7)){ + return "xy"; + } + else{ + return false; + } + } + else if (number == 3){ + if(x3+dx3>canvas.width-ballRadius3||x3+dx3canvas.height-ballRadius3 || y3+dy3< ballRadius3) { + return "y"; + } + else if(Math.sqrt(((x3 - x)*(x3-x))+((y3-y)*(y3-y))) <= (ballRadius3+ballRadius)){ + return "xy"; + } + else if(Math.sqrt(((x3 - x2)*(x3-x2))+((y3-y2)*(y3-y2))) <= (ballRadius3+ballRadius2)){ + return "xy"; + } + else if(Math.sqrt(((x3-x4)*(x3-x4)+(y3-y4)*(y3-y4))) <= (ballRadius3+ballRadius4)){ + return "xy"; + } + else if(Math.sqrt(((x3-x5)*(x3-x5)+(y3-y5)*(y3-y5))) <= (ballRadius3+ballRadius5)){ + return "xy"; + } + else if(Math.sqrt(((x3-x6)*(x3-x6)+(y3-y6)*(y3-y6))) <= (ballRadius3+ballRadius6)){ + return "xy"; + } + else if(Math.sqrt(((x3-x7)*(x3-x7)+(y3-y7)*(y3-y7))) <= (ballRadius3+ballRadius7)){ + return "xy"; + } + else{ + return false; + } + } + else if (number == 4){ + if(x4+dx4>canvas.width-ballRadius4||x4+dx4canvas.height-ballRadius4 || y4+dy4< ballRadius4) { + return "y"; + } + else if(Math.sqrt(((x4 - x2)*(x4-x2))+((y4-y2)*(y4-y2))) <= (ballRadius4+ballRadius4)){ + return "xy"; + } + else if(Math.sqrt(((x4 - x3)*(x-x3))+((y4-y3)*(y4-y3))) <= (ballRadius4+ballRadius3)){ + return "xy"; + } + else if(Math.sqrt(((x4-x)*(x4-x)+(y4-y)*(y4-y))) <= (ballRadius4+ballRadius)){ + return "xy"; + } + else if(Math.sqrt(((x4-x5)*(x4-x5)+(y4-y5)*(y4-y5))) <= (ballRadius4+ballRadius5)){ + return "xy"; + } + else if(Math.sqrt(((x4-x6)*(x4-x6)+(y4-y6)*(y4-y6))) <= (ballRadius4+ballRadius6)){ + return "xy"; + } + else if(Math.sqrt(((x4-x7)*(x4-x7)+(y4-y7)*(y4-y7))) <= (ballRadius4+ballRadius7)){ + return "xy"; + } + else{ + return false; + } + } + else if (number == 5){ + if(x5+dx5>canvas.width-ballRadius5||x5+dx5canvas.height-ballRadius5 || y5+dy5< ballRadius5) { + return "y"; + } + else if(Math.sqrt(((x5 - x2)*(x5-x2))+((y5-y2)*(y5-y2))) <= (ballRadius5+ballRadius2)){ + return "xy"; + } + else if(Math.sqrt(((x5 - x3)*(x5-x3))+((y5-y3)*(y5-y3))) <= (ballRadius5+ballRadius3)){ + return "xy"; + } + else if(Math.sqrt(((x5-x4)*(x5-x4)+(y5-y4)*(y5-y4))) <= (ballRadius5+ballRadius4)){ + return "xy"; + } + else if(Math.sqrt(((x5-x)*(x5-x)+(y5-y)*(y5-y))) <= (ballRadius5+ballRadius)){ + return "xy"; + } + else if(Math.sqrt(((x5-x6)*(x5-x6)+(y5-y6)*(y5-y6))) <= (ballRadius5+ballRadius6)){ + return "xy"; + } + else if(Math.sqrt(((x5-x7)*(x5-x7)+(y5-y7)*(y5-y7))) <= (ballRadius5+ballRadius7)){ + return "xy"; + } + else{ + return false; + } + } + else if (number == 6){ + if(x6+dx6>canvas.width-ballRadius6||x6+dx6canvas.height-ballRadius6 || y6+dy6< ballRadius6) { + return "y"; + } + else if(Math.sqrt(((x6 - x2)*(x6-x2))+((y6-y2)*(y6-y2))) <= (ballRadius6+ballRadius2)){ + return "xy"; + } + else if(Math.sqrt(((x6 - x3)*(x6-x3))+((y6-y3)*(y6-y3))) <= (ballRadius6+ballRadius3)){ + return "xy"; + } + else if(Math.sqrt(((x6-x4)*(x6-x4)+(y6-y4)*(y6-y4))) <= (ballRadius6+ballRadius4)){ + return "xy"; + } + else if(Math.sqrt(((x6-x)*(x6-x)+(y6-y)*(y6-y))) <= (ballRadius6+ballRadius)){ + return "xy"; + } + else if(Math.sqrt(((x6-x5)*(x6-x5)+(y6-y5)*(y6-y5))) <= (ballRadius6+ballRadius5)){ + return "xy"; + } + else if(Math.sqrt(((x6-x7)*(x6-x7)+(y6-y7)*(y6-y7))) <= (ballRadius6+ballRadius7)){ + return "xy"; + } + else{ + return false; + } + } + if (number == 7){ + if(x7+dx7>canvas.width-ballRadius7||x7+dx7canvas.height-ballRadius7 || y7+dy7< ballRadius7) { + return "y"; + } + else if(Math.sqrt(((x7 - x2)*(x7-x2))+((y7-y2)*(y7-y2))) <= (ballRadius7+ballRadius2)){ + return "xy"; + } + else if(Math.sqrt(((x7 - x3)*(x7-x3))+((y7-y3)*(y7-y3))) <= (ballRadius7+ballRadius3)){ + return "xy"; + } + else if(Math.sqrt(((x7-x4)*(x7-x4)+(y7-y4)*(y7-y4))) <= (ballRadius7+ballRadius4)){ + return "xy"; + } + else if(Math.sqrt(((x7-x5)*(x7-x5)+(y7-y5)*(y7-y5))) <= (ballRadius7+ballRadius5)){ + return "xy"; + } + else if(Math.sqrt(((x7-x6)*(x7-x6)+(y7-y6)*(y7-y6))) <= (ballRadius7+ballRadius6)){ + return "xy"; + } + else if(Math.sqrt(((x7-x)*(x7-x)+(y7-y)*(y7-y))) <= (ballRadius7+ballRadius)){ + return "xy"; + } + else{ + return false; + } + } +} +function changeColor(){ + const randomBetween = (min, max) => min + Math.floor(Math.random() * (max - min + 1)); + const r = randomBetween(0, 255); + const g = randomBetween(0, 255); + const b = randomBetween(0, 255); + const rgb = `rgb(${r},${g},${b})`; // Collect all to a css color string + console.log(rgb); + return rgb; +} \ No newline at end of file diff --git a/Unit 6/Canvas Project/style.css b/Unit 6/Canvas Project/style.css new file mode 100644 index 0000000..2a7edf5 --- /dev/null +++ b/Unit 6/Canvas Project/style.css @@ -0,0 +1,5 @@ +#caption { + padding-top: 575px; + text-align: center; + font-family: cursive; + } \ No newline at end of file