In this assignment, you are tasked with writing a one-page website that will act as a registration form to sign up for an account on a website. An example of what a solution might look like is shown below, for a made-up site called SIPAC (Super Interesting People Awesome Community). However, you should not copy the theme of the example exactly. Get creative, and come up with your own!
This sign-up form should be for a made-up website of your choosing.
For instance, it could be a sign up page for an online shopping center (Amazon) or for an online forum (Reddit), or for an email account creation (Gmail).
The exact theme choice is up to you.
The form should POST to https://benjdd.com/sp so that you (and the TAs grading your assignment) can view the values entered.
The sign up process for this website will require a number of bits of information, including at least the following:
| Input field | Required? | Restrictions / Requirements |
|---|---|---|
| First Name | Yes | Only alphabetical, Capitalized |
| Last Name | Yes | Only alphabetical, Capitalized |
| Primary email | Yes | Must contain some text, then @, then more text |
| Password | Yes | Must be dotted. Must be 8+ or more characters in length |
| Recovery email | No | Must contain some text, then @, then more text |
| Phone number | No | Formatted as XXX-XXXX where each X must be a digit |
| Weight in lbs | No | Must be a number |
| Bio | No | Text field, should be at least 3 rows of text tall (textarea) |
| Birthday | No | Date string formatted as YYYY-MM-DD |
| Newsletter sign-up | Yes | A Yes/No radio option |
| Satisfaction with company | Yes | Slider rating between 1 and 10 |
Note: You must include every one one of the form elements in the table above. The “required” column is indicates wether or not you should use the required html form attribute.
For some of the restrictions, such as the phone number format or password format, you might want to consider using the pattern form element attribute.
I did not talk specifically about this in the video, so it may require a bit of research and investigation on your end.
The input fields should be nicely aligned, as shown in the animation. You are also required to use CSS to customize the style of the site, including custom colors, fonts, and positioning of elements. More specifically:
img tags on the page that are sized and positioned with CSS.All of the CSS should be in separate CSS file(s) and linked into the HTML. You should follow standard file structure rules, along the lines of:
/ public_html
index.html
/ img
?.jpg
?.jpg
/ css
style.css
You should also make sure to thoroughly test that the requirements/restrictions for each input element is followed. For instance, if an element is required, make sure that the form will not submit until a value is entered. If the password must be at least 8 characters, make sure the form won’t submit if only 7 are typed in.
IMPORTANT NOTE: Please do not submit any personal/sensitive information to https://benjdd.com/sp. I cannot guarantee it will stay safe!
Make sure that you take a look at the style guide on the class site before turning in your project. Specifically, make sure that you validate the HTML, and include header comments. Otherwise you might lose points!
To turn in the project, zip up the public_html directory, and submit via gradescope.
Make sure that all of the html and image files are included in the zip.
The project is due by 7pm on Friday Jan 27, 2023.