ITP | Sami Sardarzai | Module-User-Focused-Data | Week3

[samisardarzai]

Learners, PR Template

Self checklist

• I have committed my files one by one, on purpose, and for a reason
• I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
• I have tested my changes
• My changes follow the style guide
• My changes meet the requirements of this task

Changelist

Briefly explain your PR.
Added a new T-Shirt Order form with HTML5 form controls
Implemented input validation for customer name, email, color, size, and delivery date
Styled the form to enhance accessibility and user experience

Questions

Ask any questions you have for your reviewer.
Could you check if the date validation logic aligns with the requirements?
Any tips for simplifying my CSS for better readability?

[netlify]

✅ Deploy Preview for cyf-ufd ready!

Name	Link
🔨 Latest commit	936eb0c
🔍 Latest deploy log	https://app.netlify.com/sites/cyf-ufd/deploys/672a08ad497d9c0008be07c8
😎 Deploy Preview	https://deploy-preview-302--cyf-ufd.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cjyuan]

• What is the lighthouse score you got from Chrome? On mine it is not yet 100.

• If you were asked to specify a constrained date range (says from 1/11/2024 to 28/11/2024) for the preferred delivery date, how would you enforce that with only HTML?

• In terms of simplifying CSS, there doesn't seem much room left to simplify. You can ask ChatGPT and then see if you agree with the suggested change.

Form looks good to me. Personally I prefer the label to be left justified, but I am not qualified to give advice on design.

[mrvicthor]

Hi @samisardarzai ,
Excellent work here.
However, I have left a few comments here for you to address.

[mrvicthor]

Hi @samisardarzai ,
Excellent work here with the form.

[mrvicthor]

Hi @samisardarzai ,
Just a nit-pick, apart from the border, and box-shadow (where the size is fixed), I think it is better to use rem as opposed to px.

[samisardarzai]

Hello @mrvicthor, thank you for your feedback! I will look into making the changes based on your suggestions as well.

[samisardarzai]

Hello and thank you for your feedback @cjyuan

1. Lighthouse Score:
I ran the Lighthouse test on my setup, and both mobile and desktop scores are at 100/100. I’ve attached a screenshot to show the results.

2. Date Range Constraint:
To enforce a constrained date range in HTML, I set the min and max attributes on the date input field. This limits the date selection from 1st November 2024 to 28th November 2024, ensuring users can only pick a date within that range.

3. CSS Simplification:
After reviewing the CSS, I did simplify it further as much as possible. I combined some of the selectors and minimized the redundancy by grouping shared properties together. The changes mostly involved merging styles for input, select, and button elements, and using shorthand for the box-shadow property. This made the code cleaner without altering the design.

[cjyuan]

Form looks good!

[samisardarzai]

@cjyuan Thank you !