Live-code a calculator with us | JavaScript, CSS, HTML

Scrimba · Beginner ·🌐 Frontend Engineering ·4y ago

Key Takeaways

Live-codes a calculator using JavaScript, CSS, and HTML

Full Transcript

[Music] michael you're fiddling with the microphone i was yes do you think it's not working i think it is working that's why it is working i tested it before so yes hello everyone if you didn't get that sound here it is once again brilliant brilliant we are here today lots of excited people amazing look at them all vivec can't wait so much so that vivek's been waiting since 3 47. so i hope it's worth the wait yeah yeah i truly did so lots to live up to yeah yeah oh rincey says i hope it's beginner friendly it will be yes i can i can promise that if nothing else happy new year yes thank you same to you hungry to coach another one is looking for beginner friendly amazing i think we have kind of found like our little niche where it's like we we keep it very approachable like you know you don't need to know much to build whatever we're better than us yeah it's really it's really easy to be better than us yeah it definitely is can you move forward slightly as i said don't really want to i'm okay with being blurred out hello to everyone amazing to see you all here tgif says yeah yes oh we have various tigers in the gym and if you don't know what that means it means if you are new here please put a bunny rabbit into that chat if you've been before hit me with that tiger we don't use this information it's just a bit of fun and a tradition now yeah amazing joining from india where it's 10 30 p.m best way to spend my friday night excellent stuff bob zero has been before now you were talking to bob about this calculator app for a very long time on our slack channel tell us what you discussed well the calculator apps um slightly trickier than people usually think they are yeah that is yeah the right quality the tldr of it yeah basically basically yeah it's like um you know there is like anyone who learns how to code eventually they encounter this part in their life where they're like uh i can probably just very quickly code up this calculator app and then and then usually they get stuck like horribly uh like as soon as they implement like basic functionality they start going into a little bit more common like you know when you tap on a calculator like a number plus another number and when you hit the plus again you can add another number and it gives you like a sum total and stuff and usually in those edge cases people go oh actually this is not as simple as i thought because then you actually start thinking through do i still display the numbers do i go further on do i add them up and you know different calculators behave differently do they yeah yeah see exactly there you go so basically point being yeah calculators are tricky things yeah they catch you off guard all the time they don't add up i see i see the point you're going for yeah dude calculator plants whoa tom chant is here the newest scrimber teacher round of applause for tom chan which reminds me of a new soundboard do you yeah i do is that why i was receiving uh money notifications like on app store don't know anything about that no definitely not yep here it comes not loud enough michael how do you adjust this ipad oh my it's upside down life is hard anyway i think we should get going michael yeah okay let's go here is oops let's make it bigger the calculator so far what do you reckon i mean yeah it's a i mean when you when you create this kind of layout when you have a number separately a first second number separately and you have a result separately that's like the most straightforward simple calculator you can code because if you go for the traditional layout with just one display and everything then that becomes that that's the that's the tricky one uh but there you go hopefully you we code this one up and afterwards oh whoa that nice font size i think it's nice but anyway maybe twenty it was twenty one i guess it was sixteen i just want it to be slightly bigger so people can see it oh well i suppose we'll fix the land later yeah but that's that's a good one to start and then after you've started that one maybe you can think through implementing the implement the other one lache says you're gonna hit oh i'm gonna i thought he said uh you're gonna hit leanne in the face michael but actually he said you're going to hit michael in the face leanne so i better watch out for that yeah it happens all the time she hits me she hits me with cups and ipads and fridge doors it yeah if you have the fridge open and the kitchen door shut yeah they're next to each other so if someone comes in it's just i have my head in the fridge i'm walking to the kitchen bank trapped there you go yes leon sounds annoyed by our surroundings on slack no i i i was thinking i hope it's not that difficult when we do it yes we'll see sofiane says i remember when i had to code my first calculator yeah it was a lot to put together nope i'm still getting used to this that was a clapping noise yeah anyway lots of uh tigers in that chat amazing and lots of bunny rabbits so yeah that's right good uh scrimba do you missed if i'd react for me thank you guys thank you pop yeah [Music] okay so i have a plan okay equals button currently there isn't one oh i mean oh look well that's wrong well we'll deal with that in a minute okay make the suns work now i knew you'd pick up on this word sums do you fancy stuff you're just going to leave it fair enough that's all right actually unrelated things that's right do fun sister i like it to be fair that is very similar to most projects that i've been involved in like big description of a task and then do the rest of the thing build the rest of a project yeah yeah sounds good how long are you developers for now oh uh i don't remember when did i when did i start learning do you remember um i think you got your first job in 2017 i want to say yeah i think i got my first job in 2017 uh probably started learning around like march or something that year and i got the job around october um yeah i don't remember but yeah have a look at linkedin but it's yeah 2017 so until 2022 yeah well four or five years yeah roughly by then how do we get the coat can we pick up the kite yes absolutely here is a link to that code and i will now fork it so that you probably want to change it back to 16 pixels so the layout is not broken and then we focus i think i think that's the issue i don't know it actually is okay fork yes so that is how you can join in but this calculator comes from her how old bargains learn javascript for free course yes it's one of the challenges oh look at this butler that announces their stream that's amazing hit join so if you would like to check it out in the course hit up screamer.com learn javascript it's all completely free yes yes i see no weekly web dev channel on discord are we going to enjoy weekly challenges again yes absolutely are we yeah we are currently dreaming up ways to make them more exciting am i deciding this week well next week actually i'll go suggestion good put it in slack in answer to your question ella uh yes we will be having more challenges soon and we'll be dropping some emails about that do not worry yes okay so i would like to begin with a quick plug this gradient was made with josh como's amazing new gradient generator that he dropped this week which is everything i've dreamt of and more in a gradient generator so go and check it out it's very nice yeah thank you do you know that there is a if you bring it back do you know there is an easter egg on this is there yeah what is it oh uh so if you hit on the icon yeah that one it generates the gradients for you that's not really an easter egg as it's part of the main functionality michael well no but these like generates random uh but also good looking um gradients yeah so there is uh i think josh mentioned like there is some fancy code behind it oh look that's like ukrainian flag if we get rid of this and it kind of isn't like that no way there we go you should write oh no way to get rid of this you should write to the government of ukraine and say we should change this for a gradient yeah well they and and they will tell me just like you you can put your suggestion in anything they might not they might like it i would do you have bins in you okay good put it there if i was in charge of ukraine i would say yep that's good i don't think they'll listen to me yeah uh anyway have i this yes i have to think so so this is what we need to do so the first thing is the equals button yes uh didn't you want to do up the layout okay yeah now usually i'm not one for break cats but we want this to be about the js so i'm going to put a break tag in there yeah i'm feeling rebellious michael yeah i know and make this font size a bit bigger and put 25 and the padding all around reminds me of that wrong one picture about anakin uk where someone refuses milk and their tea yeah that's what it's like exactly so here we are uh that could do with some more penny yes very nice um the equals button should go below i guess yeah yeah oh well look at that you already already written like functions yeah i mean currently they're with on click i'm not sure if that's the right thing to do necessarily but uh it doesn't really matter because you'll just implement some functions for that yeah so here we have this equals button so you should probably say equals on click equals now this is interesting because in the js course pair only has these kind of buttons yeah and the function runs when you press it yeah but if we had an equals then that's going to be completely different so maybe we should leave it out for now and just use these buttons what do you think well i mean the behavior of the calculator in general is that when you oh i see what you mean it basically just uh once you've input the numbers and then you click whatever it just gives you the result pretty much oh is it right yeah if you're looking to find this head over to the javascript course and it's the calculated challenge oh i see so the solution we have here yeah we just have these buttons and then it runs the function okay we'll keep the suspense up so we don't want this for now then that's what we're going to do yeah so let's just start with the plus one i reckon that's the wrong no it's not it's just because i forked it from pears scrim so i think we can start this again and right we have here i think there is also a typo in the multiply name in index.html oh i could do that d yeah it says multiply my play well spotted and now it says multiplied yes well you know nobody is perfect michael um so what pair did is um just basically used yeah he basically put you put the number in and then you presumably click the button and it gives you some yeah these are not inputs yeah you have to put them in to the gis oh i think it's nice to have inputs so yeah i think i think it would be nice if we could add it definitely do that one equals uh what's the name of the word yeah you need to access from full yes not technical interlude there we go um we have this input with num1 l sounds good i'm glad you're a proof it wasn't my name but am i equals no no that's wrong yeah it paints already there no just just reverse it the other way around well no we can just yeah don't assign it just add it to get this here but you see any text content no it's not text content it's value okay maybe text content would work yeah text content will work as um so get rid of this and then basically copy this down okay oh yeah okay so let's check that's grabbing our log some oh we need to run that on something do we well for now you basically you load the page there's nothing there yeah yeah well just go to html and write some like write some default value yeah we had this last week in here yeah oh i think it's uh in a value equals like here yeah value equals six there you go okay i know it shows you six from console.log yeah so you can basically basically when you're prototyping you can just input default values and stuff like you know it shortens you some testing something sometimes just don't forget to remove them yeah so that is grabbing them exactly there you go perfect oops sorry yeah thank you let us know in the chat if you are coding along and how far along you've got that would be good to know not really yeah because we sent them the scrim didn't we so now we've got those and we're going to add start with the add function function hello come john says i heard you're greeting um but my hands were covered in onion so i couldn't type in the chat i'm making soup while i watch that's going home on a friday night fabulous oh what kind of soup tongue onion i guess you well doesn't every soup because doesn't everything begin with onion well chocolate doesn't yes yeah i mean like most savory dishes begin without it function um add and we want to do num one number two is it really that easy no wait a bit then we need a sum i guess so well yeah you need to display that const sam equals yeah let's just see what that's doing is it really that easy well yeah yeah well particular moment in time it is it is that easy but when do we want that to well kind of like with this layout it would be it would be kept fairly straightforward because again you're doing this in that particular way but once you start uh advancing it it'll become more difficult yeah so that should currently run on the click because we have ad already there so let's give that a go one oh minus one well that's interesting anyway we'll come back ready drum roll please console is not a function it's not okay can't sound locked [Music] yeah definitely so debug that while i get the sounds back michael well i mean it just needs to be added to the dom yeah but well no because at the moment the console log isn't working so what i missed a bit what do you mean okay oh i need a potato tom lovely hey what is this there is no one does the console come on you just need to it doesn't rename the function no it's picking up the function thank you there you go but why is it saying one oh just you right i'll change it touch your mouth every time there you go well now it says 11 man now it says 11 which means that the values in here are strings so we need to make them into notch strings numbers e yes yeah over t8 oh but you just taking the keyboard js string tool i know what to do you just did the keyboard is the one that we want yeah it's the one that we want yeah um so where do you do it then number one i'll probably do it passing down yeah by the yeah okay y oh what there if this works we'll explain why yay um this was not working because when it was grabbing they numbers from the inputs it thought they were strings so it was adding the string one to another string one and saying it was eleven yeah and what passed in does is it changes them to a number but i did say type equals number but apparently it still renders it as a string so one wonders what the point of calling it type equals number is uh it gives you the it does this so you can basically increase them by one by two and so on so it restricts like what you can actually do within html but once you grab it within javascript it's it's still a string fair days yeah hello to dave with the elephant from colchester um humble said okay thanks i subscribe to this channel have a beginner amazing so now um yeah that's working cool basically oh no we need to put the result in here which is we have this span which is this with the id of some l and we're gonna do somehow i think that's the something we haven't grabbed it yeah so we need this one do um some l got text content plus equals sum and it's plus equals because we have result in there but actually do we want that probably not you probably won't just equal some just some yeah because because if you say plus equals it will be added in previous results to whatever it was so currently okay every other time you will be adding more and more to there two click again and if you change that to plus equals it should keep doing like two two two two and so on there you go so it keeps adding it oh i see yeah that makes sense so now you just have equals but you probably want to override the string that says result you probably want to dan yeah you probably wanted to be equal [Music] i'll do it okay you do it [Music] great it says mordecai yeah this wi-fi connection to the space so it's fine i love it it doesn't i'm reading the comments bob cyril says i think type equals number it might also pull up the keyboard with numbers if you're on moba oh really yeah not the telephone keypad though just the keyboard the numbers on it not positive about that yeah interesting hello lianna michael says chandra hello to you too so is it shouldn't we use pass float for decimals should we uh you should but it's not a decimal but what if i know that you have this awesome dj dashboard whoa no michael i'm just so bowled over by your amazing ability right yeah anyway so yeah um you can yeah you can do pass flow once we go towards yeah once we go towards that would be the next step but for now yeah percent even if you use number type that should be on there but it still returns the value as a string to that anyway let's add the other functions then no but that that yeah so now let's try can you add negative numbers in here yeah yeah uh well no and another negative number ooh what about that's wrong isn't it why minus one plus minus one that's minus two is it yeah two negatives make a positive that that's about the sign not the number okay if you have like one minus minus one that would be a positive yeah it would be like one plus one but if you say minus one minus one that'll be minus two okay yeah but i did it i did plus minus one plus minus one oh yeah yeah it's like i shouldn't question maths you borrowed 50 quiz and then you borrowed another 50 quid you haven't ended up with no debt even though that would be amazing okay only multiplying leanne okay it's been a while since i've had to do any maths you also like to brag about your a at gcc's math i was like wow it's along with my cycling yeah exactly renzo oops um it's curious how time calculators don't use the slash symbol for division i don't think what is the ios calculator do ios calculator's got this what do like actual calculators that you hold have i have the same yeah interesting yeah yeah okay anyway so let's now try 1.5 plus 1.5 okay i feel like we need to get at least some functionality on the other oh that doesn't look right yeah yeah that doesn't look right exactly we can't add any more functionality because this is broken already so explain then what's wrong with this well that's what earlier um someone mentioned about pass load so you're passing an end and 1.5 passes an end is one so now you wanted to pass as a float so if we use pass float will that be okay if it's not a decimal what's going on okay okay one quick prize 1.5 looking good cool so that solved our decimal problem yeah as i think with zozo said that still seems to work okay cool okay you've done better amelia i failed my cycling proficiency what i can't say i've used it since so how how can like i saw down cycling and i have to admit i can't imagine how you could have failed that test it was i was like wow i don't think lyan can you see the test michael it might have been a really difficult test maybe i want to be that simple in life yeah leanne gm gmi i think it means good morning it means good morning i'm not down with the kids no anyway let's move on i am an old man with a skateboard minus i don't know subtract subtract okay and this does this minus cool that's doing oh right let's give that a go three minus one two one 1.5 five minus naught that'll do point five yeah we're not minus one point five minus one that's correct okay in my day-to-day life i don't need to trap negative numbers very often oh wait i have to admit i have panicked for a second too bob zarrell asks uh do you have to have a permit to ride a bike in the uk like driving a car no it's just everyone at primary school for some reason we all have to do this cycling test yeah i have no idea why i've cycled maybe twice since doing it when i was 11. the ability to not run over a pedestrian i don't think we covered that um we just covered how to not get squashed ourselves mainly yeah battlefox any alternative to write only once let num and num two oh interesting uh oh i think like you can write let num1 num2 yeah but that's just for well it's like let num1 comma num2 i think it is but that's for just declaring those variables but we still need to assign them to their dom elements uh so i think what doesn't really make much bad for fox was saying that is like in line 6 and 7 and 9 14 and 15 are the same so maybe we could get this out into its own function called grab numbers or something oh i see you're right uh yeah yeah you can do that yeah sure should we do that now okay okay function grab numbers grab numbs oh this is absolute torture why am i not asked to rename that function what's wrong with it it explains what it does yeah fair enough so first we want to grab grab number yeah um yeah but i know that is right i think well let's try one plus one oh no number one is not defined yeah that's because he so the bug here is you declare those as let's so they're scoped then yep so you look you grab wait you grab these uh within the function and they're scoped to this function oh so as soon as the function ends executing these lefts are discarded so you need to somehow store the result of this function so normally what you can do uh i mean you can basically like you can return like an object no uh number one number two and then you can do something like okay what they're saying wouldn't function such as adam subtract be better off with the numbers passed in as parameters i think they would um pass things parameters to oh i see so you basically wire up it yeah you can do that right now yeah but then you have to pass them in within the dom okay what's wrong with that there's just a little bit more tweaking right now to the code okay tweak away yeah well i think i think this this can probably work as it is right now if you just return this object like that it will grab those for you and you won't michael i think we're on to something here look let is block scoped which implies that wouldn't be no let and constant both blocks go the var is not so if you actually call it bar it will get hoisted up to to the whole file and you well yeah i saw earlier well i live in the year actually last year um that const they're changing cons so that you can reassign it like well then it won't be a const anymore with it you can really tonic once yeah anyway no i guess i'm not explaining it but it was yeah it sounded bad anyway so let's let's so with this one it says num1 is not defined so right here num is not defined because this is a lead it will be the same with cons because once you once you do it well let's just demonstrate that then and hopefully you're wrong you're not wrong okay but here's the can you please just all variable declarations inside a functional scope for the functions and const will all not work in this case isn't that yeah no we still have our woodwork no we couldn't use var anyway because we'd never live it down would we oh wow you know we learned anyway so uh yeah once you grab those numbers you say let well to be fair it doesn't really matter what they are but i suppose you can turn it and then here you can just do the restructuring like that so i hope that would work there we go can you explain this so basically what you do is you grab these numbers and you return them so when the function finishes executing it gives you these numbers back in an object so you basically say here's an object with these two numbers and this line over here says these grub nums will return an object with num1 and num2 and i want you to create a variable inside of add function that's called num1 and num2 so now it gets declared here and now it's now it exists here you can also do the same with led but it doesn't really matter yeah wow yes i'm just comparing your idea to what people are saying in the chat okay what do you reckon milosh declare a variable outside of grab numbs with let keyword and use grab numbs to set them yeah you can do that that sounds easier to understand in all honesty okay why not yeah you can do you can do that so basically what you're saying is you can say let's num one uh i'll just do that let um two and do that uh it is easier to understand but you kind of like the thing is that you are creating these these variables in this case they're not called global variables yeah and generally you want to have as few of global variables in your application as possible so this works someone up there just said global i don't know who it was scroll up it was bob zero michael yeah so you can have yeah you can have a global but it would be the reason why i prefer returning from a function is that it doesn't pollute your global scope with all the different variables kind of like the most important variable should be global and the others are not but it's a small app so it doesn't really matter it's very small yeah just took a screenshot okay cool uh so what about what dave said about oh well crikey look at this putting things into global scope is sloppy programming uh i was trying to avoid saying that quickly but uh i do agree lorenzo arrow functions are my favorite thing about js how do you feel about them no indifferent um i think michael's idea is perfect thank you go with that then okay so now i think we should that does not mean that we're gonna follow it [Music] this yeah is it actually called dividing html well that's a good one what else could it be called yeah it is called division but yeah no it should be that's right add subtractive cool so let's four four by loop knight number eight yeah that's because this is empty so we should put default all of them i don't know anyway come back to that right minus two four divided by two and that's because i pressed it yeah yeah anyway two two four point four divided by two point all right yeah two point oh yeah let's do two point three yeah do you want to double check that number well you don't know it why are we saying sum for divide well yeah really it should be result shouldn't it divided by 2.3 equals 1.913 okay yeah uh is it wait 1.04 three four i mean two like eight decimal points yeah so it stops working after that well actually it doesn't really because it just continues going but yeah there's basically a floating point erin uh well in all programming languages so all of these calculators are only as precise as your floating point basically the point being if you if you're operating like healthcare machinery or something please don't luckily this won't be please don't trust uh all our airplanes or something please don't trust the floating point arithmetics if you are not quite sure please google it as well so it's kind of a very good explanation that oftentimes because of the precision of the numbers in the binary uh it won't do the correct division it's kind of a limitation of computers in general so you have to go for more precise floating points so i think in javascript the default floating point is 16 um or 32 i think it's actually 32. destruction is considered basic level i'm not sure if that's um a question or telling us that we should be destructuring that is it i would say that probably by the end of your javascript basic course you can probably cover destructuring but i mean yeah like if you if i yeah if you just call us for example i'm pretty sure does cover it uh does it cover objects yeah yeah so probably somewhere it would so yeah but if you've skipped it or it's not covered there then you know you just learn something new that's good too i'd argue that sloppy programming is subjective and when the app is small and there's no chance of confusing name conflicts in one file up global variables variables are the easiest to understand yeah yeah which is why i'm not yeah it's i've found it better to optimize for the ease of reading code in the future than trying to do a data standard meant for larger apps but maybe that's just me wow yeah i agree with you actually it's fair enough which is why i stopped arguing with leon about uh her function naming and i think grub numbs is perfectly fine for this hat yes yes i know okay so moving on yeah right so that one works within a fairly reasonable you probably what you want to do is you probably want to round it too yeah i mean it would be good if we could round all of the results really calculus don't round they do i guess they do like to the width of the screen yeah they do eventually because it's like yeah yeah exactly they all round to a certain uh to a certain floating point so you you want probably to do the same anyway so let's let's just update this divide function to have instead of some it should probably what's the result of division called in english well results would be a suitable name some l i'd like to say that i didn't come up with somewhere else sorry no i'm not taking the pool for this it should it should be result l no can we not just rename it just leave that leave that as is because then i won't result l oh we don't have a replace on screamer so we have to do this ruler yeah with it actually i can do this can i holding down option yeah i know really changing html as well results and then this should be actually no i did come up with that hmm scrumba has focused on job interviewing lately and produced a number of videos on this topic that's true if i interview uh for a programming session at my company and you start placing everything in your table clip your resume at the bottom of the stack yeah uh yeah that's true interesting quotient would be after rounding down the result what does that mean quoting would be after rounding down the result uh well quentin is basically the time part for what i have to go quantum define come on oh the result of the well i didn't need to say division operation um would be after rounding down the result oh so we round the result and then we would pull that quotient basically like when you add the result is called sum yeah but when you divide it quantity okay yeah i'm not sure but anyway moving on you can just keep it yeah keep it as a result it's why is there another multiplier just delete it yeah but we might use it why you already have equals button see mickey limbo was saying that you know we would be the bottom of the apprentice level position cv pile and now with doom mats we're like that's it it's falling off the table now it's like we wouldn't even make it to the table well you already have a job back but so do i say well not after this video i won't multiply times that land but we haven't finished the divide ah we have we haven't because we decided to we need to round the number but wouldn't we need to do that for all of them no why not but because there is nothing to round when you subtract no but you might need it for multiply the yes so then i think it makes more sense to do multiply and then we can make some kind of rounding function okay that's not a hill i want to die on fair enough well i guess we just use the inbuilt one no yeah multiplier is not defined i think multipliers have a look multiplied looks pretty defined to me let's give it another day one times two there you go yeah okay just a glitch then yeah just fall didn't say all right one point one two times 2.4 yeah 2.688 fair enough yeah hey thank you for the gripper extension i got it from the videos you did with html all the things yes still using that myself js uh string to number um this is the grappa extension which is a completely free extension which basically makes it nice and easy to search for and save code well code yes see definitely recommend that don't forget division by zero yeah well that's an interesting one let's give that a go um 2 divided by 3 divided by 0 infinity correct there you go infinity in javascript is interesting it's not infinity in general right yeah but the results in javascript there is also a value for minus infinity well just like in last i suppose yeah so if you actually if you have minus three divided by zero will that give you minus if we hit divide it would perfect there you go how awesome is that okay well is that good well yeah i'm not sure why brenzo mentioned it i feel like we need to do something no it's like don't forget to check when when you're doing the checking for it you know i divide in the stuff and things is this code or will this code be uh our repo on github no i'm not sure it warrants being on github then i'm not sure it deserves it but what it will be yeah it will be on in the screen url that you see on the screen yeah we will drop this into the chat yeah oh so is i saying infinity isn't technically correct oh come on it should be undefined i mean like how how far down the maths degree do we need to go over this calculator app to be technically correct i think infinity i think infinity is a good enough result you do wonder if any calculator is actually correct well yeah anyway yeah it's like you know the the implementation that we're currently going for is like you know a high schooler would do and that's kind of what they is that what they say in high school i don't know but like when yeah when i was in high school it was a long time ago it was yeah it was kind of considered infinity and then and then already yeah the university there kind of explained to you that that's not quite true it's a little bit different but i think it's good enough dave says division by zero should give an error but javascript has chosen to return infinity instead we need to go up to derivatives let's not not divided by not that's an interesting one i should also give infinity interesting oh what is it then what if you divide what is zero divided by zero undefined okay well that's right then good stuff now um rounding well can you also try to divide so not divide yeah divide zero by one then we already do that just the other way around the other one yeah okay zero divided by one zero yeah that will do well division by zero says andreas is commonly known as undefined maybe um add num add num t equals zero undefined for a wow they understand what's going on it's uh kind of yeah it's basically it depends where you land on this like mathematics discussion and stuff i think like whatever whatever the result is infinity or undefined it's fine it's you know like how often let's be honest often do you grab a calculator and divide by zero well never yeah so i think some people do apparently like the chapter's kitchen's such a massive hangout uh i think he's still declaring their variables on the global scope without giving them a value they're just setting the values when the function is cool correct doesn't seem better to me than grabbing the element on the global scope and then getting the value when needed for the operation doesn't seem better to me than grabbing the element on the global scale and then getting the value in it oh yeah i see okay right isn't it that's it's basically that's when you grab nuns doesn't it uh no basically what bob is saying is that you can uh that basically you can do you can do this and then you can do oh yeah we would still so you just hold the element yeah you only ask for its value when you want it is there any difference between those then not really there you go so that's what that's what bobby said doesn't seem better to me than grabbing the element so basically well i mean he thinks it's a little bit but yeah i mean again like ideally i wouldn't have any of them in the in the global scope and it's kind of you just keep them all within the function but if we already create a global scope yeah it might be it might be a better option again it's like you know it's like it's it's really splitting heads at this point mike says oh that won't work what wouldn't work well we just did i guess doesn't it oh yeah yeah yeah maybe it doesn't oh oh that's the map because it captures the values at just one point in time oh yeah no looks like it just works really no it doesn't ah but on the second yeah it looks like but on the second one it doesn't okay control z that bad boy then there you go on the first on the first on the first try it works but on the second it doesn't cool pains fair enough they're objects which are passed by reference whoops you kind of start realizing that like closing with vanilla you suddenly kind of start realizing how much the frameworks do how much heavy lifting the frameworks actually do for you like in in terms of like these basic basic things normally you don't even think about these uh like most basic grabbing the value from the dom and the rest of it you know you just work with it within reactor or svelte or whatever you're doing it just works yeah epic brilliant really cool designs in the calculator thank you so do you want to finish the multiplication we've got middle left i thought we had finished it uh oh yeah we have but it was still not rounding we're still not rounding the number well i told you to round it like five minutes ago why are you not rounding uh do you know how much how many numbers actually fit in there not many one two three four five six and then we should do it to two decimal places ten maybe ten 10. when was the last time you needed something to the nearest ten decimal place right now well i mean no when i was doing my degree i needed almost 210 but after that i i never did but math.around that would be to the nearest integer which i'm fine with uh is it i think so i'm sure it is maybe you can add an argument so wrap oh i see yo rounds to the closest whole number right so you want to probably uh let me round two decimal places oh i see so it's uh two fixed essay so we've got uh oh yeah so these results are already floats so i suppose you can just do results to fix nick rolex could we code an error message that if the result is nan we display a message the user sure i think ideally we'd want to code it so the result didn't do that yeah you can do that as well thank you i for some reason picked seven seven is good enough yeah anyway seven is good enough we've started a rather heated debate i know controversial entirely okay anyway yes let's all live in peace people that's the most important thing we have a calculator which works if you want to add up the number of suites you have what was that but not for more complicated things oh yeah yeah just make sure that you don't divide one sweep by three sweets sorry one sweep by three people yeah yeah um okay i thought what i would do at the end of the streams is an unrelated segment of things right and i will leave you today with a review i have found of luton airport if you don't know latent airport is an airport well they say it's london lewton but it's not really it's quite far from london it's in luton it's a town called lewton yes here it is this person turkish fam no turkish tam fan was rather put out by their experience with luton airport this is what they said oh my where do i start they may as well put alpacas behind the counters at the airport the staff was utterly outrageous unprofessional and unhelpful we turned up an hour before our flight and the staff kept giggling socializing ignoring our questions taking along with everything after charging us for luggage which fit in the hand luggage box but because it wasn't a backpack they charged us they told us we were too late to board the flight are you serious did you not know this before wasting 30 minutes of our time and charging us for luggage honestly pay the extra 50 quid and fly from another airport for the love of god i woke up with excitement today looking forward to my holiday only for luton airport to ruin it my head is hot my blood is boiling luton i will not forget this if i ever win the lottery the first thing i will be doing is buying this shampoo airport and destroying every inch of it with my bare hands so there we have it a round of applause for my all-time favorite review of lewton airport that is very strong entry experience review very shakespearean yes if you find a review of anything that you would like me to read out on the stream for humorous effect just make sure you kind of blur out the bits that are not meant to be said lewton is the origin of the river lay is it or is it lady oh is it leanne yeah tom is laughing losing airport yeah you have to laugh if you go to losing it's uh it's not the best airport is it there we go it's okay yeah it's all right but i i do feel like it's quite strong feelings now this show has discordant views i'll only reiterate my earlier point this is netflix material comedy tech learning disagreement elation that is a very good summary i know so far we have tried as hard as we can to avoid uh css and js or anything anything like that anything controversial i don't think we've ever had a discussion where people have had really strongly different views well yeah because we don't really delve into that like tabs or spaces or anything like that yeah we try to avoid that but it looks like infinity uh has definitely given some of our viewers some something to they really care about but but i mean yeah it's a very it's a very worthy discussion uh for mathematics but i would rather have appear yes on wednesday we will be talking portfolios yeah with tech rally tech rally has made a course about how to build an amazing portfolio and he's a front-end engineer at amazon too so come along to that yes looking forward to talking portfolios and seeing you all there well i hope you enjoyed this i hope you enjoyed this michael yeah it was actually enlightening i learned i learned some things so that's that's always good oh look at that uh this yeah i wrote a commodore 64 soccer game that was later branded with gary lineker's name wow um i used to work at the university where we saw gary lineker once yeah yeah sorry i've seen gary lineker in the flesh i've seen tyrion ring the flesh as well really yeah i suppose you know who that is just walking down the street like because i know who thierianre is great tutorial thanks have a great day or evening as the case may be shall do yeah now motivated to learn again fabulous and that's why we're here safely so head on over to like if they can code it i can code it that's exactly why javascript for free and see what kind of amazing calculator you can break make i l yes uh thanks lianna michael that's a lot of things here in the usa we call it soccer sad face is that because my columba wants to call it football not because because anyway oh there we go i started another one so glad to see you live stream again missed it we miss you too yes thank you for coming along okay have a wonderful weekend everyone lots of happy coding and rounding of numbers so late everyone [Music] i

