Skip to content
Submitted over 1 year ago

Ping-single-column-coming-soon-page

Reno08-codeā€¢300
@Reno08-code
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

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
    @youssefoubaPosted over 1 year ago

    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-codePosted over 1 year ago

    @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
    @youssefoubaPosted over 1 year ago

    @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-codePosted over 1 year ago

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

    1
    Reno08-codeā€¢300
    @Reno08-codePosted over 1 year ago

    @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

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