Responsive Multi-step-form with SCSS and vanilla JS

Community feedback

• 

  Rudhi Mediastara•150

  @rudimediazPosted almost 2 years ago

  wow, i appreciate your guts for making it in vanilla js. The info field validations seem great (something that i don't really care in my solution).

  I think your solution got a serious problem on total summary step. I found you calculate it twice tho.

  in here

              planOptions.forEach((plan) => {
                  let costOfPlans = plan.querySelectorAll('.cost');
                  costOfPlans.forEach(cost => {
                      if (cost.classList.contains('yearly-cost') && plan.classList.contains('active')) {
                          totalPlanCost *= 10; // this set the value of the total cost 
                          ShowPlanCost(plan);
                      }
                  })
              });
  
  ///
  
              planOptions.forEach((plan) => {
                  let costOfPlans = plan.querySelectorAll('.cost');
                  costOfPlans.forEach(cost => {
                      if (cost.classList.contains('monthly-cost') && plan.classList.contains('active')) {
                          totalPlanCost /= 10;
                          ShowPlanCost(plan);
                      }
                  })
              });
  

  and here

  function getTotal(changeValue) {
      let localTotal = totalPlanCost;
  
      if(changeValue) {
          if(!switchOptions.checked) { totalCount.innerText = '+$' + localTotal / 10 + '/mo';  } // yearly access
          else { totalCount.innerText = '+$' + localTotal * 10 + '/yr'; } // monthly access
      } else {
          if(!switchOptions.checked) { totalCount.innerText = '+$' + localTotal + '/mo';  } // yearly access
          else { totalCount.innerText = '+$' + localTotal * 10 + '/yr'; } // monthly access
      }
  }
  

  Be careful when you attemp to imperatively mutating state. Try to using pure function (or maybe using object that has getter and setter if you OOP person) for calculation stuff. If you are not careful enough, you may lead it into a bug.

  and one more thing, 'console.log's. try remove them before you push your code into production.

  Marked as helpful

  0

  ---

  

  Darknight8020•180

  @carlpyPosted almost 2 years ago

  @rudimediaz Thanks for your reply, really apreciate it , about the total step, was really confusing but i'll try to figure out how to make the best of that error, and fixed, if you have an idea to make that let me know, greets

  0