Project Functionality

COURSE 8 – FRONT-END DEVELOPER CAPSTONE QUIZ ANSWERS

Week 3: Project Functionality

Meta Front-End Developer Professional Certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

TABLE OF CONTENT

Project functionality INTRODUCTION

This module covers Project Functionality for the Meta Front-End Developer Professional Certificate program offered on Coursera. It is designed to teach React and coding a table booking system, as well as explore important aspects of user experience (UX) such as form validation and accessibility. Additionally, students will learn techniques for UX/UI usability evaluation through practical exercises. By the end of this module, learners will have learned how to develop an interactive react application from scratch with best practices in mind and will be equipped with essential tools to build successful products that meet customer needs.

A comprehensive unit test suite will also be developed along the way to facilitate effective debugging strategies throughout the development process. This module provides the necessary skillsets for aspiring frontend developers to gain a competitive edge in the industry.

Learning Objectives

  • Set up the frontend of a table booking system
  • Improve the UX with HTML5 validation and live data

READINESS CHECK: DID YOU SET UP A COMPONENT FOR VIEWING THE AVAILABLE BOOKINGS?

1. Did you lift state up?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you pass state down to Bookings and BookingForm?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU SHARE TABLE BOOKING STATE ACROSS COMPONENTS?

1. Did you life up the available times state to the Main component?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you change the available times to use a reducer?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: ARE YOUR COMPONENTS SEMANTICALLY CORRECT?

1. Did you use the correct HTML5 tags? 

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you use React fragments instead of div tags where redundant?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you use ARIA attributes where needed?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU SET UP COMPONENT UNIT TESTS?

1. Did you test for some static text being rendered in the Bookings component? 

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you test that the BookingsForm component can be submitted by the user?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

KNOWLEDGE CHECK: TABLE BOOKING SYSTEM

1. What is the purpose of the useState hook in React?

  • To bind a value to the props of a component. 
  • To bind an event handler to an element. 
  • To manage the component’s state (CORRECT)
  • To manage the component’s context 

Correct: That’s correct. The useState hook allows you to manage the component’s state by declaring a state variable and a setter function for updating the state.

2. What is missing from the code below?

import { useState } from "react";


export default function App() {
  const [restaurantName, setRestaurantName] = useState();
  return <h1>{restaurantName}</h1>;
}
  • The useState hook import statement
  • An initial value for the state variable restaurantName (CORRECT)
  • The setRestaurantName function.
  • useReducer hook was not used

Correct: That’s correct. The useState hook requires an initial value to be passed as an argument in order to properly bind a value to the state of a component. Without an initial value, the state variable restaurantName will be undefined and the component will not render correctly.

3. Controlled components are more flexible than uncontrolled components.

  • True
  • False (CORRECT)

Correct: That’s correct. Uncontrolled components are generally more flexible because they do not rely on the parent component to set their value and can use the browser’s default behavior to manage their value.

4. What is unit testing in React?

  • A type of testing that ensures that a complete application is working as intended.
  • A type of testing that involves manually testing a component’s UI.
  • A type of testing that ensures that a component’s props and state are correctly being passed down to its children. 
  • A type of testing that ensures that individual units of code are working as intended. (CORRECT)

Correct: That’s correct. Unit testing involves testing individual units of code to ensure that they are working as intended.

5. What is the main difference between the useState and useReducer hooks in React?

  • useState is used for managing component state, while useReducer is used for managing global state.
  • useState is used for managing component state, while useReducer is used for managing the component lifecycle. 
  • useState is used for managing component state, while useReducer is used for managing the component’s UI. 
  • useState is used for simple state updates, while useReducer is used for complex state updates. (CORRECT)

Correct: That’s correct. The useState hook is used for simple state updates, while the useReducer hook is used for more complex state updates that involve reducing the current state and an action to a new state.

READINESS CHECK: IS YOUR BOOKINGS PAGE USING “LIVE” DATA?

1. Did you add a table showing the data from the bookingData array? 

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: IS THE TABLE BOOKING SYSTEM WORKING END-TO-END?

