Benjamin/Web-Dev-Classwork-2022
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added other units

Browse Source
This commit is contained in:
Benjamin Adovasio
2025-11-16 22:54:34 -05:00
parent 5bd461229a
commit ca92b603be
46 changed files with 2779 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
Unit 5/Code Share/README.html Normal file
View 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>&copy 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
View File

90
Unit 5/Code Share/index.html Normal file
View 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>&copy 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
View 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
View 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
View 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(/&amp;(?=[lg]t;)/g, "&");
}
else {
// Remote code may include characters that need to be escaped to be visible in HTML
code = code.replace(/</g, "&lt;");
}
return `<code>${code}</code>`;
}
}
}
export class MarkdownBlock extends MarkdownElement {
constructor() {
super();
}
get src() {
return this._src;
}
set src(value) {
this.setAttribute("src", value);
}
get hmin() {
return this._hmin || 1;
}
set hmin(value) {
this.setAttribute("hmin", value);
}
get hlinks() {
return this._hlinks ?? null;
}
set hlinks(value) {
this.setAttribute("hlinks", value);
}
_parse () {
return marked.parse(this._mdContent);
}
static renderer = Object.assign({
heading (text, level, _raw, slugger) {
level = Math.min(6, level + (this.hmin - 1));
const id = slugger.slug(text);
const hlinks = this.hlinks;
let content;
if (hlinks === null) {
// No heading links
content = text;
}
else {
content = `<a href="#${id}" class="anchor">`;
if (hlinks === "") {
// Heading content is the link
content += text + "</a>";
}
else {
// Headings are prepended with a linked symbol
content += hlinks + "</a>" + text;
}
}
return `
<h${level} id="${id}">
${content}
</h${level}>`;
},
code (code, language, escaped) {
if (this._contentFromHTML) {
// Inline HTML code needs to be escaped to not be parsed as HTML by the browser
// This results in marked double-escaping it, so we need to unescape it
code = code.replace(/&amp;(?=[lg]t;)/g, "&");
}
else {
// Remote code may include characters that need to be escaped to be visible in HTML
code = code.replace(/</g, "&lt;");
}
return `<pre class="language-${language}"><code>${code}</code></pre>`;
}
}, MarkdownSpan.renderer);
static get observedAttributes() {
return ["src", "hmin", "hlinks"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) {
return;
}
switch (name) {
case "src":
let url;
try {
url = new URL(newValue, location);
}
catch (e) {
return;
}
let prevSrc = this.src;
this._src = url;
if (this.src !== prevSrc) {
fetch(this.src)
.then(response => {
if (!response.ok) {
throw new Error(`Failed to fetch ${this.src}: ${response.status} ${response.statusText}`);
}
return response.text();
})
.then(text => {
this.mdContent = text;
})
.catch(e => {});
}
break;
case "hmin":
if (newValue > 0) {
this._hmin = +newValue;
this.render();
}
break;
case "hlinks":
this._hlinks = newValue;
this.render();
}
}
}
customElements.define("md-block", MarkdownBlock);
customElements.define("md-span", MarkdownSpan);

75
Unit 5/Code Share/js/script.js Normal file
View 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
View 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
View 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
View 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
View 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
View File

File diff suppressed because one or more lines are too long

270
Unit 5/Code Share/stylesheets/style.css Normal file
View 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
View 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>&copy 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
View 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>&copy 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
View File

84
Unit 5/Day 2/index.html Normal file
View 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>&copy 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
View 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
View 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
View 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(/&amp;(?=[lg]t;)/g, "&");
}
else {
// Remote code may include characters that need to be escaped to be visible in HTML
code = code.replace(/</g, "&lt;");
}
return `<code>${code}</code>`;
}
}
}
export class MarkdownBlock extends MarkdownElement {
constructor() {
super();
}
get src() {
return this._src;
}
set src(value) {
this.setAttribute("src", value);
}
get hmin() {
return this._hmin || 1;
}
set hmin(value) {
this.setAttribute("hmin", value);
}
get hlinks() {
return this._hlinks ?? null;
}
set hlinks(value) {
this.setAttribute("hlinks", value);
}
_parse () {
return marked.parse(this._mdContent);
}
static renderer = Object.assign({
heading (text, level, _raw, slugger) {
level = Math.min(6, level + (this.hmin - 1));
const id = slugger.slug(text);
const hlinks = this.hlinks;
let content;
if (hlinks === null) {
// No heading links
content = text;
}
else {
content = `<a href="#${id}" class="anchor">`;
if (hlinks === "") {
// Heading content is the link
content += text + "</a>";
}
else {
// Headings are prepended with a linked symbol
content += hlinks + "</a>" + text;
}
}
return `
<h${level} id="${id}">
${content}
</h${level}>`;
},
code (code, language, escaped) {
if (this._contentFromHTML) {
// Inline HTML code needs to be escaped to not be parsed as HTML by the browser
// This results in marked double-escaping it, so we need to unescape it
code = code.replace(/&amp;(?=[lg]t;)/g, "&");
}
else {
// Remote code may include characters that need to be escaped to be visible in HTML
code = code.replace(/</g, "&lt;");
}
return `<pre class="language-${language}"><code>${code}</code></pre>`;
}
}, MarkdownSpan.renderer);
static get observedAttributes() {
return ["src", "hmin", "hlinks"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) {
return;
}
switch (name) {
case "src":
let url;
try {
url = new URL(newValue, location);
}
catch (e) {
return;
}
let prevSrc = this.src;
this._src = url;
if (this.src !== prevSrc) {
fetch(this.src)
.then(response => {
if (!response.ok) {
throw new Error(`Failed to fetch ${this.src}: ${response.status} ${response.statusText}`);
}
return response.text();
})
.then(text => {
this.mdContent = text;
})
.catch(e => {});
}
break;
case "hmin":
if (newValue > 0) {
this._hmin = +newValue;
this.render();
}
break;
case "hlinks":
this._hlinks = newValue;
this.render();
}
}
}
customElements.define("md-block", MarkdownBlock);
customElements.define("md-span", MarkdownSpan);

36
Unit 5/Day 2/js/script.js Normal file
View 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
View 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
View 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
View 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
View 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
View File

File diff suppressed because one or more lines are too long

256
Unit 5/Day 2/stylesheets/style.css Normal file
View 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
View 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>&copy Benjamin Adovasio 2022. See the <a href='README.html'>README file </a> for more information.</p>
</footer>
</html>