Added Help Button

Soumikcoder · May 13, 2024 · cd9aca1 · cd9aca1
1 parent 79ccf10
commit cd9aca1
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -25,6 +25,26 @@ <h1>Attendance Manager</h1>
             </li> -->
 </ul>
 </div>
+<button id="help">&#10067;</button>
+<div class="help">
+    <button>&#10005;</button>
+<ul>
+    <li>
+    <span style="background: green">&#x2713;</span>
+        Mark Present
+    </li>
+    <li>
+    <span style="background: red">&#x2717;</span> Mark Absent</li>
+    <li>
+    <span style="background: yellow">&#9998;</span>
+     Modify Attendance
+</li>
+<li>
+    <span style="background:#0064ff">-</span>
+    Delete Subject
+</li>
+</ul>
+</div>
 <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -32,10 +32,10 @@ function createHtml(present,total,subject){
 		const progressbar = item.querySelector('.progress-bar');
 		percentage=item.querySelector('.progress').textContent;
 		if(percentage >= 75.0){
-    		progressbar.style.background = 'limegreen';
+    		progressbar.style.setProperty('--bgcolor','limegreen');
     	}
     	else{
-    		progressbar.style.background = 'red';
+    		progressbar.style.setProperty('--bgcolor','red');
     	}
 		addDeleteListener(item);
 		addPresentListener(item);
@@ -46,15 +46,16 @@ function createHtml(present,total,subject){
 })();
 function additem(){
 	if(textbox.value==="") {
-		textbox.style.background = '#8b0000';
+		textbox.setAttribute('style', 'box-shadow: 0 0 4px red;') ;
 		return;
 	}
 	const item = document.createElement('li');
 	item.className='card';
     item.innerHTML =createHtml(0,0,textbox.value) ;
 	item.id=btoa(textbox.value);
 	if(localStorage.getItem(item.id)!=null){
-		textbox.style.background = '#8b0000';
+		textbox.setAttribute('style', 'box-shadow: 0 0 4px red;') ;
+			textbox.value="";
 		return;
 	}
 	let progressbar=item.querySelector('progress-bar');
@@ -70,6 +71,7 @@ function additem(){
 	}
 	textbox.value="";
 	textbox.style.background = '#444';
+	textbox.setAttribute('style', 'box-shadow: 0 0 4px limegreen;') ;
     localStorage.setItem(item.id,JSON.stringify(data));
 }
 textbox.addEventListener("keypress",(e)=>{
@@ -95,7 +97,7 @@ function addPresentListener(item) {
     	totalfield.value=data.total;
     	progress.textContent=percentage.toFixed(0);
     	if(percentage >= 75.0){
-    		progressbar.style.background = 'limegreen';
+    		progressbar.style.setProperty('--bgcolor','limegreen');
     	}
     	localStorage.setItem(item.id, JSON.stringify(data));
     });
@@ -113,7 +115,7 @@ function addAbsentListener(item) {
     	totalfield.value=data.total;
     	progress.textContent=percentage.toFixed(0);
     	if(percentage < 75.0){
-    		progressbar.style.background = 'red';
+    		progressbar.style.setProperty('--bgcolor','red');
     	}
     	localStorage.setItem(item.id, JSON.stringify(data));
     });
@@ -166,4 +168,12 @@ function addEditListener(item){
     	localStorage.setItem(item.id, JSON.stringify(data));
 		}
 	})
-}
+}
+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;');
+})
diff --git a/styles.css b/styles.css
@@ -35,11 +35,12 @@ h1 {
     color: #fff; /* Text color */
     border: none;
     border-radius: 5px;
+    box-shadow: 0 0 4px aqua;
 }
 
 /* Style the add button */
 #btn {
-    margin-left:10px;
+    margin-left: 2%;
     font-size: 20px;
     padding: 8px 14px;
     background-color: #007bff; /* Adjust color as needed */
@@ -48,6 +49,7 @@ h1 {
     cursor: pointer;
     border-radius: 8px;
     transition: background-color 0.3s;
+
 }
 
 /* Change button color on hover */
@@ -58,7 +60,7 @@ h1 {
 /* Style the list */
 .list {
     margin:auto;
-    margin-top: 20px; /* Adjust as needed */
+    margin-top: 7%; /* Adjust as needed */
     width:50%;
     display: flex;
     flex-direction: column;
@@ -80,6 +82,7 @@ h1 {
     align-items: center; /* Align items vertically */
     justify-content: space-around;
     align-items: space-between;
+    box-shadow: 5px 5px 5px black;
 }
 
 /* Style subject name */
@@ -115,12 +118,14 @@ h1 {
 }
 /* Progress bar */
 .progress-bar {
-    background-color: limegreen;
+    --bgcolor:limegreen;
+    background-color: var(--bgcolor);
     border-radius: 50%;
     height: 40px;
     width: 40px;
     margin-right: 10px; /* Adjust spacing */
     position: relative;
+    box-shadow: 0 0 10px var(--bgcolor);
 }
 
 /* Progress */
@@ -166,4 +171,71 @@ h1 {
     .list{
         width: 90%;
     }
+}
+
+#help{
+    position: absolute;
+    top: 2%;
+    left:85%;
+    height: 35px;
+    width:35px;
+    border: 3px solid red;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 1px 1px 10px red;
+}
+
+.help{
+    padding:15px;
+    position: absolute;
+    width: 80%;
+/*    border: 2px solid black;*/
+    top:  10%;
+    left: 10%;
+    z-index: 1;
+    background: #222;
+    color: black;
+/*    display: none;*/
+    border-radius: 10px;
+    box-shadow: 0 0 20px black;
+    transform: scale(0.0);
+}
+.help button{
+    position: absolute;
+    top:-8%;
+    left:98%;
+    width: 25px;
+    height: 25px;
+    border: 1px solid black;
+    border-radius: 15px;
+    background: whitesmoke;
+    font-size: 12px;
+}
+.help ul{
+    color: white;
+    display: flex;
+    list-style:none;
+    flex-direction: column;
+    justify-content: space-around;
+}
+.help ul li{
+    margin: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content:center;
+}
+.help span{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    border-radius:2em ;
+    cursor: pointer;
+    color: #fff; /* Button color */
+     /* Adjust as needed */
+    height: 25px;
+    width: 25px;
+    font-size: 16px;
+    margin-right: 10px;
 }