1. Did you update the addition of new booking to the existing data? 

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you update the data using local storage?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU SET UP THE API UNIT TESTS?

1. Did you write the unit tests for writing to local storage in React? 

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you write the unit tests for reading from the local storage in React?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU COMMIT YOUR PROGRESS TO GIT?

1. Did you commit your progress to Git?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you push your local commits to GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you verify that the commits are showing on your repository’s page on GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

KNOWLEDGE CHECK: INTERACTING WITH THE API

1. Why should you never call hooks inside a nested function in react?

  • To ensure that the component updates correctly
  • To prevent memory leaks
  • Because hooks can only be called from the top level of a function component (CORRECT)
  • To avoid unnecessary re-renders of the component

Correct: That’s correct. Hooks must be called at the top level of a function component, and not inside a nested function. This is because hooks rely on the order in which they are called to determine the state of a component. If hooks are called inside a nested function, the order in which they are called may not be consistent, leading to unexpected behavior.

2. True or false. The fetch function should be used inside the componentDidMount lifecycle method or useEffect hook.

  • True (CORRECT)
  • False

Correct: That’s correct. The componentDidMount lifecycle method or the useEffect hook is the perfect place to use fetch calls to ensure the component doesn’t render before the external API data is received to avoid issues with the component not rendering correctly or with missing data being displayed.

3. When you receive a HTTP response using the fetch() API, how do you parse the data into a JavaScript object?

  • You should use the text() method of the response object to parse the data as a JSON object 
  • The fetch() API automatically parses the response data as a JSON object. 
  • You should use the JSON.parse() method to parse the response data as a JSON object. 
  • You should use the json() method of the response object to parse the data as a JSON object. (CORRECT)

Correct: That’s correct. To parse the response data as a JSON object, you should use the json() method of the response object.

4. Which of the following statements are true? Choose all that apply. 

  • The fetch() API call cannot make DELETE request
  • You cannot make multiple fetch() calls in the useEffect hook
  • You can load local JSON files in your React project (CORRECT)
  • If the external API returns JSON data, you need to exclusively parse it in the fetch() API (CORRECT)

Correct: That’s correct. You can load local JSON files in the react project by simply importing them as you do for other JavaScript files. 

Correct: That’s correct. You need to use the json() method of the response object to parse the data as a JSON object.

5. Complete the sentence: JSON is ______________. 

  • A file format and a data exchange format (CORRECT)
  • Only a data exchange format 
  • Only a file format 

Correct: That’s correct. JSON is both a file and data exchange format.

READINESS CHECK: IS YOUR BOOKING FORM VALIDATING USER DATA?

1. Did you implement client-side validation for the date input?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you implement client-side validation for the time input?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you implement client-side validation for the number input?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

4. Did you implement client-side validation for the select form element?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU SET UP THE FORM VALIDATION AND SUBMISSION UNIT TESTS?

1. Did you add unit tests for the form input validation?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you add unit tests for the form submission validation?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: IS YOUR APPLICATION ACCESSIBLE?

1. Did you improve the accessibility of your app by improving the semantic markup you’re using? 

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you use ARIA attributes?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you label the forms?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: HAVE YOU COMPLETED THE HEURISTICS USABILITY EVALUATION?

1. Did you complete the heuristics usability evaluation?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you apply severity ratings?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you improve your project accordingly?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

READINESS CHECK: DID YOU COMMIT YOUR PROGRESS TO GIT?

1. Did you commit your progress to Git?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

2. Did you push your local commits to GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

3. Did you verify that the commits are showing on your repository’s page on GitHub?

  • Yes (CORRECT)
  • No

Correct: Well done on completing the exercise!

KNOWLEDGE CHECK: IMPROVING THE EXPERIENCE

1. What is a heuristics evaluation?

  • A heuristics evaluation applies the brand style to a product, 
  • A heuristics evaluation examines and assesses the usability of a particular project. (CORRECT)
  • A heuristics evaluation detects accessibility problems.

Correct: That’s correct! A heuristics evaluation examines and assesses the usability of a particular project. 

