Creditas · ChristianWilsonEtiaba · Mar 5, 2020 · Mar 6, 2020 · Mar 6, 2020 · Mar 9, 2020
diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+
 <html lang="en">
   <head>
     <meta charset="UTF-8">
@@ -34,8 +35,9 @@ <h1 class="main__title">Perform a loan simulation using your asset as collateral
                 </div>
                 <div class="field">
                   <label for="collateral">Collateral</label>
-                  <select name="collateral" id="collateral" required>
-                    <option value="vehicle">Vehicle</option>
+                  <select name="collateral" id="collateral" required >
+                    <option id="vehicle" name="vehicle" value="vehicle" selected>Vehicle</option>
+                    <option id="home" name="home" value="home">Home</option>
                   </select>
                 </div>
               </div>
@@ -49,8 +51,8 @@ <h1 class="main__title">Perform a loan simulation using your asset as collateral
                     <div class="range">
                       <input type="range" name="collateral-value-range" id="collateral-value-range" min="0" max="100" value="20" step="10">
                       <div class="range__values">
-                        <span>12.000</span>
-                        <span>24.000</span>
+                        <span id="min-collateral">5.000</span>
+                        <span id="max-collateral">3.000.000</span>
                       </div>
                     </div>
                   </div>
@@ -66,8 +68,8 @@ <h1 class="main__title">Perform a loan simulation using your asset as collateral
                     <div class="range">
                       <input type="range" name="loan-amount-range" id="loan-amount-range" min="0" max="100" value="90" step="10">
                       <div class="range__values">
-                        <span>30.000</span>
-                        <span>60.000</span>
+                        <span id="min-loan">3.000</span>
+                        <span id="max-loan">100.000</span>
                       </div>
                     </div>
                   </div>
@@ -79,12 +81,12 @@ <h1 class="main__title">Perform a loan simulation using your asset as collateral
                 <h4>Monthly installment</h4>
                 <div class="quota">
                   <strong>R$</strong>
-                  <span>465,00</span>
+                  <span id="monthlyInstallment">465,00</span>
                 </div>
               </div>
               <div class="amount_container">
                 <h4>Total payable</h4>
-                <p>R$ 11.112,00</p>
+                <p id='totalPayable'>R$ 11.112,00</p>
               </div>
               <div class="tax__container">
                 <h4>Interest rate (month)</h4>
@@ -96,8 +98,8 @@ <h4>Interest rate (month)</h4>
             </div>
           </form>
         </section>
-        <footer class="footer">*Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quas non harum dolor eligendi id, ab corrupti blanditiis suscipit ex odit error alias minus. Enim dolores eum officiis quae rem!*</footer>
+        <footer>*Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quas non harum dolor eligendi id, ab corrupti blanditiis suscipit ex odit error alias minus. Enim dolores eum officiis quae rem!*</footer>
       </main>
     </div>
   </body>
-</html>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import './styles.css'
 
 export const checkFormValidity = formElement => formElement.checkValidity()
@@ -10,6 +11,9 @@ export const getFormValues = formElement =>
       value: element.value
     }))
 
+export const confirm = formElement => formElement.checkValidity(true)
+export const Alert = formElement => formElement.checkValidity()
+
 export const toStringFormValues = values => {
   const match = matchString => value => value.field === matchString
   const IOF = 6.38 / 100
@@ -20,11 +24,11 @@ export const toStringFormValues = values => {
   return `OUTPUT\n${values
     .map(value => `${value.field} --> ${value.value}`)
     .join('\n')}`.concat(
-      `\nTotal ${(IOF + INTEREST_RATE + NUMBER_OF_INSTALLMENTS + 1) * VEHICLE_LOAN_AMOUNT}`
-    )
+    `\nTotal ${(IOF + INTEREST_RATE + NUMBER_OF_INSTALLMENTS + 1) * VEHICLE_LOAN_AMOUNT}`
+  )
 }
 
