پروژه پنجم - سطح مقدماتی

1402/12/01
پروژه پنجم - سطح مقدماتی - شمارنده :

<html lang="fa">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Counter!</title>
    <style>
      body {
        height: 100vh;
        font-family: Vazirmatn, sans-serif !important;
      }
    </style>
    <link
      href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css"
      rel="stylesheet"
      type="text/css"
    />

    <link rel="stylesheet" href="bootstrap-5.3.2-dist/css/bootstrap.rtl.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body
    dir="rtl"
    class="d-flex align-items-center justify-content-center flex-column"
  >
    <section
      class="d-flex align-items-center justify-content-center flex-column"
    >
      <h1>شمارنده</h1>
      <h1 id="counter">0</h1>
    </section>

    <section class="d-flex align-items-center justify-content-center">
      <button id="addBtn" class="btn btn-success">+</button>
      <button id="resetBtn" class="btn btn-primary">ریست</button>
      <button id="minusBtn" class="btn btn-danger">-</button>
    </section>

    <script>
      addBtn = document.getElementById("addBtn");
      minusBtn = document.getElementById("minusBtn");
      resetBtn = document.getElementById("resetBtn");
      counter = document.getElementById("counter");

      addBtn.addEventListener("click", function () {
        if (counter.innerHTML >= 0) counter.style.color = "green";
        if (counter.innerHTML < 10)
          counter.innerHTML = Number(counter.innerHTML) + 1;
      });
      minusBtn.addEventListener("click", function () {
        if (counter.innerHTML <= 0) counter.style.color = "red";
        if (counter.innerHTML > -10) counter.innerHTML -= 1;
      });

      resetBtn.addEventListener("click", function () {
        counter.innerHTML = 0;
        counter.style.color = "black";
      });
    </script>
  </body>
</html>