Lets Build a phone, pt. 3 — The Final Chapter

Well, here we are. A long road and we’re almost at the end. Its been a fun ride, and I’d like to thank you for traveling with me on this journey to building a css/javascript phone.

In lesson 1, we jumped into the bright world of CSS and built the foundation of a common cell phone, and used the adorable image of my dog as our screen.

Phone built out of CSS

In lesson 2 we added a home screen and some jQuery to toggle the image on and off.

CSS Phone with a splash of jQuery

In today’s lesson, we’re going to make some changes to our phone and make the camera icon turn the image on, and the home button turn the image off, just like a real phone. (We’ll call the phone “Pinocchio”)

Lets start with the icons. Right now they are sitting safely behind the layer #baseGlass. Well, this makes it difficult for us to click or tap these icons because the z-index currently makes them inaccessible.

Last week, we placed the class of .icon to have a z-index of 2, but our id of #baseGlass has a z-index of 4.

#baseGlass{  
background: linear-gradient(to left, rgba(150,150,150,0.4), rgba(150,150,150,0.1), rgba(255,255,255,0.4), rgba(150,150,150,0.1));
z-index: 4;
}
.icon{
color: #fff;
border-radius: 3px;
z-index: 2;
}

Let’s change that so our class of .icon has z-index of 5. This will place all of the icons on top of the glass.

.icon{
color: #fff;
border-radius: 3px;
z-index: 5;
}

I have gone through and changed the opacity of the icons so that they blend a little nicer. You can make these modifications as well, if you would like. You’ll just want to update the rgba() on each icon id:

#icon1{
position: absolute;
top: 60px;
left: 20px;
background-color: rgba(0,174,255, 0.7); /*modify 'a' in this line to the opacity you prefer */
padding: 5px 8px;
}

Take a look at your phone. The real one. When you first open your phone, is there an image or do you see your home screen? I, personally, see my home screen first. We should hide the image so that it displays as it should initially. To do this, we will add a line to our id of #base2 so that we cannot see the picture of my dog right away.

#base2{
background-image: url("https://carlakroll.com/images/tucker-stump-speech.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 2;
display:none; /*This is the new line to add to your code */
}

Great! Now our home screen is visible right away. If click on the home button, the image of my dog (or your own image) should display.

Time for some more jQuery!

Last week, we told our phone to toggle the home button to display the image on and off. That was great, and it worked perfectly, but now I think we can do better!

Lets tell our phone to show the image when we click the camera icon, and to hide the image when we click the home button. We have to also be mindful of our z-index during this process. We’ll begin deleting the current jQuery code completely and starting from scratch.

Now we will continue by telling the phone to show the picture. Our camera icon has an id of #icon2. We need to call that first and let it know what when #icon2 is ‘clicked’ we want something to happen. (A function).
When #icon2 is ‘clicked’ we want the div with the id of #base to display.

$('#icon2').click(function() {
$('#base2').show("fast");
});

Lets see what we have now, when we click on the camera icon:

Hmmmm. Not exactly what we were going for. We need those icons to go behind the image when the icon is clicked. For this, we just need to add one more line of code to tell the phone to change the .icon z-index to a lower number.

$('#icon2').click(function() {
$('#base2').show("fast");
$('.icon').css("z-index", 3);
});

Here, we are changing the class .icon css during the click. Now lets see what happens.

Wonderful! But now we can’t close the image. Lets add in another click function and tell our phone to hide that picture when we click the home button (#circle2).

Just like we did with the camera icon, we are going to start by calling the home button and telling our phone that when it is ‘clicked’, we want something (a function) to happen. Last time, we attached a .show to the div id of #base2. Can you guess what we’ll do in this function? 
Yes! we’ll attach a .hide to the id!

$('#circle2').click(function() {
$('#base2').hide("fast");
});

It works! Or does it? Lets try clicking the image icon again. 
Uh-oh! Its stuck behind the #baseGlass again. Lets add a line of code to our function to pull those icons back to the front of the phone.

$('#circle2').click(function() {
$('#base2').hide("fast");
$('.icon').css("z-index", 5);
});

Perfect! We now have a fully functional image icon and home button!

Check out the final product here

Now, you should have the skills to add some different functions to the rest of your phone icons if you want.

You’ve learned a lot from a simple phone. You now have an understanding of some CSS, HTML, and jQuery. I hope you’ve enjoyed this tutorial!

Keep hanging out with me, and we’ll begin a whole new adventure and keep coding together! If you dig my vibe, feel free to follow me on Twitter!

Until next time! Have an amazing day!