added user selected duration

index.html

@@ -51,7 +51,21 @@ <h1>Emotional Freedom Journey</h1>
           balance.
         </p>
         <hr />
-        <button id="start-button">Start App</button>
+        <div class="control-container">
+          <label for="duration" class="label"
+            >Choose affirmation duration: <br />
+            <span class="tip">(7 seconds works well!)</span></label
+          >
+          <select id="duration">
+            <option value="1">1 second</option>
+            <option value="5">5 seconds</option>
+            <option value="7">7 seconds</option>
+            <option value="10">10 seconds</option>
+            <option value="15">15 seconds</option>
+          </select>
+
+          <button id="start-button">Start App</button>
+        </div>
       </div>
     </div>
 

script.js

@@ -68,7 +68,7 @@ let currentSectionIndex = 0;
 let currentPhraseIndex = 0;
 let isPaused = false;
 let countdown;
-let countdownValue = 5;
+let defaultCountdownValue = 7;
 
 const displayElement = document.getElementById("affirmation-display");
 const sectionNameElement = document.getElementById("section-name");
@@ -80,26 +80,20 @@ const pauseButton = document.getElementById("pause-button");
 function updateDisplay() {
   const affirmationContainer = document.getElementById("affirmation-container");
   const currentSection = affirmationSections[currentSectionIndex];
-  const meridianElement = document.getElementById("meridian-point"); // New element for the meridian point
+  const meridianElement = document.getElementById("meridian-point");
 
   if (currentPhraseIndex < currentSection.phrases.length) {
     displayElement.textContent = currentSection.phrases[currentPhraseIndex];
     sectionNameElement.textContent = currentSection.section;
-
-    // Display the meridian point
     meridianElement.innerHTML = `Meridian Point: <span style="color: #c7522a;">${meridianPoints[currentPhraseIndex]}</span>`;
-
-    countdownValue = 7;
+    countdownValue = defaultCountdownValue; // Set to user-selected value
     affirmationContainer.classList.remove("breathe");
   } else {
     displayElement.textContent =
       "Place a hand on your heart and belly, and take three deep breaths.";
     sectionNameElement.textContent = "";
-
-    // Clear the meridian point when not applicable
     meridianElement.textContent = "";
-
-    countdownValue = 15;
+    countdownValue = 15; // Set to fixed value for breathing part
     affirmationContainer.classList.add("breathe");
   }
 
@@ -184,25 +178,15 @@ function showPage(pageId) {
   });
 }
 
-// Initial load shows landing page
 showPage("landing-page");
 
-// Start button event listener to switch to affirmation page
 document.getElementById("start-button").addEventListener("click", () => {
+  const selectedDuration = document.getElementById("duration").value;
+  defaultCountdownValue = parseInt(selectedDuration, 10);
   showPage("affirmation-page");
-});
-
-showPage("landing-page");
-
-document.getElementById("start-button").addEventListener("click", () => {
-  showPage("affirmation-page");
-  // Call updateDisplay when the Start App button is clicked
   updateDisplay();
 });
 
-// Update display initially
-// updateDisplay();
-
 // Add event listeners
 prevButton.addEventListener("click", moveToPrev);
 nextButton.addEventListener("click", moveToNext);

styles.css

@@ -47,6 +47,56 @@ hr {
   border-top: 3px solid var(--green);
   border-radius: 9px;
 }
+/* Container for dropdown and button */
+.control-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Style for button */
+#start-button {
+  margin-top: 30px; /* Add some margin for spacing */
+}
+.label {
+  font-size: 1.3rem;
+  margin-bottom: 10px;
+}
+
+.tip {
+  font-size: 0.7rem;
+}
+/* Style the dropdown */
+#duration {
+  width: 100%;
+  padding: 10px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  background-color: var(--light-blue);
+  color: var(--white);
+  border: none;
+  border-radius: 5px;
+  font-size: 1.2rem;
+  cursor: pointer;
+  margin: auto;
+}
+
+/* Style dropdown options */
+#duration option {
+  background-color: var(--dark-blue);
+  color: var(--white);
+}
+
+/* Add hover effect */
+#duration:hover {
+  background-color: var(--dark-blue);
+}
+
+/* Add focus effect */
+#duration:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
+}
 
 .affirmation-header {
   text-align: center;