Chanda• 800
@Chanda-Abdul
Submitted
This is my solution to the Multi-form challenge, let me know what you think?
Rudhi Mediastara
@rudimediaz
All comments
- Rudhi Mediastara• 150
@rudimediaz
Posted
Everything seems to be working. One thing, it does not have validation error message on step 1. So it's kinda confusing for user when they insert invalid format in particular field, they can't go to next step (because button is disabled) without clear information what they did wrong. I know the approach of disabling button is fine, but that is not the best user experience. Instead of disabling that button, you can assign it to be a trigger for validation before go to next step. For the example, this community feedback field doesn't disable the button(for posting it). It screams invalid message when i click post with not a single character in it.
0 - Darknight8020• 180
@carlpy
Submitted
Hello, hope you doing well, i made this by my own so i would like to hear how can i improve html accesibility and JS best practices
Rudhi Mediastara• 150@rudimediaz
Posted
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
