JSFiddle - React, Tailwind, and code Playground

by Arif Hasan

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rate Limited Calculator</title>
  </head>

  <body>
    <h1>Rate Limited Calculator</h1>
    <input type="number" id="num1" placeholder="Number 1">
    <input type="number" id="num2" placeholder="Number 2">
    <button id="calculate">Calculate</button>
    <p id="result"></p>

    <script src="script.js"></script>
  </body>

</html>

JavaScript

class RateLimitedCalculator {
  constructor(limit) {
    this.limit = limit;
    this.lastCallTime = 0;
    this.callCount = 0;
  }

  getSum(a, b) {
    const now = Date.now();
    if (now - this.lastCallTime >= 60000) {
      this.callCount = 0;
    }
    if (this.callCount >= this.limit) {
      throw new Error("Rate limit exceeded. Please try again later.");
    }

    this.callCount++;
    this.lastCallTime = now;
    return a + b;
  }
}

const limit = 5;
const calculator = new RateLimitedCalculator(limit);

const calculateButton = document.getElementById('calculate');
const resultElement = document.getElementById('result');

calculateButton.addEventListener('click', () => {
  try {
    const num1 = parseInt(document.getElementById('num1').value);
    const num2 = parseInt(document.getElementById('num2').value);

    if (isNaN(num1) || isNaN(num2)) {
      resultElement.textContent = "Please enter valid numbers.";
      return;
    }

    const sum = calculator.getSum(num1, num2);
    resultElement.textContent = `Sum: ${sum}`;
  } catch (error) {
    console.error(error.message);
    resultElement.textContent = error.message;
  }
});