hellohien / whats-cooking

Don't know what to cook? Take the quiz to generate a custom recipe!

Hi there, I'm Hien 👋

I'm a Software Developer based in Orange County, CA. I’m dedicated to developing accessible, user-friendly applications that engage users through responsive design and creative flairs.

Skills

Connect With Me

• Email
  

whats-cooking's Issues

User can add a dish to their Favorites

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• Update recipe generating function to include a heart icon
• Add HTML for the Favorites page and a div[data-view="favorites"]
• Listen for clicks on the heart icon of the rendered recipe
• Toggle heart icon between gray and red when icon is clicked
• Verify that when heart icon is clicked, the generated recipe is saved to local storage along with the rest of the data model on page reload
• Display the favorited recipe on the Favorites page
• Remove all CSS styling that had no affect or was otherwise unnecessary
• Test all functionality again in a private browsing session
• Fix all errors

User can submit their answers

⚙️ Feature

A user can submit their answers about their preferences on a dish

📐 Functionality

Allow users to choose what type of meal they want and if they have a main ingredient to go off of

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• Add a home page HTML section
• Add 2 HTML forms
• Add a data-view attribute to each section
• Ensure that the form looks nice on both mobile-sized and desktop-sized screens
• Make a get request in getRecipe() passing in 2 parameters
• Create a data model
• Listen for submit events on form 1 and:
  • store the value clicked as an argument in getRecipeData()
• Show the next form when the Next button is clicked
• Listen for submit events on form 2 and:
  • store the value clicked as another argument in getRecipeData()
• Test to make sure the values match your parameters
• Remove all CSS styling that had no affect or was otherwise unnecessary

Polish app

Rationale

Every portfolio project website needs polish before being ready for presentation to employers. Please complete the checklist items below in-order on your Final Project.

✅ Task List

• Verify the consistency of your site's theme.
  • The <title> should fall in line with the site's overall purpose. ajax-project is not specific enough.
  • If the site has a favicon, it should match the site's theme.
  • The site's brand (logo and/or text) should be visible and consistently placed on every page. Clicking the site's brand should navigate the user back to the home page.
  • A main heading (<h1>) should be visible near the top of every page. It should indicate which page the user is currently on. It should be consistently placed on every page (excluding the landing page, which may have it somewhere more prominent).
  • Site navigation links should be visible and consistently placed on every page of the site.
  • Every page of the site should use a consistent color pallette consisting of 2-5 colors (excluding images and videos). All text should either be light-text-on-dark-background or dark-text-on-light-background to keep text readable.
  • Check that every piece of the site is described obviously and accurately enough so a new user can figure out what it's for.
• Verify the site's HTML has good semantics. For any changes to the HTML structure, update the CSS as-needed to prevent the UI from breaking.
  • Each tabular list of things should be in a well-structured table (<table>).
  • Each non-tabular list of things (including, for example, site navigation or a grid of images) should be in a well-structured list (<ul> or <ol>).
  • Each input with special input restrictions should have an appropriate input type (type="number" for numbers, type="email" for emails, etc.).
  • Each clickable element that triggers a non-GET network request on a click should be a submit button (type="submit") for a form (<form>).
  • Each clickable element that sets inputs back to their default state should be a reset button (type="reset") for the form (<form>) containing those inputs.
  • Each clickable element that triggers navigation within the page or to another page/site should be an anchor tag (<a>).
  • Each clickable element that triggers other site functionality should be a normal button (type="button").
  • Each image which is important to the content of the site (not just for visual appeal) should be an image tag (<img>).
• Verify the site's layout fits and effectively uses space on all commonly-used device sizes, including:
  • Wide-screen Desktop/Laptop (1920px-by-947px)
  • iPad (portrait and landscape)
  • iPhone X (portrait and landscape)
  • iPhone SE 2 (portrait and landscape), aka iPhone 6/7/8
