Feature development to apply our learning about local Storage.

Main tasks: -Implement the following interactions: *When the user changes the content of any input field, the data is saved to the local storage. *When the user loads the page, if there is any data in the local storage the input fields are pre-filled with this data. *Create a single JavaScript object with all the data from the entire form and save it in local storage. Do not create one local storage entry per input field.

This feature implements a simple validation:

-The content of the email field has to be in lower case.

We also implement the following interactions:

When the user submits the form, we check if the email is in lower case. If the validation is OK, the form is sent. If the validation is not OK, we show an error message to the user near the submit button informing them of the error and the form is not sent.

The main objective of this feature is to implement the following interactions:

• When the user clicks (or taps) the button to check project details, the popup with details about the project appears.
• When the user clicks (or taps) the close (X) button, the popup disappears.
• Implement popups for both mobile and desktop screen sizes: Mobile popup

Create a dropdown mobile menu and apply some js query to make it responsive to user interaction

The most important project requirements are:

When the user clicks (or taps) the hamburger button, the mobile menu appears. When the user clicks (or taps) the close (X) button, the mobile menu disappears. When the user clicks (or taps) any of the mobile menu options, the mobile menu disappears. When the user clicks (or taps) any of the mobile menu options, a correct part of the page is displayed.

We are going through these aspects:

Page titles - Changed the title to "Juan Diaz Portfolio" https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R9

Image text alternatives - updated https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R40-R44

https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R175-R179

Text heading - Fixed heading hierarchy for the main heading at the beginning of the page https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R30

Color contrast - fixed several text colors (also there's others that won't pass contrast text. But changing them would make them way different than Figma design)

https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R46

https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R122

https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R256

https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R266

https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R266

Resize - no issues found Interaction - no issues found Moving content - no issues found Multimedia - no issues found The basic structure of the page - no issues found

In this Group Project, the contact form is added in the footer section with the following fields and requirements:

Name field accepts up to 30 chars. Email field accepts only emails. Message field accepts up to 500 chars. All fields have placeholder text. All fields have the correct type. A user cannot submit the form if one or more of the fields is empty. Formspree service is used to submit the form in the generated link Contact Form elements are layout in Flexbox. Implement the button Hover interactions This project is completed with the help of my coding partners:

Abel Gebeyehu (https://github.com/AbelG101) samlorlah https://github.com/samlorlah

NOTE: I am using Figma Template

For the sake of doing the peer project with @juanmanuelbyc, we get to create a bug in our project and the peer will use Developer tools to debug the code here is my debug process :

• On line 243 they were missing an closing parenthesis to close the addEventListerner function

• Kindly style the nav links and the logo to look like the figma design i.e remove the underline.
• The popup images should be resized in desktop i.e to look clearer.
• Please make the header position fixed in both mobile and desktop.
• Adjust the width and the height of the popup in mobile to fit the screen.
• It will be good to change the text color of the error message for email validation to red for accessibility.

HTML is structured very nicely but there are a few changes that were recommended in the meeting:

• Create a separate class for the CSS properties that are being used repeatedly in style.css (for example display: flex)
• Import via single URL for different font weights for a same font family (for example: @import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700;800&display=swap');)