Skip to content

Commit

Permalink
Add sidebar
Browse files Browse the repository at this point in the history 
-> sidebar in and out by clicking menu button
  • Loading branch information
@aizubair21
aizubair21 committed Nov 21, 2023
1 parent 5befc9b commit ce9d107
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 10 deletions.
27 changes: 27 additions & 0 deletions function.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
const leftTabNav = document.querySelectorAll('.tab_item');
const leftTabContent = document.querySelectorAll('.tab_content');
const tna = document.getElementsByClassName('tab_item_active')[0];
const asideLeft = document.getElementById('aside_left');
const ffc_inp = document.getElementById('ffc_imp');
const ffc_btn = document.getElementById('ffC_btn');
// console.log(tna)


Expand All @@ -20,4 +23,28 @@ leftTabNav.forEach((lnav, lindex) => {
lnav.classList.add('tab_item_active');
leftTabContent[lindex].style.display = 'block';
})
})

//close and open left aside
function closeAside() {
console.log("function triggered !");
if (asideLeft.classList.contains('aside_left_hide')) {
asideLeft.classList.remove('aside_left_hide');
asideLeft.style.marginLeft = 0 + '%';
asideLeft.style.transition = "all linear .3s";
} else {
asideLeft.classList.add('aside_left_hide');
asideLeft.style.marginLeft = -100 + "%";
asideLeft.style.transition = "all linear .3s";
}
}

//triggered exam finished input to undiabled button
ffc_inp.addEventListener('input', e => {
// console.log(e.target.checked);
if (e.target.checked) {
ffc_btn.removeAttribute('disabled', 'disabled');
} else {
ffc_btn.setAttribute('disabled', 'disabled');
}
})
12 changes: 9 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<!-- include fontawosome cdn from cdnjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
<link rel="stylesheet" href="mcq.css">
<link rel="stylesheet" href="responsive.css">
</head>

<body>
Expand All @@ -21,7 +22,6 @@ <h2 class="h2">
</h2>
<span class="span">MCQ </span>
</div>
<button onclick="closeAside()" class='close_btn'><i></i>&times</button>
</div>
<div class="hr"></div>

Expand Down Expand Up @@ -169,6 +169,10 @@ <h2 class="h2">
</section>

<div id="quiz_app">
<button onclick="closeAside()" class='close_btn'>
<i class="fa-solid fa-align-justify"></i>
</button>

<!-- corder element -->
<div class="corner_element">
<div class="corner_item"></div>
Expand Down Expand Up @@ -196,14 +200,15 @@ <h2 class="h2">
<img src="img/clock.png" style="padding-right:5px">
60 Min
</div>

<div class="total_mark">Mark: 60</div>
</div>

<div class="timeAndMark">

<div>

<div class="left">
<div class="total_mark">Mark: 60</div>
<div class="start_time">11:00 AM</div>
<div class="end_time">12:00 PM</div>

Expand Down Expand Up @@ -275,7 +280,8 @@ <h2 class="h2">
<input type="checkbox" name="" id="ffc_imp">
<label for="ffc_imp">I'm sure! want to finished and exit exam.</label>
</div>
<button class="button" style="--clr: #00ad54;">
<button onclick="submitExam()" id="ffC_btn" disabled="disabled" class="button"
style="--clr: #00ad54;">
<span class="button-decor"></span>
<div class="button-content">
<div class="button__icon">
Expand Down
37 changes: 33 additions & 4 deletions mcq.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,18 @@ body {

#aside_left {
background-color: #fff;
width: 30%;
width: 40%;
padding: 10px;
align-self: flex-start;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
height: 100%;
/* overflow: hidden; */
overflow: hidden;
transition: all linear .3s;

.aside_left_hide {
margin-left: -100% !important;
}

.aside_left-head {
display: flex;
Expand Down Expand Up @@ -279,7 +283,7 @@ body {
}

#quiz_app {
width: 70%;
width: 100%;
height: 100%;
/* box-shadow: 0px 10px 30px 0px rgba(197, 197, 197, 0.575); */
/* border: 5px solid gray; */
Expand All @@ -299,6 +303,28 @@ body {
overflow: hidden;
position: relative;

.close_btn {
/* padding: 5px; */
position: sticky;
top: 10px;
left: 10px;
font-size: 30px;
background-color: inherit;
color: #fff;
/* border-radius: 50%; */
width: 35px;
height: 35px;
font-weight: 600;
cursor: pointer;

/* on hover */
&:hover {
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
background-color: lightgray;
/* color: black; */
}
}


&::after {
content: "";
Expand Down Expand Up @@ -1037,8 +1063,11 @@ body {

.qiz_footer {
width: 100% !important;
height: 100px;
height: 110px;
overflow-y: scroll;
}


}


Expand Down
4 changes: 2 additions & 2 deletions mcq.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ const data = [{
},
]
const examFormElement = document.getElementsByClassName('exam_form')[0];
const quizfooterElement = document.getElementsByClassName("qiz_footer")[0];
const quizfooterElement = document.getElementsByClassName("footer_body")[0];
const totalMarkElelment = document.getElementsByClassName("total_mark")[0];
const totalTimeElement = document.getElementsByClassName("total_time")[0];
const totalLeftTime = document.getElementsByClassName('tm_left')[0];
Expand Down Expand Up @@ -553,7 +553,7 @@ function getRandomNumberBetweenMinAndMaxValue(min, max) {
}

setInterval(() => {
if (window.innerWidth > 800) {
if (window.innerWidth > 1300) {
document.getElementsByClassName('exam_layout')[0].classList.add('exam_layout_1');
document.getElementsByClassName('exam_layout')[0].classList.remove('exam_layout_2');
} else {
Expand Down
9 changes: 8 additions & 1 deletion responsive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,11 @@
@media (min-width: 400px) and (max-width:768px) {}

/* large and extra large devices */
@media (min-width:400px) {}
@media (min-width:400px) {}

/* until 768 px / */
@media (max-width:768px) {
.timeAndMark {
/* display: block !important; */
}
}

0 comments on commit ce9d107

Please sign in to comment.