Exercise Solutions: Angular, Lesson 1

Part 1: Modify the CSS

  1. Change the movie list text by adjusting the code in movie-list.component.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 movies class).

    2. The movie list should have a centered heading.

    3. The font size should be large enough to easily read.

    1
2
3
4
5
6
7
8
    .movies {
   color: purple;
   font-size: 1.3vw;
}

h3 {
   text-align: center;
}

    Back to the exercises

Add More Movies

  1. Add two more items to the movies array.

    movies = ['The Manchurian Candidate', 'Oceans 8', 'The Incredibles', 'Hidden Figures'];

    Back to the exercises

Complete the fav-photos Component

  1. The fav-photos component has been generated, but it is incomplete. The page needs more images, which also need to be smaller in size.

    1. In the FavPhotosComponent class, assign a better section heading to the photosTitle variable.

      photosTitle = 'Random Images';

    1. In the .html file for this component, use placeholders in the img tags to display your chosen images.

      <img src="{{image1}}" alt="Oops! Missing photo!">

    1. Use the .css file for this component to make all the images be the same size.

      img {
   width: 40%;
   height: auto;
}

    Back to the exercises

Part 2: Add More Components

  1. The page needs a set of links to favorite websites.

    1. Generate a fav-links component. Open fav-links.component.ts and shorten the tag name to just fav-links.

      @Component({
   selector: 'fav-links',
   templateUrl: './fav-links.component.html',
   styleUrls: ['./fav-links.component.css']
})

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

      <a href = "{{favLinks[0]}}">LaunchCode</a> <br>
<a href = "{{favLinks[1]}}">WebElements</a>

    Back to the exercises

Part 3: Rearrange the Components

  1. Rearrange the tags fav-photos, fav-links, page-title, etc. to create a specific page layout:

    1. app.component.html has <div> tags to set up a three-column row. Use this to arrange the movie list, images, and chore list.

      <div class="col-3">
   <movie-list></movie-list>
</div>

<div class="col-3">
   <fav-photos></fav-photos>
</div>

<div class="col-3">
   <chores-list></chores-list>
</div>

    1. Add a horizontal line below the three lists with the <hr> tag.

      <!-- three lists are here -->
</div>
<hr>
<fav-links></fav-links>

    Back to the exercises