Rewards Point System In Html Css & Javascript (Source Code)

Updated On Write a Comment on Rewards Point System In Html Css & Javascript (Source Code)

A rewards point system serves as an effective strategy for businesses aiming to incentivize customer loyalty and retention. With technological advancements, numerous companies are now integrating rewards point systems into their websites, significantly improving the user experience. This article will delve into the steps required to create a basic rewards point system utilizing HTML, CSS, and JavaScript.

				
					<style>
  /* Basic styles for rewards page */
  body {
      font-family: Arial, sans-serif;
      padding: 20px;
  }
  .task-list {
      list-style-type: none;
      padding: 0;
  }
  .task-item {
      background-color: #f4f4f4;
      margin: 10px 0;
      padding: 10px;
      border-radius: 5px;
  }
  .task-item.complete {
      background-color: #d3ffd3;
  }
  .rewards-section {
      margin-top: 20px;
  }
  .reward-option {
      margin: 10px 0;
      padding: 10px;
      background-color: #e0e0e0;
      border-radius: 5px;
      cursor: pointer;
  }
  .reward-option.disabled {
      background-color: #ccc;
      cursor: not-allowed;
  }
</style>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-c207f700-c058-4e66-bd27-657e91baf57f: url('https://notarena.com/wp-content/uploads/2024/10/BG.png');}.lazyloading{--wpr-bg-46bf736a-2192-4e5a-8bac-df549ca593b1: url('https://notarena.com/wp-content/plugins/wp-smushit/app/assets/images/smush-placeholder.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".elementor-1911 .elementor-element.elementor-element-2e43d051, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-c207f700-c058-4e66-bd27-657e91baf57f: url('https:\/\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png');}","hash":"c207f700-c058-4e66-bd27-657e91baf57f","url":"https:\/\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png"},{"selector":".lazyloading","style":".lazyloading{--wpr-bg-46bf736a-2192-4e5a-8bac-df549ca593b1: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-smushit\/app\/assets\/images\/smush-placeholder.png');}","hash":"46bf736a-2192-4e5a-8bac-df549ca593b1","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-smushit\/app\/assets\/images\/smush-placeholder.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>

<h1></h1>

<div>
  <h3>Your Points: <span id="points">0</span></h3>
  <ul class="task-list" id="task-list">
      <!-- Tasks will be dynamically loaded here -->
  </ul>
</div>

<div class="rewards-section" id="rewards-section">
  <h3>Redeem Rewards</h3>
  <div class="reward-option" id="flipkart-reward">Free Voucher (100 points)</div>
  <div class="reward-option" id="amazon-reward">Free Voucher (150 points)</div>
</div>

<script>
  // Dummy data for tasks and rewards
  const tasks = [
      { id: 1, name: 'Complete Steps (6000 steps)', points: 50 },
      { id: 2, name: 'Complete Meditation (20 mins)', points: 30 },
      { id: 3, name: 'Log Screen time (60 mins)', points: 20 },
      { id: 4, name: 'Workout & Yoga', points: 40 }
  ];
  
  const rewards = [
      { id: 1, name: 'Example1 Voucher', pointsRequired: 100, elementId: 'flipkart-reward' },
      { id: 2, name: 'Example2 Voucher', pointsRequired: 150, elementId: 'amazon-reward' }
  ];

  let userPoints = 0;

  // Display tasks
  const taskList = document.getElementById('task-list');
  tasks.forEach(task => {
      const taskItem = document.createElement('li');
      taskItem.classList.add('task-item');
      taskItem.textContent = `${task.name} - ${task.points} points`;
      taskItem.addEventListener('click', () => completeTask(task));
      taskList.appendChild(taskItem);
  });

  // Function to complete task
  function completeTask(task) {
      userPoints += task.points;
      document.getElementById('points').textContent = userPoints;

      // Mark task as complete
      const taskItem = Array.from(taskList.children).find(item => item.textContent.includes(task.name));
      taskItem.classList.add('complete');

      // Check if rewards can be redeemed
      checkRewards();
  }

  // Function to check and update rewards
  function checkRewards() {
      rewards.forEach(reward => {
          const rewardElement = document.getElementById(reward.elementId);
          if (userPoints >= reward.pointsRequired) {
              rewardElement.classList.remove('disabled');
              rewardElement.addEventListener('click', () => redeemReward(reward));
          } else {
              rewardElement.classList.add('disabled');
          }
      });
  }

  // Function to redeem reward
  function redeemReward(reward) {
      if (userPoints >= reward.pointsRequired) {
          userPoints -= reward.pointsRequired;
          document.getElementById('points').textContent = userPoints;
          alert(`You have redeemed a ${reward.name}!`);
          checkRewards();
      }
  }
</script>

</body>
Share via

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

The Plugins

Send this to a friend