Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Base Apparel Page

Melad 220

@melad99

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Just finished this challenge ... the JavaScript was the most difficult when I try to validate the email and show the error but finally, I did it also I will update the mobile responsive and enhance it soon.

Community feedback

Riccardo 240

@riccardofano

Posted

Hello Melad, excellent job on getting the javascript working!

I wanted to let you know there's an easier way to validate an email, in fact, the browser already does it for you. Instead of checking if inputText's value matches the regular expression you can just access inputText.validity.valid thanks to having set <input type="email">. It does the exact same thing but it's a lot less work for you!

Having set input as type="email" also allows you to style css elements by accessing its :valid or :invalid state so if you want to add a red border if your input is invalid you could do

.base-input:invalid {
    border: 1px solid red;
}

You can take a look at my solution for more details. Hope this was helpful and have a wonderful day!

Marked as helpful

0

Melad 220

@melad99

Posted

@riccardofano thanks for your feedback and yes I tried type="email" but to be honest I just wanted to improve my skills with JavaScript so I chose the hard way but I will try the: valid and: invalid it's new to me and I appreciate sharing this with me ...thanks again ,good luck with your solutions.

0
Amr Khaled 170

@amr4409

Posted

You can view my code in javascript

the code

and add your mailformat in the condition

and set the svg in the background

thank you for see my feed back you can visit my profile and give me your feedback

1

Melad 220

@melad99

Posted

@amr4409 Thanks amr for your comment but i already did that and the JavaScript works and ofc i will see your code 👍🏻

0

Please log in to post a comment

Log in with GitHub
Discord logo

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