2. Which of the following people are notable for making various product and UI design recommendations? Choose all that apply. 

  • Donald Knuth
  • Dennis Ritchie
  • Jakob Nielson (CORRECT)
  • Dieter Rams (CORRECT)

Correct: That’s correct. Jakob Nielsen founded the “discount usability engineering” movement for quick and affordable UI changes and devised 10 usability heuristics. His heuristics are probably the most-used usability heuristics for UI design.

Correct: That’s correct. Dieter Rams is a German industrial designer who created the 10 principles of good design, commonly referred to as the ten commandments.

3. There are four core principles of accessibility upon which WCAG (Web Content Accessibility Guidelines) has been built. Choose all that apply. 

  • Readable
  • Understandable (CORRECT)
  • Perceivable (CORRECT)
  • Robust (CORRECT)
  • Operable (CORRECT)

Correct: That’s correct! This means that users must be able to comprehend both the information and how the user interface works. 

Correct: That’s correct! Users need to be able to perceive the information presented to them and user interface components through sight, hearing or touch. 

Correct: That’s correct! This means that a wide range of user tools, including assistive technologies, can reliably understand your material. 

Correct: That’s correct! Users must be able to use the user interface and navigation. 

4. What is the term for the technical procedure where information is checked to determine if the data entered by the user is accurate? 

  • Validation (CORRECT)
  • Verification 
  • Double entry 

Correct: That’s Correct. Validation is the technical procedure where information is checked to see if the data entered by the user is accurate.

5. In linear validation, the form data is validated on the client side. 

  • True (CORRECT)
  • False

Correct: That’s correct. In this validation process, which is also called client-side validation, the form data is validated on the client side using various HTML attributes and JavaScript.

Coursera Meta Front-End Developer Professional Certificate Answers and Study Guide

Liking our content? Then don’t forget to ad us to your bookmarks so you can find us easily!

Weekly Breakdown | Meta Study Guides | Back to Top

Subscribe to Our Newsletter

MODULE QUIZ: PROJECT FUNCTIONALITY

1. What is the purpose of useState in the following code?

import { useState, useEffect } from "react";
function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      {" "}
      <p>You clicked {count} times</p>{" "}
      <button onClick={() => setCount(count + 1)}>Click me</button>{" "}
    </div>
  );
}
  • useState is used to add state and side effects to a functional component.
  • useState is used to define the component’s render method.
  • useState is used to set the initial state of the component. (CORRECT)
  • useState is used to add state to a functional component. (CORRECT)

Correct: That’s correct. The useState hook is used to set the initial state of the component, with a default value of 0.
Correct: That’s correct. The useState hook is used to add state to a functional component, allowing it to maintain and update state over time.

2. What is the benefit of useState over useReducer?

  • useReducer is more performant.
  • useState is more performant. (CORRECT)

Correct: That’s correct. The useState hook is more performant than useReducer because it does not require the overhead of creating a new dispatch function on every render.

3. Why do you use the useEffect hook in a react project? Choose all that apply.

  • To update the component’s state.
  • To trigger an effect when the component mounts or updates. (CORRECT)
  • To trigger an effect when a prop changes. (CORRECT)
  • To clean up effects before the component unmounts or re-renders. (CORRECT)
  • To perform side effects after a component renders. (CORRECT)

Correct: That’s correct. The useEffect is triggered when the component mounts or updates, allowing it to perform side effects based on the current state or props of the component.

Correct: That’s correct. The useEffect hook can be triggered when a prop changes, allowing it to perform side effects based on the updated prop value.

Correct: That’s correct. The useEffect can also be used to clean up effects before the component unmounts or re-renders, such as canceling an HTTP request or removing an event listener.

Correct: That’s correct. The useEffect hook is often used to perform side effects after a component renders, such as making an HTTP request or updating the document title.

4. True or false. Uncontrolled components are components that do not maintain their own state.

  • True 
  • False (CORRECT)

Correct: That’s correct. Uncontrolled components are components that do not maintain their own state and rely on an external source for their state, such as a form element or a parent component. In contrast, controlled components maintain their own state and control their own behavior and rendering.

