Animated typewriter effect with JavaScript & CSS

Key Takeaways

foreign people hello everyone it's a Friday type of day yes I say type because today we're going to be uh let's see well coding a typewriter effect you've probably seen them across the internet when you load a page and it looks like it's typing it that's what we're going to be doing today oh yeah I always wonder how that's done yeah so did I hmm never thought to look before but anyway that's what we're going to be doing yeah um that's just looking at my camera and it says continuous AF which is like because it could be another a.m that's really continuing anyway looking forward to that and the purpose of this is to read and read learn about CSS animations exciting stuff stay tuned for that in the meantime a big hello to everyone who's tuning in Aiden's time Georgie and hookah hello hello Flex empties back from Georgia yes indeed doesn't it hello hello to you well great to have everyone here now in case you haven't joined us before we'll come to our poll about who has and who hasn't shortly what we do on a Friday afternoon is go on a coding Adventure we don't always know what we're doing this isn't almost the time I don't know what we're doing we go on a discovery yes and to learn together with you and hopefully get some tips from you yes but ideally you'll learn something as well good to see people um popping in and letting me know where your old shoes exciting stuff yes welcome back Jody from Canada um yes the pole we do a weekly poll here which is if you're new here please put a bunny rabbit into the chat and if you've been before hit me with that tiger won't use this information it's just for fun and it's a tradition really let's see what the ratio of bunny rabbits to Target since today so um this is what we have um not a lot yeah it is just pretty bad at H1 with um a container around it okay and that's all for now no CSS do you know we can do all of this with CSS and not Js what yeah it's no chance it's just too quiet very quickly if I if I remember rightly so the typewrite effect is like where you have this kind of cursor blinking on on the screen and it goes something like hello it's crimber and then it goes like big big but actually that's great so what it's displaying is like hello yeah but going forward not deleting yes so instead of doing this oh this is laborious when you do it manually you guys like yeah basically he goes back out and then it like types something else right oh well sometimes it does now to do that I guess you would need JS uh to type a new thing well I can't imagine another way of doing maybe let's find out yeah that's fine anyways okay fair enough so you want to tell me that you can remove like a part of the word all with CSS you're not removing it you're adding it you're not actually adding it you're revealing it but we'll come to that shortly okay fair enough well that's interesting lots of bunnies and tigers oh wow into the chat hello to you all right let's grab it so do I hello um and an elephant and yeah elephant is reserved for yeah people from oh interesting elephants people from Colchester and where is uh Flamingo from Hello Florida maybe that's why Florida and I think of flamingos I think of Africa when I think of flamingos that would make sense too um and I'm staring think of crocodiles when I think of Florida for some reason yeah there's someone on the scrimber team that lives in Florida and there's crocodiles in its backyard oh yeah I remember I actually was telling us the wildest thing to say a very quietly scary stuff yes which reminds me um we have a newsletter of all things going on in the scrimmer community um which you can sign up for here's last week's exciting news um about career changes people getting hired and all the old live streams coming your way there it is it's a bit more colorful if you get the email yeah um but when you see it on the site it's white no yes wait I haven't just got one month free Pro Plan full enjoy yes how to get a scrimber hoodie um Step One work at scrimmer um no that's how I got all mine there used to be um a way of getting on our Discord server if you've got a certain number of karma points I don't know if that's still going yeah watch this space waiting for JavaScript mess yes that will be soon as well I'll go to that um I can get your link for this and then we'll start the typewriter JavaScript must sign up that will do this is gonna do what I want yes not the most exciting sign up thingy but if you want some daily challenges about JavaScript in December and the chance to win cash put your email in here anyway back to the typing so when I was researching this great I found this blog blog post right do you know HubSpot yeah it's not like the sales and Metric thing I don't know I don't know never seen it before but anyway they seem to know about CSS breaks it down into um what we've got to do so I thought we can follow this hopefully okay sounds good and you will type oh I love a good tutorial okay fair enough so step one animations are an easy way to add extra Delight moments to your website I could read even a quick animation effect can make the difference between a plain static web page and an experience that visitors will remote will hopefully might type hopefully for the right reasons because you can get some animations that are really annoying but ours will be amazing honestly so um yes okay so how to create type and animation in CSS that's what we want yeah to give the effect of type text essentially what we're doing is creating a line of text hiding it revealing it in a stepwise manner to give the illusion it is being typed I knew it I knew it is not actually for real here's how to do it straight oh starting from scratch okay fair enough okay so uh div and then you have a container fair enough animate the text to peer typed how do you do that display inline talk form family font size okay so that's just the text I think that that means typewriter right I don't think it's actually doing anything yeah because I don't know okay so it seems uh I mean I'm not actually particularly bothered about this font business um so as a person who's not fan of CSS I'll just skip over that part I think display inline block might be important oh well there you go that that's how you don't follow a tutorial we should probably put that in but the rest of it yeah I think won't make any difference okay and then I would have finished this and going um I don't know about this doesn't work I tried it doesn't work okay so what you're saying is inline block is important right container I like when I follow a tutorial I always try to change stuff a little bit so it just fulfills what I want to do so it's just that's a good strategy inline block so I I don't want to be copy pasting because right then you don't understand why it works it works yeah but you see like I would have skipped and I would have spent ages debugging while I didn't work until like somebody would have pointed out that you need to have in that block or I would have actually in the end copy pasted this and it would have worked but anyway I think it's fair to assume that Ariel and font size is not something that's gonna allow it anyway oh actually that's what it says setting discipline to inline block makes it so the width of the container div is set by the width of the paragraph text inside so actually probably won't affect it but we'll see no it definitely would okay because we need it to at the beginning cover the uh because it shows you it like how much you hide and how much you show right then we'll style our typed element with some important properties okay important properties overflow hidden and choose the text is invisible white space no wrap keeps the text on one line oh interesting one if you wanted multiple lights and with zero height of the text at the start of the animation makes sense okay I think okay uh I'm glad it does because I'm not shocked but I guess I'll need to see actually use that type and it was slow hidden okay so yeah do we actually have that class in the HTML though uh yeah yeah okay okay overclock hidden uh what was that white space and width what space no wrap all right last time I said sorry for interrupting let's get back to the class I think it was interpreted as I was suggesting you get back to the class and then I had interrupted by saying that video blurs no worries I hope we're not blurry today oh no what what what's going on that says with well that makes it disappear that's what we want all right oh yeah of course but what so what would what we've got here overflow hidden means well I don't know how to explain it in any other way it has awful yeah yeah okay when it extends outside of the container I think I mean maybe we should look it up CMS overflow [Music] specifies what should happen if content overflows an elements box uh right so there is like a box around hoes Chromebook okay should it clip it should it add a scroll bar that's quite the auto one is Overflow clipped oh I see so when you're unable like in the in the dev tools if you just go one by one white space with width zero makes it split into two lines white space no wrap basically brings it back to one line that overflow hidden I think width zero the reason it's splitting into two lines is because it's um dividing the words yeah if you put like a space next to the H or something probably it will go on to three lines oh well that's good okay oh I've kind of hit that um body container typed right I was right okay fair enough so uh that's not hidden and then I was wondering how to join scrimba as a front-end developer if you Google scrimber careers you'll find our career page and uh keep an eye out for any openings yeah yeah programming language filter yes let's see what you've got um not much so now for the fun part okay I like when the fun begins add in the animation create key friends rule in your CSS as follows okay yeah we have to show save what we've got first I think in the HTML yeah that's not really much in terms of HTML itself so the reason it's not visible is because we've set the width to zero yeah and then there is just basically that is all so far okay so what was that keyframes container how did that fight a few frames it says over here that you need to create keyframes typing uh from zero from with zero to with hundred percent uh okay I see oh I see I see I see I think I think I tried to get it but I'm not sure let's let's see piping from Rick zero to 100 yeah so it's from and two and I go with with something's gone wrong here we need curly but no colon yeah width and then colon he right I don't think it should have a semicolor okay one two it's like coma no right yes okay right and then presumably this rule changes the way the paragraph element from zero invisible to 100 oh yes that's that's what it says which is what it wants uh without actually zero I guess so yeah yeah so basically basically this thing is so it probably magically does this right okay uh this rule okay so next we'll add some extra CSS properties to typed class so type class because at the moment this isn't going to work because we haven't told it yeah so we originally created oh I see so we basically just created we created the animation some animation fun oh and then all of these like four brothers together you know whenever you see animation yes you can do it all in one line but it gets a bit hard to read so animation you say the name and then what animation duration time and function film mode I'm being motion animation duration [Music] I don't remember let us know if you like to write your applications in one line or if you like to split them like this five seconds is going to be awfully slow I think you also need to write seconds oh dear do you really well I'll pretend it's me typing uh animation timing function animation animation timing function well it's actually dick yeah what does that actually do and then there is also filled mode I know what that does that makes it if you don't use that it will just reset to the starting position I.E width zero but if you put in animation film mode forwards then it won't reset at the end so it will be a width 100 in our case okay animation timing function set how an animation progresses through the duration of each cycle ah so this is where you can have like linear which is basically even or you can have ease in so that basically says steps 30 to end yeah and then oh I guess that one film would shoot before us okay so what does that mean it's this check it out here is a visual representation of the different timing functions you can use wow yeah so linear that's the same speed all the way through right and then there's ease in which I think is slower at the start right and then speeds up ease out is the opposite of that you can do it yourself you can decide how it goes is that what they've done in our example then kind of thing uh I don't actually know in in our example they whoops why are you making a screenshot fill mode forward says Dave means it stays at the end State once it's finished yes very handy little property and yeah so for some reason timing function here it's steps 30 end I have never seen it done with steps so it is on the dock animation timing function steps okay foreign stops along the transition displaying each stop for equal length of time for example if n is five there are five steps oh as you say oh so it's like basically keyframes so it's like 30 or 30 frames because I would imagine having 60 frames might be 460 framed yeah fair enough 30 frames seems a lot doesn't it uh well no it's like a camera right so it's like this cinematic feel so what does that end thing do then uh I guess that means to jumped home jumped him do you know it's a left continuous function so the first jump happens when the animation ends same as jump and so that the last jump happens when the animation ends Jolene says characters being displayed ah interesting well let's find out that makes sense oh yeah actually how many do we have anyway so well we have 30 but what's the centers that they're using this is paragraph type text okay so if I just do F12 on that yeah and then just got length that's 34. hmm so four spaces Maybe does it say why it probably does [Music] 30 steps makes animation yeah okay we could have easily not ours but you know that's not interesting I mean at least you can see how I actually read tutorials 30 is the number of steps the animation takes but why and these steps are spread even until the end of the animation so I would say that 30 is probably some kind of frames right rather than characters although characters is a really good guess hmm let's see what happens with ours then well nothing I save it and nothing happens shouldn't it be hidden at the start something's overflow hidden gone awry I think you need to refresh uh all right yeah so look at that it actually does have oh okay yeah the reason that you need to okay I think it's too slow this is like watching a computer in the 90s like but see it's nostalgic it's not slow okay so it kind of just reveals it step by step so if you if you have it five two it's like junk set so I think it's literally just like how quickly how smoothly reveal it I suppose you can you can say if you put it 300 oh look at that look at that butter y will take the width 100 and split it into 30 equal steps yeah yeah now you know why you need to set the font do it I still don't huh what was that well probably a typewriter font would be nicer Dave says we need a fixed Wick font I think we should go with Ariel ah so you're telling me that it actually doesn't work it's working but not as well we also need to add the flashing carrot thing I don't know that's that's okay have I done it already was aerial anyway or did you not put it in quotes I did put it in quotes actually I'm not sure you need to they recommend Korea oh I see and also I think that's why they have it 26 pixels because somehow that no that still does that still is that you see it's like cutting out the letters yes maybe that's because our oh sentences much shorter than the other one oh but actually it's very typewritish isn't it yeah also I noticed that that was scrimber yeah it's like I want to suggest you the defaults that you want yeah fair enough um Tim de Hoff recommends a monus based font okay so we have that reveal it's still not very easy space yes Korea what Korea is a monos based font yeah so isn't that there's no it says it there that's why the fallback is not as good yeah so um and then we now have enough to see our animation in action here's what the result looked like from the code you've written this should be a link to scrimber uh maybe one day it will be yeah depending on the length of your team let's run that and see if they've got the same thing then yes they do okay then so it also does like junk out in the middle of the letters you may need I think that's intended okay so we haven't missed anything well maybe that's something we fix later depending on the length of your text you may need to increase or decrease the duration and number of steps to make it look oh so I think we should make our number of steps 20 and see what that does but we don't have 20 letters five six seven eight nine ten eleven twelve thirteen fourteen so okay 14 now uh-huh that's pretty good yeah that was pretty good okay self Applause so very quickly I'll just no steps is the number of characters that's what we've done isn't it yeah yeah is that how you do a comments in CSS yes no no yeah so I hate commenting experience us it always makes a mess so I think uh add JS here what well because this this needs to change right depending on the number of letters yeah you want to do your fancy schmancy deleting and retyping or something well at least try it right because because if I have a say it has to be the number of letters because otherwise it's going to be a bit Yeah a bit messy okay well let's press on then let's press on then okay so we we need to make our sausage black and cursor yes of course because without a flashing cursor that's not a tackling effect is it it's just weird CSS animation I guess a typewriter wouldn't have one but anyway no it's upgraded that's actually a good point I'm a flashing cursor when you type that's not important but nobody knows what a cursor looks like um actually yeah Dave says is 14 or 14 15. I think it's 14. Hello friends let's make it love this right so one two three four five six seven eight nine ten eleven twelve thirteen fourteen fourteen yeah should be 14. um our animation looks pretty uh good typing okay but we can make it I don't know I think I only make sure looks better but yeah because it sounds great so if you're watching this we can spot get in touch we can make it even better by adding a cursor I agree 100 yes to really convey that the text has been typed out okay okay adding a curse is simple we'll use the right side border of our paragraph which moves as the width of the paragraph element expands okay I think because if you put like I see so it's like when like yes yeah uh one pick with pixel yeah solid black right right for that or just work automatically so we don't have to worry about changing the position of the Border or anything ourselves ah so you just put water on one side make it thick or something right make it look cursory well we're gonna have to make it flash somehow wow I'm a word but now we want it to be blinking which which is hopefully what thing says yes make the cursor blink no wow I did not think that that's how it's done it's actually just type in the Border PCS has Wizards amazing stuff anyway is that is how it does oh actually yeah it says simply add border right is Michael gay excited about CSS no it's the end of days no I'm not not uh I will curb my enthusiasm you can adjust the Border width and color to your liking thank you I will um but I think that's yeah I think that's good enough how much oh look at that they went for two pixels and I went for three see done yes I adjusted it to my liking add a blinking effect we need to create second keyframes called blinking called blinking okay fair enough blinking our cat food is called blink anyway so uh come over to the theater side Michael yes oh I don't know I'm too why is my mind going right now that's CSS for you highs and lows yeah sir and then it does like zeroyer I think they said that the zero fifty hundred and then what else was it bought a ride transparent ah so then they animate they animate this border right and they basically say border color yeah transparent black transparent s ah why didn't I think of that that's so that is such a neat simple solution yeah it's pretty good transparent and then right color transparent right and there's basically so it's transparent solid transparent that should be black uh so it should be uh whoops they should be black ah so oh she says there's a variable time how do you declare variable um colon rude and then open up thingy yeah and then it is Dash Dash and then the name of it thanks to Ash yes sir color like is that how you did Porsche green quotes oh I think there is a space I think I think I've done it actually no you know what I'm gonna make my stand and I'm gonna do it properly like I always wanted people always think that Brits care about this I do as a bread I I truly don't I I actually usually write it without one now oh blasphemy I should take away your tea rights yeah but now look you've got color that's fine because the property has to be declared without the you and then next to it yeah oh man this isn't no yeah yeah I can't do it no fair enough that's a good point that's a good point because if somebody comes over to this code business search for colors search for colors and they're at colors now it's built also with you that would be really annoying yeah okay Dave says he cares about the you yeah there you go see interesting yeah you do calib over you but also if you care about Kobe X maintenance you probably shouldn't do it yeah unless it's your last day gotta choose where your loyalties lie unless it's your last day in which case you can do command there for replace all color color with the U commit and just lose your laptop scorched Earth policy right there and walk away there you go yes I reminded me of that uh was it Anarchy in the UK meme remember would you like some tea no color what are you this is Jason says we should have it without the other color no that's that's too far but actually I didn't oh no I haven't added it I haven't actually had it that's why it doesn't work that's why it's not blinking because it's not oh so where is it um good question oh is your thing you're not working yeah you need to do VA and then all right yeah okay so presumably it's the same here but I got you okay so now uh uh so how do you add two animations onto one thing then I don't think I've ever done that I don't know maybe when you say animation typing space blinking well Kevin Powell does CLR really chemical basila yeah we need to have a word fix the board of right well right what does it say I think he might have already fixed it all right he's still ahead of you thanks for the heads up I don't fix that okay so how do you actually add it so how do you add the blink keyframes blinking must be um oh yeah the the typing blinking what did I say that ah so we'll apply this keyframe rule to our type CSS block to make things cleaner animation shorthand I don't know if that makes it cleaner makes it a little bit okay for both blinking and typing animation I'll also set the duration of blinking to one second so typing steps forwards blinking infinite so does that mean that you can actually have two I'd rather oh yeah but then how are you gonna separate do you know what I would do I would probably add another class blinking for the Border and separate them out because otherwise this is just going to become unmaintainable more I don't know why because you've oh yeah so go to the HTML and I would add like yeah I'll do save and then yeah and see it says I would move linking I would move the border right we need to just add outside yeah but I would also move the border right into there yeah for some reason that doesn't work so that's what we had when it was written underneath oh yeah but maybe maybe you actually need to have them oh yeah you can uh no animation typing Karma blinking so animation oh well interesting interesting so what you're saying is Lana yes I think that's working actually actually yeah it does it does look because it kind of becomes black and then gray again but shouldn't it still be there at the end and it would stay there and continue to Blink so I think maybe blinking there there needs to be infinite so I think this should be fill mode comma does that feel right oh that's not feeling inside I think that's timing come up no no duration you're on the right tracks not only it is a duration what is it blinking one second oh okay so they made it one second one second and then animation typing comment blinking infinite nope maybe it is film mode I can just Google it but you know that's not interesting okay now it removes the whole word so anyway CSS animation infinite Loop yes please animation iteration count and if infinite is the film mode says Dave what about a before and after pseudocode on typed class oh yeah you could do that every time I get involved in those it tends to so I can kind of see difficult I can kind of see why they've gone for this shorthand because it becomes a little bit easier to maintain it with multiple all right let's try that then I still think two different classes is the way to go a blinking cursor class okay so that was animation duration yeah we can do it one second and then what was the infinite one infinite Lube is iteration cap well Dave says I mean when I do it also suggests it but if I do animation fill mode and I type comma there is no infinite net so I don't know yeah oh there you go that actually works look at that but it doesn't do the thing anymore okay well that's a progress typing one second five seconds oh hang on do I need to do I need to do the same thing foreign I would move this in here blinking cursor so we know what it is typed blinking cursor uh later on in okay that is blinking it is but not typed they're not typed yeah it doesn't because I need to move together with the Overflow hidden but it would do yeah but because of I don't think anything because they're currently always blinks on the left side and because you're not changing the width of that class doesn't it like override it presumably it doesn't move at all but you are changing the width of this element and that border is attached to that element yeah but then it reads the following class after that maybe it doesn't work I think the cursor animation is overwriting the typing animation yeah that's what hey so he always keeps it to the left right because it's cascading you mean yeah cascading style sheets so are you trying to tell me that okay that works but now it's the other way around no it's the type animation that's all right so it must be in the same one in the same one okay well there we go interesting experiment yeah we found a way and I would still haven't solved the problem about it how to get these in here but yeah well it's like they suggested in in the thing that you have to do it in one um in one's oh hang on I think I know I think I know just add important to all the type properties LOL no don't do that I think we can all just mash them all into one yeah well I'll just try one last thing and if that doesn't work that's fair enough one second I think I've actually did it looks okay he blinks yeah but now the typing is infinite now the typing isn't really don't want can't you just do like separating them with commas like you've done in line 22 and line 23. so animation iteration count would be one comma infinite I think I think that's gonna work oh you clever sausage refresh oh it's working like yeah but does it work yes yes nice okay yeah that was good so now your JS idea I think we need something along the lines of oh so what is that it's like it that's done I mean then just so set to the text probably no nope that's that nobody sent us a text that's typing effect like your users well I hope you're delighted yes oh thank you very much who actually who wrote this who wrote this CSS animation is it Jamie Jamie juvenile or maybe Jubilee Jimmy juvenile thank you oh there you go yes James oh there you go and there is a LinkedIn page editor HubSpot website blog oh well thank you very much Jamie yes um so in the JS I think the steps will be grab the H1 oh yeah in the gym set the text content count the new the news content length well let's go for const um hellos and then we'll just go for scrimber [Music] um yeah pumpkin Casey okay noodle oh and Michael oh and like and pet we're not no Michael noodle these are the names I think we should I think yeah like apart from Pep hair is not our pet okay I think we've made up uh so you were saying what do you want to do at a random random okay yeah yeah um ID yeah so yeah basically I want I want it not to be just hello it's going but I also one I wanted to like tie it back in and then type it back out so we'll see we'll see how that goes okay so ID equals which one no yes hellos okay okay so uh sorry const I think I already have the looks God I wasn't going to say anything hello text uh document dot get element by the cool idea thank you hello let's hope we can put it up okay so I've got that good and now I just want to Generate random number no I'm just I just I'll just go through one by one for lip yeah four hello porridge name so for each name in the hellos what do I want to do I want to take hello actually hello text Dot inner text yes hello text and what do you want to do with that hello wait what is that constellar text so that's the text inside so I can actually just override it with big chords and then I think a bit of string interpolation yeah yeah good shot okay just do hello all right okay I don't usually use forage assignment to constant variable oh of course because I do it no why um does it actually actually nothing needs to trigger it right but you should just do it on its own yeah okay that has that has done it nine times nine times but I don't think he has reassigned that text uh no because I grabbed the text I mutated nine times but that actually doesn't return anywhere they need to render it hello element that's a bad name hello element Dot in a text equals hello name so there we go so by the by the end it should be afraid because it has but by the time the animation has finished so the reason it's sold only showing photos because it's doing it so so quickly yes hmm so maybe if we put like a one second Gap after I don't really want to do it with a gap though so what I want somehow like run run animation until the end set interval oh that's actually a good if you if you add the characters in one by one you can just remove the typing animation completely huh the cursive blinking will still work cool idea I would like to use this on my portfolios landing page for my skills or something yeah so that again uh what was that what was that uh one by one yeah if we just added them one by one the characters we wouldn't need the animation if we had enough time between adding each one I guess so if I just do this um I think kind of see what so then name Dot forage so the string is an array of elements is it yeah so I can now on on the string basically for every character I can just say name for each really um you can just say an uncomfortable chair he's talking to him hello uh in a text what uncomfortable chair I always model how people come up with their usage it does indeed look like an uncomfortable chair class equals char hello dot for each is not a function okay maybe I was wrong about that then uh oh yeah of course yes so uh let's just say name dots no okay so I need to got I think I need to not split on it first [Music] with foreign but if I just do an empty one that probably didn't provide it uh something to split it with whoa okay okay not bad oh but how do we get it to remove the last one though I mean you know let's worry about that later because it seems like quite an important point I guess we could just reset it oh no because you need to remove one I don't know man I think we should stick with this yes so you can that's it let me just quickly Okay so interesting what color I think it's somehow Auto splitting there white space that's probably because of the name got split okay let's just hack it around a bit why does it not anyway I'll worry about this space later hello scrambler so he does type it out name split plus equals right then what I want to do is once it's added it I can just set timeout for like some time anyway I'll just say add pause here that's all right I don't really worry about it but then I can now minus equal it right yeah I think so we're looking my secret not a number five minutes uh because uh because it's trying to minus uh why does it work with Plus and not with mine it's actually why do why do I do that I can just say pop I don't think so it's not an array oh yeah sorry in the text I still don't think that's gonna work that's thrown away Michael can we just stick to the CSS I did and so I plus equal the chart and it looks like I'll need to run multiple ones I think here is when I need to wait and then how do I remove these so I do have like hello screenper typed out but how do I remove them uh well I would have thought hello l dot in a text minus equals child would have worked but it didn't no because it basically tries to plus equal appends it minus equal is trying to subtract like mathematically but it I don't think you will it's clever enough to recognize hmm But maybe Maybe um do a slice Maybe text content dot slice zero minus one yeah so very much is better than the CSS solution though what if you use a span element um after hello and change the span element probably would be that yeah keep the hello where it is I just do it that instead of hello in a text actually yeah was it Halloween attacks equals hello in a text or slice uh what's it zero minus one zero common minus one okay that does it straight away because it doesn't wait okay let's wait then uh yes so High marks delay sleep pause and wait oh uh okay that looks good uh I think that's one another second rule yeah hello no I think I'm hmm I don't think you're adding anything back on now though are you no I imagine so yeah tracks out suggests using a promise yeah you can do can do the promise oh hang up well so I need to put that in in the timer right well yeah that's what I meant you're not yeah right really adding the next name I think hello crimber hello okay I've removed it real quick good yeah lots of progress so how do we get it to render the next one then isn't that what the 4-H is going what should be doing thanks okay I'm gonna remove this every second that way it's painfully long yeah yeah hello scramble and then it removes the whole thing okay you'd have to put the remove letter function inside the set timeout yes done that um yes you have if I also want to pause for every character actually hmm CSS was better I'm telling you and I think there is uh go up okay so it must return the whole thing apart from that one last character but why run oh it runs from all of the same time in one okay so the nested timeout doesn't particularly work as such anyway so I think if I just I just do that no but anyway but I think I think there is a beginning of something but I haven't cracked it yet interesting interesting so to wrap things up can you demonstrate that we have actually done what we set out to do oh yeah what we're set out to do is basically we need to remove all of those JavaScript and there you go it uh types and flashes yes um hello there you go beautiful so how is this local um CSS Friday Odyssey no I liked it it was fun it was fun and uh I'll even try to see if how it's actually well you know it's always interesting to try to re-implement something you've seen somebody else do and then see what happens after that yeah it would be quite interesting to see why other people come up with how they actually Implement these yes so yeah use this for anything drop it in the comments of this video Yeah drop it in the comments um you know go to our Discord and share it with us there yeah that'll be quite neat um and Dave says I can't believe I've got to see Michael getting excited about CSS karimba.com I had a thought I know you worked for me using text content instead of in a text oh drop it below if you can next week yes um what's going on we will drop ours below as well um oops next week next week I will be joined by who's there yeah Shopify Dev who's got lots of inside intro about finding your first tech job a hiring manager who's also recently done 100 hours of interviews as an applicant really yeah very interesting lots of exciting stuff there um thank you for joining us great to have everyone here if you enjoyed this let us know in the comments we know we're on the right track yes or the wrong track if indeed we are no yeah I mean it's probably likely um we were on the wrong track I don't well something tells me about whenever you're trying to write code that doesn't quite work out with set timeouts you're probably doing it wrong yes but I am getting excited about CSS too because of my code says what have I done can I have missed out a thousand leakro challenges mm-hmm oh yeah actually I remember that now yeah amazing I have done zero how about you uh probably like five I think we should do some on this live stream no I'm not doing that really yes thank you says Gina have a great weekend you too yeah have a lovely weekend yeah yeah and don't forget of course tick keep coding yes have a nice weekend everyone [Music]