Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Day 1-5 code challenge

tailwind-css, web-components
Maryam Garba•80
@masha-a-m
A solution to the Intro component with sign-up form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


DAY 1-5 20 DAYS OF CODE CHALLENGE HerTechTrail

Day 1-5 Details

This is a repo for Day 1-5 of 20 days of code challenge HerTechTrail. For Day 1-5 we were required to replicate a given sign up form, style it with CSS, make it responsive and also host it.

Table of content

  • Day 1-5 Details
  • Table of content
    • Project Task
    • Links
    • My Process
      • Built With
      • What I Learned
      • Useful Resources
      • Author

Project Task

Users should be able to:

  • sign up with the form

Links

  • Solution URL (https://github.com/masha-a-m/day1-5_20_Days_of_Code_Challenge_HerTechTrail)
  • Live Site URL (https://lucky-biscuit-5c0c3a.netlify.app)

My Process

I started this project a week ago. It was a bit hectic for me but with research on different sites, I finally finished it.

Built With

  • HTML5 Markup
  • CSS Styling
  • JavaScript

What I Learnt

I leant how to make a sign up form with many CSS components

Useful Resources

https://codereview.stackexchange.com/questions/114760/student-registration-form

https://stackoverflow.com/questions/20260798/creating-registration-form

Author

  • Website - MARYAM GARBA
  • Twitter - MARYAM GARBA
Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Shahin Aliyarli•700
    @sliyarli
    Posted almost 2 years ago

    Your HTML and CSS code looks good for the most part, but I noticed a couple of issues and some room for improvements:

    HTML Issues:

    1 - In your HTML form, there are missing closing angle brackets (>) for the input elements - For example:

    <input type="text" placeholder="First Name" id="first"
    

    Should be:

    <input type="text" placeholder="First Name" id="first">
    

    2 - The "Terms and Services" text within the <span> in your HTML should be properly closed with </span> - Update this part:

    <p>
        By clicking the button, you are agreeing to our <span> Terms and Services</span>
    </p>
    

    To:

    <p>
        By clicking the button, you are agreeing to our <span> Terms and Services</span>.
    </p>
    

    CSS Issues:

    1 - There's a typo in the CSS for the box-sizing property - It should be box-sizing, but you have boz-sizing:

    *{
        padding:0;
        margin:0;
        boz-sizing: border-box; /* should be box-sizing */
        font-family: 'Poppins', sans-serif;
    }
    

    JavaScript Issues:

    1 - There's a typo in your JavaScript code when checking the firstName variable - You have:

    var firstname = first.value.trim();
    

    It should be consistent with your variable name:

    var firstName = first.value.trim();
    

    2 - In the JavaScript code, you have this block of code duplicated for first name validation:

    if (firstName === ''){
        errorFunc(first, 'First Name cannot be empty')
    }
    else {
        successFunc(first)
    }
    

    You should replace the second successFunc(first) with successFunc(last) for the last name validation.

    3 - In the successFunc function, you should also remove the success class when an input is in error state - You can do this by using classList.remove('success') in addition to adding the error class.

    With these adjustments, your code should work correctly - Make sure to test it thoroughly to ensure everything is functioning as expected.

    Marked as helpful
  • Maryam Garba•80
    @masha-a-m
    Posted almost 2 years ago

    thank you so much

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub