diff --git a/public/assets/css/itemList.css b/public/assets/css/itemList.css new file mode 100644 index 0000000..87036f9 --- /dev/null +++ b/public/assets/css/itemList.css @@ -0,0 +1,40 @@ +.itemListContainer{ + display:flex; + gap:40px; + flex-wrap:wrap; + justify-content:center; +} +.listItemContents{ + position:relative; + display:flex; + flex-direction:column; + justify-content: space-between; + padding:30px; + gap:30px; + background:black; + border-radius:15px; + max-width:700px; + margin:3px; +} +.clickable{ + cursor: pointer; +} + +.pillBox{ + display:flex; + flex-direction:row; + gap:15px; +} +.pill{ + padding:5px 8px; + color:var(--tertiary-pink); + background-color: rgba(211, 112, 219, 0.15); + border-radius:10px; +} + +@media screen and (max-width:700px){ + .listItem{ + padding:20px; + height: fit-content !important; + } +} \ No newline at end of file diff --git a/public/assets/css/master.css b/public/assets/css/master.css index 73e4e74..db70297 100644 --- a/public/assets/css/master.css +++ b/public/assets/css/master.css @@ -17,6 +17,7 @@ html{ html, body{ margin:0; padding:0; + min-height: 100vh; overflow-x:hidden; -ms-overflow-style:none; scrollbar-width:none; @@ -56,9 +57,6 @@ p{ section:not(:first-of-type){ margin:100px 0 100px; } -section:first-child{ - background-color:red; -} button{ width:188px; @@ -100,50 +98,22 @@ button{ } @keyframes loader { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} body{ + position: relative; background-color: black; } -/* .blur{ - position:absolute; - z-index: -1; -} -.blur > img{ - width:100%; -} - -#blur1{ - width: 60vw; - top:50%; - left:5%; - opacity:60%; -} -#blur2{ - top:4; - width: 60vw; - opacity:40%; - right:0vw; -} -#blur3{ - top:400%; - width: 100vw; - left:-20vw; -} -#blur4{ - top:700%; -} */ - header{ background-color:black; - width:100%; + width:100vw; height:90px; position:fixed; top:0; @@ -169,11 +139,12 @@ header{ margin-top:10px; } -.rainbowHover{ +/* This is enabled only for webkit, so disabling it until fully featured.*/ +/* .rainbowHover{ background:var(--gradient-3); background-clip:text; -webkit-background-clip:text; -} +} */ .navItem > a{ color:white; font-family: var(--copy-font); @@ -181,7 +152,7 @@ header{ font-size:20px; } .navItem a:hover{ - color:transparent; + color:var(--accent); } .hamburger{ display:none; @@ -226,7 +197,9 @@ footer{ position:absolute; bottom:0; z-index:1; + background-color: black; } + .socialIcons{ display:flex; flex-direction:row; @@ -300,4 +273,15 @@ footer{ .socialIcons{ width:auto; } +} + +@media screen and (max-width:700px){ + .rainbowBorder{ + width:100%; + margin:0; + } + .portfolioItem{ + padding:20px; + height: fit-content !important; + } } \ No newline at end of file diff --git a/public/assets/js/index.js b/public/assets/js/index.js index f0657ef..1c4cb1f 100644 --- a/public/assets/js/index.js +++ b/public/assets/js/index.js @@ -59,6 +59,7 @@ function __initHamburger__(){ // }); __initHamburger__(); + addEventListener("load", () => { document.querySelector("#loaderPage").style.display = "none"; document.querySelector("header").style.position = "fixed"; diff --git a/public/assets/js/portfolio.js b/public/assets/js/portfolio.js index 588dc23..177bf4d 100644 --- a/public/assets/js/portfolio.js +++ b/public/assets/js/portfolio.js @@ -1,6 +1,6 @@ /** * Populates the Portfolio items with content. - * @param {JSON Array} portfolioData + * @param {Array} portfolioData */ function populatePortfolio(portfolioData){ const portfolioItemInjectPoint = document.querySelector("#portfolioItems"); diff --git a/public/classes/assets/js/classListPopulator.js b/public/classes/assets/js/classListPopulator.js new file mode 100644 index 0000000..2b32f0f --- /dev/null +++ b/public/classes/assets/js/classListPopulator.js @@ -0,0 +1,50 @@ +/** + * Populates the class list. + * @param {Array} classListData the json decoded class list data. + */ +function populateClassList(classListData) { + const classList = document.getElementById('classList'); + classListData.forEach(classData => { + classList.appendChild(getClassListItem(classData)); + }); +} + +/** + * Gets a new class item instance. + * @param {Object} classInfo the class information. + * @return {DocumentFragment} the class list item to be rendered. + */ +function getClassListItem(classInfo) { + const classItem = document.querySelector('[listItemTemplate].classes') + .content + .cloneNode(true) + .children[0]; + classItem.querySelector('.itemTitle').textContent = classInfo.name; + classItem.querySelector('.itemBody').textContent = `${classInfo.class}: ${classInfo.description}`; + const pillBox = classItem.querySelector('.pillBox'); + classInfo.tags.forEach(tag => { + pillBox.appendChild(getPill(classItem, tag)); + }); + classItem.addEventListener('click', () => { + window.location = `./${classInfo.name}`; + }) + return classItem; +} + +/** + * Gets a new pill instance. + * @param {DocumentFragment} parent the parent node that defines the pill template. + * @param {string} pillValue value of the pill. + * @return {DocumentFragment} the pill to be rendered. + */ +function getPill(parent, pillValue) { + const pill = parent.querySelector('[PillTemplate]').content.cloneNode(true).children[0]; + pill.textContent = pillValue; + return pill; +} + +fetch("./assets/json/classes.json").then(res => { + res.json().then(classListData => { + populateClassList(classListData); + }); +}); diff --git a/public/classes/assets/json/classes.json b/public/classes/assets/json/classes.json new file mode 100644 index 0000000..dda14d4 --- /dev/null +++ b/public/classes/assets/json/classes.json @@ -0,0 +1,8 @@ +[ + { + "class": "Introduction to Software Engineering", + "name": "cs169a", + "description": "Ideas and techniques for designing, developing, and modifying large software systems.", + "tags": ["ruby", "agile", "saas"] + } +] \ No newline at end of file diff --git a/public/classes/cs169a/assets/js/classOptionListPopulator.js b/public/classes/cs169a/assets/js/classOptionListPopulator.js new file mode 100644 index 0000000..6a62d22 --- /dev/null +++ b/public/classes/cs169a/assets/js/classOptionListPopulator.js @@ -0,0 +1,62 @@ +/** + * Populates the list. + * @param {string} listName the name of the list being populated. + * @param {Array} listData the json decoded list data. + * @param {function} itemPopulator a function that populates the blank item instance. + */ +function populateList(listName, listData, itemPopulator) { + const listRef = document.getElementById(`${listName}List`); + listData.forEach(listItemData => { + listRef.appendChild(getListItem(listName, listItemData, itemPopulator)); + }); +} + +/** + * Gets a new list item instance. + * @param {string} listName the name of the list being populated. + * @param {Object} itemData the item's information. + * @param {function} populate a function that populates the blank item instance. + * @return {Element} the class list item to be rendered. + */ +function getListItem(listName, itemData, populate=()=>{}) { + const itemInstance = document.querySelector(`[listItemTemplate].${listName}`) + .content + .cloneNode(true) + .children[0]; + const pillBox = itemInstance.querySelector('.pillBox'); + itemData.tags?.forEach(tag => { + pillBox.appendChild(getPill(itemInstance, tag)); + }); + if (itemData.title) { + itemInstance.querySelector('.itemTitle').textContent = itemData.title; + } + if (itemData.body) { + itemInstance.querySelector('.itemBody').textContent = itemData.body; + } + if (itemData.ref) { + itemInstance.classList.add('clickable'); + itemInstance.addEventListener('click', () => { + window.location = itemData.ref; + }); + } + populate(itemInstance, itemData); + return itemInstance; +} + +/** + * Gets a new pill instance. + * @param {Element} parent the parent node that defines the pill template. + * @param {string} pillValue value of the pill. + * @return {DocumentFragment} the pill to be rendered. + */ +function getPill(parent, pillValue) { + const pill = parent.querySelector('[PillTemplate]').content.cloneNode(true).children[0]; + pill.textContent = pillValue; + return pill; +} + +fetch("./assets/json/options.json").then(res => { + res.json().then(listData => { + populateList('classOptions', listData); + }); +}); diff --git a/public/classes/cs169a/assets/json/lectureTags.json b/public/classes/cs169a/assets/json/lectureTags.json new file mode 100644 index 0000000..2713ad6 --- /dev/null +++ b/public/classes/cs169a/assets/json/lectureTags.json @@ -0,0 +1,95 @@ + +[ + { + "title": "Lecture 1", + "tags": ["plan and document", "agile", "SaaS"] + }, + { + "title": "Lecture 2", + "tags": ["language", "ruby"] + }, + { + "title": "Lecture 3", + "tags": ["ruby"] + }, + { + "title": "Lecture 4", + "tags": ["web", "http", "soa", "rest"] + }, + { + "title": "Lecture 5", + "tags": ["erb", "sessions"] + }, + { + "title": "Lecture 6", + "tags": ["mvc", "rails"] + }, + { + "title": "Lecture 7", + "tags": ["mvc"] + }, + { + "title": "Lecture 8", + "tags": ["rails", "active record"] + }, + { + "title": "Lecture 9", + "tags": ["forms", "rails db", "debugging"] + }, + { + "title": "Lecture 10", + "tags": ["rails", "validation", "filter", "sso"] + }, + { + "title": "Lecture 11", + "tags": ["rails", "active record", "db"] + }, + { + "title": "Lecture 13", + "tags": ["rails a11y", "ajax"] + }, + { + "title": "Lecture 14", + "tags": ["bdd", "agile", "cucumber", "capybara"] + }, + { + "title": "Lecture 15", + "tags": ["agile", "cucumber", "capybara"] + }, + { + "title": "Lecture 16", + "tags": ["testing", "doubles"] + }, + { + "title": "Lecture 17", + "tags": ["mocks", "factories", "coverage", "testing"] + }, + { + "title": "Lecture 18", + "tags": ["agile", "scrum", "prs"] + }, + { + "title": "Lecture 19", + "tags": ["prs", "ticketing", "design patterns"] + }, + { + "title": "Lecture 20", + "tags": ["solid", "design patterns"] + }, + { + "title": "Lecture 22", + "tags": ["paas", "metrics", "cicd"] + }, + { + "title": "Lecture 23", + "tags": ["ffs", "monitoring", "caching"] + }, + { + "title": "Lecture 24", + "tags": ["security", "legacy code"] + }, + { + "title": "Lecture 25", + "tags": ["automated testing", "metrics", "p&d"] + } +] \ No newline at end of file diff --git a/public/classes/cs169a/assets/json/options.json b/public/classes/cs169a/assets/json/options.json new file mode 100644 index 0000000..18b7046 --- /dev/null +++ b/public/classes/cs169a/assets/json/options.json @@ -0,0 +1,12 @@ +[ + { + "title": "Notes", + "body": "This is the web index of all of my notes for CS169A.", + "ref": "./notes" + }, + { + "title": "Notes (PDF)", + "body": "This is the PDF index of all of my notes for CS169A.", + "ref": "./notes_pdf" + } +] \ No newline at end of file diff --git a/public/classes/cs169a/index.html b/public/classes/cs169a/index.html new file mode 100644 index 0000000..018e3ce --- /dev/null +++ b/public/classes/cs169a/index.html @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + Connor Bernard + + +
+
+
+ +
+ + + +
+ +
+
+
+ +
+

CS169A

+ Section divider +
+
+ +
+ +
+ + + + + diff --git a/public/cs169/L1.html b/public/classes/cs169a/notes/L1.html similarity index 100% rename from public/cs169/L1.html rename to public/classes/cs169a/notes/L1.html diff --git a/public/cs169/L10.html b/public/classes/cs169a/notes/L10.html similarity index 100% rename from public/cs169/L10.html rename to public/classes/cs169a/notes/L10.html diff --git a/public/cs169/L11.html b/public/classes/cs169a/notes/L11.html similarity index 100% rename from public/cs169/L11.html rename to public/classes/cs169a/notes/L11.html diff --git a/public/cs169/L13.html b/public/classes/cs169a/notes/L13.html similarity index 100% rename from public/cs169/L13.html rename to public/classes/cs169a/notes/L13.html diff --git a/public/cs169/L14.html b/public/classes/cs169a/notes/L14.html similarity index 100% rename from public/cs169/L14.html rename to public/classes/cs169a/notes/L14.html diff --git a/public/cs169/L15.html b/public/classes/cs169a/notes/L15.html similarity index 100% rename from public/cs169/L15.html rename to public/classes/cs169a/notes/L15.html diff --git a/public/cs169/L16.html b/public/classes/cs169a/notes/L16.html similarity index 100% rename from public/cs169/L16.html rename to public/classes/cs169a/notes/L16.html diff --git a/public/cs169/L17.html b/public/classes/cs169a/notes/L17.html similarity index 100% rename from public/cs169/L17.html rename to public/classes/cs169a/notes/L17.html diff --git a/public/cs169/L18.html b/public/classes/cs169a/notes/L18.html similarity index 100% rename from public/cs169/L18.html rename to public/classes/cs169a/notes/L18.html diff --git a/public/cs169/L19.html b/public/classes/cs169a/notes/L19.html similarity index 100% rename from public/cs169/L19.html rename to public/classes/cs169a/notes/L19.html diff --git a/public/cs169/L2.html b/public/classes/cs169a/notes/L2.html similarity index 100% rename from public/cs169/L2.html rename to public/classes/cs169a/notes/L2.html diff --git a/public/cs169/L20.html b/public/classes/cs169a/notes/L20.html similarity index 100% rename from public/cs169/L20.html rename to public/classes/cs169a/notes/L20.html diff --git a/public/cs169/L22.html b/public/classes/cs169a/notes/L22.html similarity index 100% rename from public/cs169/L22.html rename to public/classes/cs169a/notes/L22.html diff --git a/public/cs169/L23.html b/public/classes/cs169a/notes/L23.html similarity index 100% rename from public/cs169/L23.html rename to public/classes/cs169a/notes/L23.html diff --git a/public/cs169/L24.html b/public/classes/cs169a/notes/L24.html similarity index 100% rename from public/cs169/L24.html rename to public/classes/cs169a/notes/L24.html diff --git a/public/cs169/L25.html b/public/classes/cs169a/notes/L25.html similarity index 100% rename from public/cs169/L25.html rename to public/classes/cs169a/notes/L25.html diff --git a/public/cs169/L3.html b/public/classes/cs169a/notes/L3.html similarity index 100% rename from public/cs169/L3.html rename to public/classes/cs169a/notes/L3.html diff --git a/public/cs169/L4.html b/public/classes/cs169a/notes/L4.html similarity index 100% rename from public/cs169/L4.html rename to public/classes/cs169a/notes/L4.html diff --git a/public/cs169/L5.html b/public/classes/cs169a/notes/L5.html similarity index 100% rename from public/cs169/L5.html rename to public/classes/cs169a/notes/L5.html diff --git a/public/cs169/L6.html b/public/classes/cs169a/notes/L6.html similarity index 100% rename from public/cs169/L6.html rename to public/classes/cs169a/notes/L6.html diff --git a/public/cs169/L7.html b/public/classes/cs169a/notes/L7.html similarity index 100% rename from public/cs169/L7.html rename to public/classes/cs169a/notes/L7.html diff --git a/public/cs169/L8.html b/public/classes/cs169a/notes/L8.html similarity index 100% rename from public/cs169/L8.html rename to public/classes/cs169a/notes/L8.html diff --git a/public/cs169/L9.html b/public/classes/cs169a/notes/L9.html similarity index 100% rename from public/cs169/L9.html rename to public/classes/cs169a/notes/L9.html diff --git a/public/classes/cs169a/notes/assets/js/noteListPopulator.js b/public/classes/cs169a/notes/assets/js/noteListPopulator.js new file mode 100644 index 0000000..ce2b6d8 --- /dev/null +++ b/public/classes/cs169a/notes/assets/js/noteListPopulator.js @@ -0,0 +1,79 @@ +/** + * Populates the list. + * @param {string} listName the name of the list being populated. + * @param {Array} listData the json decoded list data. + * @param {function} itemPopulator a function that populates the blank item instance. + */ +function populateList(listName, listData, itemPopulator) { + const listRef = document.getElementById(`${listName}List`); + listData.forEach(listItemData => { + listRef.appendChild(getListItem(listName, listItemData, itemPopulator)); + }); +} + +/** + * Gets a new list item instance. + * @param {string} listName the name of the list being populated. + * @param {Object} itemData the item's information. + * @param {function} populate a function that populates the blank item instance. + * @return {Element} the class list item to be rendered. + */ +function getListItem(listName, itemData, populate = () => { }) { + const itemInstance = document.querySelector(`[listItemTemplate].${listName}`) + .content + .cloneNode(true) + .children[0]; + const pillBox = itemInstance.querySelector('.pillBox'); + itemData.tags?.forEach(tag => { + pillBox.appendChild(getPill(itemInstance, tag)); + }); + if (itemData.title) { + itemInstance.querySelector('.itemTitle').textContent = itemData.title; + } + if (itemData.body) { + itemInstance.querySelector('.itemBody').textContent = itemData.body; + } + if (itemData.ref) { + itemInstance.classList.add('clickable'); + itemInstance.addEventListener('click', () => { + window.location = itemData.ref; + }); + } + populate(itemInstance, itemData); + return itemInstance; +} + +/** + * Gets a new pill instance. + * @param {Element} parent the parent node that defines the pill template. + * @param {string} pillValue value of the pill. + * @return {DocumentFragment} the pill to be rendered. + */ +function getPill(parent, pillValue) { + const pill = parent.querySelector('[PillTemplate]').content.cloneNode(true).children[0]; + pill.textContent = pillValue; + return pill; +} + +/** + * Updates the width of all list items on the page to the maximum width + * of all list items on the page. + */ +function updateListItemWidths() { + const listItems = document.querySelectorAll('.listItem'); + const maxItemWidth = Math.max(...Array.from(listItems).map(e => e.offsetWidth)); + listItems.forEach(e => e.style.minWidth = `${maxItemWidth}px`); +} + +Promise.all([ + fetch("./assets/json/lectures.json").then(res => res.json()), + fetch("../assets/json/lectureTags.json").then(res => res.json()), +]).then(([lectureData, lectureTagData]) => { + if (lectureData.length === lectureTagData.length) { + lectureData.forEach((el, i) => (el.tags = lectureTagData[i].tags)); + } + populateList('classOptions', lectureData, (instance) => { + instance.querySelector('.itemBody').style.display = 'none'; + }); + updateListItemWidths(); +}); diff --git a/public/classes/cs169a/notes/assets/json/lectures.json b/public/classes/cs169a/notes/assets/json/lectures.json new file mode 100644 index 0000000..b751478 --- /dev/null +++ b/public/classes/cs169a/notes/assets/json/lectures.json @@ -0,0 +1,94 @@ +[ + { + "title": "Lecture 1", + "ref": "./L1.html" + }, + { + "title": "Lecture 2", + "ref": "./L2.html" + }, + { + "title": "Lecture 3", + "ref": "./L3.html" + }, + { + "title": "Lecture 4", + "ref": "./L4.html" + }, + { + "title": "Lecture 5", + "ref": "./L5.html" + }, + { + "title": "Lecture 6", + "ref": "./L6.html" + }, + { + "title": "Lecture 7", + "ref": "./L7.html" + }, + { + "title": "Lecture 8", + "ref": "./L8.html" + }, + { + "title": "Lecture 9", + "ref": "./L9.html" + }, + { + "title": "Lecture 10", + "ref": "./L10.html" + }, + { + "title": "Lecture 11", + "ref": "./L11.html" + }, + { + "title": "Lecture 13", + "ref": "./L13.html" + }, + { + "title": "Lecture 14", + "ref": "./L14.html" + }, + { + "title": "Lecture 15", + "ref": "./L15.html" + }, + { + "title": "Lecture 16", + "ref": "./L16.html" + }, + { + "title": "Lecture 17", + "ref": "./L17.html" + }, + { + "title": "Lecture 18", + "ref": "./L18.html" + }, + { + "title": "Lecture 19", + "ref": "./L19.html" + }, + { + "title": "Lecture 20", + "ref": "./L20.html" + }, + { + "title": "Lecture 22", + "ref": "./L22.html" + }, + { + "title": "Lecture 23", + "ref": "./L23.html" + }, + { + "title": "Lecture 24", + "ref": "./L24.html" + }, + { + "title": "Lecture 25", + "ref": "./L25.html" + } +] \ No newline at end of file diff --git a/public/classes/cs169a/notes/index.html b/public/classes/cs169a/notes/index.html new file mode 100644 index 0000000..6230376 --- /dev/null +++ b/public/classes/cs169a/notes/index.html @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + Connor Bernard + + +
+
+
+ +
+ + + +
+ +
+
+ +
+
+

Notes

+ Section divider +
+
+ +
+
+ + + + + diff --git a/public/assets/files/cs169/L1.pdf b/public/classes/cs169a/notes_pdf/assets/files/L1.pdf similarity index 100% rename from public/assets/files/cs169/L1.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L1.pdf diff --git a/public/assets/files/cs169/L10.pdf b/public/classes/cs169a/notes_pdf/assets/files/L10.pdf similarity index 100% rename from public/assets/files/cs169/L10.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L10.pdf diff --git a/public/assets/files/cs169/L11.pdf b/public/classes/cs169a/notes_pdf/assets/files/L11.pdf similarity index 100% rename from public/assets/files/cs169/L11.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L11.pdf diff --git a/public/assets/files/cs169/L13.pdf b/public/classes/cs169a/notes_pdf/assets/files/L13.pdf similarity index 100% rename from public/assets/files/cs169/L13.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L13.pdf diff --git a/public/assets/files/cs169/L14.pdf b/public/classes/cs169a/notes_pdf/assets/files/L14.pdf similarity index 100% rename from public/assets/files/cs169/L14.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L14.pdf diff --git a/public/assets/files/cs169/L15.pdf b/public/classes/cs169a/notes_pdf/assets/files/L15.pdf similarity index 100% rename from public/assets/files/cs169/L15.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L15.pdf diff --git a/public/assets/files/cs169/L16.pdf b/public/classes/cs169a/notes_pdf/assets/files/L16.pdf similarity index 100% rename from public/assets/files/cs169/L16.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L16.pdf diff --git a/public/assets/files/cs169/L17.pdf b/public/classes/cs169a/notes_pdf/assets/files/L17.pdf similarity index 100% rename from public/assets/files/cs169/L17.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L17.pdf diff --git a/public/assets/files/cs169/L18.pdf b/public/classes/cs169a/notes_pdf/assets/files/L18.pdf similarity index 100% rename from public/assets/files/cs169/L18.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L18.pdf diff --git a/public/assets/files/cs169/L19.pdf b/public/classes/cs169a/notes_pdf/assets/files/L19.pdf similarity index 100% rename from public/assets/files/cs169/L19.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L19.pdf diff --git a/public/assets/files/cs169/L2.pdf b/public/classes/cs169a/notes_pdf/assets/files/L2.pdf similarity index 100% rename from public/assets/files/cs169/L2.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L2.pdf diff --git a/public/assets/files/cs169/L20.pdf b/public/classes/cs169a/notes_pdf/assets/files/L20.pdf similarity index 100% rename from public/assets/files/cs169/L20.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L20.pdf diff --git a/public/assets/files/cs169/L22.pdf b/public/classes/cs169a/notes_pdf/assets/files/L22.pdf similarity index 100% rename from public/assets/files/cs169/L22.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L22.pdf diff --git a/public/assets/files/cs169/L23.pdf b/public/classes/cs169a/notes_pdf/assets/files/L23.pdf similarity index 100% rename from public/assets/files/cs169/L23.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L23.pdf diff --git a/public/assets/files/cs169/L24.pdf b/public/classes/cs169a/notes_pdf/assets/files/L24.pdf similarity index 100% rename from public/assets/files/cs169/L24.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L24.pdf diff --git a/public/assets/files/cs169/L25.pdf b/public/classes/cs169a/notes_pdf/assets/files/L25.pdf similarity index 100% rename from public/assets/files/cs169/L25.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L25.pdf diff --git a/public/assets/files/cs169/L3.pdf b/public/classes/cs169a/notes_pdf/assets/files/L3.pdf similarity index 100% rename from public/assets/files/cs169/L3.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L3.pdf diff --git a/public/assets/files/cs169/L4.pdf b/public/classes/cs169a/notes_pdf/assets/files/L4.pdf similarity index 100% rename from public/assets/files/cs169/L4.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L4.pdf diff --git a/public/assets/files/cs169/L5.pdf b/public/classes/cs169a/notes_pdf/assets/files/L5.pdf similarity index 100% rename from public/assets/files/cs169/L5.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L5.pdf diff --git a/public/assets/files/cs169/L6.pdf b/public/classes/cs169a/notes_pdf/assets/files/L6.pdf similarity index 100% rename from public/assets/files/cs169/L6.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L6.pdf diff --git a/public/assets/files/cs169/L7.pdf b/public/classes/cs169a/notes_pdf/assets/files/L7.pdf similarity index 100% rename from public/assets/files/cs169/L7.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L7.pdf diff --git a/public/assets/files/cs169/L8.pdf b/public/classes/cs169a/notes_pdf/assets/files/L8.pdf similarity index 100% rename from public/assets/files/cs169/L8.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L8.pdf diff --git a/public/assets/files/cs169/L9.pdf b/public/classes/cs169a/notes_pdf/assets/files/L9.pdf similarity index 100% rename from public/assets/files/cs169/L9.pdf rename to public/classes/cs169a/notes_pdf/assets/files/L9.pdf diff --git a/public/classes/cs169a/notes_pdf/assets/js/pdfNoteListPopulator.js b/public/classes/cs169a/notes_pdf/assets/js/pdfNoteListPopulator.js new file mode 100644 index 0000000..3c33f4b --- /dev/null +++ b/public/classes/cs169a/notes_pdf/assets/js/pdfNoteListPopulator.js @@ -0,0 +1,82 @@ +/** + * Populates the list. + * @param {string} listName the name of the list being populated. + * @param {Array} listData the json decoded list data. + * @param {function} itemPopulator a function that populates the blank item instance. + */ +function populateList(listName, listData, itemPopulator) { + const listRef = document.getElementById(`${listName}List`); + listData.forEach(listItemData => { + listRef.appendChild(getListItem(listName, listItemData, itemPopulator)); + }); +} + +/** + * Gets a new list item instance. + * @param {string} listName the name of the list being populated. + * @param {Object} itemData the item's information. + * @param {function} populate a function that populates the blank item instance. + * @return {Element} the class list item to be rendered. + */ +function getListItem(listName, itemData, populate = () => { }) { + const itemInstance = document.querySelector(`[listItemTemplate].${listName}`) + .content + .cloneNode(true) + .children[0]; + const pillBox = itemInstance.querySelector('.pillBox'); + itemData.tags?.forEach(tag => { + pillBox.appendChild(getPill(itemInstance, tag)); + }); + if (itemData.title) { + itemInstance.querySelector('.itemTitle').textContent = itemData.title; + } + if (itemData.body) { + itemInstance.querySelector('.itemBody').textContent = itemData.body; + } + if (itemData.ref) { + itemInstance.classList.add('clickable'); + itemInstance.addEventListener('click', () => { + window.location = itemData.ref; + }); + } + populate(itemInstance, itemData); + return itemInstance; +} + +/** + * Gets a new pill instance. + * @param {Element} parent the parent node that defines the pill template. + * @param {string} pillValue value of the pill. + * @return {DocumentFragment} the pill to be rendered. + */ +function getPill(parent, pillValue) { + const pill = parent.querySelector('[PillTemplate]').content.cloneNode(true).children[0]; + pill.textContent = pillValue; + return pill; +} + +/** + * Updates the width of all list items on the page to the maximum width + * of all list items on the page. + */ +function updateListItemWidths() { + const listItems = document.querySelectorAll('.listItem'); + const maxItemWidth = Math.max(...Array.from(listItems).map(e => e.offsetWidth)); + listItems.forEach(e => e.style.minWidth = `${maxItemWidth}px`); +} + +// If you didn't already have an aneurism looking at my code, here goes nothing. +Promise.all([ + fetch("./assets/json/lectures.json").then(res => res.json()), + fetch("../assets/json/lectureTags.json").then(res => res.json()), +]).then(([lectureData, lectureTagData]) => { + if (lectureData.length === lectureTagData.length) { + lectureData.forEach((el, i) => (el.tags = lectureTagData[i].tags)); + } + populateList('classOptions', lectureData, (instance) => { + instance.querySelector('.itemBody').innerHTML = ` + Download here + `; + }); + updateListItemWidths(); +}); diff --git a/public/classes/cs169a/notes_pdf/assets/json/lectures.json b/public/classes/cs169a/notes_pdf/assets/json/lectures.json new file mode 100644 index 0000000..19b7e38 --- /dev/null +++ b/public/classes/cs169a/notes_pdf/assets/json/lectures.json @@ -0,0 +1,94 @@ +[ + { + "title": "Lecture 1", + "file": "./assets/files/L1.pdf" + }, + { + "title": "Lecture 2", + "file": "./assets/files/L2.pdf" + }, + { + "title": "Lecture 3", + "file": "./assets/files/L3.pdf" + }, + { + "title": "Lecture 4", + "file": "./assets/files/L4.pdf" + }, + { + "title": "Lecture 5", + "file": "./assets/files/L5.pdf" + }, + { + "title": "Lecture 6", + "file": "./assets/files/L6.pdf" + }, + { + "title": "Lecture 7", + "file": "./assets/files/L7.pdf" + }, + { + "title": "Lecture 8", + "file": "./assets/files/L8.pdf" + }, + { + "title": "Lecture 9", + "file": "./assets/files/L9.pdf" + }, + { + "title": "Lecture 10", + "file": "./assets/files/L10.pdf" + }, + { + "title": "Lecture 11", + "file": "./assets/files/L11.pdf" + }, + { + "title": "Lecture 13", + "file": "./assets/files/L13.pdf" + }, + { + "title": "Lecture 14", + "file": "./assets/files/L14.pdf" + }, + { + "title": "Lecture 15", + "file": "./assets/files/L15.pdf" + }, + { + "title": "Lecture 16", + "file": "./assets/files/L16.pdf" + }, + { + "title": "Lecture 17", + "file": "./assets/files/L17.pdf" + }, + { + "title": "Lecture 18", + "file": "./assets/files/L18.pdf" + }, + { + "title": "Lecture 19", + "file": "./assets/files/L19.pdf" + }, + { + "title": "Lecture 20", + "file": "./assets/files/L20.pdf" + }, + { + "title": "Lecture 22", + "file": "./assets/files/L22.pdf" + }, + { + "title": "Lecture 23", + "file": "./assets/files/L23.pdf" + }, + { + "title": "Lecture 24", + "file": "./assets/files/L24.pdf" + }, + { + "title": "Lecture 25", + "file": "./assets/files/L25.pdf" + } +] \ No newline at end of file diff --git a/public/classes/cs169a/notes_pdf/index.html b/public/classes/cs169a/notes_pdf/index.html new file mode 100644 index 0000000..d54ec03 --- /dev/null +++ b/public/classes/cs169a/notes_pdf/index.html @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + Connor Bernard + + +
+
+
+ +
+ + + +
+ +
+
+ +
+
+

Notes

+ Section divider +
+
+ +
+
+ + + + + diff --git a/public/classes/index.html b/public/classes/index.html new file mode 100644 index 0000000..a52e2cf --- /dev/null +++ b/public/classes/index.html @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + Connor Bernard + + +
+
+
+ +
+ + + +
+ +
+
+
+ +
+

Class List

+ Section divider +
+
+ +
+ +
+ + + + + diff --git a/public/index.html b/public/index.html index 7be9be6..3129a99 100644 --- a/public/index.html +++ b/public/index.html @@ -19,23 +19,11 @@ Connor Bernard -
@@ -45,22 +33,27 @@ @@ -233,7 +226,7 @@

Say Hello!

-
+
-