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

Ping-single-column-coming-soon-page

Reno08-codeā€¢ 300

@Reno08-code

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi !lovely people I desperately need help:( why my JavaScript is not working? :( have tried to solve it myself but I just couldn't figure out:( Also if I click GitHub live site URL and my layout just changed, however if I open it from live sever in vs everything is good ,what is the problem ?

Community feedback

youssef oubaidaā€¢ 240

@youssefouba

Posted

hi! It looks like you're facing two issues:

-first, change your style link in <head> from :

<link rel="stylesheet" href="/index.css"> to. <link rel="stylesheet" href="index.css"> no need to add / because the HTML file and CSS file are in the same folder

the same issue in javascript change src to just "index.js"

-for the validation problem :

  • you are using "email" type in your input <input type=šŸ‘‰"email" autocomplete="off" placeholder="Your Email Address" id="email" name="email" required=""> so The input value is automatically validated to ensure it is a properly formatted e-mail address.

  • to do custom validation change the type to text and do the work in javascript.

0

Reno08-codeā€¢ 300

@Reno08-code

Posted

@youssefouba hi thank you. I changed the type to text ,and when I looked at the console ,the new class "error" and the p element containing the warning message were added ,however the message just didn't show on the web.....

1
youssef oubaidaā€¢ 240

@youssefouba

Posted

@Reno08-code hi! It looks like the position: absolute; style is causing the issue with the error message not being visible. Removing the position: absolute; style should fix the problem and allow the error message to be displayed correctly. šŸ‘‰ form .error_text { position: absolute;}

0
Reno08-codeā€¢ 300

@Reno08-code

Posted

@youssefouba hi yes your are correct! I changed it and now I can see the message:)thank you

1
Reno08-codeā€¢ 300

@Reno08-code

Posted

@youssefouba hi yes your are correct! I changed it and now I can see the message:)thank you

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