5. Which of the following are common uses of JSON in a React project? Select all that apply.

  • To declare dependencies in package.json (CORRECT)
  • To send data to a REST API (CORRECT)
  • To receive data from a REST API (CORRECT)

Correct: That’s correct. package.json is used in Node and React projects to declare dependencies and other information.

Correct: That’s correct. JSON is often used to exchange data with a REST API over HTTP/S.

Correct: That’s correct. JSON is often used to exchange data with a REST API over HTTP/S.

6. What will be output if the following HTTP request fails?

 fetch('https://example.com/api/data') 
 .then(response => console.log("Success"))
  • Success
  • Fail
  • Nothing will be output. (CORRECT)

Correct: That’s correct. There is no catch function defined for the resulting promise, therefore, nothing will be output.

7. What is the benefit of unit testing in React? Choose all that apply.

  • It speeds up the development process.
  • It guarantees that the application will have no bugs.
  • It helps catch regressions early in the development process. (CORRECT)
  • It allows for easier debugging and maintenance. (CORRECT)
  • It helps ensure that individual components work as expected. (CORRECT)

Correct: That’s correct. By catching regressions early in the development process, unit testing can help prevent issues from cascading and becoming more difficult to fix later on.

Correct: That’s correct. By testing individual components in isolation, unit testing allows for easier debugging and maintenance because it can help identify issues more quickly and specifically.

Correct: That’s correct. Unit testing helps ensure that individual components work as expected by testing their behavior and output under different conditions.

8. What is this code in JavaScript:

/Make Your Reservation/?
  • RegExp object literal (CORRECT)
  • An array literal 
  • A string literal 

Correct: That’s correct. This code a RegExp object literal, because it is enclosed in / delimiters. 

9. True or false. “Operable” is one of four core principles of accessibility upon which WCAG (Web Content Accessibility Guidelines) has been built.

  • True (CORRECT)
  • False

Correct: That’s correct. “Operable” is one of the four core principles of accessibility, along with “Perceivable,” “Understandable,” and “Robust.” It refers to the requirement that users must be able to use the user interface and navigation in a way that is accessible to them. This includes providing keyboard accessibility for users who cannot use a mouse and ensuring that the user interface does not create barriers to accessing content or functionality.

10. Can you use arrow functions to update the state of a component?

  • No (CORRECT)
  • Only in some cases 
  • Yes
  • Only in certain type of state 

11. Which of the following are true about state in React? Select all that apply.      

  • Without state, components in React would be static.  (CORRECT)    
  • State is one of the foundations of React. (CORRECT)     
  • Forms and state are linked in React. (CORRECT)     
  • Components and state are linked in React. (CORRECT)

Correct: That’s correct! Without state, you would end up with static components that would not allow for any interactivity.       

Correct: That’s correct! Being able to work with state is one of the foundations of React.      

Correct: That’s correct! State in React also ties in with forms – specifically, understanding controlled and uncontrolled components.       

Correct: That’s correct! In React, components and state are inextricably linked.    

12. True or false: In JavaScript, the fetch() method is considered a façade function.      

  • True (CORRECT)
  • False

Correct: That’s correct. The fetch() method is considered a façade function because it is an API to the XHR browser functionality, which exists outside of the JavaScript engine, but is still a part of a browser.      

13. A UX designer’s job is to presume what users will want or need from a good or service about matters such as form validation and accessibility.      

  • False (CORRECT)
  • True

Correct: Correct. Since every user has a unique user experience, the most crucial thing to remember when creating a product is that even though you may have designed it, you may not be one of its users. As a result, you cannot presume what a user wants or needs.      

Project functionality CONCLUSION

In this module, you’ve coded the table booking system using React. You’ve also explored the importance of UX and form validation and written unit tests. Additionally, you’ve covered accessibility and UX and UI usability evaluation. These are all essential skills for professional developers.

By enrolling in Coursera now, you can start learning these skills today and set yourself up for success in your career. Don’t wait any longer, sign up now!

Previous Week
Next Week 4

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!

Subscribe