✨ feat: discount pricing function

If the toggle for the yearly discount in on, the new discounted price
will display.

index.html

@@ -25,9 +25,9 @@ <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="1" min="5" max="25" id="slider-input">
+          <input type="range" step="4" min="8" max="36" id="slider-input">
           <h3 class="info-card__price">
-            <span class="change-color">$</span><span class="js-input-value"></span>/month
+            <span class="change-color">$</span><span class="js-input-value"></span><span class="js-discount-value"></span>/month
           </h3>
         </section>
 

src/app.js

@@ -1,23 +1,74 @@
-// import './scss/global.scss';
+import "./scss/global.scss";
+
+// TODO: follow prompt!! 😆
+// validation somehow to return the matching values from table above
+// const pageviewDisplay = document.querySelector(".js-pageviews");
+const pagesAndPrices = {
+  "8": "10K",
+  "12": "50K",
+  "16": "100K",
+  "24": "500K",
+  "36": "1M"
+};
+// const inputSlider = document.querySelector("input[type='range']");
+// const sliderInputs = Object.keys(pagesAndPrices);
+// const price = sliderInputs[inputSlider.current];
+// pageviewDisplay.innerText = pagesAndPrices[`${price}`];
+// const spanPriceDisplay = document.querySelector(".js-input-value");
+// spanPriceDisplay.innerHTML = price;
+
+// can you add or modify the step attribute?
 
 const pageviewCount = document.querySelector(".js-pageviews");
 const pagesPerDollar = 6250;
+
 const calculatePageviews = (dollars) => {
   return dollars * pagesPerDollar;
 };
 
-// 16 / 100K = price per page view (.00016)
-// 8 / 50000 === .00016
-// 100000 / 16 = 6250
-// .00016 * 6250 = 1
-// 6250 = 1
-// (6250 * dollars)
-
 const inputSlider = document.querySelector("input[type='range']");
 let price = inputSlider.value;
 pageviewCount.innerHTML = calculatePageviews(price);
 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 createNewPrice = (price) => {
+  discountedPriceDisplay.innerText = applyDiscount(price).toFixed(2);
+};
+
+const insertNewPrice = (price) => {
+  spanPriceDisplay.style.textDecoration = "line-through";
+  spanPriceDisplay.style.textDecorationThickness = "0.125rem";
+  createNewPrice(price);
+};
+
+discountToggle.addEventListener("input", function() {
+  if(discountToggle.checked) {
+    insertNewPrice(inputSlider.value);
+    inputSlider.addEventListener("input", function(e) {
+      return (
+        createNewPrice(e.target.value)
+      );
+    });
+  }
+  if(!discountToggle.checked) {
+    spanPriceDisplay.style.textDecoration = "none";
+    discountedPriceDisplay.innerText = "";
+    inputSlider.addEventListener("input", function() {
+      return (
+        discountedPriceDisplay.innerText = ""
+      );
+    });
+  }
+});
 
 const getInputValue = (inputValue) => {
   return inputValue;