Submitted over 1 year ago

interactive-card-details-form-main/Cleavejs

Xqu1shy•270

@Xqu1shy

Preview site View code

This is a solution for...Interactive card details form

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Had a blast making this project. Any feedback would be nice. Thank you!

UPDATE:

form.addEventListener('submit', (e) => {

e.preventDefault();

validateInputs();

const successful = document.querySelectorAll('.success')

// to submit the form

if (successful.length === 4) {

form.submit();

// stop refreshing so I can change the DOM

thanksPage.innerHTML = 
`<div class="wrapper form-section">
    <div class="thanks-page">
        <img src="./images/icon-complete.svg" alt="">
        <h1>Thank you!</h1>
        <p>We've added your card details</p>
        <button>Continue</button>
    </div>
</div>`

} })

How can i stop the form.submit() from refreshing? So that i can change the DOM

Community feedback

Abdul Khaliq 🚀•72,560
@0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

JAVASCRIPT 🟡:

The way you declared variables are need to be well structured and organized

Take a look at the following example code which describes a preferable way of declaring variables to have a well structured code, this way can't improve performance but it can increase code readability

const firstName = "Your"; const lastName = "Name"; const emailAddress = "[email protected]"; const password = "supersecret";

instead try this,

const firstName = "Your", lastName = "Name", emailAddress = "[email protected]" ••• ••• // n number of declarations password = "supersecret"; // make sure to add a semicolon at end of last declaration

This single line declaration with separated commas will helps you to have a better structured code and improves readability though

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
0
Ashray•110
@RayAsh37Posted over 1 year ago
Hi, Sorry for the vague question but since you have points above 150 I wanted to ask. Were you able to apply to any jobs on their jobs portal? Like what was your experience? Did you get any callbacks?
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord