Design comparison
Solution retrospective
I am proud of how it turned out in the end, considering I faced many difficulties that I managed to solve after a lot of pain. I am aware this wasn't for beginners, but I still took on the challenge because I like pushing myself to become better at absolutely everything. Next time, I would do positioning differently.
What challenges did you encounter, and how did you overcome them?I encountered a problem where the image simply wouldn't move to the other side, so I managed to use position: relative
and adjusted it to be where it should be.
I also encountered issues with JavaScript and an error message that I couldn't resolve at all.
I would like feedback and assistance on the best way to learn JavaScript.
Community feedback
- @Vanillatte68Posted 5 months ago
Good job on completing the challenge! This is not an easy challenge for beginner but you did a good job to make it as close to the design. There are few suggestion i could give:
- Try to use media query in the CSS to build mobile view. E.g. use
@media screen and (max-width: 768px)
to adjust any elements to fit in display with 768px width and below. MDN - You can change list style by using
::before
in the CSS by filling the content with the checkmark icon, then adjust the alignment by using padding. MDN - Try to make image container to contain the image. Place the container outside the sign-up content, then adjust how the overall content flow using flexbox in the CSS.
- For the javascript, try to make function to check if the input value is empty/invalid. In my case this is how i build the script:
function validateForm() { let email = document.getElementById("email"); // if email empty/invalid if (!email.value.match(/^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$/)) { errorMsg.style.display = "block"; email.classList.add("inavlid"); } //if email valid else { errorMsg.style.display = "none"; email.classList.remove("inavlid"); emailValue.innerHTML = email.value; form.reset(); mainForm.style.display = "none"; successForm.style.display = "flex"; } }
0 - Try to use media query in the CSS to build mobile view. E.g. use
- Account deleted
The best way to learn js is by writing more and more JS. Remember consistency is the key.
- At least make it responsive.
- Do a bit research on Form Validation and apply it.
- Email entered by user should be displayed on the success message, that gives assurance to the users .
0
Please log in to post a comment
Log in with GitHubJoin 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