Percentage slider added

Soumikcoder · Aug 4, 2024 · 6dbc13b · 6dbc13b
1 parent 8d16c47
commit 6dbc13b
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@ <h1>Attendance Manager</h1>
 </ul>
 </div>
 <button id="help">&#10067;</button>
-<div class="help">
+<div class="help popup">
     <button>&#10005;</button>
 <ul>
 <li>
@@ -48,6 +48,12 @@ <h1>Attendance Manager</h1>
 </li>
 </ul>
 </div>
+<button id="perslider">%</button>
+<div class="perslider popup">
+        <button>&#10005;</button>
+    <div class="slectedval progress" id="slider_text">75</div>
+    <input type="range" id="slider" min=0 max=100 value=75 >
+</div>
 <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,8 +1,15 @@
 const textbox = document.querySelector('input');
 const btn = document.getElementById('btn');
 let list = document.querySelector('.list');
+const slider=document.getElementById('slider')
+const slider_text=document.getElementById('slider_text')
 let noOfList=localStorage.length;
-
+let req_percentage=parseInt(JSON.parse(localStorage.getItem("attendancecriteria")))
+if (isNaN(req_percentage)){
+	req_percentage=75
+	localStorage.setItem("attendancecriteria", JSON.stringify(req_percentage));
+}
+slider_text.innerHTML=req_percentage
 // add reset button next
 function createHtml(present,total,subject){
 	let percentage=0;
@@ -23,24 +30,29 @@ function createHtml(present,total,subject){
                 <button id="del">-</button>
                 <div class="quote">You're right on track.</div>`;
 }
-
-(function getItemsFromLocal(){
-	for(let i=0;i<noOfList;i++){
-		const item = document.createElement('li');
-		item.className='card';
-    	const subinfo =JSON.parse(localStorage.getItem(localStorage.key(i)));
-    	item.innerHTML=createHtml(subinfo.present,subinfo.total,subinfo.subject);
-		item.id=localStorage.key(i);
-		const progressbar = item.querySelector('.progress-bar');
-		const quote = item.querySelector('.quote');
+function update_progress(item,subinfo){
+	const progressbar = item.querySelector('.progress-bar');
 		percentage=item.querySelector('.progress').textContent;
-		if(percentage >= 75.0){
+		if(percentage >= req_percentage){
     		progressbar.style.setProperty('--bgcolor','limegreen');
     	}
     	else{
     		progressbar.style.setProperty('--bgcolor','red');
     	}
+		const quote = item.querySelector('.quote');
     	quote.textContent=getquote(subinfo,percentage);
+}
+(function getItemsFromLocal(){
+	for(let i=0;i<noOfList;i++){
+		if(localStorage.key(i)=="attendancecriteria") continue;
+    	console.log(localStorage.key(i))
+		const item = document.createElement('li');
+		item.className='card';
+
+    	const subinfo =JSON.parse(localStorage.getItem(localStorage.key(i)));
+    	item.innerHTML=createHtml(subinfo.present,subinfo.total,subinfo.subject);
+		item.id=localStorage.key(i);
+		update_progress(item,subinfo)
 		addDeleteListener(item);
 		addPresentListener(item);
 		addEditListener(item);
@@ -101,7 +113,7 @@ function addPresentListener(item) {
     	presentfield.value=data.present;
     	totalfield.value=data.total;
     	progress.textContent=percentage.toFixed(0);
-    	if(percentage >= 75.0){
+    	if(percentage >= req_percentage){
     		progressbar.style.setProperty('--bgcolor','limegreen');
     	}
     	quote.textContent=getquote(data,percentage);
@@ -121,7 +133,7 @@ function addAbsentListener(item) {
     	percentage=data.present/data.total*100;
     	totalfield.value=data.total;
     	progress.textContent=percentage.toFixed(0);
-    	if(percentage < 75.0){
+    	if(percentage < req_percentage){
     		progressbar.style.setProperty('--bgcolor','red');
     	}
     	quote.textContent=getquote(data,percentage);
@@ -165,7 +177,7 @@ function addEditListener(item){
     		data.present=0;
     	}
     	progress.textContent=percentage.toFixed(0);
-    	if(percentage >= 75.0){
+    	if(percentage >= req_percentage){
     		progressbar.style.setProperty('--bgcolor','limegreen');
     	}
     	else{
@@ -177,17 +189,28 @@ function addEditListener(item){
 		}
 	})
 }
-const help=document.querySelector(".help");
-help.querySelector('button').addEventListener('click',()=>{
-	help.setAttribute('style','transform: scale(0.0);transition: 0.2s;')
-})
-const helpbtn=document.getElementById('help');
-helpbtn.addEventListener('click',()=>{
-	help.setAttribute('style','transform: scale(1.0) ;transition: 0.2s;');
-})
+function popup(element_query){
+	const element=document.querySelector(`.${element_query}`);
+	element.querySelector('button').addEventListener('click',()=>{
+	element.setAttribute('style','transform:translate(-50%,-50%) scale(0.0);transition: 0.2s;')
+	})
+	const btn=document.getElementById(element_query);
+	btn.addEventListener('click',()=>{
+		element.setAttribute('style','transform:translate(-50%,-50%) scale(1.0) ;transition: 0.2s;');
+	})
+}
+popup('help')
+popup('perslider')
+
+
 
 function getquote(data,datapercentage){
-	const percentage=75.0
+	const percentage=req_percentage
+	if(req_percentage== 100 ) {
+		if(datapercentage == percentage) return "You have to attend all class"
+		else
+			return "You never gonna get on track"
+	}
 	if(datapercentage >= percentage){
     		const noOfLeaves=Math.floor((100*data.present-percentage*data.total)/percentage);
     		if(noOfLeaves == 1){
@@ -209,4 +232,20 @@ function getquote(data,datapercentage){
     			return `You have to attend next ${noOfAttend} classes.`;
     		}
     	}
-}
+}
+
+
+
+slider.addEventListener('input',function(){
+	req_percentage=this.value
+	slider_text.innerHTML=req_percentage
+	for(let i=0;i<list.childElementCount;i++){
+		const card=list.children[i]
+		subinfo={
+			present:parseInt( card.querySelector('.present').value),
+			total:parseInt( card.querySelector('.total').value)
+		}
+		update_progress(list.children[i],subinfo)
+	}
+	localStorage.setItem("attendancecriteria", JSON.stringify(req_percentage));
+})
diff --git a/styles.css b/styles.css
@@ -61,7 +61,7 @@ h1 {
 .list {
     margin:auto;
     margin-top: 7%; /* Adjust as needed */
-    width:50%;
+    width:60%;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
@@ -171,6 +171,9 @@ h1 {
     .list{
         width: 90%;
     }
+    .help ,.perslider{
+        width: 90%;
+    }
 }
 
 #help{
@@ -184,23 +187,45 @@ h1 {
     border-radius: 20px;
     box-shadow: 1px 1px 10px red;
 }
+#perslider{
+    position: absolute;
+    color: green;
+    top: 2%;
+    left:5%;
+    height: 35px;
+    width:35px;
+    border: 3px solid green;
+    background: white;
+    border-radius: 20px;
+    font-size: 16px;
+    font-weight: bold;
+    box-shadow: 1px 1px 10px green;
+}
 
-.help{
+.popup{
+     z-index: 1;
     padding:15px;
-    position: absolute;
-    width: 80%;
-/*    border: 2px solid black;*/
-    top:  10%;
-    left: 10%;
-    z-index: 1;
+    top:  25%;
+    left: 50%;
+    transform: translate(-50%,-50%) scale(0.0);
+     position: absolute;
+     border-radius: 10px;
+    box-shadow: 0 0 20px black;
+}
+.help{
+    width: 40%;
     background: #222;
     color: black;
-/*    display: none;*/
-    border-radius: 10px;
-    box-shadow: 0 0 20px black;
-    transform: scale(0.0);
 }
-.help button{
+
+.perslider{
+    top:10%;
+    width:60%;
+    background: #222;
+    color: black;
+    text-align: center;
+}
+.help button,.perslider button{
     position: absolute;
     top:-8%;
     left:98%;
@@ -211,6 +236,24 @@ h1 {
     background: whitesmoke;
     font-size: 12px;
 }
+.perslider .slectedval{
+    color: white;
+    padding: 10px;
+    width: 40px;
+    height: 40px;
+    margin: 8px;
+    display: inline;
+    border: 2px solid red;
+    padding-left:2% ;
+    font-size: 14px;
+
+}
+.perslider input{
+    margin: auto;
+    margin-left: 20%;
+    width: 60%;
+    padding: 10px;
+}
 .help ul{
     color: white;
     display: flex;
@@ -232,13 +275,19 @@ h1 {
     border: none;
     border-radius:2em ;
     cursor: pointer;
-    color: #fff; /* Button color */
+    color: #fff; /* Button color
      /* Adjust as needed */
     height: 25px;
     width: 25px;
     font-size: 16px;
     margin-right: 10px;
 }
+@media(max-width: 600px){
+    .help ,.perslider{
+        width: 80%;
+    }
+
+}
 .quote{
     margin-top: 3%;
     height:10%;