this tutorial was the best of all the internet because other youtubers videos were complicated and hard to understand but you made it so simple that any one could understand.
Ooooh thank youuuu 🙂😉 Love your Polly cover! The Nirvana Unplugged album was one of my favorites...spent hundreds of hours listening to it 😁 Keep it up, all the best!!
Hi Coding journey How can i add html tag like into the array element for this typing effect using javascript. Ex "hard" Could you please help me about the above things. Thanks in advanced
Can you please explain why you're not using curly brackets on the if statements inside your else statement. I have searched around and I can not wrap my head around why the code does not work if you do have curly brackets. Thank you.
Hey! Thanks for the lovely comments 🙂 We can omit the curly brackets for an "if" statement, when there is only one statement to be executed. However, this is optional! Using curly brackets always works (in fact there is a debate whether always using curly brackets should be the best practice...) So, for example, the following should work fine in both cases: if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing"); OR if(!cursorSpan.classList.contains("typing")) { cursorSpan.classList.add("typing"); } (OR, breaking it into multiple lines) if(!cursorSpan.classList.contains("typing")) { cursorSpan.classList.add("typing"); } Hope this helps! All the best, keep coding!!
Hello Sir, first of all thanks for this! I need a little help tho.. I was trying to implement your code to my file with other codes and I got an error that says : Cannot read property ‘classList’ of null at type(index line blablablabla) . I went to code pen and stack overflow.. but umh not sure what to do here..?
Hello! Well usually it is very difficult (if not impossible) to debug code without looking at it 🙂 But the error you are getting suggests that you are trying to access an element which does not exist. In this project we set: const cursorSpan = document.querySelector(".cursor"); So you have to make sure that in the HTML file you do have an element with the class "cursor" (). You can also find a link to the project in the description, in case you want to have a closer look! All the best, keep coding!!
Amazing bro , very good explanation and useful as well, but unfortunately I am still beginner and I cant understand it completly, plz can u post more of this ? , anyway 10x again bro .
Hey! Just kept the default VS Code editor settings, I didn't change anything. From what I can see, the default font priority is: Consolas, 'Courier New', monospace. Nice channel btw 😉 Doing good, keep it up!!
Hey! Glad you liked it 🙂 Well there are always many ways to achieve something. The solution I present here makes more sense to me, feel free to come up with your own solution! However, I think if you take some time to think about it, everything will soon make more sense...it's not rocket science 😉 All the best, keep coding!!
Hey, what's up man! I can't debug without looking at your code, but in the description you can find a link to the finished project and compare with your code, so combined with the video explanation I think you won't have a hard time figuring it out! All the best, keep coding 💙🙂
Hey CJ. Thanks for this tutorial, very helpful. I have a request. I have a landing page that will use this typing effect but I am struggling with a JavaScript code to swap images based on the TextArrayList index selected. Can you help out?
Hey mate! My suggestion would be to keep trying until you make it work...that's the best way to learn...and feels great as well 🙂 But if you've reached high levels of frustration, feel free to create a CodePen with the specific part you are trying to do or GitHub or email me the project and I'll have a look!
how do you make a code that erases all after "Coding is LIFE". Then add a new line with all in white color, for example: () = red "Coding is (hard)" "Coding is (fun)" "Coding is (a journey)" "Coding is (LIFE)" *Then delete all* "Come and join now!"
Hello! I didn't change the default VS Code fontFamily settings, so I suppose it is Consolas. Unless you specify otherwise in settings.json, the default font priority is: Consolas, Courier New, and then monospace.
@@CodingJourney I have a question, do you know how to increase the typing and the erasing speed? I've been trying to change the "typingDelay" and "erasingDelay", but nothing happened. Any advice? Thanks in advance :)
Hey 🙂 Changing "typingDelay" and "erasingDelay" should do the job! You can also find a link to this project in the description in case you want to compare with your code! Good luck, keep coding 😉
Hey! In this case you only want to proceed to erasing if the typed word is not the last one in the textArray. So: function type() { . . . else { cursorSpan.classList.remove("typing"); if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay); } } That should do it 🙂 All the best!!
Hey! It still works with only one word. If you only want the word to be typed once, then in the "type" function, you can change the "else" content to: cursorSpan.classList.remove("typing"); if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay); basically defining that you only want to proceed to erasing if the typed word is not the last one in the textArray. A bit of an overkill for a single word, but that's how you could go about it without making major changes to the code! All the best, keep coding 💙
Take your time and gradually everything will make more sense! There is also a link to this project in the description which might help as well. All the best, keep coding!! 💙
@@CodingJourney I tried copying the code for looping but it did not. I am stuck with debugging and I started the work once again and playing your video once again. This was the most simple tutorial for typewriter effect using javascript :)
Hey! You can always adjust the cursor width according to your taste! As you can see, I've set cursor width to 3px. If you find this to be thick, you can set it to less than that! All the best, keep coding 😉💙
Hey man! If I understand correctly you want it to stop repeating the loop once it types the last word?! Someone asked the same question...I'm pasting my answer so that you don't have to search through the comments: In this case you only want to proceed to erasing if the typed word is not the last one in the textArray. So: function type() { . . . else { cursorSpan.classList.remove("typing"); if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay); } } Hope this is what you were looking for!! All the best 🙂
Hey! If I understand correctly you want it to stop repeating the loop once it types the last string in the textArray?! Someone asked the same question so I'm pasting my answer so that you don't have to search through the comments: In this case you only want to proceed to erasing if the typed word is not the last one in the textArray. So: function type() { . . . else { cursorSpan.classList.remove("typing"); if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay); } } Hope this works for you!! All the best 🙂
Hello! Thank you, glad you liked it 🙂 You can control the typing speed by changing the typingDelay variable value (and erasingDelay value correspondingly for erasing speed). All the best!! Keep coding 😉💙
Amazing bro , very good explanation and useful as well, but unfortunately I am still beginner and I cant understand it completly, plz can u post more of this ? , anyway 10x again bro .
Excellent! Glad you liked it 🙂 I will definitely keep uploading! And you will definitely become an awesome developer, if that's what you want 😉 Keep it up!!!
this tutorial was the best of all the internet because other youtubers videos were complicated and hard to understand but you made it so simple that any one could understand.
Oh thank you for the lovely comment! I certainly did my best 🙂 Glad you liked it 💙💙
Thanks I tried hundred other tutorials but this was the only one working👍🏻
Oh thank you!! Very glad you found this useful 🙂 All the best, keep coding 😉💙
same!!
thank you. idk js and from this video bc of the explanation i learned a little and understood how the script works. tysm!
Amazing! Totally my pleasure 🙂💙
Amazing explanation, clearer than water, first time I had no error in a CSs/JS excersice, thank you a lot bro. Greetings from Mexico.
Oh thank you for the lovely comment 🙂 My pleasure!! Warm greetings to Mexico 💙
This is the second time i have come across this channel and it is so underrated. I don't understand how he doesn't have more followers.
Oh thanks mate!! 🙂 No need for frustration, it is what it is 😉💙
You sir, did an amazing job here. Much appreciated. All my attempts at this were not as clean as this
Thanks for the lovely comment man! Very happy to hear you found this useful 🙂
i realize I'm kinda randomly asking but do anyone know of a good website to watch newly released movies online ?
@Angelo Griffin i watch on flixzone. Just search on google for it :)
I cannot stress enough how much this tutorial,has helped,thank you so much to Coding journey!!
Thank you for this amazing comment 🙂 Very happy to hear that this was helpful! All the best, keep coding 😉
I use ABC rule
A -- Always
B -- Be
C -- Coding
Heheh! Absolutely love it 😉👍💙
Superb lesson man! Thanks for this, very easy to understand! Most videos here in youtube are only the code without explanations.
Oh thank you for the nice words! 🙏🙂 Very glad you found this useful! Keep coding!! 😉
your way of explanation is amazing... thanks sir
Oh thank you 🙂 Totally my pleasure 🙂💙
Amazing tutorial. Very clean and love the detailing. Thank you for sharing.
Oh thank you 🙂 My pleasure, very glad you liked it!!
I loved it! Thanks for this tutorial! Keep up your good work!
Oh thank you! Very glad you liked it 🙂 You too 😉
Best typewriter effect tutorial on youtube
Ooooh thank youuuu 🙂😉 Love your Polly cover! The Nirvana Unplugged album was one of my favorites...spent hundreds of hours listening to it 😁 Keep it up, all the best!!
Great tutorial as always! Keep it up, man! Thanks!
Oh thank you for the lovely comment and encouragement 😉 My pleasure 🙂 You too!!
Awesome video! Very helpful. Thanks!
My pleasure 🙂 Very glad you liked it! 💙
Coding is Superpower💪 Thank's sir for great tutorial
Yes it is 😉 My pleasure, glad you liked it!! 💙
WOW!!!!!!!!! it's So much helpful .
Amazing!! Glad it was helpful 🙂
It was very much helpful and thanks for explaining in detail.
My pleasure 🙂 Very glad it was helpful!!
It was very usefull and well explained. Thanks a lot
Oh thank you 😊 Very glad you liked it!!
awesome! pretty and works nicely. i really appreciated!!
Oh thank you 🙂 Very glad you liked it!!
Thank you so much! You explain very well. New subscriber!
Ooooh thank you for the nice words 🙂 Very glad you liked it! Welcome aboard 😉🙂
Excellent mate! Doing great, keep it up!!!
you are amazing teacher my friend. Thank you so much
Oh thank you for the nice words 🙂🙏 Very glad you liked this!
Hi Coding journey
How can i add html tag like into the array element for this typing effect using javascript.
Ex "hard"
Could you please help me about the above things.
Thanks in advanced
Beautiful! Thank you Sir!!
How do i implement this into Wix Editor X? Iframe is not showing on Editor X's add menu.. Do I use the Home Page Code field?
Thank u sir this helps a lot bless you
Waaao! It's So great bro, perfect
Oh thanks man 🙂 Very glad you liked it!
i tried a lot of times even checked every bit but its after erasing some char speed become like superfast..... why this?
Can you please explain why you're not using curly brackets on the if statements inside your else statement. I have searched around and I can not wrap my head around why the code does not work if you do have curly brackets. Thank you.
Hey! Thanks for the lovely comments 🙂 We can omit the curly brackets for an "if" statement, when there is only one statement to be executed. However, this is optional! Using curly brackets always works (in fact there is a debate whether always using curly brackets should be the best practice...) So, for example, the following should work fine in both cases:
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
OR
if(!cursorSpan.classList.contains("typing")) { cursorSpan.classList.add("typing"); }
(OR, breaking it into multiple lines)
if(!cursorSpan.classList.contains("typing")) {
cursorSpan.classList.add("typing");
}
Hope this helps! All the best, keep coding!!
@@CodingJourney Thank you!
Hello Sir, first of all thanks for this! I need a little help tho.. I was trying to implement your code to my file with other codes and I got an error that says : Cannot read property ‘classList’ of null at type(index line blablablabla) . I went to code pen and stack overflow.. but umh not sure what to do here..?
Hello! Well usually it is very difficult (if not impossible) to debug code without looking at it 🙂 But the error you are getting suggests that you are trying to access an element which does not exist. In this project we set:
const cursorSpan = document.querySelector(".cursor");
So you have to make sure that in the HTML file you do have an element with the class "cursor" ().
You can also find a link to the project in the description, in case you want to have a closer look! All the best, keep coding!!
Amazing bro , very good explanation and useful as well, but unfortunately I am still beginner and I cant understand it completly, plz can u post more of this ? , anyway 10x again bro .
codeing is LIFE
👍💙💙🙂
Which font you are using please 😃 tell for text editor
Hey! Just kept the default VS Code editor settings, I didn't change anything. From what I can see, the default font priority is: Consolas, 'Courier New', monospace. Nice channel btw 😉 Doing good, keep it up!!
@@CodingJourney thankyou so much 😚 to
Awesome!
Oh thank you 🍻💙
Thank you so much bro!!!*
Thank you so much sir! But will it be possible to rewrite the code without using 'recursion'? Don't understand how it's working "under the hood" .
Hey! Glad you liked it 🙂 Well there are always many ways to achieve something. The solution I present here makes more sense to me, feel free to come up with your own solution! However, I think if you take some time to think about it, everything will soon make more sense...it's not rocket science 😉 All the best, keep coding!!
Amazing, thank you so much
Pleasure is all mine 🙂 Very glad you liked it!!
@@CodingJourney I just needed this functionality in a website. This will help me a lot. Thanks again, keep up the good work. you are doing great
Thanks man! You too, all the best!!!
Can you make a video for . Another typing effect ( use only CSS) bcoz understanding JS is difficult and complex sometime
Thank you so much bro ❤️❤️❤️❤️❤️❤️
Totally my pleasure bro 🙂💙💙
Hey man, i had an issue. When i call type in the setTimeout(type, typingDelay) .. it doesnt work. any idea?
Hey, what's up man! I can't debug without looking at your code, but in the description you can find a link to the finished project and compare with your code, so combined with the video explanation I think you won't have a hard time figuring it out! All the best, keep coding 💙🙂
Hey CJ. Thanks for this tutorial, very helpful. I have a request. I have a landing page that will use this typing effect but I am struggling with a JavaScript code to swap images based on the TextArrayList index selected. Can you help out?
Hey mate! My suggestion would be to keep trying until you make it work...that's the best way to learn...and feels great as well 🙂 But if you've reached high levels of frustration, feel free to create a CodePen with the specific part you are trying to do or GitHub or email me the project and I'll have a look!
Very Use full
very nice ... & I will see this amazing tutorial later ...
Excellent man! Appreciate the support!! Keep coding 😉🙂
Very nice. Thank you!
Glad you liked it man! Thanks for the support!!
how do you make a code that erases all after "Coding is LIFE". Then add a new line with all in white color, for example:
() = red
"Coding is (hard)"
"Coding is (fun)"
"Coding is (a journey)"
"Coding is (LIFE)"
*Then delete all*
"Come and join now!"
Awesome man
Thaaaanks 🙂 Glad you liked it!!
useful!!! Thanks
Thank you!! Very glad you liked it!
What font do you use in your VS Code
I am asking because I too like your font (the font used in the editor) and tutorials. They have helped me a lot.
And please tell me the font you use in your editor (I'm obsessed with fonts)
Hello! I didn't change the default VS Code fontFamily settings, so I suppose it is Consolas. Unless you specify otherwise in settings.json, the default font priority is: Consolas, Courier New, and then monospace.
Thanks bro :)
My pleasure 🙂💙
Thank you very much!
My pleasure 🙂 Very glad you liked it!!
@@CodingJourney I have a question, do you know how to increase the typing and the erasing speed? I've been trying to change the "typingDelay" and "erasingDelay", but nothing happened. Any advice?
Thanks in advance :)
Hey 🙂 Changing "typingDelay" and "erasingDelay" should do the job! You can also find a link to this project in the description in case you want to compare with your code! Good luck, keep coding 😉
How would I make it to stop "Coding is LIFE" at the end of the loop?
Hey! In this case you only want to proceed to erasing if the typed word is not the last one in the textArray. So:
function type() {
.
.
.
else {
cursorSpan.classList.remove("typing");
if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay);
}
}
That should do it 🙂 All the best!!
@@CodingJourney you are awesome! thank you
nice logic sir
Oh thank you! 🙂 Very glad to hear that 😉
Thank you so much sir
Love you bro.
💙💙💙🙂
Thanks
Love it!!
OMMMMMMMMGGGGGGGGGGGGGGGGG IT WORKED
😁💙
What if I have only one word in the array?
Hey! It still works with only one word. If you only want the word to be typed once, then in the "type" function, you can change the "else" content to:
cursorSpan.classList.remove("typing");
if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay);
basically defining that you only want to proceed to erasing if the typed word is not the last one in the textArray. A bit of an overkill for a single word, but that's how you could go about it without making major changes to the code! All the best, keep coding 💙
@@CodingJourney thnx bro you are a life saver...can I use setInterval instead of settimeout?is it the same?
Excelente muchas gracias men
Thanks man! Glad you liked it!!
Thank you Sir
My pleasure 🙂 Glad you liked it!!
whoooooa! thanks
thanks
I am having a problem in looping the typewriter effect :(
Take your time and gradually everything will make more sense! There is also a link to this project in the description which might help as well. All the best, keep coding!! 💙
@@CodingJourney I tried copying the code for looping but it did not. I am stuck with debugging and I started the work once again and playing your video once again. This was the most simple tutorial for typewriter effect using javascript :)
Typewriter works perfectly fine but it doesn't loop after the end word in my case.
Hey man! There is a link to the project in the description so that you can compare with your code. All the best!!
Thanks ❤
My pleasure :) Glad you liked it!!
cursor is very thick in my web page but not in yours
Hey! You can always adjust the cursor width according to your taste! As you can see, I've set cursor width to 3px. If you find this to be thick, you can set it to less than that! All the best, keep coding 😉💙
Its working as if there were a loop.. How does it iterate through the array without looping? 0_o
Hey man! If I understand correctly you want it to stop repeating the loop once it types the last word?! Someone asked the same question...I'm pasting my answer so that you don't have to search through the comments:
In this case you only want to proceed to erasing if the typed word is not the last one in the textArray. So:
function type() {
.
.
.
else {
cursorSpan.classList.remove("typing");
if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay);
}
}
Hope this is what you were looking for!! All the best 🙂
@@CodingJourney I thank you a lot! :)
Amazing! Glad it worked 🙂
How can we stop at just coding is life when it is done with all the strings in array
Hey! If I understand correctly you want it to stop repeating the loop once it types the last string in the textArray?! Someone asked the same question so I'm pasting my answer so that you don't have to search through the comments:
In this case you only want to proceed to erasing if the typed word is not the last one in the textArray. So:
function type() {
.
.
.
else {
cursorSpan.classList.remove("typing");
if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay);
}
}
Hope this works for you!! All the best 🙂
perfect
🙏🙂
thanks bro
Sir it amazing but the type speed is very slow
Hello! Thank you, glad you liked it 🙂 You can control the typing speed by changing the typingDelay variable value (and erasingDelay value correspondingly for erasing speed). All the best!! Keep coding 😉💙
Thank you
Is it possible to move the second text of the array on the second line? Thanks
it did not work for me
30000k likes for me ... finally I found this🙌
🙏💙💙🙂
600th like
🙂 600th like and 100th comment 😉 Thank you!! Huge love 💙🙂
Amazing bro , very good explanation and useful as well, but unfortunately I am still beginner and I cant understand it completly, plz can u post more of this ? , anyway 10x again bro .
Excellent! Glad you liked it 🙂 I will definitely keep uploading! And you will definitely become an awesome developer, if that's what you want 😉 Keep it up!!!
Thanks ❤
You're welcome 😊 Glad you liked it!! 💙