-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
11fabf1
commit c1977f0
Showing
61 changed files
with
11,032 additions
and
0 deletions.
There are no files selected for viewing
62 changes: 62 additions & 0 deletions
62
public/classes/CS188/assets/js/classOptionListPopulator.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| /** | ||
| * Populates the list. | ||
| * @param {string} listName the name of the list being populated. | ||
| * @param {Array<Object>} 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); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
|
|
||
| [ | ||
| { | ||
| "title": "Lecture 1", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 2", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 3", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 4", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 5", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 6", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 7", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 8", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 9", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 10", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 11", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 12", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 13", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 14", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 15", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 16", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 17", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 18", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 19", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 20", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 23", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 22", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 23", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 24", | ||
| "tags": [] | ||
| }, | ||
| { | ||
| "title": "Lecture 25", | ||
| "tags": [] | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" dir="ltr"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="description" content="Personal website for Connor Bernard, Software Developer. Check out his portfolio here!" /> | ||
| <meta name="keywords" , content="Connor Bernard, Connor, Bernard, Software Developer, Software Engineer" /> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> | ||
| <link rel="manifest" href="/manifest.json" /> | ||
| <link rel="stylesheet" href="/assets/css/master.css" /> | ||
| <link rel="stylesheet" href="/assets/css/itemList.css" /> | ||
| <title>Connor Bernard</title> | ||
| </head> | ||
| <body> | ||
| <div id="loaderPage"><span id="loader" /></div> | ||
| <header> | ||
| <div class="hfContent"> | ||
| <div class="logo"> | ||
| <a href="/#top"><img src="/assets/img/logo.svg" alt="Connor Bernard Signature Logo" height=65px /></a> | ||
| </div> | ||
| <div class="hamburger"> | ||
| <span class="bar" /> | ||
| <span class="bar" /> | ||
| <span class="bar" /> | ||
| </div> | ||
| <nav class="headerNav"> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/classes">Classes</a> | ||
| </div> | ||
| </div> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/#AboutMe">About Me</a> | ||
| </div> | ||
| </div> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/#Experience">Experience</a> | ||
| </div> | ||
| </div> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/#Portfolio">Portfolio</a> | ||
| </div> | ||
| </div> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/#Contact">Contact</a> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
| <div style="height:90px;"></div> | ||
|
|
||
| <div class="sectionTitle"> | ||
| <h2>CS188</h2> | ||
| <img src="/assets/img/sectionDividerLine.svg" alt="Section divider" /> | ||
| </div> | ||
| <div id="classOptionsList" class="itemListContainer"> | ||
| <template ListItemTemplate class="classOptions"> | ||
| <div class="listItem rainbowBorder"> | ||
| <div class="listItemContents"> | ||
| <h3 class="itemTitle">Item Title</h3> | ||
| <p class="itemBody">Lorem ipsum dolor sit amet consectetur. Et phasellus in semper enim cursus eu. Sed amet ac netus aliquet. Felis dui ac | ||
| id mollis neque leo donec eleifend donec. Accumsan leo pellentesque tellus diam etiam arcu eget tempor. Vitae et tellus | ||
| maecenas donec blandit tortor ligula quis integer.</p> | ||
| <div class="pillBox"> | ||
| <template PillTemplate> | ||
| <div class="pill">tag</div> | ||
| </template> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </div> | ||
|
|
||
| <div style="position: relative; height: 190px;"></div> | ||
| <footer> | ||
| <div class="hfContent"> | ||
| <div class="socialIcons"> | ||
| <a href="https://github.com/Connor-Bernard"> | ||
| <img src="/assets/img/socialIcons/Github Logo.webp" alt="GitHub access link" loading="lazy" /> | ||
| </a> | ||
| <a href="https://www.linkedin.com/in/connorbernard/"> | ||
| <img src="/assets/img/socialIcons/Linkedin Logo.webp" alt="LinkedIn access link" loading="lazy" /> | ||
| </a> | ||
| <a href="https://bitbucket.org/connor-bernard/"> | ||
| <img src="/assets/img/socialIcons/Bitbucket Logo.webp" alt="BitBucket access link" loading="lazy" /> | ||
| </a> | ||
| <a href="mailto:[email protected]"> | ||
| <img src="/assets/img/socialIcons/Mail Symbol.webp" alt="Email access link" loading="lazy" /> | ||
| </a> | ||
| </div> | ||
| <nav class="footerNav"> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/#top">Home</a> | ||
| </div> | ||
| </div> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/#AboutMe">About Me</a> | ||
| </div> | ||
| </div> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/#Experience">Experience</a> | ||
| </div> | ||
| </div> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/#Portfolio">Portfolio</a> | ||
| </div> | ||
| </div> | ||
| <div class="rainbowHover"> | ||
| <div class="navItem"> | ||
| <a href="/#Contact">Contact</a> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| </footer> | ||
| <script src="./assets/js/classOptionListPopulator.js"></script> | ||
| <script src="/assets/js/index.js" defer></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.