Part 7 - iPhone Breathalyzer - Finishing Touches

Key Takeaways

hello i'm gary simon of designcourse.com today is january 31st with the last day of the month and we have 32 videos for you already this year and today we are going to finish the mega tutorial iphone breathalyzer project by basically finishing up the html and css and a little javascript alright so as always check out designcourse.com the project files are available for free in the video uh description here in youtube and also subscribe here on youtube if you haven't yet all right let's get started right so the first thing we want to do i is get this working when you click it so yeah we're going to use jquery which is based on javascript and so just to get that up real quick let's bring that back up i download jquery we don't you can either download it or you can use the hosted version which is down here and so that's what i'm going to do i'm going to use the min one right here it's smaller in file size so just go to jquery.com download i'll link it as well and you can just put in this code once you have that copied we'll put it right here and it has to go inside the head tag and then also we'll just copy that or paste that again real quick and change the source to js forward slash script.js and then save it and then we have to create a new folder called js so over here new folder js and now it is in there there's no files in it so we have to create a new file and i'll i'll save that as script.js all right so now we are ready to roll okay so basically remember when it comes to css and also with javascript and jquery you access these items by their id or their class and also by their actual html elements if you wish so if you wish to target something specific like that toggle button you have to use the id associated with it uh let me real quick open that up real quick and get that back showing okay so when it comes to this button well we have to know what that id is so that we can look for the click so that is right there the id is toggle switch all right so basically to get started whenever you're working with jquery you the the opening the first line i always put is document dot ready function and close that one and then we have brackets here and i just push that down a few lines just give myself some some work some room to work and then just close it with these three characters alright so here's where everything will go inside this eye down here so what we want to do is the way you reference an id or an element is you start with the number sign or the cache sign parentheses then quotes and then the id in this case is toggle dash switch and then a period after the parentheses and now you have basically a ton of different ways we want to look for a click so we put in click function get rid of this one it created at the end and then we hit enter a few times and we close it up properly and the reason we add these three is because you know as in here we have this opening parentheses and then this closing one same thing with this with the function right there we close it right there all right so basically this says right here if the toggle switch uh any element that has that id if that is clicked then execute this inside here so what we want to happen is something to drop down which is if we go back we have to reference the id which is nav so jquery has what's called toggle so let's reference that first and that's nav toggle and close the parentheses and my child is like yelling downstairs all right so let's see what happens here make sure you've saved that we'll refresh this and of course nothing happens because that's life and the issue is i did not have this saved i just told you guys to save and i didn't save it myself so make sure you control s that and refresh and now it toggles down now this right here it's a little bit too close so obviously it's like way too close so we want to fix that real quick if we hit ctrl shift i it opened up off screen we clicked that little magnifying glass kind of see what we're working with and that is ul id equals nav so we're going to reference that in css real quick so let's get out our css custom and ul nav we want to adjust this though only for the 767 media query margin top i'll try 20 pixels and save that go back and refresh and click all right that's a lot better and also real quick i kind of want to make this so that when you hover over you'll see a black outline kind of or black background and so we'll do that here with css as well so all we have to do is take ul nav take that and then just put colon hover get that stuff out of there background dash color the color code for black and that's three zeros and we will refresh to see what this thing looks like again and right off the bat there's no padding to the left and that looks kind of just bad so what we want to do is go ahead and take let's see it would be a we'll put yeah right here we'll change this to i don't know i'd say and we'll start to start five pixels and go back all right so that looks a little bit better now also this image right here is overlapping this and that just looks stupid so we need to do a z index on this basically containing element which is ul nav again so we'll go back here to custom find ul nav up here and let's see here z dash index we'll put two and then display block just to make sure that works there and refresh and of course it is not working one second and that is because i had to add in header z index three i just added that so that works so now uh the way this works is you can see it toggles on and off as it should now there's a problem though okay so if we left it like this and then for example i you know increase the screen or the width rather it works fine right well what happens when you do that the damn menu goes away so normally you wouldn't have to worry about this issue too much but there may be a situation on a desktop for example somebody's you know they're scaling in and they happen to click down and they click down again and they wanted to see something wider so you got to address this and i i never did a toggle menu before custom at least and i had a pain trying to figure that out trying to fix this correctly so i figured it out so it's just going to require some extra jquery with their scripts here so um basically this next part you know if you've never touched javascript or jquery you're going to be just like what is going on but that's fine all right we're going to type out jquery window on resize so basically it's saying you know if they resize the window then do this all right and we'll close that up like normal here all right and then we have a bunch of stuff in the middle and so basically if the window is resized doesn't matter if it's pulled in or out something's going to happen right here so we put if window width is greater than 767 then do this all right so basically it's saying if someone's resizing and then we're going to put another if in there if the window width happens to be greater than 767 do this and we will focus on that and basically we're going to put another if so if jquery nav oops no number nav which is the id is parentheses quotes colon visible and then we put our nav nav show okay and then we're going to also come out here after this portion and put else so it's saying you know if the window that's being resized is greater than 767 man i got to get off facebook you hear stuff in the background all right so anyhow i it's saying if the window size is greater than 767 and then it's saying if nav is visible meaning if somebody's trying to i oh if this little explanation exclamation point is very important basically means opposite of visible so it's saying if it's invisible or if it's not seen somebody you know clicked it and collapsed it kind of like this like they had it i have a wrong one here oh it's going slow because my hard drive i think all right fix that okay so it's been basically if somebody clicks this and then they click it again that means that it's hidden so that's what this my line means right here and so if it's greater than 767 and it's still hidden guess what we want to show it again because it was hiding it before so hopefully you understand that and then we have to put this else statement over here which is tied to this so it's saying if it's not greater than 767 do whatever is in here and here's what we put nav hide okay so let's see if this works there might be some more css that we have to do so let's just start out like we normally would refresh it bring it in all right so far so good we click on it click on it again and there we go that code helped bring it back you just want to make sure it kind of works on every instance oh that's the one thing so if we refresh this we have it open and we try to scale it it will just kind of turn it off which i don't think that's a big deal uh so basically that is it for the um the menu up here so it function it functions and it works so now what we want to do is just some very just two quick things i'm gonna add some hover i css on these up here and these over here or not these but this so basically i would just make this black as well because you know we have on the mobile version it's hovering black to keep things cons oops to keep things consistent we want to make it hover up here black as well so let's go back into our css and i believe that is just simply we've we gotta find the right here and we'll put background color and make sure we put hover colon hover save it come back refresh bam there we go and you know you could probably go with maybe even a lighter version of this these colors right here and it'll stick out more it's up to you no big deal you know how to do it now and then we'll just make this get slightly lighter so let's go in there in photoshop we will take that button double click on it make it just a little bit lighter you can see how it lightens up copy that color code go back to css and it was called cta button it was a class just in case you wanted to have multiple buttons for some reason in the future all right let me put hover here and we'll put background color and save it so we'll go back and we got it hovering and of course you know there are there are different css three transitions you can use you can where you can fade it in the hover or another color rather there's a bunch of stuff you can do but that's pretty simple for now and there you go that is the end of the mega tutorial i think that was like nine days straight focusing on this project uh real quick i'm just gonna close i'm gonna pause i'm gonna open up our video we created too so we can watch that and here that is let's watch that again unsure if you're unfit to drive after a couple drinks blow into this device and it will let you know i just realized you probably can't hear the audio that's not cool with its compact design baxter is the yeah you know what well first you can still play watch it available now so yeah you learned you know a ton for this tutorial so if you went through you know the first video to this last one especially as a beginner it's pretty awesome you probably learned a lot hopefully and hopefully i gave you good information to learn from i so yeah i'm going to be doing these make it tutorial type things uh throughout the year i'm gonna have to because i'm really trying to do this video a day thing and sticking to it uh so yeah um i'm not even sure what tomorrow's video is gonna be yet uh but you know that's how it is especially with all these crazy kids and my own business i'm a freelance designer as well but i'm not going to sit here and ramble on so you know if you like the tutorials and like the whole daily video thing subscribe here on youtube like us on uh facebook and twitter if you want and check out designcourse.com i'm actually just starting to work on the first page course and that is going to be a visual identity design course which really ties in with logo design uh let me get out the course uh preview type thing i created just just to show you here real quick okay so i have like this massive document i'm going to have to zoom in here a lot so you can see what this will be about so you know i'm going to call it the visual identity course basically this is just the outline of what i'm creating uh course introduction you know basically that's introducing the course obviously and then i'm going to go over basically you know the rough ideas are getting specific into the ideas of what visual identity is i'm going to actually be we're not going to be designing things in this portion this is all just going to give you a very solid foundation of understanding about what visual identity visual identity is and how it relates to uh a brand and how the logo design works in there there's a lot of confusion you know i think people think they know what a brand is but they don't really know specifically like if you ask them to so i will get into the use of colors the use of topography i will take a look at what corporate identity guidelines are um and if you don't think you need to know this i mean basically that's the difference between just a you know a lazy designer and then somebody who really knows their stuff so you increase your value as a designer when you understand all this stuff and so we also look at the different types of logos and then we get to the part where we really start to get into projects and designing things for for fictional companies or real companies i think i'm going to have a couple logo design clients maybe one where it will actually be a real visual identity project and so you can see we'll be uh just a project brief brainstorming sketching we're designing the logo i always use illustrator for that uh and then the visual identity presentation in photoshop which is taking kind of you take the logo you present also with it uh just like a business cards um any type of the other visual aesthetics that are presented to the client for a full visual identity and we're gonna do three of these projects so that way you get an idea about you know how to really form the idea of solid concepts that are unique uh and also for a variety of different projects so you do three of these course conclusion and then this is going to be cool this is going to be optional as an add-on in terms of you know i'm not sure how much i'm going to price it but basically i'm going to assign a student a fictional project brief i was here to construct a visual identity and then submit it to me so the course instructor which is going to be me i may require visions it depends on what you turn in but once complete the student is granted at designcourse.com visual identity certification so that will be something i'm thinking of will be physically mailed but also uh available like where you will have your name this is optional of course uh on the designcourse.com uh visual identity designers index so project brief fictional project brief and basically that is that so basically i will be your teacher in a sense if you choose to do the course certification and then everything up here is just going to be uh kind of separate you don't have to you don't have to do this stuff down here you don't have to you know enter yourself into that all right so look for that i i'm not sure i can't really give a time frame hopefully within a month definitely within a month or two all right so i until tomorrow i will see you all right goodbye you