From 6e1680bf4da1be012ae0f32116dd23251e5b7d63 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissahuysentruyt@gmail.com>
Date: Wed, 1 Mar 2023 13:22:28 -0500
Subject: [PATCH] :fire: refactor: OOP pricing to follow FEM prompt

By creating a pagesAndPrices object, the range input now displays the
price and corresponding pageviewCount. This is instead of a previous
function that determined the number of pages per dollar.
---
 index.html |  2 +-
 src/app.js | 32 +++++++++++++-------------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 4b74c39..f535a89 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@ <h3 class="info-card__pageviews">
             <span class="js-pageviews"></span>Pageviews
           </h3>
           <label class="info-card__slider" for="slider-input"></label>
-          <input type="range" step="4" min="8" max="36" id="slider-input">
+          <input type="range" step="1" min="0" max="4" id="slider-input">
           <h3 class="info-card__price">
             <span class="change-color">$</span><span class="js-input-value"></span><span class="js-discount-value"></span>/month
           </h3>
diff --git a/src/app.js b/src/app.js
index 6e04b49..8cc3678 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,24 +1,27 @@
 import "./scss/global.scss";
 
-const pageviewCount = document.querySelector(".js-pageviews");
-const pagesPerDollar = 6250;
-
-const calculatePageviews = (dollars) => {
-  return dollars * pagesPerDollar;
+const pagesAndPrices = {
+  views: ["10K", "50K", "100K", "500K", "1M"],
+  prices: [8, 12, 16, 24, 36]
 };
 
 const inputSlider = document.querySelector("input[type='range']");
-let price = inputSlider.value;
-pageviewCount.innerHTML = calculatePageviews(price);
+// line 10 will set the max attr for the range input, that way if the pagesAndPrices object gets updated, the max gets updated automatically
+inputSlider.setAttribute("max", ((pagesAndPrices).views).length - 1);
+const pageviewCount = document.querySelector(".js-pageviews");
+let price = pagesAndPrices.prices[inputSlider.value];
+pageviewCount.innerHTML = pagesAndPrices.views[inputSlider.value];
 const spanPriceDisplay = document.querySelector(".js-input-value");
 spanPriceDisplay.innerHTML = price;
+
 const discountedPriceDisplay = document.querySelector(".js-discount-value");
 const discountToggle = document.querySelector("input[type='checkbox'");
 const discount = 0.25;
 discountToggle.checked = false;
 
 const applyDiscount = (price) => {
-  return (price * (1 - discount));
+  const convertedPrice = pagesAndPrices.prices[price];
+  return (convertedPrice * (1 - discount));
 };
 
 const createNewPrice = (price) => {
@@ -51,18 +54,9 @@ discountToggle.addEventListener("input", function() {
   }
 });
 
-const getInputValue = (inputValue) => {
-  return inputValue;
-};
-
 inputSlider.addEventListener("input", function(e) {
   return (
-    spanPriceDisplay.innerHTML = getInputValue(e.target.value)
-  );
-});
-
-inputSlider.addEventListener("change", function(e) {
-  return (
-    pageviewCount.innerHTML = calculatePageviews(e.target.value)
+    spanPriceDisplay.innerHTML = pagesAndPrices.prices[e.target.value],
+    pageviewCount.innerHTML = pagesAndPrices.views[e.target.value]
   );
 });