diff --git a/script.js b/script.js index 0a85ed1..e111376 100644 --- a/script.js +++ b/script.js @@ -67,18 +67,20 @@ const nextButton = document.getElementById("next-button"); const pauseButton = document.getElementById("pause-button"); function updateDisplay() { + const affirmationContainer = document.getElementById("affirmation-container"); const currentSection = affirmationSections[currentSectionIndex]; + if (currentPhraseIndex < currentSection.phrases.length) { displayElement.textContent = currentSection.phrases[currentPhraseIndex]; - sectionNameElement.textContent = currentSection.section; // Set the section name + sectionNameElement.textContent = currentSection.section; countdownValue = 7; - displayElement.classList.remove("breathe"); + affirmationContainer.classList.remove("breathe"); } else { displayElement.textContent = "Place a hand on your heart and belly, and take three deep breaths."; - sectionNameElement.textContent = ""; // Clear the section name during the breathing part + sectionNameElement.textContent = ""; countdownValue = 15; - displayElement.classList.add("breathe"); + affirmationContainer.classList.add("breathe"); } if (!isPaused) { diff --git a/styles.css b/styles.css index 760fc62..41ce6d6 100644 --- a/styles.css +++ b/styles.css @@ -53,9 +53,6 @@ h3 { #timer { font-size: 2rem; color: #e44d26; - border: 2px solid gray; - padding: 0px 20px; - border-radius: 10px; } #affirmation-container { display: flex; @@ -81,10 +78,11 @@ h3 { } #section-name { font-size: 0.8rem; - align-self: flex-start; - /* margin-bottom: 10px; */ + /* align-self: flex-start; */ + text-align: center; color: #555; } + /* Button container */ .button-container { display: flex; @@ -119,6 +117,10 @@ button:hover { text-decoration: none; font-size: 1.2rem; } +#affirmation-container.breathe { + animation: breathe 15s ease-in-out 1; +} + @keyframes breathe { 0%, 100% { @@ -128,7 +130,3 @@ button:hover { background-color: #00ff00; } } - -#affirmation-display.breathe { - animation: breathe 15s ease-in-out 1; -}