What is the method for resetting the counter back to 1 whenever the labels are updated?

Question

What is the method for resetting the counter back to 1 whenever the labels are updated?

I am currently working on a breathing exercise code that involves counting in the following manner:

8-second inhale 
8 second "hold inhale"
12-second "exhale"
8-second "hold exhale"

Everything is functioning correctly except for the counter, which continues to increment without resetting back to 1. Ideally, it should count from 1 to 8, then reset to 1 and count to 8 again, followed by 1 to 12, and so forth.

// Function to initiate the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 1;

  // Timer interval function
  var interval = setInterval(function() {
    // Updating the timer display and label
    timer.textContent = count;
    
    if (count <= 8) {
      label.textContent = 'Inhale';
    } else if (count <= 16) {
      label.textContent = 'Pause Inhale';
    } else if (count <= 28) {
      label.textContent = 'Exhale';
    } else if (count <= 36) {
      label.textContent = 'Pause Exhale';
    }

    // Increase the count
    count++;
    
    // Stopping the timer after reaching the pattern of 8, 8, 12, 8
    if (count === 45) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Initializing the timer
startTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

javascript html css

Answer 1

Answer №1

It is important to utilize distinct variables for tracking the count of the current action and the length of the entire cycle.

// Function to initiate the timer
function beginTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  label.textContent = 'Inhale';
  var actionCount = 1;
  var cycleLength = segcount;

  // Set interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label
    timer.textContent = cycleLength;

    if (actionCount == 8) {
      label.textContent = 'Pause Inhale';
      cycleLength = 0;
    } else if (actionCount == 16) {
      label.textContent = 'Exhale';
      cycleLength = 0;
    } else if (actionCount == 28) {
      label.textContent = 'Pause Exhale';
      cycleLength = 0;
    }

    // Increment both counts
    actionCount++;
    cycleLength++;

    // Stop the timer after following the 8, 8, 12, 8 pattern
    if (actionCount === 45) {
      clearInterval(interval);
      beginTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Initially start the timer
beginTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

Answer 2

It is important to utilize distinct variables for tracking the count of the current action and the length of the entire cycle.

// Function to initiate the timer
function beginTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  label.textContent = 'Inhale';
  var actionCount = 1;
  var cycleLength = segcount;

  // Set interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label
    timer.textContent = cycleLength;

    if (actionCount == 8) {
      label.textContent = 'Pause Inhale';
      cycleLength = 0;
    } else if (actionCount == 16) {
      label.textContent = 'Exhale';
      cycleLength = 0;
    } else if (actionCount == 28) {
      label.textContent = 'Pause Exhale';
      cycleLength = 0;
    }

    // Increment both counts
    actionCount++;
    cycleLength++;

    // Stop the timer after following the 8, 8, 12, 8 pattern
    if (actionCount === 45) {
      clearInterval(interval);
      beginTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Initially start the timer
beginTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

Answer 3

Answer №2

You may want to consider including an additional variable to keep track of each step, as demonstrated below.

// Implementing the timer function
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 0;
  // Introducing 'stepCount' variable to monitor each step counter
  var stepCount = 0;

  // Setting up the interval for the timer
  var interval = setInterval(function() {
    // Updating the timer display and label


    if (count === 0) {
      label.textContent = 'Inhale';
    } else if (count === 8) {
      // resetting stepCount to 0
      stepCount = 0;
      label.textContent = 'Pause Inhale';
    } else if (count === 16) {
      // resetting stepCount to 0
      stepCount = 0;
      label.textContent = 'Exhale';
    } else if (count === 28) {
      // resetting stepCount to 0
      stepCount = 0;
      label.textContent = 'Pause Exhale';
    }
    
    // Increasing count by 1
    count++;
    // Incrementing stepCount
    stepCount++;
    // Displaying the step counter
    timer.textContent = stepCount;

    // Stopping the timer when reaching the 8, 8, 12, 8 pattern
    if (count === 36) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Launching the timer initially
startTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

Answer 4

You may want to consider including an additional variable to keep track of each step, as demonstrated below.

// Implementing the timer function
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 0;
  // Introducing 'stepCount' variable to monitor each step counter
  var stepCount = 0;

  // Setting up the interval for the timer
  var interval = setInterval(function() {
    // Updating the timer display and label


    if (count === 0) {
      label.textContent = 'Inhale';
    } else if (count === 8) {
      // resetting stepCount to 0
      stepCount = 0;
      label.textContent = 'Pause Inhale';
    } else if (count === 16) {
      // resetting stepCount to 0
      stepCount = 0;
      label.textContent = 'Exhale';
    } else if (count === 28) {
      // resetting stepCount to 0
      stepCount = 0;
      label.textContent = 'Pause Exhale';
    }
    
    // Increasing count by 1
    count++;
    // Incrementing stepCount
    stepCount++;
    // Displaying the step counter
    timer.textContent = stepCount;

    // Stopping the timer when reaching the 8, 8, 12, 8 pattern
    if (count === 36) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Launching the timer initially
startTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

Answer 5

Answer №3

If you're looking for a solution, consider implementing a finite-state machine concept to manage the timer functionality:

// Function for initializing and controlling the timer
function controlTimer() {

  const timerElement = document.getElementById('timer');
  const labelElement = document.getElementById('label');
  let count = 1;
  
  const states = Object.entries({
    'Inhale': 8, 
    'Pause Inhale': 8, 
    'Exhale': 12, 
    'Pause Exhale': 8
  }).map(([label, duration]) => ({label, duration}));
  let state = 0;
 
  const syncUI = () => {
    labelElement.textContent = states[state].label;
    timerElement.textContent = count;
  };
  
  syncUI();
  
   // Set interval for updating the timer display
  return interval = setInterval(function() {

    // Increment count
    count++;

    // Update the timer display and label
    timerElement.textContent = count;

    if (count > states[state].duration) {
      state++;
      if(state === states.length){
        state = 0;
      }
      count = 1;
      syncUI();
    }

  }, 1000); // 1000 milliseconds = 1 second
}

// Initialize and start the timer mechanism
controlTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

Answer 6

If you're looking for a solution, consider implementing a finite-state machine concept to manage the timer functionality:

// Function for initializing and controlling the timer
function controlTimer() {

  const timerElement = document.getElementById('timer');
  const labelElement = document.getElementById('label');
  let count = 1;
  
  const states = Object.entries({
    'Inhale': 8, 
    'Pause Inhale': 8, 
    'Exhale': 12, 
    'Pause Exhale': 8
  }).map(([label, duration]) => ({label, duration}));
  let state = 0;
 
  const syncUI = () => {
    labelElement.textContent = states[state].label;
    timerElement.textContent = count;
  };
  
  syncUI();
  
   // Set interval for updating the timer display
  return interval = setInterval(function() {

    // Increment count
    count++;

    // Update the timer display and label
    timerElement.textContent = count;

    if (count > states[state].duration) {
      state++;
      if(state === states.length){
        state = 0;
      }
      count = 1;
      syncUI();
    }

  }, 1000); // 1000 milliseconds = 1 second
}

// Initialize and start the timer mechanism
controlTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

Answer 7

Answer №4

Your code is currently executing exactly as you have instructed it to do, without any instruction to reset the displayed count. One suggestion for achieving this functionality is by introducing a separate variable called "displayedCount" that resets once the hidden count reaches specific values. Here's an example implementation:

// Initialize timer function
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 1;
  var displayedCount = 1;

  // Timer interval setting
  var interval = setInterval(function() {
    // Update timer display and label
    timer.textContent = displayedCount;

    if (count <= 8) {
      label.textContent = 'Inhale';
    } else if (count <= 16) {
      label.textContent = 'Pause Inhale';
    } else if (count <= 28) {
      label.textContent = 'Exhale';
    } else if (count <= 36) {
      label.textContent = 'Pause Exhale';
    }

    // Increment count
    count++;
    if (count === 9 || count === 17 || count === 29 || count === 37) {
      displayedCount = 1;
    } else {
      displayedCount++;
    }

    // Stop timer at specific count
    if (count === 45) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // Interval of 1 second
}

// Start the timer initially
startTimer();

Answer 8

Your code is currently executing exactly as you have instructed it to do, without any instruction to reset the displayed count. One suggestion for achieving this functionality is by introducing a separate variable called "displayedCount" that resets once the hidden count reaches specific values. Here's an example implementation:

// Initialize timer function
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 1;
  var displayedCount = 1;

  // Timer interval setting
  var interval = setInterval(function() {
    // Update timer display and label
    timer.textContent = displayedCount;

    if (count <= 8) {
      label.textContent = 'Inhale';
    } else if (count <= 16) {
      label.textContent = 'Pause Inhale';
    } else if (count <= 28) {
      label.textContent = 'Exhale';
    } else if (count <= 36) {
      label.textContent = 'Pause Exhale';
    }

    // Increment count
    count++;
    if (count === 9 || count === 17 || count === 29 || count === 37) {
      displayedCount = 1;
    } else {
      displayedCount++;
    }

    // Stop timer at specific count
    if (count === 45) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // Interval of 1 second
}

// Start the timer initially
startTimer();

What is the method for resetting the counter back to 1 whenever the labels are updated?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The request to upload an image to Cloudinary using AngularJS is being blocked due to the origin http://localhost.com:8000 not being allowed by Access-Control-Allow-Origin

I need to implement a div-based dropdown with a scrollbar in JavaScript and CSS to prevent it from extending beyond the screen. Additionally, the use of struts is essential in this implementation

Rearrange two HTML tags that are separated by certain fixed tags

Unable to navigate to a page following selection of a radio button

Use the no-repeat feature to set the background image in an Asp:Chart

Stop the div from expanding because of oversize text in Bootstrap

How to showcase content on bootstrap across varying screen dimensions

Error alert: Unable to find the specified word

Stable Banner with Automatic Scroll to Sections

Properly maintaining child processes created with child_process.spawn() in node.js

Customizing translations for various domains in Vue-i18n

Examining the false positive detection of an apparent visibility issue with

Monitoring a specific property within an array of objects with AngularJS

What could be causing my Vuex store state to consistently come up empty in middleware when accessing it through SSR (Server-Side Rendering) with NuxtJS?

What is the optimal order for executing JavaScript, jQuery, CSS, and other controls to render an HTML page efficiently?

Importing pixi-sound in the right way for PIXI JS

How to extract value from the URL in NextJS

Navigating through IE z-index complications to position a modal above a YUI Panel

Why won't my Chrome content script load even though I have the correct syntax and have tried troubleshooting?

The touch events are not detected on Pixi.js when buttons are placed on a stage that has been both scaled and

What is the method for resetting the counter back to 1 whenever the labels are updated?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The request to upload an image to Cloudinary using AngularJS is being blocked due to the origin http://localhost.com:8000 not being allowed by Access-Control-Allow-Origin

I need to implement a div-based dropdown with a scrollbar in JavaScript and CSS to prevent it from extending beyond the screen. Additionally, the use of struts is essential in this implementation

Rearrange two HTML tags that are separated by certain fixed tags

Unable to navigate to a page following selection of a radio button

Use the no-repeat feature to set the background image in an Asp:Chart

Stop the div from expanding because of oversize text in Bootstrap

How to showcase content on bootstrap across varying screen dimensions

Error alert: Unable to find the specified word

Stable Banner with Automatic Scroll to Sections

Properly maintaining child processes created with child_process.spawn() in node.js

Customizing translations for various domains in Vue-i18n

Examining the false positive detection of an apparent visibility issue with

Monitoring a specific property within an array of objects with AngularJS

What could be causing my Vuex store state to consistently come up empty in middleware when accessing it through SSR (Server-Side Rendering) with NuxtJS?

What is the optimal order for executing JavaScript, jQuery, CSS, and other controls to render an HTML page efficiently?

Importing pixi-sound in the right way for PIXI JS

How to extract value from the URL in NextJS

Navigating through IE z-index complications to position a modal *above* a YUI Panel

Why won't my Chrome content script load even though I have the correct syntax and have tried troubleshooting?

The touch events are not detected on Pixi.js when buttons are placed on a stage that has been both scaled and

Navigating through IE z-index complications to position a modal above a YUI Panel