Today, we'll be building a prototype of a small application about Ian's favorite soccer team, Liverpool FC. If you don't like Liverpool, 1. sorry, and 2. feel free to change the data and personalize your app!
There's a section in this Readme file for your notes on each deliverable. As you go through the deliverables, write down some notes in this file on how you solved each problem. It'll help reinforce what you learned and give you a head start next time you see a similar problem.
A note on notation: when you see an element like h1#header in the Readme, that refers to the element's tag name and the CSS selector. For example, h1#header looks like this in the HTML:
<h1 id="header">Some text here</h1>And div.players-container looks like this (note the CSS class selector syntax):
<div class="player-container">
<!-- child elements here -->
</div>Open the index.html file in your browser and check the console in Chrome Dev Tools. You'll notice the console.log from line 2 of the index.js file is returning null instead of showing the h1#header element.
Figure out what you need to change to give Javascript access to the h1#header element.
YOUR NOTES
Needed to defer the scripts so it would not run the js file until the whole html file is loaded
Now that you have access to the h1#header element, use Javascript to change the element's font color to red (of course).
YOUR NOTES
Accessed the header element found
Used header.style.color = 'red' to change color of font
Now that we've got a beautiful red header, we can show some players on the page. The player data is stored in a variable called PLAYERS in the data.js file - you can still access that variable in your index.js file (see if you can figure out why!).
First, uncomment the console.log under Deliverable 3 in the index.js file to see the data in the console. For each player in our application, we want to render their information on the DOM inside the div#player-container element.
Create a DOM element that looks like this for each player and append it to the div.player-container:
<div class="player" data-number="(Player Number)">
<h3>
{player name} (<em>{player nickname}</em>)
</h3>
<img src="{player image}" alt="{player name}">
</div>YOUR NOTES
1. Find player container with querySelector, save to variable
2. Run a forEach on the player container and pass in a new function that creates the player object with html data
3. create function that passes in the player instance:
- create new div element, save to variable
- add class to that element
- set innerHTML of that variable to whatever html structure you want
- append that detail(saved in variable) to the player container
Uh-oh! A Manchester City player, Raheem Sterling, snuck into our list. Use Javascript to find the element with the [data-number='7'] attribute, and remove that element from the page.
Hint: You can use querySelector with CSS Attribute Selectors to find an element with a specific data-number.
YOUR NOTES
User querySelector to search for "[data-number='7']", save to variable
Call variable.remove() to remove from page