-export function Send(values) {
+export function Send (values) {
   return new Promise((resolve, reject) => {
     try {
       resolve(toStringFormValues(values))
@@ -34,7 +38,7 @@ export function Send(values) {
   })
 }
 
-export function Submit(formElement) {
+export function Submit (formElement) {
   formElement.addEventListener('submit', function (event) {
     event.preventDefault()
     if (checkFormValidity(formElement)) {
@@ -45,40 +49,96 @@ export function Submit(formElement) {
   })
 }
 
-export function Help(element) {
+export function Help (element) {
   element.addEventListener('click', function (event) {
-    alert('Display here the help text')
+    alert('Can you help me?')
+    setTimeout(function () {
+      alert('Yes, sure')
+    }, 10000)
   })
 }
 
-export function handleChangeRangeVehicleUnderWarranty(
+export function handleChangeRangeVehicleUnderWarranty (
   warrantyRangeElement,
   vehicleWarrantyElement
 ) {
-  const MIN_VALUE = 12000.0
+  const MIN_VALUE = 5000.0
+  const MAX_VALUE = 3000000.0
+
   warrantyRangeElement.addEventListener('change', function (event) {
-    vehicleWarrantyElement.value =
-      (Number(MIN_VALUE) * Number(event.target.value)) / 100 + Number(MIN_VALUE)
+    vehicleWarrantyElement.value = Math.floor(Number(event.target.value) * (MAX_VALUE - MIN_VALUE + 1)) + MIN_VALUE
   })
 }
 
-export function handleChangeVehicleLoanAmount(
+export function handleChangeVehicleLoanAmount (
   loanAmountRangeElement,
   loanAmountElement
 ) {
-  const MIN_VALUE = 30000.0
+  const MIN_VALUE = 3000.0
+  const MAX_VALUE = 100000.0
+
   loanAmountRangeElement.addEventListener('change', function (event) {
-    loanAmountElement.value =
-      (Number(MIN_VALUE) * Number(event.target.value)) / 100 + Number(MIN_VALUE)
+    loanAmountElement.value = Math.round(Number(event.target.value) * (MAX_VALUE - MIN_VALUE + 1)) + MIN_VALUE
+  })
+}
+
+// FIX: Values are nor rendering the event when the option it's selected. ReactDOM.render
+// Try to apply in HTML the required in one of the 2 options to understand the behaviour
+// FIX: The range MAX_VALUE is not riching to the limit.
+export function handleChangeOption (
+  warrantyRangeElement,
+  vehicleWarrantyElement,
+  loanAmountRangeElement,
+  loanAmountElement
+) {
+  const MIN_VALUE_WARRANTY = 50000.0
+  const MAX_VALUE_WARRANTY = 1000000000.0
+
+  const MIN_VALUE_LOAN = 30000.0
+  const MAX_VALUE_LOAN = 4500000.0
+
+  let valueOption = document.getElementById('collateral').value
+
+  if (valueOption === 'home') {
+    warrantyRangeElement.addEventListener('change', function (event) {
+      vehicleWarrantyElement.value = Math.floor(Number(event.target.value) * (MAX_VALUE_WARRANTY - MIN_VALUE_WARRANTY + 1)) + MIN_VALUE_WARRANTY
+    })
+
+    loanAmountRangeElement.addEventListener('change', function (event) {
+      loanAmountElement.value = Math.round(Number(event.target.value) * (MAX_VALUE_LOAN - MIN_VALUE_LOAN + 1)) + MIN_VALUE_LOAN
+    })
+
+    document.getElementById('min-collateral').innerHTML = 50000.0
+    document.getElementById('max-collateral').innerHTML = 1000000000.0
+    document.getElementById('min-loan').innerHTML = 30000.0
+    document.getElementById('max-loan').innerHTML = 4500000.0
+  }
+  // alert('Initial screen values: ' + valueOption)
+}
+
+// TODO: Needs to be fixed.
+export function handleInstallment (
+  monthlyInstallmentElement,
+  totalPayable
+) {
+  const FTT = 6.38
+  const interestRate = 2.34
+  const loanAmount = 80
+
+  let numberOfInstallments = document.getElementById('installments').value
+
+  monthlyInstallmentElement.addEventListener('change', function (event) {
+    totalPayable = ((FTT / 100) + (interestRate / 100) + (numberOfInstallments / 1000) + 1) * loanAmount
+    monthlyInstallment = totalPayable / numberOfInstallments
   })
 }
 
 export default class CreditasChallenge {
-  static initialize() {
+  static initialize () {
     this.registerEvents()
   }
 
-  static registerEvents() {
+  static registerEvents () {
     Submit(document.querySelector('.form'))
     Help(document.getElementById('help'))
 
@@ -91,6 +151,19 @@ export default class CreditasChallenge {
       document.getElementById('loan-amount-range'),
       document.getElementById('loan-amount')
     )
+
+    handleChangeOption(
+      document.getElementById('collateral-value-range'),
+      document.getElementById('collateral-value'),
+
+      document.getElementById('loan-amount-range'),
+      document.getElementById('loan-amount')
+    )
+
+    handleInstallment(
+      document.getElementById('"monthlyInstallment'),
+      document.getElementById('totalPayable')
+    )
   }
 }
 

diff --git a/src/styles.css b/src/styles.css
@@ -12,6 +12,7 @@
   --tom-thumb: #2a492f;
 }
 
+
 * {
   margin: 0;
   padding: 0;
@@ -83,7 +84,7 @@ body {
 }
 
 .field {
-  display: inherit;
+ display: inline-block;
 }
 
 .field-group .field:first-child {
@@ -112,31 +113,57 @@ body {
   border-radius: 4px;
   padding: 10px 5px;
   width: 150px;
+  margin-right: 1em;
 }
 
 .form__fields {
   max-width: 400px;
-  min-width: 400px;
 }
 
 .range {
-  transform: translateY(11px);
+  transform: translateX(-30px) translateY(20px);
 }
 
 .range__values {
-  display: inherit;
+  display: flex;
+  margin-top: 5px;
 }
 
 .range__values span {
   font-size: .6rem;
   font-weight: 100;
 }
 
+span:nth-of-type(1){
+  margin-right: 4rem;
+}
+
 .field input[type="range"] {
   transform: translateY(5px);
+  -webkit-appearance: none;
+  height:5px;
+  width:100%;
+  background: linear-gradient(#616161, #b7b7b7, #ccc);
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: 1px solid #777;
+  background: linear-gradient(#fff, #ccc);
+  height: 14px;
+  width: 14px;
+  border-radius: 20px;
+  cursor: pointer;
+  margin-top: 0px;
+}
+
+input[type=range]:focus {
+  outline: none;
 }
 
-.footer {
+footer {
   font-size: .6rem;
   font-weight: 100;
   max-width: 600px;
@@ -154,6 +181,7 @@ body {
   align-items: center;
   justify-content: space-around;
   min-width: 35%;
+  margin-left: 4rem;
 }
 
 .form__result h4 {
@@ -225,5 +253,6 @@ body {
   .form .form__result {
     width: 200px;
     height: 250px;
+    margin: 0em;
   }
 }