Exercises: Chores vs. Hobbies

The following exercises walk you through the process of modifying existing components and creating new ones.

Starter Code

For this set of exercises, you will need a copy of the LaunchCode React projects repository. If you haven’t done so already,

1. Fork the react-exercises-and-studios repository on GitHub.
2. Clone your fork.

Navigate into the exercises now:

   $ pwd
      react-projects
   $ ls
      part1 part2 part3
   $ cd part1
   $ cd exercises

You should be able to run npm start, but the page will not look pretty. Time to fix that!

Part 1: Modify the CSS

The MovieList and ChoresList components have been created, but so far they appear pretty bland. Let’s change that.

1. Change the movie list text by adjusting the code in MovieList.module.css to accomplish the following:

   1. The text for the heading and list items can be any color EXCEPT black. (HINT: Take advantage of the movieText class).
   2. The movie list should have heading that aligns to the left.
   3. The font size should be large enough to easily read.
   Check Your Solution

   .movieText {
      color: purple;
      font-size: 1.3vw;
      text-align: left;
   }
   
   .movieHeading {
      text-align: left;
   }

2. Change the chore list text by adjusting the code in ChoresList.module.css to accomplish the following:

   1. Use a different font, with a size large enough to easily read.
   2. The text color should be different from the movie list, but not black.
   3. The chores list should have an underlined heading.
   4. The chores in the list should be italicized.

Add More Movies

The list of movies is built using an array defined in MovieList.jsx.

3. Add two more items to the movies array.

   Check Your Solution

   const movies = ["Pride and Prejudice", "Howl's Moving Castle", "Legally Blonde", "Star Wars"];

4. Add two more <li></li> elements to the component and use JSX to reference the new movies in the array.

Complete the BookList Component

5. The BookList component has been generated, but it is incomplete. The page needs more images, which also need to be smaller in size.

   1. In the BookList function, assign a better section heading to the pageTitle variable.

   2. The book variables should hold URLs for images, but only one is is filled in and it isn’t a valid link. Update the three variables to include valid link addresses for three new book releases. To copy the URL for an image on the web, right-click (or control-click) on the image and select the “Copy Image Address” menu option.

   3. In the return statement for this component, use JSX in the img tags to display your chosen images and update the alt text to reflect what book you are linking.

         <img src={book1} alt="Appropriate text for the book">

   4. Refresh the webpage to check the updated content.

   Check Your Solution

   This solution includes three books from the latest releases the week we were working on this book. Your code will have different books!

   <div>
   <h3>{pageTitle}</h3>
   <img src={book1} alt="Romantic Comedy by Curtis Sittenfield" />
   <img src={book2} alt="Tress of the Emerald Sea by Brandon Sanderson" />
   <img src={book3} alt="The London Seance Society by Sarah Penner" />
   </div>

Before moving on, save and commit your work.

Part 2: Add Another Component

7. The page needs a set of links for the websites you use to keep track of or shop for your favorite hobbies.

   1. Create a new file called HobbyLinks for a new functional component called HobbyLinks.

   2. In the HobbyLinks() function, define the variable hobbyLinks and assign it an array that contains two or more URLs for websites that pertain to your hobbies.

   3. In the return statement for this component, add a set of <a> tags for the web links. Each link should be on its own line.

   4. Inside each <a> tag, set the href attribute equal to a placeholder for an element in the hobbyLinks array:

         <a href = {hobbyLinks[0]}>Link text...</a>

   5. Add <HobbyLinks /> to App.js. Save all of your changes, then refresh the page to see your new content.

   Check Your Solution

    <div className="App">
      <MovieList />
      <ChoresList />
      <BookList />
      <HobbyLinks />
    </div>

Part 3: Rearrange the Components

The content on the page appears quite jumbled, since we gave you no guidance on where to put the components in App.js. Fortunately, templates allow us to easily move items around the framework.

8. Rearrange the components etc. to create a specific page layout:

   1. You now have three components that could be grouped together and one that doesn’t belong with the others. Put the odd one out at the top of the page.
   2. In App.css, you will find a class called similarComponents. Wrap the three components that go together in a <div> and assign it this class.
   Check Your Solution

   <div className="App">
      <ChoresList />
      <div className="similarComponents">
        <MovieList />
        <BookList />
        <HobbyLinks />
      </div>
    </div>

Your final page should have this format:

Optional Final Touches

9. To boost your practice, complete one or more of the following:

   1. Change the background of one element of a component to a decent color, image or pattern.
   2. Add a border around one or more of the components on the page.

Sanity Check

The react-exercises-and-studios repository contains two branches:

1. A main branch with all the starter code for lessons 1, 2, and 3.
2. A solutions branch with completed code.

If you get stuck on a particular exercise:

1. Try again.
2. Ask your IA, instructor, classmates, or Google for tips.
3. Try again.
4. Take a break and give your brain a chance to rest.
5. Try again.
6. Feel completely justified in switching to the solutions branch to check the code.