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