From 6726d470dfde6229d72c249aaeaab3600cc3f9b1 Mon Sep 17 00:00:00 2001 From: abutler911 <abutler911@gmail.com> Date: Tue, 10 Oct 2023 12:42:38 -0600 Subject: [PATCH] added user selected duration --- index.html | 16 +++++++++++++++- script.js | 28 ++++++---------------------- styles.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 2cdeb8e..00fecb2 100644 --- a/index.html +++ b/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> diff --git a/script.js b/script.js index afd5a38..0923253 100644 --- a/script.js +++ b/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); diff --git a/styles.css b/styles.css index 7f21365..af49181 100644 --- a/styles.css +++ b/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;