Exercise Solutions: Angular, Lesson 1¶

Part 1: Modify the CSS¶

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.movies {
2   color: purple;
3   font-size: 1.3vw;
4}
5
6h3 {
7   text-align: center;
8}
```
Back to the exercises

Add More Movies¶

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¶

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¶

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¶

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.
```

</div>
<hr>
<fav-links></fav-links>
```
Back to the exercises