• Verify that each interactive element on the site looks and feels interactive:
  • Links should be colored differently from surrounding text (if text is dark, the default blue usually works) to stand out. Hovering over a link should change the cursor to a pointer, and:
    • If the link only contains text (including font-based icons), either change the link's color or add/remove an underline.
    • If the link contains non-text content (such as an image), change the link's appearance in some way (color, text-decoration, outline, box-shadow, background-color, etc.). Make sure the link's overall size and position don't change.
  • Buttons should clearly stand out from the surrounding content, using a different background-color and/or a border. Hovering over a button should change the cursor to a pointer and change the button's appearance in some way (color, text-decoration, outline, box-shadow, background-color, etc.) without changing the button's overall size or position.
  • If a single link/button and a single input are associated with each other, while the user is :focused on the input, pressing Enter/Return should trigger the link/button.
• Verify that each API request (that isn't part of initial page load) handles network wait times and failures gracefully (test using inspector Network tab):
  • While an API call is in-progress, a loading message or animation should be displayed and related buttons should be disabled. When the API call stops (regardless of outcome), the loading message/spinner should disappear, and related buttons should re-enable (if they're still being displayed).
  • When a GET API call responds with an empty data set (no error), the client should display an appropriate message.
  • When an API call loses connection before completing, the client should let the user know there was a connection issue.
  • When an API call produces an error response, the client should communicate it to the user appropriately.
  • Regardless of the type of network failure, users should be able to easily retry the request without navigating back to the page or re-entering a bunch of form information.
• Verify that the following common issues are addressed:
  • Address any console errors (other than a missing favicon), if possible.
  • Ensure no images are stretched out of their natural aspect ratio, regardless of screen size.
  • API-generated lists/tables have a sort (of some...sort) applied to them to prevent records from shuffling around on re-render.
  • In tables, fixed-decimal columns (such as currencies) are right-aligned to keep decimal points aligned.
• For each page, run the automatic Accessibility tests (and only the those tests) in the Lighthouse testing tool on both Mobile and Desktop, fixing each issue that comes up. Re-run it until all issues are addressed.

User can view their Favorites

⚙️ Feature

What capability will users have when this feature is merged?

Once a user saves a recipe, they'll want to be able to view it later

📐 Functionality

A description of how the application will work from the perspective of the user.

Display the user's favorited recipes from newest to oldest saves

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• Ensure that clicking the heart icon creates a new DOM tree for it and adds it to the Favorites page
• Clean up all unnecessary styling

User can delete an item in their Favorites

⚙️ Feature

What capability will users have when this feature is merged?

If a user decides that they no longer want to keep a recipe saved, they should be able to remove it.

📐 Functionality

A description of how the application will work from the perspective of the user.

Allow users to unsave a recipe from Favorites

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• Show modal if user clicks the heart icon more than once on the recipe generated page
• Remove the recipe from the data model and the DOM tree from the Favorites page if the user clicks the heart icon from the Favorites page
• Remove all CSS styling that had no affect or was otherwise unnecessary
• Test all functionality again in a private browsing session
• Fix all errors

User can view the recommended dish

⚙️ Feature

What capability will users have when this feature is merged?

A user can view their recommended dish

📐 Functionality

A description of how the application will work from the perspective of the user

Allow users to view their recommended dish and retake the quiz if they chooses

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• Add a sibling div[data-view="recommendedRecipe"] to the HTML
• Add some dummy recipe in the HTML and style them to match the wireframe
• Check that the page looks good on both mobile and desktop screens
• Define a function that takes a single recipe object and returns a DOM tree that matches the example recipe in the HTML
• In the XHR request event listener, create a DOM tree for the recommend recipe and append it to the page
• Remove the example HTML recipe once the recommended recipe is successfully being appended to the DOM on page load
• Add a navigation item to the bottom of the page to retake the quiz
• Clear the generated recipe data
• Clean up all unnecessary styling