All solutions

See README.

method="dialog"??

I put a method of "dialog" on the form because otherwise the page would reload when the form is submitted as I didn't provide an actual action URL. This is for demo purpose only. In production, this should be switched to "post" instead.

About the Invalid State

When you look at the CSS, you'll notice that I used a [data-invalid] attribute, with some help of Javascript, on the input element to indicate whether it's invalid or not instead of simply an :invalid pseudo-class. This is because if I used the pseudo-class, the input would show invalid state styles immediately when the page loads -- since, of course, the input is required. Then, those styles would disappear the moment you type in a valid email address.

We don't want that. Because, as per the terms of the challenge, form validation should take place only if there was an attempt to submit the form. And this is exactly what I did. I put an onclick to call a function named checkInput() on my button, as it's the form's only submit button. This means it would still work even if the form was submitted using the Enter key. The form would behave as if its submit button has been clicked.

See README.

See the README.

Edit: There is something wrong with the screenshot. The .stats section doesn't look like this in the live site. I tried to generate a new screenshot but nothing changed.

This is my first project built with React. And I think I did a great job! It wasn't as hard as I thought, though 🙃

See the README.

Design Note

I don't consider myself to be a master at web design --otherwise I should've made my own designs for my projects. But, there are some things that are obvious even for the dumbest.

If you remove underlines from anchors (aka, <a> tags), the thing which will strip away the very sign that a piece of text is a link, you have to give them some other sort of distinction to let them stick out. A shift in color or change of the cursor shape upon hover is not enough since the user needs to know that something can be interacted with before they do interact with it.

The only --hardly noticeable-- distinction made in the original design between links and non-links is that links are bold. This is bad design. We need our websites to be accessible by most users even if they have low vision conditions. Plus, boldness is not an evident indication that you can interact with text.

I didn't want to break the color system by giving anchors a strong color. Therefore, I kept the underlines, making it easy for everyone to see for clear what is a link, and what isn't.

I have returned to this project and spent some serious amount of effort on responsibility of the page on different -even bizarre- screen sizes.

I did a good job this time.. I gotta admit! 🙃

NOTICE:

There is nothing wrong with the font in the solution. You can visit the live site and compare it to the challenge design. It's the same font.

It appears that there is a bug in the program that took the screenshot itself. I've tried to take another screenshot, but it gave me the same result.

I decided to breach the design instructions regarding active states of radio buttons. The design suggests that a checked radio button would acquire a light gray background, whereas a hovered-over one would get an orange background. This is in my opinion pretty misleading.

Normally, people associate a change of color with a change of state, and a big change of color with a samely big change of state. If a radio button was gray then turned orange, a user might suggest it has got checked! So, I flipped colors. A checked radio is orange, and a hovered-over one is light gray.

What do you think about this? Well done? Na-ah?

What do you think about what I did in the creator name section?

Is the 650px viewport height limit ok? Because even with this limit the page displays fine on 600px height devices. I know I should've rebuilt the illustration with different proportions, but now that would be a pain. How many landscape devices with less than 600px height exist out there? Is this a big problem?