Skip to content

Commit

Permalink
gpa calc styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@abdelrahman-elkhateeb
abdelrahman-elkhateeb committed Feb 11, 2024
1 parent 0e5114e commit 006e7e0
Show file tree
Hide file tree
Showing 2 changed files with 183 additions and 130 deletions.
239 changes: 132 additions & 107 deletions client/css/GPACalculator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
margin: 20px 0;
}

@media (max-width: 767px) {
.gpaCalc .container form .subject-buttons {
display: flex;
flex-direction: column;
}
}

.gpaCalc .container form .subject-buttons .sem {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -67,124 +74,142 @@

.gpaCalc .container form .subject-buttons .sem .selectAllWrap p,
.gpaCalc .container form .subject-buttons .sem .choiceWrap p {

margin: 0;
}
<div class="checkbox-wrapper">
<input type="checkbox" id="_checkbox">
<label for="_checkbox">
<div class="tickMark"></div>
</label>
</div>

<style>
.checkbox-wrapper-26 * {
-webkit-tap-highlight-color: transparent;
outline: none;
}

.checkbox-wrapper-26 input[type="checkbox"] {
display: none;
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper {
-webkit-tap-highlight-color: transparent;
outline: none;
}

.checkbox-wrapper-26 label {
--size: 50px;
--shadow: calc(var(--size) * .07) calc(var(--size) * .1);

position: relative;
display: block;
width: var(--size);
height: var(--size);
margin: 0 auto;
background-color: #f72414;
border-radius: 50%;
box-shadow: 0 var(--shadow) #ffbeb8;
cursor: pointer;
transition: 0.2s ease transform, 0.2s ease background-color,
0.2s ease box-shadow;
overflow: hidden;
z-index: 1;
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper input[type="checkbox"] {
display: none;
}

.checkbox-wrapper-26 label:before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
width: calc(var(--size) * .7);
height: calc(var(--size) * .7);
margin: 0 auto;
background-color: #fff;
transform: translateY(-50%);
border-radius: 50%;
box-shadow: inset 0 var(--shadow) #ffbeb8;
transition: 0.2s ease width, 0.2s ease height;
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper label {
--size: 1.8rem;
--shadow: calc(var(--size) * 0.07) calc(var(--size) * 0.1);

position: relative;
display: block;
width: var(--size);
height: var(--size);
margin: 0 auto;
/* background-color: #f72414; */
background-color: var(--third-color);
border-radius: 50%;
/* box-shadow: 0 var(--shadow) #ffbeb8; */
cursor: pointer;
transition:
0.2s ease transform,
0.2s ease background-color,
0.2s ease box-shadow;
overflow: hidden;
z-index: 1;
}

.checkbox-wrapper-26 label:hover:before {
width: calc(var(--size) * .55);
height: calc(var(--size) * .55);
box-shadow: inset 0 var(--shadow) #ff9d96;
}
.gpaCalc .container form .subject-buttons .sem .selectAllWrap .checkbox-wrapper label {
background-color: #f72414;
}

.checkbox-wrapper-26 label:active {
transform: scale(0.9);
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper label:before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
width: calc(var(--size) * 0.7);
height: calc(var(--size) * 0.7);
margin: 0 auto;
background-color: #fff;
transform: translateY(-50%);
border-radius: 50%;
/* box-shadow: inset 0 var(--shadow) #ffbeb8; */
transition:
0.2s ease width,
0.2s ease height;
}

.checkbox-wrapper-26 .tick_mark {
position: absolute;
top: -1px;
right: 0;
left: calc(var(--size) * -.05);
width: calc(var(--size) * .6);
height: calc(var(--size) * .6);
margin: 0 auto;
margin-left: calc(var(--size) * .14);
transform: rotateZ(-40deg);
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper label:hover:before {
width: calc(var(--size) * 0.55);
height: calc(var(--size) * 0.55);
/* box-shadow: inset 0 var(--shadow) #ff9d96; */
}

.checkbox-wrapper-26 .tick_mark:before,
.checkbox-wrapper-26 .tick_mark:after {
content: "";
position: absolute;
background-color: #fff;
border-radius: 2px;
opacity: 0;
transition: 0.2s ease transform, 0.2s ease opacity;
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper label:active {
transform: scale(0.9);
}

.checkbox-wrapper-26 .tick_mark:before {
left: 0;
bottom: 0;
width: calc(var(--size) * .1);
height: calc(var(--size) * .3);
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
transform: translateY(calc(var(--size) * -.68));
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark {
position: absolute;
top: -1px;
right: 0;
left: calc(var(--size) * -0.05);
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
margin: 0 auto;
margin-left: calc(var(--size) * 0.14);
transform: rotateZ(-40deg);
}

.checkbox-wrapper-26 .tick_mark:after {
left: 0;
bottom: 0;
width: 100%;
height: calc(var(--size) * .1);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
transform: translateX(calc(var(--size) * .78));
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark:before,
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark:after {
content: "";
position: absolute;
background-color: #fff;
border-radius: 2px;
opacity: 0;
transition:
0.2s ease transform,
0.2s ease opacity;
}

.checkbox-wrapper-26 input[type="checkbox"]:checked + label {
background-color: #07d410;
box-shadow: 0 var(--shadow) #92ff97;
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark:before {
left: 0;
bottom: 0;
width: calc(var(--size) * 0.1);
height: calc(var(--size) * 0.3);
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
transform: translateY(calc(var(--size) * -0.68));
}

.checkbox-wrapper-26 input[type="checkbox"]:checked + label:before {
width: 0;
height: 0;
}
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark:after {
left: 0;
bottom: 0;
width: 100%;
height: calc(var(--size) * 0.1);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
transform: translateX(calc(var(--size) * 0.78));
}

.checkbox-wrapper-26 input[type="checkbox"]:checked + label .tick_mark:before,
.checkbox-wrapper-26 input[type="checkbox"]:checked + label .tick_mark:after {
transform: translate(0);
opacity: 1;
}
</style>
.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper input[type="checkbox"]:checked + label {
background-color: #07d410;
box-shadow: 0 var(--shadow) #92ff97;
}

.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper input[type="checkbox"]:checked + label:before {
width: 0;
height: 0;
}

.gpaCalc
.container
form
.subject-buttons
.sem
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tickMark:before,
.gpaCalc
.container
form
.subject-buttons
.sem
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tickMark:after {
transform: translate(0);
opacity: 1;
}
74 changes: 51 additions & 23 deletions client/js/GPACalculator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,38 +85,64 @@ document.addEventListener("DOMContentLoaded", function () {
semesterHeader.textContent = `Semester ${subject.semester}`;
semesterDiv.appendChild(semesterHeader);

// Add the div to the subjectButtonsContainer
subjectButtonsContainer.appendChild(semesterDiv);

// Update the currentSemesterDiv
currentSemesterDiv = semesterDiv;

// Add the div to the subjectButtonsContainer
subjectButtonsContainer.appendChild(semesterDiv);

// Create a checkbox to select all subjects of this semester
const selectAllWrap = document.createElement("div");
selectAllWrap.classList.add("selectAllWrap");

const checkBoxWrapAll = document.createElement("div");
checkBoxWrapAll.classList.add("checkbox-wrapper");

const label = document.createElement("label");
label.setAttribute("for", `semester-${subject.semester}`);
const tickMarkAll = document.createElement("div");
tickMarkAll.classList.add("tickMark");
const input = document.createElement("input");
input.type = "checkbox";
input.name = `semester-${subject.semester}`;
input.id = `semester-${subject.semester}`;
input.value = subject.creditHours;
const pContent = document.createElement("p");
pContent.textContent = `Select All Semester ${subject.semester}`;
selectAllWrap.appendChild(input);
checkBoxWrapAll.appendChild(input);
checkBoxWrapAll.appendChild(label);
selectAllWrap.appendChild(checkBoxWrapAll);
selectAllWrap.appendChild(pContent);
currentSemesterDiv.appendChild(selectAllWrap);
}

// Create a div to wrap each input and label
const choiceWrapDiv = document.createElement("div");
choiceWrapDiv.classList.add("choiceWrap");

const input = document.createElement("input");
input.type = "checkbox";
input.name = subject.name + "-" + subject.semester;
input.id = subject.semester + subject.name;
input.value = subject.creditHours;
const label = document.createElement("label");
label.textContent = `${subject.name} (${subject.creditHours} credit hours)`;
//create checkbox wrap
const checkboxWrap = document.createElement("div");
checkboxWrap.classList.add("checkbox-wrapper");

const labelCheckBox = document.createElement("label");
const tickMark = document.createElement("div");
tickMark.classList.add("tickMark");

const checkboxSubject = document.createElement("input");
checkboxSubject.type = "checkbox";
checkboxSubject.name = subject.name + "-" + subject.semester;
checkboxSubject.id = subject.semester + subject.name;
checkboxSubject.value = subject.creditHours;

//apend the checkbox, label and tickmark inside the checkboxWrap
checkboxWrap.appendChild(checkboxSubject);
checkboxWrap.appendChild(labelCheckBox);
labelCheckBox.appendChild(tickMark);

// Set the 'for' attribute of the label to match the checkbox 'id'
labelCheckBox.setAttribute("for", subject.semester + subject.name);

const pSubject = document.createElement("p");
pSubject.textContent = `${subject.name} (${subject.creditHours} credit hours)`;
const gradeSelect = document.createElement("select");
gradeSelect.name = `${subject.name}-grade`;

Expand All @@ -128,15 +154,15 @@ document.addEventListener("DOMContentLoaded", function () {
}

// Append input, label, and gradeSelect to the choiceWrapDiv
choiceWrapDiv.appendChild(input);
choiceWrapDiv.appendChild(label);
choiceWrapDiv.appendChild(checkboxWrap);
choiceWrapDiv.appendChild(pSubject);
choiceWrapDiv.appendChild(gradeSelect);

// Hide grade option by default
gradeSelect.style.display = "none";
input.addEventListener("change", function () {
checkboxSubject.addEventListener("change", function () {
// Make grade option visible when checkbox is checked
if (input.checked) {
if (checkboxSubject.checked) {
gradeSelect.style.display = "block";
}
// Hide grade option when checkbox is unchecked
Expand All @@ -146,19 +172,21 @@ document.addEventListener("DOMContentLoaded", function () {
});

gradeSelect.addEventListener("change", function () {
if (input.checked) {
const selectedGrade = gradeSelect.value;
const gradeValue = grades[selectedGrade];
let gradeValue;
let selectedGrade;
if (labelCheckBox.checked) {
selectedGrade = gradeSelect.value;
gradeValue = grades[selectedGrade];
gradesArray[subject.id - 1] = gradeValue; // Update grade in gradesArray
}

console.log(gradesArray);
console.log(gradeValue, selectedGrade);
});

console.log(gradeSelect);
// Append the choiceWrapDiv to the currentSemesterDiv
currentSemesterDiv.appendChild(choiceWrapDiv);
});


// Select buttons that id starts with semester
const selectButtons = document.querySelectorAll('input[id^="semester-"]');
selectButtons.forEach((button) => {
Expand Down Expand Up @@ -200,4 +228,4 @@ document.addEventListener("DOMContentLoaded", function () {
alert(`GPA: ${result.toFixed(4)}`);
console.log("Grades Array:", gradesArray);
});
});
});

0 comments on commit 006e7e0

Please sign in to comment.