From f7c8b54206c7501f4f3b9eb9089095cb33ec505c Mon Sep 17 00:00:00 2001 From: kyleteeter Date: Wed, 1 Dec 2021 20:38:20 -0600 Subject: [PATCH 1/4] Getting Grades and displaying in selector element --- index.html | 6 ++++-- index.js | 44 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index a88087d..19d52fb 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,10 @@ Mentorship LocalStorage - -
+ +
+ +
diff --git a/index.js b/index.js index c868c54..8b0e411 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,4 @@ +let getGradeElement = []; const root = document.getElementById("root"); fetch("./students.json") @@ -26,7 +27,22 @@ function displayStudent(student) { } function renderSingleStudent(student, parents) { - return `
${student.name}

Email:

Section: ${student.section}

Grade: ${student.grade}

${parents.length ? "Parents" : "No parents registered"}

${parents}
`; + getGradeElement.push(`${student.grade}`); + return `
${ + student.name + }

Email:

Section: ${ + student.section + }

Grade: ${ + student.grade + }

${ + parents.length ? "Parents" : "No parents registered" + }

${parents}
`; } function displayParent(parents, studentID) { @@ -56,6 +72,7 @@ function makeEditable(guid, cardClass, studentID) { let editables = document .getElementById(guid) .getElementsByClassName(cardClass); + console.log("editable", editables); Object.keys(editables).forEach((key) => { if (!editables[key].isContentEditable) { editables[key].contentEditable = "true"; @@ -84,3 +101,28 @@ function findParent(studentID, parentGuid) { let student = JSON.parse(localStorage.getItem(studentID)); return student.parents.find((parent) => parent.guid === parentGuid); } + +function getGrades() { + let grades = removeDuplicates(getGradeElement); + var selectElem = document.getElementById("filterGrade"); + + for (var i = 0; i < grades.length; i++) { + var element = document.createElement("option"); + element.innerText = grades[i]; + selectElem.append(element); + } + + let selector = document.getElementById("filterGrade").value; + console.log(document.querySelectorAll(`[data-filter='${selector}']`)); +} + +function removeDuplicates(getGradeElement) { + getGradeElement.sort(); + let uniqueValues = []; + getGradeElement.forEach((element) => { + if (!uniqueValues.includes(element)) { + uniqueValues.push(element); + } + }); + return uniqueValues; +} From fbf4f99f342046bcd5db2d18cf7da1744fb2b7a8 Mon Sep 17 00:00:00 2001 From: kyleteeter Date: Thu, 2 Dec 2021 09:58:45 -0600 Subject: [PATCH 2/4] Completed Filter and Reset Feature and Updated Styling --- index.html | 9 +++++--- index.js | 36 ++++++++++++++++++++++++-------- styles.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 86 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 19d52fb..1869c02 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,13 @@ Mentorship LocalStorage - -
- + +

Students Directory

+
+ +
+
diff --git a/index.js b/index.js index 8b0e411..59f28f9 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -let getGradeElement = []; +let getGradeElement = ["All"]; const root = document.getElementById("root"); fetch("./students.json") @@ -27,8 +27,10 @@ function displayStudent(student) { } function renderSingleStudent(student, parents) { - getGradeElement.push(`${student.grade}`); - return `
${ student.name @@ -72,7 +74,6 @@ function makeEditable(guid, cardClass, studentID) { let editables = document .getElementById(guid) .getElementsByClassName(cardClass); - console.log("editable", editables); Object.keys(editables).forEach((key) => { if (!editables[key].isContentEditable) { editables[key].contentEditable = "true"; @@ -105,19 +106,17 @@ function findParent(studentID, parentGuid) { function getGrades() { let grades = removeDuplicates(getGradeElement); var selectElem = document.getElementById("filterGrade"); - for (var i = 0; i < grades.length; i++) { var element = document.createElement("option"); element.innerText = grades[i]; selectElem.append(element); } - - let selector = document.getElementById("filterGrade").value; - console.log(document.querySelectorAll(`[data-filter='${selector}']`)); } function removeDuplicates(getGradeElement) { - getGradeElement.sort(); + getGradeElement.sort(function (a, b) { + return b - a; + }); let uniqueValues = []; getGradeElement.forEach((element) => { if (!uniqueValues.includes(element)) { @@ -126,3 +125,22 @@ function removeDuplicates(getGradeElement) { }); return uniqueValues; } + +function showCard() { + let selector = document.getElementById("filterGrade").value; + let allCards = document.getElementsByClassName("student-card"); + for (var i = 0; i < allCards.length; i++) { + if (selector === "All") { + allCards[i].classList.replace("hide", "show"); + } else if (allCards[i].classList.contains(`${selector}`)) { + allCards[i].classList.replace("hide", "show"); + } else { + allCards[i].classList.replace("show", "hide"); + } + } +} + +function reset() { + document.getElementById("filterGrade").value = "All"; + document.getElementById("filterGrade").dispatchEvent(new Event("change")); +} diff --git a/styles.css b/styles.css index ae0c326..53bd06a 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,12 @@ +* { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} body { - background-color: #f7f7f7; + background-color: #02cd4d; +} +h1 { + margin-left: 15px; + color: white; } h3 { font-size: 16px; @@ -10,8 +17,11 @@ h3 { grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(350px, 2fr)); grid-auto-rows: 50px; - /* grid-auto-flow: column; */ grid-gap: 20px; + background-color: white; + padding: 30px; + min-height: 80vh; + border-radius: 25px 25px 0px 0px; } .parent-card { @@ -19,14 +29,28 @@ h3 { } .student-card { - box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, - rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; + box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, + rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + display: none; } details { color: #686868; padding: 5px; min-height: 50px; + font-size: 18px; + padding-left: 30px; +} + +summary { + padding-top: 12px; +} + +details.show { + display: block; +} +details.show details { + display: block; } details[open] { @@ -37,9 +61,9 @@ details[open] { } [contenteditable="true"] { - padding: .25em .5em; + padding: 0.25em 0.5em; margin: 1em 0; - transition: padding .3s ease-in-out; + transition: padding 0.3s ease-in-out; width: 100%; background: #e0e0e0; outline: 2px solid slategray; @@ -47,5 +71,27 @@ details[open] { [contenteditable="true"]:hover, [contenteditable="true"]:focus { - padding: .25em; + padding: 0.25em; +} + +.filterTool { + display: flex; + justify-content: flex-end; + margin: 30px; +} +select { + min-width: 200px; + font-size: 18px; + padding: 5px; + border-radius: 5px; +} +button { + margin-left: 10px; + padding: 5px; + font-size: 18px; + background-color: white; + border: 1px solid black; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, + rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } From c0144620483d2b0aaed545cba9a9568d1dc6eea2 Mon Sep 17 00:00:00 2001 From: kyleteeter Date: Thu, 2 Dec 2021 10:22:42 -0600 Subject: [PATCH 3/4] Update hide class style --- styles.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/styles.css b/styles.css index 53bd06a..8f3304c 100644 --- a/styles.css +++ b/styles.css @@ -31,6 +31,9 @@ h3 { .student-card { box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; +} + +.hide { display: none; } From 1f0830f02a359ea54b0a908b737dff6f31cf6b7f Mon Sep 17 00:00:00 2001 From: kyleteeter Date: Thu, 2 Dec 2021 10:25:58 -0600 Subject: [PATCH 4/4] Removed wrapping from student string literal --- index.js | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/index.js b/index.js index 59f28f9..3059da6 100644 --- a/index.js +++ b/index.js @@ -30,21 +30,7 @@ function renderSingleStudent(student, parents) { if (student.grade != null) { getGradeElement.push(`${student.grade}`); } - return `
${ - student.name - }

Email:

Section: ${ - student.section - }

Grade: ${ - student.grade - }

${ - parents.length ? "Parents" : "No parents registered" - }

${parents}
`; + return `
${student.name}

Email:

Section: ${student.section}

Grade: ${student.grade}

${parents.length ? "Parents" : "No parents registered"}

${parents}
`; } function displayParent(parents, studentID) {