Original Description

🎓 View our courses: https://scrimba.com/links/all-courses Scrimba coders Leanne and Michael are back with their Friday night chaotic code-a-thon. This week, it's a ✨fancy✨ calculator with HTML, CSS and JavaScript! 🧮 💡Think you can do it better than them? Come along and share your tips in the chat, and let us know what you'll be calculating with your shiny new app! 💻Check out Scrimba’s interactive learning platform: Scrimba: https://scrimba.com/ 🐦Say hi on Twitter: Scrimba: https://twitter.com/scrimba Leanne: https://twitter.com/RybaLeanne Michael: https://twitter.com/alanmynah
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Scrimba · Scrimba · 0 of 60

← Previous Next →
1 CSS Grid Course: Learn the Basics in 3 Minutes
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
2 CSS Grid Course: Positioning Items
CSS Grid Course: Positioning Items
Scrimba
3 CSS Grid Course: Why Learn It And How It Compares To Bootstrap
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
4 CSS Grid Course: auto-fit & minmax
CSS Grid Course: auto-fit & minmax
Scrimba
5 CSS Grid Course: Implicit Rows
CSS Grid Course: Implicit Rows
Scrimba
6 CSS Grid Course: Fraction Units And Repeat
CSS Grid Course: Fraction Units And Repeat
Scrimba
7 CSS Grid Course: Justify Items and Align Items
CSS Grid Course: Justify Items and Align Items
Scrimba
8 CSS Grid Course: An Awesome Image Grid
CSS Grid Course: An Awesome Image Grid
Scrimba
9 CSS Grid Course: Named Lines
CSS Grid Course: Named Lines
Scrimba
10 CSS Grid Course: auto-fit vs auto-fill
CSS Grid Course: auto-fit vs auto-fill
Scrimba
11 CSS Grid Course: Justify Content and Align Content
CSS Grid Course: Justify Content and Align Content
Scrimba
12 CSS Grid Course: Template areas
CSS Grid Course: Template areas
Scrimba
13 27. Setting up the structure - Responsive CSS Tutorial
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
14 25. Making the navigation responsive - Responsive CSS Tutorial
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
15 36. Playing with the title's position and negative margins - Responsive CSS Tutorial
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
16 31. Starting the CSS for our page - Responsive CSS Tutorial
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
17 26. Taking a look at the rest of the project - Responsive CSS Tutorial
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
18 15. Spacing out the columns - Responsive CSS Tutorial
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
19 33. Starting to think mobile first - Responsive CSS Tutorial
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
20 22. Making our navigation look good - Responsive CSS Tutorial
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
21 37. Changing image size with object-fit - Responsive CSS Tutorial
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
22 44. Module Wrap up - Responsive CSS Tutorial
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
23 16. Controlling the vertical position of flex items - Responsive CSS Tutorial
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
24 39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
25 42. Setting up the About Me page - Responsive CSS Tutorial
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
26 35. Changing the visual order with flexbox - Responsive CSS Tutorial
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
27 23. Adding the underline - Responsive CSS Tutorial
23. Adding the underline - Responsive CSS Tutorial
Scrimba
28 21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
29 20. Creating a navigation - Responsive CSS Tutorial
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
30 40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
31 43. Fixing up some loose ends - Responsive CSS Tutorial
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
32 32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
33 24. A more complicated navigation - Responsive CSS Tutorial
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
34 28. Feature article structure - Responsive CSS Tutorial
28. Feature article structure - Responsive CSS Tutorial
Scrimba
35 34. Styling the featured article - Responsive CSS Tutorial
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
36 18. Making layout responsive with flex direction - Responsive CSS Tutorial
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
37 19. flex direction explained - Responsive CSS Tutorial
19. flex direction explained - Responsive CSS Tutorial
Scrimba
38 41. Creating the recent posts page - Responsive CSS Tutorial
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
39 17. Media Query basics - Responsive CSS Tutorial
17. Media Query basics - Responsive CSS Tutorial
Scrimba
40 30. Home Page. HTML for the aside - Responsive CSS Tutorial
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
41 38. Styling recent articles for large screens - Responsive CSS Tutorial
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
42 29. The home page.  HTML for the recent articles - Responsive CSS Tutorial
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
43 10. ems and rems   an example - Responsive CSS Tutorial
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
44 1. Starting to think responsively - Responsive CSS Tutorial
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
45 4. Controlling the width of images - Responsive CSS Tutorial
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
46 5. min width and max width - Responsive CSS Tutorial
5. min width and max width - Responsive CSS Tutorial
Scrimba
47 3  CSS Units.  Percentage - Responsive CSS Tutorial
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
48 11. Flexbox  refresher and setting up some HTML - Responsive CSS Tutorial
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
49 12. Basic Styles and setting up the columns - Responsive CSS Tutorial
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
50 8. The Solution Rems - Responsive CSS Tutorial
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
51 14. Setting the columns widths - Responsive CSS Tutorial
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
52 2  CSS Units - Responsive CSS Tutorial
2 CSS Units - Responsive CSS Tutorial
Scrimba
53 7. The problem with ems - Responsive CSS Tutorial
7. The problem with ems - Responsive CSS Tutorial
Scrimba
54 6. CSS Units. The em unit - Responsive CSS Tutorial
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
55 13. Adding the background color - Responsive CSS Tutorial
13. Adding the background color - Responsive CSS Tutorial
Scrimba
56 9. Picking which unit to use - Responsive CSS Tutorial
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
57 Tutorial to Learn Alpine JS - Full Course for Beginners
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
58 Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
59 Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
60 Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Scrimba

Related Reads

📰
Build It HTML-First: Why a Plain Web Form Beat a React Rewrite
Learn how a utility company's decision to rewrite a React application in plain HTML resulted in a doubling of users, highlighting the benefits of progressive enhancement
Dev.to · Arthur
📰
Starting the Frontend for a Full-Stack E-commerce Store (Auth Store, Axios, and Public vs. Protected Routing)
Learn to set up the frontend for a full-stack e-commerce store using Auth Store, Axios, and public vs. protected routing
Dev.to · Chinwuba
📰
Practice Frontend Typeahead Interviews With AbortController and ARIA
Improve your frontend interview skills by practicing typeahead searches with AbortController and ARIA, learning to handle debounce, cancellation, keyboard navigation, and accessibility features.
Dev.to · Karuha
📰
Building Maintainable Frontend Systems
Learn to build maintainable frontend systems for long-term success by following practical guidelines and best practices
Dev.to · Ufomadu Nnaemeka
Up next
Elementor Angie Ai Plugin Tutorial
Quick Tips - Web Desiign & Ai Tools
Watch →