Lets Build a Phone, pt. 2 with a little JavaScript
When last we met, we built a simple phone together, with a super sweet picture of my dog. Today, I think we can “close the image app” and put the screen back to home.
*Note: in the first lesson, I had you set the #base to the position of absolute. I’ve modified that to sit as position:relative; This gives us a little more flexibility with the phone later.
First things first. We need to build the home screen. This is what we are going to work on first:
I am going to go through the process of building one of these icons, but will leave it up to you and your creativity to fill out the screen as you see fit. You are welcome to mimic my icons, but feel free to build icons that suit your needs!
Home Icon
First of all, I want to introduce you to an amazing site called Font Awesome. With this website, you won’t have to worry about building each icon in css. Instead, we can focus on the functionality. In your codepen, go to ‘Settings’ and click on ‘CSS’. At the bottom of this box on the left, you should see a dropdown for ‘Quck-Add’. Select Bootstrap 4. (Bootstrap is a great HTML, CSS, and JS framework. Mobile first is how sites should be built, and this framework takes out a lot of the guess work.)
You’ll also want to add in the most current version of Font Awesome Bootstrap CDN. Once you have this added to your site, it should look something like this:
Now on the the CSS! Each icon is going to have similar traits, so we will start with a class of .icon to achieve better code readability. We want the icon, itself, to be white, the corners should all be rounded, and the z-index will all be the same.
.icon{
color: #fff;
border-radius: 3px;
z-index: 2;
}Excellent! Now lets set up a custom icon. I’m going to call this #icon1.
We want each icon is sit in a specific place so we are going to use the absolute position again. We also want each icon to have a different color. I’m using the background-color option of rgba(); This is because I want the background color to have a slightly opaque background. If you recall from the first tutorial, rgba stands for (Red, Green, Blue, Alpha). The alpha is where we decide how transparent our background is going to be.
#icon1{
position: absolute;
top: 60px;
left: 20px;
background-color: rgba(0,174,255, 0.7);
padding: 5px 8px;
}Now lets add in our HTML div tag to include the icon. Remember, we have the class of “icon” as well as an id tag of “icon1”.
<div id="icon1" class="icon"> </div>Great, now where is the icon? Remember the site we referenced earlier? Let’s go visit the icons page on Font Awesome to find the home icon that we want to use. You can scroll through the many options or use the search bar to find the icon you’re looking for. In our case, we are going to search for ‘home’.
Once you find the house icon, click on it and you should be taken to the page with all of the information for that home icon. Now you can copy the link and add it to your HTML:
<div id="icon1" class="icon">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</div>But wait! There’s more!
If you look at my link vs. your link, you will see that I have a little extra going on there. fa-2x is telling my site that I want the icon to be 2-times larger than normal. If you go to the examples page you will see the different size options that you can choose from.
Outstanding! You’ve just build an icon. How does it look? I bet you can’t see it, can you? That is because it is sitting behind the picture of my dog.
Lets hide that div so that we can see our handy work.
Wrap the div like this:
<!-- <div id="base2" class="base1"></div> -->This turns your line of HTML into a comment that is not displayed.
Hopefully, now you can see your icon. It should look a little something like this:
Hmmm. Its missing something. The background is black! Lets add some color to that background. The div with the image of my dog is called #base2. Let’s make another div with an id of #base2b. We want to add in some color and also make sure that the layer sits behind the dog image.
I’m going to make my background a few variations of a color. You can do this by setting the background to “linear-gradient”. You can then first set the degree you want the colors to move to, then begin adding in your hex colors. I chose a blue/green color, but feel free to use whatever color combination that makes you happiest!
#base2b{
background: linear-gradient(150deg, #a2e0e1, #69b6b7, #c9e0e1);
z-index: 1;
}
That works for me! Now let’s continue on adding in the rest of the icons.
When all is said and done, here is my finished home page:
<div id="icon1" class="icon"><i class="fa fa-home fa-2x" aria-hidden="true"></i></div>
<div id="icon2" class="icon"><i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i></div>
<div id="icon3" class="icon"><i class="fa fa-codepen fa-2x" aria-hidden="true"></i></div>
<div id="icon4" class="icon"><i class="fa fa-phone fa-2x" aria-hidden="true"></i></div>
<div id="icon5" class="icon"><i class="fa fa-podcast fa-2x" aria-hidden="true"></i></div>
<div id="icon6" class="icon"><i class="fa fa-music fa-2x" aria-hidden="true"></i></div>
<div id="icon7" class="icon"><i class="fa fa-newspaper-o fa-2x" aria-hidden="true"></i></div>
<div id="icon8" class="icon"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></div>
<div id="icon9" class="icon"><i class="fa fa-slack fa-2x" aria-hidden="true"></i></div>
<div id="icon10" class="icon"><i class="fa fa-github fa-2x" aria-hidden="true"></i></div>
<div id="icon11" class="icon"><i class="fa fa-chrome fa-2x" aria-hidden="true"></i></div>
<div id="icon12" class="icon"><i class="fa fa-apple fa-2x" aria-hidden="true"></i></div>Perfect! I think its time to ‘uncomment’ the div with my dog and get the home button to do that work for us. Just remove the tags we added in earlier.
<!-- <div id="base2" class="base1"></div> -->
<div id="base2" class="base1"></div>Now that the dog is back, lets add in some jQuery to the home button so when we click it, the image goes away.
First things first. Let’s go back into your codepen settings. Select JavaScript, and in the ‘Quick-add’ dropdown, we’ll select jQuery.
Click ‘Save & Close’ and lets get down to business!
jQuery can be called by using the dollar symbol ($). So we are going to start with that at the beginning of our lines. Next we have to tell it to recognize the div with the circle in it. We do that by using the id.
$(#circle2)So now, the code know that circle2 is up to shenanigans. But what kind? Well, the circle has to be clicked, right? Lets add that in there. Then, when that button is ‘clicked’ something has to happen (or function). Sounds like a plan so far. Click #circle2 and make something happen. Got it. What should happen? Well, let’s just toggle that button on and off telling it to turn the image (#base2) on and off.
$('#circle2').click(function() {
$('#base2').toggle("slow");
});Amazing! Now, when we are done looking at my dog, we can click the home button and our home screen shows up.
How wonderful is that! The jQuery is just a couple lines of code, but we’ve now got a functioning home button!
Feel free to see the full version at CodePen.
I hope you’ve enjoyed this tutorial so far! If you dig my vibe, feel free to follow me on Twitter!
Until next time! Have an amazing day!
