Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

102
Views
Clicking Yes button will add 1 and No button will Reset it back to 0. Just Like Streaks

Help me writing the Javascript Please!!

I want to make a streak just like the snapchat streaks when you click yes button and the streaks will be broken when the cross/reset/no button is pressed!

But here comes the Main thing that i want every users streak to be stored in their account ,for which i'll add Authentication on the Project Later!

I'm using MongoDB for storing Users and Streaks

The Streaks will be Displayed here:

<p class="mt-2 text-gray-400">
        Praying without any Break since
        <span id="streaks">0</span> day(s)!
      </p>

These are the Buttons:

 <div class="group relative flex justify-between items-center mt-2">
      <h1 class="text-lg">Have you offered all Prayers Today?</h1>
      <div class="flex flex-row">
        <!-- YES Button -->

        <button
          id="answer_yes"
          onclick="updateScores"
          class="flex p-2 m-1 border-2 rounded hover:text-white text-green-400 border-green-400 hover:bg-green-400"
        >
          <span>&#10003;</span>
        </button>

        <!--NO BUtton-->

        <button
          id="answer_no"
          class="flex p-2 m-1 border-2 rounded hover:text-white text-red-400 border-red-400 hover:bg-red-400"
        >
          <span>&#10007;</span>
        </button>
      </div>
    </div>

THe Javascript i was trying was this:

const yes = {
    score: 0,
    button: document.querySelector("#answer_yes"),
    display: document.querySelector("#streaks"),
  };

  const resetButton = {
    score: 0,
    button: document.querySelector("#answer_no"),
    display: document.querySelector("#streaks"),
  };

  function updateScores(streaks) {
    streaks.score += 1;
    streaks.display.classList.add("has-text-success");
    streaks.button.disabled = true;
    streaks.display.textContent = streaks.score;
  }

  yes.button.addEventListener("click", function () {
    updateScores(streaks);
  });

  resetButton.addEventListener("click", reset);

  function reset() {
    for (let p of [yes, resetButton]) {
      p.score = 0;
      p.display.textContent = 0;
      p.button.disabled = false;
    }
  }

P.S: I'm a Beginner so bear with my useless and shitty Code! This my First Full-Stack Project and i can't even create the Javascript.

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

I saw that your current code is all basic HTML and JavaScript and it is not working. So I made it work.

After changing, this is your HTML code:

<p class="mt-2 text-gray-400">
      Praying without any Break since
      <input id="streaks" value=0 disabled/> day(s)!
    </p>
    <div class="group relative flex justify-between items-center mt-2">
      <h1 class="text-lg">Have you offered all Prayers Today?</h1>
      <div class="flex flex-row">
        <button
          id="answer_yes"
          onclick="onYesButton()"
          class="flex p-2 m-1 border-2 rounded hover:text-white text-green-400 border-green-400 hover:bg-green-400"
        >
          <span>&#10003;</span>
        </button>
        <button
          id="answer_no"
          onclick="onNoButton()"
          class="flex p-2 m-1 border-2 rounded hover:text-white text-red-400 border-red-400 hover:bg-red-400"
        >
          <span>&#10007;</span>
        </button>
      </div>
    </div>

And this is your JS code:

function onYesButton() {
  if (+document.getElementById('streaks').value >= 0) {
    document.getElementById('streaks').value =
      +document.getElementById('streaks').value + 1;
  }
}

function onNoButton() {
  if (+document.getElementById('streaks').value >= 1) {
    document.getElementById('streaks').value =
      +document.getElementById('streaks').value - 1;
  }
}

You can check it now, the functionality works as you wanted.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!