Let's get some practice modifying the DOM and working with our strings and numbers. Below, you are going to see the continuation of our profile page from the previous lab. You'll notice, we are starting to build out the world's simplest version of your Facebook profile. As the future brilliant founder of a new social network, you need to implement the functionality for when someone gets a new friend, and when they change their current employer. I know that this is a very simplistic version, but somewhere in the code for Facebook, Twitter, Pinterest and all of the other social networks is the exact code you are about to write. Only a few lessons in and you're on your way!
First, let's work on adding a new friend. Use the console (right click, inspect, then change the
top dropdown to CodePen).
One you have the console open, discover what the
id of the friends value (10) is. To do this, select the Element Inspector icon and then hover over the number
10. You should see that the
friends. That's pretty easy. Since this is an
id we prefix it with a
# and know that to grab this item we will need the code
document.querySelector("#friends"). If you try that out in the console, you should see the
friends element! Now, to modify the number we need to change its
innerHTML. Go ahead and change that by writing
document.querySelector("#friends").innerHTML="11" in the console. This should immediately work.
We did the first step, but I want you to take it from here. We need to change this code from just always setting to
11, to just adding
1 to the current value. A few steps to take:
innerHTMLfrom setting the value to just number
11, to adding
1to the current value. First get it working in the console, then change it in the JS section of the CodePen.
document.querySelector("#friends")line into a variable and use that variable to modify the
Now let's move onto the employer section. You're going to be a bit more independent here. Can you modify the employer to be correct? It will be fairly similar to the code from the Making Friends section. A few steps:
innerHTMLon that selector to change the value to a different employer.
<br>is how to make a new line in HTML. Also is this a String or an Integer?
Congrats! You just built a feature for the next Social Network.
var friends = document.querySelector("#friends") friends.innerHTML = parseInt(friends.innerHTML) + 1
var employer = document.querySelector("#employer") employer.innerHTML = "IBM"
var employer = document.querySelector("#employer") employer.innerHTML = employer.innerHTML + "<br>IBM"
View Strings And Numbers Lab on Learn.co and start learning to code for free.