added other units
This commit is contained in:
Benjamin Adovasio
16
Template/index.html
Normal file
16
Template/index.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<title>replit</title>
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
0
Template/script.js
Normal file
0
Template/script.js
Normal file
0
Template/style.css
Normal file
0
Template/style.css
Normal file
21
Unit 4/Day 2/index.html
Normal file
21
Unit 4/Day 2/index.html
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Unit 4 Day 2</title>
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Count "s" and "S" characters</h1>
|
||||||
|
<label for="input1">Input:</label>
|
||||||
|
<input type="text" id="input1"></input>
|
||||||
|
<button onclick="program1(document.getElementById('input1').value)">Submit</button>
|
||||||
|
<p>Output: <p id="out1"></p></p>
|
||||||
|
<hr>
|
||||||
|
<h1>Capitalize every odd number letter and lowercase every even number letter</h1>
|
||||||
|
<label for="input2">Input:</label>
|
||||||
|
<input type="text" id="input2"></input>
|
||||||
|
<button onclick="program2(document.getElementById('input2').value)">Submit</button>
|
||||||
|
<p>Output: <p id="out2"></p></p>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
35
Unit 4/Day 2/script.js
Normal file
35
Unit 4/Day 2/script.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
0
Unit 4/Day 2/style.css
Normal file
0
Unit 4/Day 2/style.css
Normal file
38
Unit 5/Code Share/README.html
Normal file
38
Unit 5/Code Share/README.html
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Todo List</title>
|
||||||
|
<link rel="stylesheet" href="stylesheets/style.css">
|
||||||
|
<link rel="stylesheet" href="stylesheets/lib/dismissible.css">
|
||||||
|
<link href="stylesheets/lib/lineicons.css" rel="stylesheet"> <!--Lineicons not working when used directly. Using below cdn instead. -->
|
||||||
|
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
|
||||||
|
<script type="module" src="js/lib/md-block.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<md-block>
|
||||||
|
# Project Directions
|
||||||
|
## Basic:
|
||||||
|
1. Create an array of at least three items.
|
||||||
|
2. Prompt the user the add an item to your array at the end.
|
||||||
|
3. Display this array, with your new item, on your document, using the join() method to make all items one String
|
||||||
|
|
||||||
|
## Intermediate:
|
||||||
|
1. Create an input element and a button.
|
||||||
|
2. The user should input what element they want to add to the array and click the button.
|
||||||
|
3. The item should be added to a random spot in the array.
|
||||||
|
4. The array should then be displayed on the document.
|
||||||
|
|
||||||
|
## Advanced:
|
||||||
|
1. Create a To Do List, where the user can input any item they want in an input element and display that item in a numbered list on the document.
|
||||||
|
2. Create another input element where the user can input a number on the ordered list of the element they want to delete.
|
||||||
|
3. When an element is added or deleted, the list should be updated with all the elements in the array at that time.
|
||||||
|
4. Numbers should be in order and updated, i.e. if there are items 1, 2, and 3, and the user deletes item 2, item 3 should now be numbered 2, and item 1 remains the same.
|
||||||
|
</md-block>
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<p>© Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</html>
|
||||||
0
Unit 5/Code Share/README.md
Normal file
0
Unit 5/Code Share/README.md
Normal file
90
Unit 5/Code Share/index.html
Normal file
90
Unit 5/Code Share/index.html
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Todo List</title>
|
||||||
|
<link rel="stylesheet" href="stylesheets/style.css">
|
||||||
|
<link rel="stylesheet" href="stylesheets/lib/dismissible.css">
|
||||||
|
<link href="stylesheets/lib/lineicons.css" rel="stylesheet"> <!--Lineicons not working when used directly. Using below cdn instead. -->
|
||||||
|
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
|
||||||
|
<script type="module" src="js/lib/md-block.js"></script>
|
||||||
|
</head>
|
||||||
|
<header>
|
||||||
|
<div id="dismissible-container"></div>
|
||||||
|
<h1>Todo-List Project</h1>
|
||||||
|
<h2>Intro to Computer Programing</h2>
|
||||||
|
<h3 class="help">See footer for more info</h3>
|
||||||
|
<input type="button" id="help" value="Toggle Help" onclick="toggleHelp()"/><br>
|
||||||
|
<hr>
|
||||||
|
</header>
|
||||||
|
<body>
|
||||||
|
<main class="app">
|
||||||
|
<section class="greeting">
|
||||||
|
<h3 class="help">Step 1: Add your name</h3>
|
||||||
|
<h2 class="title">
|
||||||
|
Todo List for: <input type="text" id="name" placeholder="Name here" onkeypress="enterKeyPressed(event)"/>
|
||||||
|
</h2>
|
||||||
|
<h3 class="help">Press enter to continue</h3>
|
||||||
|
</section>
|
||||||
|
<section class="create-todo">
|
||||||
|
<h3 class="help">Step 2: Create a task</h3>
|
||||||
|
<h2>CREATE A TASK</h2>
|
||||||
|
<input type="text" placeholder="e.g. Clean Room" name="content" id="content" onclick="enterKeyPressedTask(event)" />
|
||||||
|
<h3 class="help">Press enter to continue</h3>
|
||||||
|
<br><br>
|
||||||
|
<h3 class="help">Step 3: Select a priority</h3>
|
||||||
|
<h2>Pick a level of priority</h2>
|
||||||
|
<div class="options">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="category" id="category1" value="important" />
|
||||||
|
<span class="bubble important"></span>
|
||||||
|
<div>Important</div>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="category" id="category2" value="later" />
|
||||||
|
<span class="bubble later"></span>
|
||||||
|
<div>I'll do it later</div>
|
||||||
|
</label>
|
||||||
|
</div><br>
|
||||||
|
<h3 class="help">Step 4: Submit!</h3>
|
||||||
|
<input type="button" value="Add todo" id="submit" onclick="submission()"/>
|
||||||
|
<section class="todo-list">
|
||||||
|
<div class="list" id="todo-list"></div>
|
||||||
|
<table id="todoTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Todo List:</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<h3 class="help">Step 5: Extra options</h3>
|
||||||
|
<h4>Extra options</h4>
|
||||||
|
<div class="options">
|
||||||
|
<label>
|
||||||
|
<input type="button" name="category" id="cmd" onclick="todoViewer('tab')" />
|
||||||
|
|
||||||
|
<div>Open Todo-List Viewer in New Tab</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type="button" name="full-screen" id="full-screen" onclick="todoViewer('popup')"/>
|
||||||
|
<div>Open Todo-List Viewer in Popup</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="js/lib/dismissible.js"></script>
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
<script src="js/submission.js"></script>
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<p>© Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</html>
|
||||||
16
Unit 5/Code Share/instructions.txt
Normal file
16
Unit 5/Code Share/instructions.txt
Normal file
@@ -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.
|
||||||
92
Unit 5/Code Share/js/lib/dismissible.js
Normal file
92
Unit 5/Code Share/js/lib/dismissible.js
Normal file
@@ -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);
|
||||||
301
Unit 5/Code Share/js/lib/md-block.js
Normal file
301
Unit 5/Code Share/js/lib/md-block.js
Normal file
@@ -0,0 +1,301 @@
|
|||||||
|
/**
|
||||||
|
* <md-block> custom element
|
||||||
|
* @author Lea Verou
|
||||||
|
*/
|
||||||
|
|
||||||
|
let marked = window.marked;
|
||||||
|
let DOMPurify = window.DOMPurify;
|
||||||
|
let Prism = window.Prism;
|
||||||
|
|
||||||
|
export const URLs = {
|
||||||
|
marked: "https://cdn.jsdelivr.net/npm/marked/src/marked.min.js",
|
||||||
|
DOMPurify: "https://cdn.jsdelivr.net/npm/dompurify@2.3.3/dist/purify.es.min.js"
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix indentation
|
||||||
|
function deIndent(text) {
|
||||||
|
let indent = text.match(/^[\r\n]*([\t ]+)/);
|
||||||
|
|
||||||
|
if (indent) {
|
||||||
|
indent = indent[1];
|
||||||
|
|
||||||
|
text = text.replace(RegExp("^" + indent, "gm"), "");
|
||||||
|
}
|
||||||
|
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MarkdownElement extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.renderer = Object.assign({}, this.constructor.renderer);
|
||||||
|
|
||||||
|
for (let property in this.renderer) {
|
||||||
|
this.renderer[property] = this.renderer[property].bind(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get rendered() {
|
||||||
|
return this.getAttribute("rendered");
|
||||||
|
}
|
||||||
|
|
||||||
|
get mdContent () {
|
||||||
|
return this._mdContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
set mdContent (html) {
|
||||||
|
this._mdContent = html;
|
||||||
|
this._contentFromHTML = false;
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
Object.defineProperty(this, "untrusted", {
|
||||||
|
value: this.hasAttribute("untrusted"),
|
||||||
|
enumerable: true,
|
||||||
|
configurable: false,
|
||||||
|
writable: false
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this._mdContent === undefined) {
|
||||||
|
this._contentFromHTML = true;
|
||||||
|
this._mdContent = deIndent(this.innerHTML);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
async render () {
|
||||||
|
if (!this.isConnected || this._mdContent === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!marked) {
|
||||||
|
marked = import(URLs.marked).then(m => m.marked);
|
||||||
|
}
|
||||||
|
|
||||||
|
marked = await marked;
|
||||||
|
|
||||||
|
marked.setOptions({
|
||||||
|
gfm: true,
|
||||||
|
smartypants: true,
|
||||||
|
langPrefix: "language-",
|
||||||
|
});
|
||||||
|
|
||||||
|
marked.use({renderer: this.renderer});
|
||||||
|
|
||||||
|
let html = this._parse();
|
||||||
|
|
||||||
|
if (this.untrusted) {
|
||||||
|
let mdContent = this._mdContent;
|
||||||
|
html = await MarkdownElement.sanitize(html);
|
||||||
|
if (this._mdContent !== mdContent) {
|
||||||
|
// While we were running this async call, the content changed
|
||||||
|
// We don’t want to overwrite with old data. Abort mission!
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.innerHTML = html;
|
||||||
|
|
||||||
|
if (!Prism && URLs.Prism && this.querySelector("code")) {
|
||||||
|
Prism = import(URLs.Prism);
|
||||||
|
|
||||||
|
if (URLs.PrismCSS) {
|
||||||
|
let link = document.createElement("link");
|
||||||
|
link.rel = "stylesheet";
|
||||||
|
link.href = URLs.PrismCSS;
|
||||||
|
document.head.appendChild(link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Prism) {
|
||||||
|
await Prism; // in case it's still loading
|
||||||
|
Prism.highlightAllUnder(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.src) {
|
||||||
|
this.setAttribute("rendered", this._contentFromHTML? "fallback" : "remote");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.setAttribute("rendered", this._contentFromHTML? "content" : "property");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fire event
|
||||||
|
let event = new CustomEvent("md-render", {bubbles: true, composed: true});
|
||||||
|
this.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
static async sanitize(html) {
|
||||||
|
if (!DOMPurify) {
|
||||||
|
DOMPurify = import(URLs.DOMPurify).then(m => m.default);
|
||||||
|
}
|
||||||
|
|
||||||
|
DOMPurify = await DOMPurify; // in case it's still loading
|
||||||
|
|
||||||
|
return DOMPurify.sanitize(html);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export class MarkdownSpan extends MarkdownElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
_parse () {
|
||||||
|
return marked.parseInline(this._mdContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
static renderer = {
|
||||||
|
codespan (code) {
|
||||||
|
if (this._contentFromHTML) {
|
||||||
|
// Inline HTML code needs to be escaped to not be parsed as HTML by the browser
|
||||||
|
// This results in marked double-escaping it, so we need to unescape it
|
||||||
|
code = code.replace(/&(?=[lg]t;)/g, "&");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Remote code may include characters that need to be escaped to be visible in HTML
|
||||||
|
code = code.replace(/</g, "<");
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<code>${code}</code>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MarkdownBlock extends MarkdownElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
get src() {
|
||||||
|
return this._src;
|
||||||
|
}
|
||||||
|
|
||||||
|
set src(value) {
|
||||||
|
this.setAttribute("src", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
get hmin() {
|
||||||
|
return this._hmin || 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
set hmin(value) {
|
||||||
|
this.setAttribute("hmin", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
get hlinks() {
|
||||||
|
return this._hlinks ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
set hlinks(value) {
|
||||||
|
this.setAttribute("hlinks", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
_parse () {
|
||||||
|
return marked.parse(this._mdContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
static renderer = Object.assign({
|
||||||
|
heading (text, level, _raw, slugger) {
|
||||||
|
level = Math.min(6, level + (this.hmin - 1));
|
||||||
|
const id = slugger.slug(text);
|
||||||
|
const hlinks = this.hlinks;
|
||||||
|
|
||||||
|
let content;
|
||||||
|
|
||||||
|
if (hlinks === null) {
|
||||||
|
// No heading links
|
||||||
|
content = text;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
content = `<a href="#${id}" class="anchor">`;
|
||||||
|
|
||||||
|
if (hlinks === "") {
|
||||||
|
// Heading content is the link
|
||||||
|
content += text + "</a>";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Headings are prepended with a linked symbol
|
||||||
|
content += hlinks + "</a>" + text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return `
|
||||||
|
<h${level} id="${id}">
|
||||||
|
${content}
|
||||||
|
</h${level}>`;
|
||||||
|
},
|
||||||
|
|
||||||
|
code (code, language, escaped) {
|
||||||
|
if (this._contentFromHTML) {
|
||||||
|
// Inline HTML code needs to be escaped to not be parsed as HTML by the browser
|
||||||
|
// This results in marked double-escaping it, so we need to unescape it
|
||||||
|
code = code.replace(/&(?=[lg]t;)/g, "&");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Remote code may include characters that need to be escaped to be visible in HTML
|
||||||
|
code = code.replace(/</g, "<");
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<pre class="language-${language}"><code>${code}</code></pre>`;
|
||||||
|
}
|
||||||
|
}, MarkdownSpan.renderer);
|
||||||
|
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ["src", "hmin", "hlinks"];
|
||||||
|
}
|
||||||
|
|
||||||
|
attributeChangedCallback(name, oldValue, newValue) {
|
||||||
|
if (oldValue === newValue) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (name) {
|
||||||
|
case "src":
|
||||||
|
let url;
|
||||||
|
try {
|
||||||
|
url = new URL(newValue, location);
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let prevSrc = this.src;
|
||||||
|
this._src = url;
|
||||||
|
|
||||||
|
if (this.src !== prevSrc) {
|
||||||
|
fetch(this.src)
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to fetch ${this.src}: ${response.status} ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then(text => {
|
||||||
|
this.mdContent = text;
|
||||||
|
})
|
||||||
|
.catch(e => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
case "hmin":
|
||||||
|
if (newValue > 0) {
|
||||||
|
this._hmin = +newValue;
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "hlinks":
|
||||||
|
this._hlinks = newValue;
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
customElements.define("md-block", MarkdownBlock);
|
||||||
|
customElements.define("md-span", MarkdownSpan);
|
||||||
75
Unit 5/Code Share/js/script.js
Normal file
75
Unit 5/Code Share/js/script.js
Normal file
@@ -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');
|
||||||
|
}
|
||||||
|
}
|
||||||
69
Unit 5/Code Share/js/submission.js
Normal file
69
Unit 5/Code Share/js/submission.js
Normal file
@@ -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;i<document.getElementsByName("category").length;i++){
|
||||||
|
document.getElementsByName("category")[i].checked = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteElement(){
|
||||||
|
console.log("test");
|
||||||
|
}
|
||||||
28
Unit 5/Code Share/js/viewOnly.js
Normal file
28
Unit 5/Code Share/js/viewOnly.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
|
||||||
|
submissionCounter = 0;
|
||||||
|
if (localStorage.length % 4 === 0) {
|
||||||
|
if(localStorage.length >0 ){
|
||||||
|
submissionCounter = localStorage.length / 4 ;
|
||||||
|
console.log(submissionCounter);
|
||||||
|
for(i = 1; i < submissionCounter + 1; i++ ){
|
||||||
|
var tbodyRef = document.getElementById('todoTableReadOnly').getElementsByTagName('tbody')[0];
|
||||||
|
var newRow = tbodyRef.insertRow();
|
||||||
|
var newCell = newRow.insertCell();
|
||||||
|
var newCell2 = newRow.insertCell();
|
||||||
|
var newCell3 = newRow.insertCell();
|
||||||
|
var newCell4 = newRow.insertCell();
|
||||||
|
var newText = document.createTextNode("Item ID: " + localStorage.getItem("ID: " + i + " - Item ID:"));
|
||||||
|
newCell.appendChild(newText);
|
||||||
|
var newText2 = document.createTextNode("Name: " + localStorage.getItem("ID: " + i + " - Name:"));
|
||||||
|
newCell2.appendChild(newText2);
|
||||||
|
var newText3 = document.createTextNode("Task: " + localStorage.getItem("ID: " + i + " - Task:"));
|
||||||
|
newCell3.appendChild(newText3);
|
||||||
|
var newText4 = document.createTextNode("Priorty: " + localStorage.getItem("ID: " + i + " - Priority:"));
|
||||||
|
newCell4.appendChild(newText4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(function(){
|
||||||
|
location.reload();
|
||||||
|
}, 5000);
|
||||||
6
Unit 5/Code Share/replit.nix
Normal file
6
Unit 5/Code Share/replit.nix
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{ pkgs }: {
|
||||||
|
deps = [
|
||||||
|
pkgs.nodePackages.vscode-langservers-extracted
|
||||||
|
pkgs.nodePackages.typescript-language-server
|
||||||
|
];
|
||||||
|
}
|
||||||
113
Unit 5/Code Share/stylesheets/lib/dismissible.css
Normal file
113
Unit 5/Code Share/stylesheets/lib/dismissible.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
1
Unit 5/Code Share/stylesheets/lib/lineicons.css
Normal file
1
Unit 5/Code Share/stylesheets/lib/lineicons.css
Normal file
File diff suppressed because one or more lines are too long
270
Unit 5/Code Share/stylesheets/style.css
Normal file
270
Unit 5/Code Share/stylesheets/style.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
49
Unit 5/Code Share/todoOnly.html
Normal file
49
Unit 5/Code Share/todoOnly.html
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Todo List</title>
|
||||||
|
<link rel="stylesheet" href="stylesheets/style.css">
|
||||||
|
<link rel="stylesheet" href="stylesheets/lib/dismissible.css">
|
||||||
|
<link href="stylesheets/lib/lineicons.css" rel="stylesheet"> <!--Lineicons not working when used directly. Using below cdn instead. -->
|
||||||
|
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
|
||||||
|
<script type="module" src="js/lib/md-block.js"></script>
|
||||||
|
</head>
|
||||||
|
<header>
|
||||||
|
<h1>This is a viewer for your todo-list</h1>
|
||||||
|
<h2>The content on this page is view only</h2>
|
||||||
|
<h3>This page will refresh automatically every 5 seconds. See footer for more info.</h3>
|
||||||
|
</header>
|
||||||
|
<body>
|
||||||
|
<main class="app">
|
||||||
|
<section class="greeting">
|
||||||
|
<h2 class="title">
|
||||||
|
Todo List for: <h2 id="nameForTodoOnly"></h2>
|
||||||
|
</h2>
|
||||||
|
</section>
|
||||||
|
<section class="create-todo">
|
||||||
|
<section class="todo-list">
|
||||||
|
<div class="list" id="todo-list"></div>
|
||||||
|
<table id="todoTableReadOnly">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Todo List:</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="js/viewOnly.js"></script>
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<p>© Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</html>
|
||||||
38
Unit 5/Day 2/README.html
Normal file
38
Unit 5/Day 2/README.html
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Todo List</title>
|
||||||
|
<link rel="stylesheet" href="stylesheets/style.css">
|
||||||
|
<link rel="stylesheet" href="stylesheets/lib/dismissible.css">
|
||||||
|
<link href="stylesheets/lib/lineicons.css" rel="stylesheet"> <!--Lineicons not working when used directly. Using below cdn instead. -->
|
||||||
|
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
|
||||||
|
<script type="module" src="js/lib/md-block.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<md-block>
|
||||||
|
# Project Directions
|
||||||
|
## Basic:
|
||||||
|
1. Create an array of at least three items.
|
||||||
|
2. Prompt the user the add an item to your array at the end.
|
||||||
|
3. Display this array, with your new item, on your document, using the join() method to make all items one String
|
||||||
|
|
||||||
|
## Intermediate:
|
||||||
|
1. Create an input element and a button.
|
||||||
|
2. The user should input what element they want to add to the array and click the button.
|
||||||
|
3. The item should be added to a random spot in the array.
|
||||||
|
4. The array should then be displayed on the document.
|
||||||
|
|
||||||
|
## Advanced:
|
||||||
|
1. Create a To Do List, where the user can input any item they want in an input element and display that item in a numbered list on the document.
|
||||||
|
2. Create another input element where the user can input a number on the ordered list of the element they want to delete.
|
||||||
|
3. When an element is added or deleted, the list should be updated with all the elements in the array at that time.
|
||||||
|
4. Numbers should be in order and updated, i.e. if there are items 1, 2, and 3, and the user deletes item 2, item 3 should now be numbered 2, and item 1 remains the same.
|
||||||
|
</md-block>
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<p>© Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</html>
|
||||||
0
Unit 5/Day 2/README.md
Normal file
0
Unit 5/Day 2/README.md
Normal file
84
Unit 5/Day 2/index.html
Normal file
84
Unit 5/Day 2/index.html
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Todo List</title>
|
||||||
|
<link rel="stylesheet" href="stylesheets/style.css">
|
||||||
|
<link rel="stylesheet" href="stylesheets/lib/dismissible.css">
|
||||||
|
<link href="stylesheets/lib/lineicons.css" rel="stylesheet"> <!--Lineicons not working when used directly. Using below cdn instead. -->
|
||||||
|
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
|
||||||
|
<script type="module" src="js/lib/md-block.js"></script>
|
||||||
|
</head>
|
||||||
|
<header>
|
||||||
|
<div id="dismissible-container"></div>
|
||||||
|
<h1>Todo-List Project</h1>
|
||||||
|
<h2>Intro to Computer Programing</h2>
|
||||||
|
<h3>See footer for more info</h3>
|
||||||
|
</header>
|
||||||
|
<body>
|
||||||
|
<main class="app">
|
||||||
|
<section class="greeting">
|
||||||
|
<h2 class="title">
|
||||||
|
Todo List for: <input type="text" id="name" placeholder="Name here" onkeypress="enterKeyPressed(event)"/>
|
||||||
|
</h2>
|
||||||
|
<h3>Press enter to save name</h3>
|
||||||
|
</section>
|
||||||
|
<section class="create-todo">
|
||||||
|
<h3>CREATE A TASK</h3>
|
||||||
|
<form id="new-todo-form">
|
||||||
|
<h4>What have you been pushing off?</h4>
|
||||||
|
<input type="text" placeholder="e.g. Clean Room" name="content" id="content" />
|
||||||
|
<h4>Pick a level of priority</h4>
|
||||||
|
<div class="options">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="category" id="category1" value="important" />
|
||||||
|
<span class="bubble important"></span>
|
||||||
|
<div>Important</div>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="category" id="category2" value="later" />
|
||||||
|
<span class="bubble later"></span>
|
||||||
|
<div>I'll do it later</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<input type="button" value="Add todo" id="submit" onclick="submission()"/>
|
||||||
|
<section class="todo-list">
|
||||||
|
<div class="list" id="todo-list"></div>
|
||||||
|
<table id="todoTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Todo List:</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<h4>Extra options</h4>
|
||||||
|
<div class="options">
|
||||||
|
<label>
|
||||||
|
<input type="button" name="category" id="cmd" onclick="renderPDF()" />
|
||||||
|
|
||||||
|
<div>Print Todo List</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type="button" name="full-screen" id="full-screen" onclick='window.open(href="todoOnly.html")' />
|
||||||
|
<div>Open Todo-List Viewer</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="js/lib/dismissible.js"></script>
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
<script src="js/submission.js"></script>
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<p>© Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</html>
|
||||||
16
Unit 5/Day 2/instructions.txt
Normal file
16
Unit 5/Day 2/instructions.txt
Normal file
@@ -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.
|
||||||
92
Unit 5/Day 2/js/lib/dismissible.js
Normal file
92
Unit 5/Day 2/js/lib/dismissible.js
Normal file
@@ -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);
|
||||||
301
Unit 5/Day 2/js/lib/md-block.js
Normal file
301
Unit 5/Day 2/js/lib/md-block.js
Normal file
@@ -0,0 +1,301 @@
|
|||||||
|
/**
|
||||||
|
* <md-block> custom element
|
||||||
|
* @author Lea Verou
|
||||||
|
*/
|
||||||
|
|
||||||
|
let marked = window.marked;
|
||||||
|
let DOMPurify = window.DOMPurify;
|
||||||
|
let Prism = window.Prism;
|
||||||
|
|
||||||
|
export const URLs = {
|
||||||
|
marked: "https://cdn.jsdelivr.net/npm/marked/src/marked.min.js",
|
||||||
|
DOMPurify: "https://cdn.jsdelivr.net/npm/dompurify@2.3.3/dist/purify.es.min.js"
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix indentation
|
||||||
|
function deIndent(text) {
|
||||||
|
let indent = text.match(/^[\r\n]*([\t ]+)/);
|
||||||
|
|
||||||
|
if (indent) {
|
||||||
|
indent = indent[1];
|
||||||
|
|
||||||
|
text = text.replace(RegExp("^" + indent, "gm"), "");
|
||||||
|
}
|
||||||
|
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MarkdownElement extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.renderer = Object.assign({}, this.constructor.renderer);
|
||||||
|
|
||||||
|
for (let property in this.renderer) {
|
||||||
|
this.renderer[property] = this.renderer[property].bind(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get rendered() {
|
||||||
|
return this.getAttribute("rendered");
|
||||||
|
}
|
||||||
|
|
||||||
|
get mdContent () {
|
||||||
|
return this._mdContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
set mdContent (html) {
|
||||||
|
this._mdContent = html;
|
||||||
|
this._contentFromHTML = false;
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
Object.defineProperty(this, "untrusted", {
|
||||||
|
value: this.hasAttribute("untrusted"),
|
||||||
|
enumerable: true,
|
||||||
|
configurable: false,
|
||||||
|
writable: false
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this._mdContent === undefined) {
|
||||||
|
this._contentFromHTML = true;
|
||||||
|
this._mdContent = deIndent(this.innerHTML);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
async render () {
|
||||||
|
if (!this.isConnected || this._mdContent === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!marked) {
|
||||||
|
marked = import(URLs.marked).then(m => m.marked);
|
||||||
|
}
|
||||||
|
|
||||||
|
marked = await marked;
|
||||||
|
|
||||||
|
marked.setOptions({
|
||||||
|
gfm: true,
|
||||||
|
smartypants: true,
|
||||||
|
langPrefix: "language-",
|
||||||
|
});
|
||||||
|
|
||||||
|
marked.use({renderer: this.renderer});
|
||||||
|
|
||||||
|
let html = this._parse();
|
||||||
|
|
||||||
|
if (this.untrusted) {
|
||||||
|
let mdContent = this._mdContent;
|
||||||
|
html = await MarkdownElement.sanitize(html);
|
||||||
|
if (this._mdContent !== mdContent) {
|
||||||
|
// While we were running this async call, the content changed
|
||||||
|
// We don’t want to overwrite with old data. Abort mission!
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.innerHTML = html;
|
||||||
|
|
||||||
|
if (!Prism && URLs.Prism && this.querySelector("code")) {
|
||||||
|
Prism = import(URLs.Prism);
|
||||||
|
|
||||||
|
if (URLs.PrismCSS) {
|
||||||
|
let link = document.createElement("link");
|
||||||
|
link.rel = "stylesheet";
|
||||||
|
link.href = URLs.PrismCSS;
|
||||||
|
document.head.appendChild(link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Prism) {
|
||||||
|
await Prism; // in case it's still loading
|
||||||
|
Prism.highlightAllUnder(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.src) {
|
||||||
|
this.setAttribute("rendered", this._contentFromHTML? "fallback" : "remote");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.setAttribute("rendered", this._contentFromHTML? "content" : "property");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fire event
|
||||||
|
let event = new CustomEvent("md-render", {bubbles: true, composed: true});
|
||||||
|
this.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
static async sanitize(html) {
|
||||||
|
if (!DOMPurify) {
|
||||||
|
DOMPurify = import(URLs.DOMPurify).then(m => m.default);
|
||||||
|
}
|
||||||
|
|
||||||
|
DOMPurify = await DOMPurify; // in case it's still loading
|
||||||
|
|
||||||
|
return DOMPurify.sanitize(html);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export class MarkdownSpan extends MarkdownElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
_parse () {
|
||||||
|
return marked.parseInline(this._mdContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
static renderer = {
|
||||||
|
codespan (code) {
|
||||||
|
if (this._contentFromHTML) {
|
||||||
|
// Inline HTML code needs to be escaped to not be parsed as HTML by the browser
|
||||||
|
// This results in marked double-escaping it, so we need to unescape it
|
||||||
|
code = code.replace(/&(?=[lg]t;)/g, "&");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Remote code may include characters that need to be escaped to be visible in HTML
|
||||||
|
code = code.replace(/</g, "<");
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<code>${code}</code>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MarkdownBlock extends MarkdownElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
get src() {
|
||||||
|
return this._src;
|
||||||
|
}
|
||||||
|
|
||||||
|
set src(value) {
|
||||||
|
this.setAttribute("src", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
get hmin() {
|
||||||
|
return this._hmin || 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
set hmin(value) {
|
||||||
|
this.setAttribute("hmin", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
get hlinks() {
|
||||||
|
return this._hlinks ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
set hlinks(value) {
|
||||||
|
this.setAttribute("hlinks", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
_parse () {
|
||||||
|
return marked.parse(this._mdContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
static renderer = Object.assign({
|
||||||
|
heading (text, level, _raw, slugger) {
|
||||||
|
level = Math.min(6, level + (this.hmin - 1));
|
||||||
|
const id = slugger.slug(text);
|
||||||
|
const hlinks = this.hlinks;
|
||||||
|
|
||||||
|
let content;
|
||||||
|
|
||||||
|
if (hlinks === null) {
|
||||||
|
// No heading links
|
||||||
|
content = text;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
content = `<a href="#${id}" class="anchor">`;
|
||||||
|
|
||||||
|
if (hlinks === "") {
|
||||||
|
// Heading content is the link
|
||||||
|
content += text + "</a>";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Headings are prepended with a linked symbol
|
||||||
|
content += hlinks + "</a>" + text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return `
|
||||||
|
<h${level} id="${id}">
|
||||||
|
${content}
|
||||||
|
</h${level}>`;
|
||||||
|
},
|
||||||
|
|
||||||
|
code (code, language, escaped) {
|
||||||
|
if (this._contentFromHTML) {
|
||||||
|
// Inline HTML code needs to be escaped to not be parsed as HTML by the browser
|
||||||
|
// This results in marked double-escaping it, so we need to unescape it
|
||||||
|
code = code.replace(/&(?=[lg]t;)/g, "&");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Remote code may include characters that need to be escaped to be visible in HTML
|
||||||
|
code = code.replace(/</g, "<");
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<pre class="language-${language}"><code>${code}</code></pre>`;
|
||||||
|
}
|
||||||
|
}, MarkdownSpan.renderer);
|
||||||
|
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ["src", "hmin", "hlinks"];
|
||||||
|
}
|
||||||
|
|
||||||
|
attributeChangedCallback(name, oldValue, newValue) {
|
||||||
|
if (oldValue === newValue) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (name) {
|
||||||
|
case "src":
|
||||||
|
let url;
|
||||||
|
try {
|
||||||
|
url = new URL(newValue, location);
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let prevSrc = this.src;
|
||||||
|
this._src = url;
|
||||||
|
|
||||||
|
if (this.src !== prevSrc) {
|
||||||
|
fetch(this.src)
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to fetch ${this.src}: ${response.status} ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then(text => {
|
||||||
|
this.mdContent = text;
|
||||||
|
})
|
||||||
|
.catch(e => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
case "hmin":
|
||||||
|
if (newValue > 0) {
|
||||||
|
this._hmin = +newValue;
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "hlinks":
|
||||||
|
this._hlinks = newValue;
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
customElements.define("md-block", MarkdownBlock);
|
||||||
|
customElements.define("md-span", MarkdownSpan);
|
||||||
36
Unit 5/Day 2/js/script.js
Normal file
36
Unit 5/Day 2/js/script.js
Normal file
@@ -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");
|
||||||
|
}
|
||||||
|
};
|
||||||
54
Unit 5/Day 2/js/submission.js
Normal file
54
Unit 5/Day 2/js/submission.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
submissionCounter = 0;
|
||||||
|
if (localStorage.length % 4 === 0) {
|
||||||
|
if(localStorage.length >0 ){
|
||||||
|
submissionCounter = localStorage.length / 4 ;
|
||||||
|
console.log(submissionCounter);
|
||||||
|
for(i = 1; i < submissionCounter + 1; i++ ){
|
||||||
|
var tbodyRef = document.getElementById('todoTable').getElementsByTagName('tbody')[0];
|
||||||
|
var newRow = tbodyRef.insertRow();
|
||||||
|
var newCell = newRow.insertCell();
|
||||||
|
var newCell2 = newRow.insertCell();
|
||||||
|
var newCell3 = newRow.insertCell();
|
||||||
|
var newCell4 = newRow.insertCell();
|
||||||
|
var newText = document.createTextNode("Item ID: " + localStorage.getItem("ID: " + i + " - Item ID:"));
|
||||||
|
newCell.appendChild(newText);
|
||||||
|
var newText2 = document.createTextNode("Name: " + localStorage.getItem("ID: " + i + " - Name:"));
|
||||||
|
newCell2.appendChild(newText2);
|
||||||
|
var newText3 = document.createTextNode("Task: " + localStorage.getItem("ID: " + i + " - Task:"));
|
||||||
|
newCell3.appendChild(newText3);
|
||||||
|
var newText4 = document.createTextNode("Priorty: " + localStorage.getItem("ID: " + i + " - Priority:"));
|
||||||
|
newCell4.appendChild(newText4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function submission(){
|
||||||
|
document.getElementById('content').value="";
|
||||||
|
document.getElementById('content').placeholder="e.g. Clean Room";
|
||||||
|
for(var i=0;i<document.getElementsByName("category").length;i++){
|
||||||
|
document.getElementsByName("category")[i].checked = false;
|
||||||
|
}
|
||||||
|
submissionCounter ++;
|
||||||
|
localStorage.setItem("ID: " + submissionCounter + " - Item ID:", submissionCounter);
|
||||||
|
localStorage.setItem("ID: " + submissionCounter + " - Name:", document.getElementById('name').value);
|
||||||
|
localStorage.setItem("ID: " + submissionCounter + " - Task:", document.getElementById('content').value);
|
||||||
|
if(document.getElementById('category1').checked){
|
||||||
|
localStorage.setItem("ID: " + submissionCounter + " - Priority:", "High");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
localStorage.setItem("ID: " + submissionCounter + " - Priority:", "Low");
|
||||||
|
}
|
||||||
|
var tbodyRef = document.getElementById('todoTable').getElementsByTagName('tbody')[0];
|
||||||
|
var newRow = tbodyRef.insertRow();
|
||||||
|
var newCell = newRow.insertCell();
|
||||||
|
var newCell2 = newRow.insertCell();
|
||||||
|
var newCell3 = newRow.insertCell();
|
||||||
|
var newCell4 = newRow.insertCell();
|
||||||
|
var newText = document.createTextNode("Item ID: " + localStorage.getItem("ID: " + submissionCounter + " - Item ID:"));
|
||||||
|
newCell.appendChild(newText);
|
||||||
|
var newText2 = document.createTextNode("Name: " + localStorage.getItem("ID: " + submissionCounter + " - Name:"));
|
||||||
|
newCell2.appendChild(newText2);
|
||||||
|
var newText3 = document.createTextNode("Task: " + localStorage.getItem("ID: " + submissionCounter + " - Task:"));
|
||||||
|
newCell3.appendChild(newText3);
|
||||||
|
var newText4 = document.createTextNode("Priorty: " + localStorage.getItem("ID: " + submissionCounter + " - Priority:"));
|
||||||
|
newCell4.appendChild(newText4);
|
||||||
|
}
|
||||||
28
Unit 5/Day 2/js/viewOnly.js
Normal file
28
Unit 5/Day 2/js/viewOnly.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
|
||||||
|
submissionCounter = 0;
|
||||||
|
if (localStorage.length % 4 === 0) {
|
||||||
|
if(localStorage.length >0 ){
|
||||||
|
submissionCounter = localStorage.length / 4 ;
|
||||||
|
console.log(submissionCounter);
|
||||||
|
for(i = 1; i < submissionCounter + 1; i++ ){
|
||||||
|
var tbodyRef = document.getElementById('todoTableReadOnly').getElementsByTagName('tbody')[0];
|
||||||
|
var newRow = tbodyRef.insertRow();
|
||||||
|
var newCell = newRow.insertCell();
|
||||||
|
var newCell2 = newRow.insertCell();
|
||||||
|
var newCell3 = newRow.insertCell();
|
||||||
|
var newCell4 = newRow.insertCell();
|
||||||
|
var newText = document.createTextNode("Item ID: " + localStorage.getItem("ID: " + i + " - Item ID:"));
|
||||||
|
newCell.appendChild(newText);
|
||||||
|
var newText2 = document.createTextNode("Name: " + localStorage.getItem("ID: " + i + " - Name:"));
|
||||||
|
newCell2.appendChild(newText2);
|
||||||
|
var newText3 = document.createTextNode("Task: " + localStorage.getItem("ID: " + i + " - Task:"));
|
||||||
|
newCell3.appendChild(newText3);
|
||||||
|
var newText4 = document.createTextNode("Priorty: " + localStorage.getItem("ID: " + i + " - Priority:"));
|
||||||
|
newCell4.appendChild(newText4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(function(){
|
||||||
|
location.reload();
|
||||||
|
}, 5000);
|
||||||
6
Unit 5/Day 2/replit.nix
Normal file
6
Unit 5/Day 2/replit.nix
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{ pkgs }: {
|
||||||
|
deps = [
|
||||||
|
pkgs.nodePackages.vscode-langservers-extracted
|
||||||
|
pkgs.nodePackages.typescript-language-server
|
||||||
|
];
|
||||||
|
}
|
||||||
113
Unit 5/Day 2/stylesheets/lib/dismissible.css
Normal file
113
Unit 5/Day 2/stylesheets/lib/dismissible.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
1
Unit 5/Day 2/stylesheets/lib/lineicons.css
Normal file
1
Unit 5/Day 2/stylesheets/lib/lineicons.css
Normal file
File diff suppressed because one or more lines are too long
256
Unit 5/Day 2/stylesheets/style.css
Normal file
256
Unit 5/Day 2/stylesheets/style.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
49
Unit 5/Day 2/todoOnly.html
Normal file
49
Unit 5/Day 2/todoOnly.html
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Todo List</title>
|
||||||
|
<link rel="stylesheet" href="stylesheets/style.css">
|
||||||
|
<link rel="stylesheet" href="stylesheets/lib/dismissible.css">
|
||||||
|
<link href="stylesheets/lib/lineicons.css" rel="stylesheet"> <!--Lineicons not working when used directly. Using below cdn instead. -->
|
||||||
|
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
|
||||||
|
<script type="module" src="js/lib/md-block.js"></script>
|
||||||
|
</head>
|
||||||
|
<header>
|
||||||
|
<h1>This is a viewer for your todo-list</h1>
|
||||||
|
<h2>The content on this page is view only</h2>
|
||||||
|
<h3>This page will refresh automatically every 5 seconds. See footer for more info.</h3>
|
||||||
|
</header>
|
||||||
|
<body>
|
||||||
|
<main class="app">
|
||||||
|
<section class="greeting">
|
||||||
|
<h2 class="title">
|
||||||
|
Todo List for: <h2 id="nameForTodoOnly"></h2>
|
||||||
|
</h2>
|
||||||
|
</section>
|
||||||
|
<section class="create-todo">
|
||||||
|
<section class="todo-list">
|
||||||
|
<div class="list" id="todo-list"></div>
|
||||||
|
<table id="todoTableReadOnly">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Todo List:</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="js/viewOnly.js"></script>
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<p>© Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</html>
|
||||||
17
Unit 6/Canvas Project/index.html
Normal file
17
Unit 6/Canvas Project/index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<title>Canvas Project</title>
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<canvas></canvas>
|
||||||
|
<h1 id="caption">Sample Animation</h1>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
463
Unit 6/Canvas Project/script.js
Normal file
463
Unit 6/Canvas Project/script.js
Normal file
@@ -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+dx<ballRadius){
|
||||||
|
return "x";
|
||||||
|
}
|
||||||
|
else if(y+dy>canvas.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+dx2<ballRadius2){
|
||||||
|
return "x";
|
||||||
|
}
|
||||||
|
else if(y2+dx2>canvas.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+dx3<ballRadius3){
|
||||||
|
return "x";
|
||||||
|
}
|
||||||
|
else if(y3+dy3>canvas.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+dx4<ballRadius4){
|
||||||
|
return "x";
|
||||||
|
}
|
||||||
|
else if(y4+dy4>canvas.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+dx5<ballRadius5){
|
||||||
|
return "x";
|
||||||
|
}
|
||||||
|
else if(y5+dy5>canvas.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+dx6<ballRadius6){
|
||||||
|
return "x";
|
||||||
|
}
|
||||||
|
else if(y6+dy6>canvas.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+dx7<ballRadius7){
|
||||||
|
return "x";
|
||||||
|
}
|
||||||
|
else if(y7+dy7>canvas.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;
|
||||||
|
}
|
||||||
5
Unit 6/Canvas Project/style.css
Normal file
5
Unit 6/Canvas Project/style.css
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
#caption {
|
||||||
|
padding-top: 575px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: cursive;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user