Dezenix · wre9-tesh · Jun 9, 2022 · Jun 9, 2022
diff --git a/Interactive price component/design/active-states.jpg b/Interactive price component/design/active-states.jpg
diff --git a/Interactive price component/design/desktop-design.jpg b/Interactive price component/design/desktop-design.jpg
diff --git a/Interactive price component/design/desktop-preview.jpg b/Interactive price component/design/desktop-preview.jpg
diff --git a/Interactive price component/design/mobile-design.jpg b/Interactive price component/design/mobile-design.jpg
diff --git a/Interactive price component/images/bg-pattern.svg b/Interactive price component/images/bg-pattern.svg
diff --git a/Interactive price component/images/favicon-32x32.png b/Interactive price component/images/favicon-32x32.png
diff --git a/Interactive price component/images/icon-check.svg b/Interactive price component/images/icon-check.svg
diff --git a/Interactive price component/images/icon-slider.svg b/Interactive price component/images/icon-slider.svg
diff --git a/Interactive price component/images/pattern-circles.svg b/Interactive price component/images/pattern-circles.svg
diff --git a/Interactive price component/index.html b/Interactive price component/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
+
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+
+  <title>Interactive pricing component</title>
+
+  <link rel="stylesheet" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;800&display=swap" rel="stylesheet">
+
+</head>
+<body>
+  <div class="title" role="contentinfo">
+    <h1>Simple, traffic-based pricing</h1>
+    <p>Sign-up for our 30-day trial.No credit card required.</p>
+  </div>
+
+  <div class="wrapper">
+    <div class="flex1">
+      <div  class="flex1-smal order1"><span id="people">100</span>K PAGEVIEWS</div>
+      <input type="range" min="1" max="100" value="50" class="order2"> 
+      <div class="order3"><span class="Ybig">$ <span id="Ymoney"></span></span><span class="flex1-big">$ <span id="money">16.00</span></span><span class="flex1-smal">/ month</span></div>
+    </div>
+
+    <div class="flex3">
+      <div class="normal flex3-s"><div>Monthly Billing </div></div>
+      <div class=" flex3-s"><div class="border-toggle"><div></div></div></div>
+      <div class="normal  flex3-s"><div>Yearly Billing</div></div>
+      <div class="discount  flex3-s"><div>25% discount</div></div>
+    </div>
+    <div class="line"></div>
+    <div class="flex4">
+      <div class="flex4-wrapper">
+        <div class="flex4-font"><img src="./images/icon-check.svg" alt="check"> <span>Unlimited websites</span></div>
+        <div  class="flex4-font"><img src="./images/icon-check.svg" alt="check"> <span>100% data ownership</span></div>
+        <div  class="flex4-font"><img src="./images/icon-check.svg" alt="check"> <span>email reports</span></div>
+      </div>
+      <div class="flex4-wrapper">
+        <div><button type="button">Start my trial</button></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="bawah"></div>
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/Interactive price component/script.js b/Interactive price component/script.js
@@ -0,0 +1,74 @@
+const rangeInputs = document.querySelectorAll('input[type="range"]');
+
+const formatter = new Intl.NumberFormat("en-US", {
+  minimumFractionDigits: 2,
+});
+var valueMoney = document.getElementById('money');
+var valuePeople = document.getElementById('people');
+var disMoney = document.getElementById('Ymoney');
+
+var Money = 32;
+var Ymoney = 384;
+var People = 200;
+var Ypeople = rangeInputs[0].value / 100 * 2400;
+var i = true;
+
+var yearM = rangeInputs[0].value / 100 * Ymoney;
+var MoneyDis = yearM * 0.75;
+
+function handleInputChange(e) {
+  let target = e.target;
+  if (e.target.type !== 'range') {
+    target = document.getElementById('range');
+  } 
+  const min = target.min;
+  const max = target.max;
+  const val = target.value;
+
+  target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%';
+
+  var cMoney = target.value / 100 * Money ;
+  var cPeople = target.value / 100 * People;
+  var uang1 = target.value / 100 * 384;
+  var uang2 = uang1 * 0.75;
+  var people1 = target.value / 100 * 2400;;
+  if (i == true) {
+  valueMoney.innerHTML = formatter.format(cMoney);
+  valuePeople.innerHTML = cPeople;
+  }  
+  if (i == false){
+  valuePeople.innerHTML = people1;
+  disMoney.innerHTML = formatter.format(uang1);
+  }
+}
+
+rangeInputs.forEach(input => {
+  input.addEventListener('input', handleInputChange)
+});
+
+var toggle = document.querySelectorAll('.border-toggle div');
+var myToggle = document.getElementsByClassName('border-toggle');
+var fontMoney = document.getElementsByClassName('flex1-big')[0];
+var Ybig = document.getElementsByClassName('Ybig')[0];
+myToggle[0].addEventListener('click' , () => {
+  if (i == true) {
+  toggle[0].style.left = '30px';
+
+  disMoney.innerHTML = formatter.format(MoneyDis);
+
+  fontMoney.style.fontSize = '20px';
+  fontMoney.style.color = 'hsl(225, 20%, 60%)';
+  fontMoney.style.textDecorationLine = 'line-through';
+  document.getElementsByClassName('flex1-smal')[1].innerHTML= '/ YEAR';
+  Ybig.style.display = 'inline-block';
+
+  fontMoney.innerHTML = '25%';
+
+  valuePeople.innerHTML = Ypeople;
+
+  i=false;
+  } else {
+    document.location.reload();
+    i=true;
+  }
+});