Live-code a JavaScript analog clock with us | HTML | CSS | JavaScript

[Music] hey indeed we are here again and i must open this on my phone so that i can keep up to date with all your lovely chats yes here we are who is here jose which that's not jose this is jose happy friday guys weekend is my favorite end yeah it's a good end yeah happy friday alana tom chance says yala indeed light show says oh happy friday but i'm working on shift oh yeah dave is back naziri lagoida i think was here last week no i don't know you can ask i think so yeah let us know caristo tigers or bunnies or elephants as dave has already got elephants yeah what elephant's supposed to be we do a thing here if you are new please put a rabbit in the chat and if you have been before put a tiger and if you're dave put an elephant because he's from colchester or if anyone else is from colchester then yeah like an elephant area but yeah colchester i think so all right oh look at this sam tigers hello everyone another tiger oh love lee more tigers any rabbits this week i wonder well you are letting us know if you are a rabbit or a tiger where is colchester in the uk not sure exactly where yeah somewhere south is it like essex i thought i think so not sure let us know we have colchester zoo and they use elephant statues all over town oh i see a rabbit hey welcome tom chance got up there this could become something big is he from berlin maybe yeah but lovely to see you all oh there you go dave says essex see uh yeah oh look at that my british geography is actually not that bad yeah very good okay if i better share the old screen just realized the mic was really far away and i know i could do with a better mic it's in progress anyway here is google chrome and if you don't know we are from skarimba.com which is a place you can come to learn to code yes it's true and um we need a setup talk yes i meant to take a picture of that because that show asked a couple of weeks ago it's in the back line backline pipeline some kind of like backlogger and pipeline backlight yeah that thing um anyway what to answer your question michael what we are coding is yeah i asked him before the stream so you didn't i didn't you never did it's a lovely surprise for you every time well no i i asked it before like well 30 seconds before the stream i was like oh yeah by the way where are we coding tonight okay well it's an analog oh that didn't help clock analog clock yeah how are we going to code in our analog clock well that's what i'm hoping you can answer but it it it's like physical well no it's on the bench oh you mean like it's like it's we're gonna code the clock that's got like um basically clock amps but we are gonna code those well i say that but for some weird reason oh that's the wrong one that's why this yes exactly here we go clock arms provided oh i see oh okay that's good because i don't have to worry about recording those because you know yeah um yes and i have made a plan allow me to find it okay yeah clock plan hi holders view in so this is the plan okay wire up hour and minute hands okay okay yes and then wire up the second hand if it seems like it's not going to take long i think we can do it otherwise i think there's more interesting things we can do namely display date including day of the week and year and add a add cuckoo cuckoo what a cookie you know like a cookie clock wow come on michael we think yeah yeah yeah i know like how how are you supposed to do that for those among you who are not familiar with the concept of a cuckoo clock here it is yeah and then on the hour word that's actually not a cuckoo but something comes out and goes mimu or whatever yeah we'll just use an emoji oh my god that is actually i have no idea how to do any of that i wish i just covered this a little bit earlier it's been marketed for the whole week now michael so everyone else oh yeah okay the second hand is the third hand and it's brand new yeah cool okay right uh-huh stretch goal dragging the dial to set the time crikey yeah that's an expensive clock you found yeah okay so i reckon we should get started yeah um well i mean let's let's now have a look let's run through what we've got now this is what you have is a challenge i did not create ryan created it okay yeah we have a div for some reason it's called digital clock let's just ignore that um okay index.js has this clock template which is kind of baffling uh get clock template uh see say where does this id come from clock template uh so you have zero is a variable so clock id clock zero class clock zero second hand okay well never mind um okay so it's basically a bunch of divs that says um can we split these into separate lines will that break it also empty space shouldn't really affect it at all so i suppose yeah you can so then it would be oh yeah okay that's actually a little bit easier to read yet um so that all right we've got the clock and then secondhand minute hand hour hand and the clock center is just the um kind of dot thing that yeah and nail and then you have stack clock and it says get clock template and it passes it a zero so if you pass that uh like 15 they should all move to the site right no because there's a it's just an id doesn't actually do anything no id well yeah because you have id clock id equals uh sorry i'll just stream i mean we can change this yes it says i'm not married to this code so it says yeah maybe because i don't understand it they have oh i see so basically his idea is to because you have start clock his idea is like to what update this oh anyway there's also like this uh important now for me to just so there's yeah that's importing the dates uh so you actually wire it up to the actual time right now yeah what else yeah well that kind of throws yeah that throws freud's idea of uh like yeah dragon setup because it's like well if it's if it's already connected to your browser you don't have to actually set it oh what a shame that would have been great yeah okay well the first thing we need to do is figure out how we can move these hands but to answer your question alana is this a weekly web dev challenge it is an old one because the current one lasts for two weeks but we already did it last friday all right yeah yeah because now we have weekly weather challenges uh once every two weeks but we have friday every week and we need something to do those fridays too many of them how about adding a ticking sound yeah sounds good yeah yeah we can do that flaming heck yeah that's the hard one i i'm realizing that now yeah it's ticking sound and uh i'm not a fan of okay michael we need to move something how do we rotate the hands i don't know well what's the css like i would imagine you do it that's what somebody says you'll imagine you have to do it with css a transform going to use the id to rotate the hands yeah so there was like can you go back to the js which one the chairs so you have the id clock like clock dash some number dash second hand minute hand hour hand so can you go to css and see if oh it's just an id sorry yeah but i think we would use that like dave says here uh what does this say dave says isn't the css transform going to use the id to rotate the hands well you see here's the problem i do not know what that means can we have a link to this challenge the other dave says yes you can here it is yeah you see i don't know what that is transform rotate x number of degrees and there is a hint js calculate rotation with seconds degrees equals 270 plus six times seconds what okay with minutes i was hoping you'd understand this side of things well no because it's got something to do with like rotation css can you actually go to css and show me well because you understand what transform retake means can you i know what i'm going to do yeah can you just let me show me with css what's the name of it come on clock well why does it need to be an id it doesn't need to be an id does it no i do with ids but what is this what is this wow okay do you understand what it means with that transform thing yeah okay can you just at least show what um okay i'll do it on the class then yeah um here and we'll figure out from there will we though i don't know second hand okay yeah transform rotate i don't know 180 thick okay so it needs to move it it can't just be rotated because that rotates around the center center axis yeah but some clocks do oh no actually there is a css thingy that can do that yes you have to move it along one place css transform origin is i think transform origin um yeah so we're gonna have to fiddle with this i'm beginning to understand why not many people did this challenge uh what else can you have all right so oops i need this no can you slow down the notch i really i don't follow it you don't need to mike actually that doesn't need to change does it i don't think it's this one 50 oops 100 yeah this is awful what are we gonna do calm down read the docs yeah x x-axis y-axis so we want the x-axis don't we y-axis stays the same x-axis we got to change well firstly which one do they mean by x y and z because sometimes they are labeled differently x is the flat one like this yeah is it horizontal or vertical yes it's horizontal horizontal because it's horizontal well so i mean yeah i don't know maybe and let's just do 10 10 10. and then what happens no there's only two please michael there there's only two are possible oh no in the transform origin that says that you can also do z look there's the third argument well what is that that's actually five apparently you can do okay what's the chat saying yeah yeah x is a cross x is a yeah true 25 says jonathan let's try that okay yeah that's quite good anything but really i don't think we need to worry too much about this actually just 25 yes all right all right that is depth oh like a z-axis anyway yeah so so that's that good news what we need to do well yeah 25 but michael we don't need to worry because some clocks they actually have the hand like speared through the middle don't they this is the least of our problems okay uh yeah i suppose i suppose once we can figure out how to actually rotate them yes then we can faff around oh god okay right yeah what oh absolutely oh my goodness that's right right um you can't have now why do i understand this why is it why does it have that clock id interpolated i mean we could just change it so it doesn't oh well no but it's clearly some kind of like a hint to to actually solve it can you have like dynamic ids that can you actually google it css dynamic ids it's nice to see other people get flustered with code other than myself oh yeah all right i'm going to use transform rotate with the seconds formula seconds formula being um yeah what i'm saying is what this i can see that somehow you probably pass you probably passed the seconds into it and that somehow does it can just google css dynamic ids and then we'll see what it means css 9x makes ids dynamic css id names in an application the generated with a d at the end for example and so on how can i write the id and sister so i can apply start it um okay so do they do different things different ids uh further to the suggestion that you should use classes for this functionality uh you're gonna say use attribute value begins with selector what okay handle css with dynamic engines i do not actually know i don't know id is simply a parameter passed to the get clock template function you can see the number 15 being passed into it yes but then some they actually he isn't string interpolating it either it's just isn't he i actually know he is because it's it's over here looks like he is yeah yeah so he's interpolated into so this id becomes clock dash 15 and so on but what's 50 well i'm well okay so i'm passing 15 here it's an argument to this function and then it basically creates an html yeah and the id is clock dash 15. yeah so this is the html that gets interpolated so it basically creates this see it says clock 15 seconds clock 15 minute 15 hour hand and so on so what's the use of that i don't know but i feel like that's somehow like a clue to how you 15 she probably tries to solve it or whatever i don't know or maybe it's like if we had a clock 15 minute hand oh i see what you mean it's like i have a feeling like well firstly this hint over here basically says uh 270 plus six multiplied by seconds so if it's filled with sundial instead can't you just use set interval to update the id every second uh yeah but what i don't understand is what's the point of these ids like why why do we have this where do we have these ids what are they meant to do how do we grab a dynamic id in the css to update there might be some information in the scrim oh but first i'm going to also like if you listen to what this crap you can't change it then family tried to get rid of a dog on the screen and they are anyway every week you get a small chance to improve your web development skills and flex your let's go ahead and take a look so your job this week is pretty simple we have this is it that and you know what to say about a broken clock it's only right twice a day and at this point it would be midnight and noon in your local time zone but using the superpowers you have with javascript you'll be able to make this clock show whatever time it is at any given moment in time and have it update every single second your final product might look something like this though i know that you all style it in your own unique ways i'm really excited to see what you come up with in that regard there are of course a few specific skills that are being focused on here things you might find useful are css transforms to do the animations javascript dates to figure out what time it is at any given moment set timeout and or set interval which you might use to rotate the hands of the clock and of course the basics of html and css in javascript if you do find you need a refresher on css over 8 000 students in timing functions and for those in much i think i should do that css animations course i don't think the animations are the issue though this is getting over complicated you can animate the clock using a few functions and variables yeah i vote we do that michael because otherwise it's going to be announced we should just ditch the yeah whatever ideas it is yeah i totally do i don't know what this is but anyway so basically what we need to do is build out this as per the you know thingy we just copy and paste it from there well you can't really you can okay maybe you can yes this okay the only reason i'm laughing is because i know that you've got a thing about it you can select multiple lines i'm just kidding i know you can do that i told you that okay probably you should we should probably remove these ids yeah i don't reckon we need the ids no okay save okay okay right so get clock temp template i will comment out start clock yeah uh i i reckon we're gonna need don't we uh yeah you can probably start the clock but basically prefer this to be in here for now what do you reckon don't need this do we what are you trying to do um uh right new date ooh no that was good actually cranky yeah what are you thinking michael i'm just thinking i'm going to take away your keyboard now because it's getting silly it's not right what why am i looking at yikes okay yeah yeah okay let me just take over for a second because this is like this is tough we need uh for some reason whatever we've done has broken the css so i don't think you can just remove and remove this clock uh because as soon as we remove this clock yeah that basically that's right yeah right i'm back on it now right oh hang on you've just renamed a couple i see you said uh you you made that class okay it's back okay okay right so now we need these what what what for finding out the time from date say now dot hours and whatever it's already there yeah i know that's what we've got isn't it yeah okay okay okay are you storing them in variables or well what's up well michael i haven't sorted out the whole thing one thing at a time okay we have the variables in now import her mind has run away on the tension you can't stop the train right like your idea go go on board okay forget about the time we we don't care about it what do you mean that's the same thing right we don't care about how to get the time we we can do that we do can't tell dot log you can say now dot now dot seconds hours yeah equals equals new date hours 17 that is correct for monday yeah then look if we he's just saying now god powers what's sunny oh you have to put up yeah but we haven't it's not been oh yeah it's a function there you go yeah that's what i said i did i said chris on tape there you go so you can just do that now there's a function four hours so we we we didn't get the clock like how do you go live if you move it right how do you transform rotate yeah the thing what we're gonna do is this we have so actually probably having the id would help although it's not a huge deal id equals our hand yeah and then we're gonna do here um advanced our hand equals document dot element by id this our hand yeah it's our hand yeah box style dot transform ah transform rotate css now css njs vehicles rotate okay let's just nick this then for now yeah yes i s that's not seven degrees that is like ninety three oh huh make it forty five okay it it just starts it just starts from uh horizontal so it's four basically it was it was seven but you started three o'clock why is it starting at three o'clock i don't know because if you make it look if you make it 270 that's your 12. hey oh and if you make three 360. that's okay i think i know why it's because there's probably one here already um hand yeah look that's why so if we comment out that line of code that all of them turn to that because i think that's you that's basically the default position of your rotation and css it's everything is horizontal yes yeah so yeah you probably do want to start with 270. oh so probably that that's what plus plus six businesses we need to pass the formula with now dot hours says jonathan yeah so basically you have 60 seconds you have 60 seconds in a minute but you have 360 degrees yeah yeah like dave davis saying here it's 270 because that's why the hint js suggests using it in that calculation check to make sure the initial transform value is set to zero it was not yeah okay then anyway so if we basically started all right so you do need to rotate it yeah okay um i can't believe people are still here thanks for sticking around yeah no they didn't turn the pink lights on oh well yeah uh ooh i'm actually brain freezing right now as well now what we gotta do is you need to show the next equals zero let's get like let's let's show some time and then this we're gonna string interpolate this bad boy yeah everything you wanna call it we can refactor later yeah oops wrong one yes okay so now hopefully if i do um 90. well what which which uh we are doing our hand that's doing something michael look yeah go to hinges and just grab that formula yeah so now yeah yeah if you design the hands to point straight up at 12 to start with you're gonna have a clean blank state for the transform value yeah we could have done it's too late for that now just use some library says rohit arguably we could just just look at one use a digital clock yes no we didn't actually make this challenge one of the scrumba teachers made it miranda says as well oh same person just design the hands to point out rather than pointing to the right i feel like there's a reason why ryan didn't do that but i could be wrong anyway well it is what it is it is what it is we're only 34 minutes in oh my goodness right note that updating the transform style from css will reset yeah uh other transform properties like translate you need to put them in the js also yeah i thought the js overwrites the css well that that's what he's saying or she's saying once you change it in js you have to change translate as well because it gets overwritten that's what we want anyway let's not necessarily translate i've sort of got it working but the formula seems to be beep else it's me which is possible interesting i see okay right so anyway so let's show the hour hand can you go to hind.js this is going to be our deck okay i would beg yeah yeah let's go and just yes hint js ours there's the formula okay but that's ins that's with seconds so we need this well he's basically saying with hours yeah okay whatever it basically means that you're calculating fractionally literally every single time but that's all right it's not a problem okay yeah insert it why are you so paranoid because it works i don't want to let it go when it works okay okay now time is not defined you basically say yeah because we gotta get time from now it's pointing to in a five right okay uh so that so that that's all this we just need to do the same for the minutes michael what are you doing this is me michael what why do you need to do this we don't need to do this we just need line things you will need to be calling these every second yeah cause the clocks are moving it needs to be updated very early i get that but we're gonna use stretch or not stretch interval set interval for that no set interval yes but you need to update all of these hands separately look you were you were like tapping away so now it's my turn to just write stuff stretch goal says alana add the clock numbers in their respective positions well this is a minimalist clock yeah yeah let's call it that i mean maybe whoops there's a formula okay get ours now um 70 people are watching really [Music] that's never happened before on a friday i probably shouldn't say that i mean well basically what we need to do is like really come up with something painful i think people love watching pain that's that's what it is because this is painful i think it's all right i want to quickly to all of you here we are from scrimba and that's a place where you can learn to code yes people should remember that if they say here it is scrimba.com if you talk to me on in the chat she gets distracted and if you are new here please put a rabbit in the chat and if you've been before please put a tiger very interested to see if you are bunnies or tigers yes yes i'll leave that there for now okay back to oh hold on wait no no no no no no no michael we gotta save it right save it gotta save it uh okay so that was the formula for ah so time and time there we are that should be i think it's fair to say that this should be just big should it i think so i think it should be dick i i think we should name them all oh look lots of bunnies in the chat think it should be min dag oh okay i actually can see how we can refactor it a little bit later but make it work first yeah let's make it work first this needs to be minutes and is it a minute yeah a minute hand and this is yeah but we haven't grabbed them yet yeah and that should be second hand second hand hey and let's grab this index and then these degrees there we are uh get seconds get minutes get hours and then you're saying that we need to ah minutes right here says i'm watching because i could not figure it out so i want to see how you would do it yeah vk love watching doing mistakes which is absent in tutorials nowadays oh well if you like mistakes oh yeah we've got plenty of those yeah is basically html and css and i'm in my head i'm like well bye that's me make time machine instead of what i actually think at this point it might be easier make what a time machine yeah we need those ids for yeah yeah okay well basically we didn't really make it work and we basically redone the whole challenge and solved it on our own we haven't solved it yet well yeah we need to grab them for the um up top yeah oh you've done that yeah have you saved you saved the html well i haven't uh started the clock why is the hour hand working there oh because that was already in there yeah oh seconds is not defined well seconds one second line thirty one right three one oh we haven't done that all right whoops time not seconds yeah okay so if i save that uh so what time is it now 17 42 and whatever so if i refresh that oh there you go so it moves uh so now well that's it for this video thanks for watching and uh well no it's like uh so you interconnect start clock let's call it draw clock rando needs to leave now but it was nice to watch looks like quite a difficult class you are not kidding thanks sakai yeah yeah all right so we have a draw clock vega here's this function and if we call it it will draw a clock so now we just need to call this function with a set interval every second so just can you just do a quick google how to do that and let's please read the docs what do you want me to do michael this is my life one more time set interval you want me to google set interval let me just quickly google uh javascript call i don't want to like set interval because what if there is a better way to do it pull function every five seconds didn't we do that last week i'll do it yeah cool and every second aka one thousand milliseconds yeah draw clock yay okay that is that that works but uh what i've noticed is are you gonna tell me it's like it loses a second every thousand years or something nah well maybe but uh that's hard for me to worry about i'm pretty sure there are really clever people on hardware and stuff and like browser developers and the rest of it who are gonna think about this stuff for me all right yeah it doesn't have to be like swiss watch level of accuracy yeah well they also lose time don't they um anyway uh there's basically this hour hand uh yikes what is it well basically it's like hour hand minute hand second hand and we are basically changing the same uh you want to refactor it well yeah yeah let's not i think we should know something else wait wait but oh it's right here i guess well you can make it uh ah no way yes good enough yeah good enough yeah basically i wanted to play around but i realized that actually you know no one no one wants to watch that that would be really painful anyway can we actually not figure out how to move these arms to the base of the thing yes we can so instead of they're in the middle so we can actually figure out how to translate them properly i don't think that needs to be done in here i think we can just do it here oh really i think so um in here transform origin what did we do before it was like 25 i think i think he was evidently not 10. ten zero it's got to be a percent i think oh you can use words like bottom oh there was like someone bottom right bottom left how annoying what we actually trying to do here we want to move it from that over here so this bottom needs to be over here on the tip ah basically we had a right bottom hey ah yeah oh look at that you're both a husband and wife yes we are yeah yeah yeah basically our brother and sister now i don't know i never had a sister i have a brother and you don't have any siblings no there you go transform origin maybe i'll actually read the docs oh there was some kind person who actually told us and it worked could you please maybe it only worked with the position that it was currently in someone said bottom center really bottom center right then let's give that a go semicolon yeah i don't think that will make a difference oh okay no do for the hand class and it will do all three hands at the same time oh interesting do we want them all to be the same though yeah common character yeah yeah commentary in in our hand you still have that line well that doesn't make any difference it's just giving it the same thing again oh does it yeah oh i'm paranoid with css in this case you'll want transform origin left center or just bottom i think basically it's because we are working with some other actually no people work with the same css that aren't with us same css we just did it we did it at the beginning we need to go back into our recording to have a look at it how did oh there we are how did we do that transform origin 25 i tried that there didn't i secondhand let's just try it on the same one that looks really weird now did it always look weird well you have transform origin on our hand oh that doesn't affect it can you go back to this no that matters michael translate should be before rotate dave is on point oh that is a nightmare translation should be before retail what does that mean wait what what does that mean oh it's a nightmare i thought the origin should be before on the second hand transform we have rotated oh we've done 25 no i think he's saying this look how does that make any difference not rotate transform oh i think i think i've got the syntax wrong transform origin anyway let's go to this one okay yeah you need to combine them into one thing oh no they're separate wait we're not using translate are we [Music] are you doing a translation i don't think we are are we ah okay hand held what okay translate fifty percent where if you delete that nothing all right that's good is it though yeah so now if you add that transform origin okay you're using translate on the hand class yes no anymore no anymore to target all the hands we need to use the hand class okay minute hand dot style transform equals rotate homestead translate fifty percent ah so you oh okay okay that kind of makes sense so here and here and here we're going to do outside of outside of it outside of what outside of the the brace no it isn't it is it's your your writing inside the rotate brace yeah yeah yeah translate yeah and then 50 set close oh wow somebody gave that guy a medal i think that's a really second beer that i wanted to talk yeah so there you are what a relief thank you tom ah the translate needs to go first and also be added to the javascript transform and i think correct me if i'm wrong it's because why does it have to go first um probably that's just the syntax but the issue is any style you set with javascript i think because effectively it becomes like an inline style which then overwrites the styles from a separate css sheet i believe yes i just posted my solution it discord weekly challenge brown says but the other way around translate needs to be first the two commas down it's working so i'm not going to touch it i'm not sure why why does it matter the order of the functions has done it this is what dave has done wait wait wait look at it go speechless how well so he's actually uh yeah so what did he do with those ids uh he he's written the men i actually used like he's he's he's written in like in-line style you see crumbs that was that was quite something use the hand glass i think that's a delay i think we've got we've got a medal and an elbow cuff we're like 10 or 15 seconds apart yeah all right hello not needed first but your online transformer is overriding transform property in date yes that is what happened okay then so we can check can imagine that if someone is watching after like 15 minute delay this will be really frustrating on the iss watching this wire up hour and minute hands done wire up a second head oh wow okay done done i actually think we can do this one michael can we i think we can i've lost the will to live oh that's actually not ours hold on all right i'm going to be very careful here moving this why don't you just close it because it might be the wrong one okay this is ours isn't it no yeah and we don't want those no we don't need any of that yeah okay close close close so now open a new page this is quite funny because normally i am the one who hoards garbage you know in in the share then the garage that that's my business but when it comes to closing tabs leanne doesn't do closing tabs that's not true i always play tabs you're the one that's got a brilliant tabs open anyway moving on up yeah we are going to have under here uh yeah give club equals date right yeah and then closed it yeah okay date height 50 pixels which shouldn't be like in line something not additive symbols it's never additive symbols i don't think anyone in the history of css has used additive symbols oh we actually looked at once do you remember where it was i remember not understanding it background white okay let's give it margin one m border radius i've just realized this actually shouldn't have been done like this this should be a p okay yeah which oops would mean okay we'll leave like that like that for now but how do you overlay it over the clock i don't necessarily want to oh i see okay like an underneath part okay interesting question from brandon how do you get the syntax highlighting on your google results yes what generate random number js referring to this this is a really cool extension called grepper yeah and then you can save the answers and you can upvote them and yeah it shows it to you like this very good recommended by jose yes thank you jose need is this ours yes why is it not working it's in the other tab so this is not ours then you've saved it for some reason i opened it separately okay i told you just close close down the tabs okay cool very welcome hey yes well you've got all the watsons draw clock is already a function you can remove the function at set interval will it affect the overall clock interesting what this function here do we need it oh yeah i suppose you can just say drop clock uh yeah you can just part i think you can yeah yeah i think if you just do ah pass yeah i think if you do that [Music] yeah what do i win wow you've already won the weekly web dev challenge once or twice oh there you go it's six o'clock bye-bye status yeah hey hello right anyway we gotta finish this yes html5 says uh you've just made oh yeah so p with a class of date and an id equals date yes and then we're going to do this date date and then um i'm going to delete this function get gate um date dot text content equals 22 06 12. that has not worked oh the reason it hasn't worked is because i need to do something here blow up oh maybe not i haven't actually run it yeah yes so now how do you display text in in the middle of that we'll worry about that in a minute we're going to get the date from ooh yeah time is now so we need this you won't you won't get it from that that's just that now function is just the utility function so well you can i can i can get it there look there's time now and then um okay but it doesn't accept any argument man look at it look at it yeah look it doesn't accept any arguments it's just now and you get the properties that's all so what you can do is you can probably hey no no michael you can get it with date i know you can well let's try it earlier then why it's there look time dot get full year is what we need that's what we need okay yeah so you can just you don't need you don't need them now you can just use the new date javascript stuff okay so probably don't really need that do i no i can do this and then um oh crap what is it dollar uh squeaky brackets i don't want a dollar for to interpolate why what do you mean then you just write new date inside you just write new date uh two words new date okay let's see what that does okay rude that does work you probably want to call that no why good but we're going to change it because really we only want the day the month yeah and the date and the year these ones so i'm going to look up javascript date i you want because i think you want to specify format yeah it's these okay yes get a date i know what i'm doing that was there was a method called get date and i should tell you all right uh good day you know that just gets you the day of the month i have a look so this is what i want yeah read the dogs maybe there is already what you want i've already read the ducks earlier on it says on the on the board on on your little board it says fart it says it's not childish anyway anyway oh cranky right date don't get date no yes yeah you need to call it i'm moving on no i'll get fair enough no i think i do okay so then this is going to be day i think that great is not a constructor then read the docs you you need to call new date and then on that you call these methods yeah yeah so you can do it like that yeah and you have now number three yeah third of september it's not oh it is okay [Laughter] i'm pretty sure you can okay this is this is look when you are like repeating yourself like that it's really silly because it can't be it can't be like that there must be there must be a better way there must be a better way ah say javascript day there you go european format ah what you can actually how to get current form to date in javascript 2014 uh oh there we go 2019. that's a little bit closer what's you can't actually get that in javascript like that oh there we go uh two iso string new date two iso string i should do it so uh was that yeah let's just remember let's clean this up but new days two i mean you can probably just call to date stream hey here we are interesting yes see i told you like as soon as you started doing interviews splitting dates and assembling things together it's like there must be a better way there must be a function that's already like what do you think like thousands of people like wasting time constructing these things again and again on to date we will do display selects yeah align items center yep and then justify content center lovely are perfect thank you very much thank you very much done and dusted brilliant yeah amazing well that was eventful wasn't it oh i know i know incredible well thanks for coming everyone and tolerating us that was really quite quite something and if you enjoyed this hit subscribe re oh yes we do this every friday and usually it's for the current weekly web dev challenge we torture ourselves every friday evening with your entertainment yeah this is the current weekly web dev challenge but we did this last week but if you would like to have a go please do and then your entries will be loaded onto here well it's not normally this slow okay 49 at the moment who will be the 50th exciting and while i'm here i will give you a shameless plug for my own youtube channel here it is code with leanne sounds oh man [Music] yes so there we are we have jen hello there hey wow amazing an hour has gone already thank you for coming and hope to see you again next week yeah oh no i'm finished us on monday 5 pm ps pst bst uk time we will be looking at all of these submissions and selecting a winner who i am 50. you are 50. congrats today yeah nice you did great i couldn't even code a diff with 70 people watching yeah 70 people watching 80 at one point really yeah i know wow take enough huge thanks and thank you too and we will see you next week for some more coding fun yeah bye for now bye

Channel: Scrimba

Views: 1,663

Keywords: JavaScript, javascript tutorial, javascript for beginners, learn javascript, javascript tutorial for beginners, javascript basics, javascript tutorials, javascript beginners, javascript functions, web development, learning javascript, js, js tutorial, coding, learning to code, coding tutorial, learn web development, web development 2021, web development tutorial, front end developer, frontend, learn coding, software development, javascript clock, javascript analog clock

Id: fYHAAamHpig

Length: 68min 41sec (4121 seconds)

Published: Fri Sep 03 2021