Merge branch 'master' of https://github.com/almostworked/shehacks

home.html

@@ -43,7 +43,7 @@ <h3 id="month"></h3>
     <div id="habitBox">
       <h4>add habit</h4>
       <div id="habitList">
-        <input type="text" id="input" placeholder="put on spaceboots..." autocomplete="off" maxlength="30">
+        <input type="text" id="input" placeholder="prepare for lift off..." autocomplete="off" maxlength="30">
         <ol id="habits"></ol> 
       </div>
     </div>
@@ -78,7 +78,8 @@ <h5>⋆.˚⟡ ࣪ ˖ you have spent 8 days on the moon ✩₊˚.⋆☾⋆⁺₊
   </div>
   <audio id="strikeSound" src="sounds/paper1sec.mp3" preload="auto"></audio>
   <div id="progressBar">
-    <div id="progress" style="height: 10px; background-color: grey; border-radius: 5px;"></div>
+    <div id="progressBase"></div>
+    <div id="progressFill"></div>
   </div>
 
   <script src="script.js"></script>

script.js

@@ -13,11 +13,15 @@ function toggleSelectionMode() {
   const button = document.getElementById('toggleSelectionMode');
   button.textContent = selectionMode ? 'finish striking' : 'strike a mission';
 }
-
+let habits = [];
+let completedHabits = 0;
+let totalDaysInMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
 /* Load calendar */
 document.addEventListener('DOMContentLoaded', function() {
   // Set the month header
   const header = document.getElementById('month');
+  const progress = document.getElementById('progressBase');
+  progress.style.width = '0%';
   header.textContent = getUserMonth();
 
   // Initialize the calendar
@@ -48,17 +52,29 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     calendar.appendChild(square);
   }
+  function updateProgressBar() {
+    const progressFill = document.getElementById('progressFill');
+
+  // Calculate the percentage of completed habits
+    const progressPercentage = (completedHabits / totalDaysInMonth) * 100;
+
+  // Ensure the progress percentage is clamped between 0% and 100%
+    const clampedPercentage = Math.min(100, Math.max(0, progressPercentage));
+
+  // Update the width of the progress bar's fill
+    progressFill.style.width = `${clampedPercentage}%`; // Update fill width based on progress
+  }
 
   // Initialize habit list
-  let habits = [];
-  let completedHabits = 0;
+
 
   // Function to add habits
   document.getElementById("input").addEventListener("keydown", function(event) {
     if (event.key == "Enter") {
       var input = document.getElementById("input").value;
       if (input.trim() !== "") {
         const item = document.createElement("li");
+
         const text = document.createElement("span");
         text.textContent = input;
 
@@ -133,10 +149,11 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // Function to select a habit for a day and change the background color
   function selectHabit(day, color) {
-    console.log('selected colour:', color);
     const daySquare = document.querySelector(`[day="${day}"]`);
     if (daySquare) {
       daySquare.style.backgroundColor = color;
+      completedHabits++;
+      updateProgressBar();
     }
   }
 
@@ -161,7 +178,7 @@ function addBlankTask() {
   const taskItem = document.createElement('li');
   const inputSpan = document.createElement('span');
   inputSpan.className = 'task-text';
-  inputSpan.textContent = 'New task...'; // Default placeholder text
+  inputSpan.textContent = 'new task...'; // Default placeholder text
   taskItem.appendChild(inputSpan);
 
   const deleteButton = document.createElement('button');

style.css

@@ -6,6 +6,10 @@
   font-family: 'Inter';
   src: url('./fonts/Inter_18pt-Medium.ttf');
 }
+@font-face {
+  font-family: 'AppleGaramond';
+  src: url('./fonts/AppleGaramond.ttf');
+}
 body {
     font-family: 'Inter';
     text-align: center;
@@ -26,18 +30,19 @@ html {
   top: 0;
   left: 0;
   width: 100%;
-  height: 15%;
+  height: 10%;
   padding: none;
   border: none;
   background-color: #4C545E;
 }
 /* Welcome back astronaut*/
 h1, h2 {
-    font-size: 42px;
+    font-size: 40px;
     font-weight: lighter;
     margin: 0;
     padding-left: 25px;
     padding-top: 25px;
+    padding-bottom: 25px;
 }
 /*What will you do today?*/
 h1 {
@@ -238,7 +243,7 @@ input[type="color"] {
   width: 25%; 
   padding: 10px;
   margin: 0;
-  margin-top: -150px;
+  margin-top: -50px;
   right: 100px; 
   top: 130px;
 }
@@ -281,18 +286,19 @@ input[type="color"] {
     display: flex;
   }
   #daysonMoon {
-    font-family: 'AppleGaramond-Light';
-  font-size: 25px;
-  position: relative;
-  top: 10px; /* Moves the image down by 500px */
-  left: 200px;
-  display: flex;
-  color: #C9AEE6;
+    font-family: 'AppleGaramond';
+    font-size: 25px;
+    position: relative;
+    top: 10px; /* Moves the image down by 500px */
+    left: 200px;
+    display: flex;
+    color: #C9AEE6;
   }
   #image-container img {
     width: 100px;
     height: 100px;
     display: block; /* Prevents extra space below the image */
+
   }
   .add-task:focus {
     color: white;
@@ -325,7 +331,6 @@ input[type="color"] {
   transition: color 0.3s;
 }
 
-<<<<<<< HEAD
 .delete-task:hover {
   color: red;
 }
@@ -349,9 +354,7 @@ input[type="color"] {
   outline: none;
   box-shadow: none;
 }
-=======
 
->>>>>>> ba34991f589cdf2f8cfa4933589c00503aefc4ee
 .completed .task-text {
   text-decoration: line-through;
   color: gray;
@@ -384,19 +387,33 @@ input[type="color"] {
   cursor: pointer;
 }
 #progressBar {
+  position: relative;
   width: 60%;
-  height: 50px;
-  border-radius: 15px;
-  background-color: #909090;
-  margin-left: 90px;
+  margin-left: 80px;
+  height: 40px;
+  background-color: #ddd;  /* The grey base */
+  border-radius: 10px;
+  overflow: hidden;
+  border-radius: 30px;
+}
 
+#progressBase {
+  position: absolute;
+
+  width: 60;
+  height: 100%;
+  background-color: #ddd;  /* The base (static) */
 }
-#progress {
-  width: 0;
-  height: 10px;
-  background-color: #cd3ae3;
-  border-radius: 5px;
+
+#progressFill {
+  position: absolute;
+  width: 0%;  /* Initially, no progress */
+  height: 100%;
+  background-color: #478449;  /* Green for progress */
+  border-radius: 10px;
+  transition: width 0.5s ease;  /* Smooth transition */
 }
+
 ::-webkit-scrollbar{
   width: 15px;
 }