# Need help integrating code wrote on Edittext to the Discourse

**URL:** <https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204>\
**Category:** Development\
**Created:** [November 11, 2023, 8:05pm UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204 "2023-11-11T20:05:13Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)\
**Post date:** [November 11, 2023, 8:05pm UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/1 "2023-11-11T20:05:13Z")

</div>

I created this timer using the following code, it’s working locally but I having trouble integrating it on my forum. Can someone please help?

```plaintext
<!-- HTML (Add this to the Header section) -->
<style>
  button {
    padding: 5px;
    margin: 2px;
    cursor: pointer;
    border: none;
    color: white;
    width: 100px; /* Set the desired width for all buttons */
    border-radius: 5px;
  }

  #readTaskButton {
    background: #008000; /* Darker green for better visibility on dark background */
  }

  #enterRoomButton {
    background: #DAA520; /* Darker yellow */
  }

  #pauseButton {
    background: #A0522D; /* Darker orange */
  }

  #stopButton {
    background: #FF0000; /* Darker red */
  }
</style>

<div style="display: flex; align-items: center; justify-content: center;">
  <div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
    <button id="readTaskButton" onclick="startTimer(90)">Read Task</button>
    <button id="enterRoomButton" onclick="startTimer(480)">Enter Room</button>
  </div>
  <div id="timer" style="font-size: 2em; text-align: center; margin: 0 20px;" onclick="togglePauseResume()">00:00</div>
  <div style="display: flex; flex-direction: column; align-items: center; margin-left: 20px;">
    <button id="pauseButton" onclick="togglePauseResume()">Pause</button>
    <button id="stopButton" onclick="stopTimer()">Stop</button>
  </div>
</div>

<!-- JavaScript (Add this to the Footer section) -->
<script>
  let timer;
  let totalSeconds;
  let isShortTimer = true;
  let isPaused = false;

  function startTimer(duration) {
    resetTimer();
    totalSeconds = duration;
    timer = setInterval(updateTimer, 1000);
  }

  function togglePauseResume() {
    if (isPaused) {
      resumeTimer();
    } else {
      pauseTimer();
    }
    updateButtonLabel();
  }

  function updateButtonLabel() {
    const button = document.getElementById('pauseButton');
    button.innerText = isPaused ? 'Resume' : 'Pause';
  }

  function pauseTimer() {
    clearInterval(timer);
    isPaused = true;
  }

  function resumeTimer() {
    isPaused = false;
    timer = setInterval(updateTimer, 1000);
  }

  function stopTimer() {
    resetTimer();
    updateButtonLabel();
  }

  function updateTimer() {
    if (totalSeconds <= 0) {
      if (isShortTimer) {
        isShortTimer = false;
        startTimer(480); // Start the longer timer automatically after the initial timer
      } else {
        isShortTimer = true;
        startTimer(90); // Start the initial timer automatically after the longer timer
      }
    }

    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    const formattedTime = `${formatTime(minutes)}:${formatTime(seconds)}`;
    document.getElementById('timer').innerText = formattedTime;

    totalSeconds--;
  }

  function formatTime(time) {
    return time < 10 ? '0' + time : time;
  }

  function resetTimer() {
    clearInterval(timer);
    document.getElementById('timer').innerText = '00:00';
  }
</script>

```

---

_[View the full topic](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204)._