Edwin, Im an older guy retraining after an industrial accident. Just getting into Javascript and been having a rough go of it. I just found your channel (this video, to be precise) last weekend and powered through it. All the errors, of course, were mine. I feel a lot better about Js after finishing this tutorial. Thank you so very much for this. I am now subscribed and looking forward to whats next . I will be scouring your channel. Again, sir, thank you!
@@developedbyed, Thank you! I know this is going to happen, I just have to put in the work. What you're doing has already helped me immensely. It's going to help countless others. I just saw today you have a tutorial on a weather app. I know what I'm doing this weekend 😃!
@@rickgale3182 Just so you know your not the only one. I'm 44 and went from a career starting as a machinist and worked my way up to a project manager. Then I had a brain bleed and it is just to dangerous for me to be out in the field. I really have a passion for coding and started about six months ago. I feel good about CSS and HTML but now I'm getting into JS. Dev Ed has been my favorite channel to learn from and keeps me going with his entertainment at the same time. Let me know how you are doing and we can trade notes lol.
This is the most useful content I have come across after months of trying to find someone to explain it from start to finish. You are an absolute legend!! Thank you so much!!
The guys like you ed is keeping us alive in learning project base javascript. I got such a project which I was searching,,,I appreciate your tutorial buddy. I will watch your video on youtube without downloading it....you deserve it
This was my first project that I built and I really enjoyed it! Thank you for the great step by step tutorial and helping to put theory into practice. At first, I found it difficult to grasp the concepts of Javascript but this video has helped massively. I can't wait to build more.
Absolutely fantastic my friend, this just blew me away. OK i''ve just done 10 hours at work sorting a load of excel vba scripts and had a few whiskeys watching this. but seriously this was brilliant. One thing if i may point out, can you console log a little more so we get an understanding as to what is going on. for example the song duration.. Just a little bit of visualisation thats all so we can understand what is going on. But on a serious note your viids are excellent. As an excel vba specialist and a novice web developer you have given me inspiration.
Thanks so much for all you do. You put some great videos together. I have done many of these projects along with you and you have helped me so much with the Javascript class I am in right now. I love this particular application. I'm going to put it together as soon as I have time and will likely expand on it greatly with other scenes and sounds. This will be a great addition to the inspiration and meditation site I am designing. Thanks again.
hey there... this is one of my best tutorial site and i enjoy your tutorial. i love the way you teach and your sense of humor...every thing is explained perfectly
Great project! Thanks for creating it. Really appreciate how you explain the rationale behind the coding. Great job. Will definitely try out your other Vanilla JS projects.
Really helpful tutorial. Impressive by it's simple and modern vanilla javascript code. It makes me very happy building useful practical apps like this one. Congrats Ed, just loved it!
Great tutorial Ed, really enjoyed coding this app. Stuck at home isolating due to Coronavirus, so more apps like would be a good idea. Big fan of your channel. Many thanks.
Thanks video and this app!. i have problem 37:19.i dont know you cut video or not.it didnt work. ${minutes}:${seconds} was be in h3 when i write code timedDisplay.textContent = '${minutes}:${seconds}';.Everything was great until this part)) but i `ll try to find problem.Thanks share app file too!
@@EugeniaChe You don't convert a string to number (casting), simply, if the number is less than 10, you add a string "0" in front. Anyway, as you mentioned, with a ternary condition could also be solved, great idea! The good thing about programming is that there are a thousand ways to do the same :)
Awesome!! This guy is really cool. You buddy inspire and motivate me whenever I watch your helpful videos.I haven't subscribed any channel for long time, because there is heaps of content to watch and cover, but today you pushed me to subscribe your channel. Many thanks.
Subbed. Been watching your vids and following along as i'm super green to js and your vids are fantastic. TY for all the work you've put into helping noobs out!!
Thank you so much for amazing videos like this one, you're not only handsome, but a great creator of content, thank you for helping us beginners to get the hang of JS with such interesting projects :D
Hi Edwin. Really awesome video. Is there any way to make the circle progress bar animate smoother? Also, any simpler way of having a second digit added to the 'second' during countdown?
Amazing tutorial. Super fun! I am curious about how to fix the replay option so that it displays 10:00, 5:00, 2:00 instead of 10:0, 5:0, 2:0, and will keep working to figure it out but would love if there is a way to receive help!
What if user decides in a middle of meditation, that he wants to swap duration from 2 minutes to 5 minutes? It should starting to count from 5:00 instead of the point it was left on. Also, it should not auto play after picking different sound. I love your videos Ed, but because you try to rush them in order for them not to be too long you leave so many small, irritating bugs. You can always split the video into two parts and get the app finished.
This is a super cool concept and I've been following every single step, even pausing in between and checking for errors. I've done all of the code and I feel like I'm losing my mind. The timer, the buttons, and the outline are all not functioning. This is my second time watching the video and I have no idea why mine isn't turning out right. I even checked the source code on GitHub and it still doesn't work. Am I missing something? Otherwise great video for an outline!
I had the same issue , make sure your are calling timeDisplay.textContent = `${Math.floor(durationFake / 60)}:${Math.floor( durationFake % 60 ) right after you set the durationFake to be 600 and apply the strokeDasharray attritbutes . This is how my code is .. //Duration let durationFake = 600; outline.style.strokeDashoffset = outlineLength; outline.style.strokeDasharray = outlineLength; timeDisplay.textContent = `${Math.floor(durationFake / 60)}:${Math.floor( durationFake % 60 )}`; Hopefully that helps .
also my timeSelect is like this timeSelect.forEach((option) => { option.addEventListener("click", function () { durationFake = this.getAttribute("data-time"); timeDisplay.textContent = `${Math.floor(durationFake / 60)}:${Math.floor( durationFake % 60 )}`; }); });
i am new in javascript.i tried to follow your project but when i reached "const outlineLength = outline.getTotalLength();" in this line my laptop showed to error in my laptop what i do??????plz answer me
Thanks, nice! Why do you pass "song" in as parameter to the "checkPlaying" function? (the constant would be accessible anyway) Parameters seem cleaner, but then "video" and "play" should also be parameters. What do you think?
Edwin, Im an older guy retraining after an industrial accident. Just getting into Javascript and been having a rough go of it. I just found your channel (this video, to be precise) last weekend and powered through it. All the errors, of course, were mine. I feel a lot better about Js after finishing this tutorial. Thank you so very much for this. I am now subscribed and looking forward to whats next . I will be scouring your channel. Again, sir, thank you!
Proud of you and keep going! Don't let an accident stop you from anything!
@@developedbyed, Thank you! I know this is going to happen, I just have to put in the work. What you're doing has already helped me immensely. It's going to help countless others. I just saw today you have a tutorial on a weather app. I know what I'm doing this weekend 😃!
@@rickgale3182 Just so you know your not the only one. I'm 44 and went from a career starting as a machinist and worked my way up to a project manager. Then I had a brain bleed and it is just to dangerous for me to be out in the field. I really have a passion for coding and started about six months ago. I feel good about CSS and HTML but now I'm getting into JS. Dev Ed has been my favorite channel to learn from and keeps me going with his entertainment at the same time. Let me know how you are doing and we can trade notes lol.
What are you doing now?
Take a deep breath and enjoy
How will u rotate circle from top instead of from quarter?
You scared the shit out of me by that sudden appearance in the outro.
The tutorial was absolutely fantastic. I wish I had found your channel earlier.
This is the most useful content I have come across after months of trying to find someone to explain it from start to finish. You are an absolute legend!! Thank you so much!!
Hi! I'm studying Web develop. Your video is so inspired to me! Thanks!!
The guys like you ed is keeping us alive in learning project base javascript. I got such a project which I was searching,,,I appreciate your tutorial buddy. I will watch your video on youtube without downloading it....you deserve it
This was my first project that I built and I really enjoyed it! Thank you for the great step by step tutorial and helping to put theory into practice. At first, I found it difficult to grasp the concepts of Javascript but this video has helped massively. I can't wait to build more.
Please make more such projects, thanks a lot
Absolutely fantastic my friend, this just blew me away. OK i''ve just done 10 hours at work sorting a load of excel vba scripts and had a few whiskeys watching this. but seriously this was brilliant. One thing if i may point out, can you console log a little more so we get an understanding as to what is going on. for example the song duration.. Just a little bit of visualisation thats all so we can understand what is going on. But on a serious note your viids are excellent. As an excel vba specialist and a novice web developer you have given me inspiration.
Thank you so much! Will remember to console log more in the future!
this helped me understand javascript a little bit, thanks!
Thank you so much for this video. it is very helpful !
Awesome Project ....Thanks For Share it....!! LOVE YOU BRO..
I have been meditating every day and this was such a fun project. I can now use my own meditation timer. Thank you so much!!
Thanks so much for all you do. You put some great videos together. I have done many of these projects along with you and you have helped me so much with the Javascript class I am in right now. I love this particular application. I'm going to put it together as soon as I have time and will likely expand on it greatly with other scenes and sounds. This will be a great addition to the inspiration and meditation site I am designing. Thanks again.
thANKS TOO
WE need more tutorials like this. You are entertaining yet informative in your code explanation
hey there... this is one of my best tutorial site and i enjoy your tutorial. i love the way you teach and your sense of humor...every thing is explained perfectly
This was a brilliant tutorial Ed, more of this please!
Edwin, thank you for sharing with experience! Great job! Dreams come true!
Great project! Thanks for creating it. Really appreciate how you explain the rationale behind the coding. Great job. Will definitely try out your other Vanilla JS projects.
Oh, my God ! this is so fun!! i love it !!! more more more! please do more!
Interesting tutorial. It's simple coding with the basics, but the result is good. I appreciated the use of ES6. Thanks
That was some enjoyable experience building this tranquille app along with you. Thanks a lot!
You are the Excellence of TH-cam 🖖🖖
Really helpful tutorial. Impressive by it's simple and modern vanilla javascript code. It makes me very happy building useful practical apps like this one. Congrats Ed, just loved it!
I find your videos really helpful Thanks for the time you put into making these its very much appreciated
Wow this is an great project, I need to try it! Awesome job Ed :)
Eyy thanks so much Telmo!
Great tutorial Ed, really enjoyed coding this app. Stuck at home isolating due to Coronavirus, so more apps like would be a good idea. Big fan of your channel. Many thanks.
Thanks video and this app!.
i have problem 37:19.i dont know you cut video or not.it didnt work. ${minutes}:${seconds} was be in h3 when i write code timedDisplay.textContent = '${minutes}:${seconds}';.Everything was great until this part))
but i `ll try to find problem.Thanks share app file too!
Thanks for this video, I began to learn JS and this is a very good practice for me.
this is awesome it is a really fun and effective way of learning javascript. thank you very much I love your videos keep going
I really enjoyed coding along with you ,
Keep up the good work
Thanks soooo much for this tutorial, I really enjoy the way you explain all the steps and add comments, that's so useful to a learner.
new subscriber... this was a great video, was able to get this project completed watching your video, I'm going to add my own twist to it lol
its a great for practice and ad to my portfolio, Thanks Ed, greeting from Spain
Thanks, this is a great example! i will see it several times!
Have you done it with ES6 ver. Of javascript
Your my favorite coding channel! I enjoyed doing this project along with you. Please do more of this!
how do you get the length of SVG?
Thank you so much for this project...it helped me a lot..I actually enjoyed it while coding on my own after watching the video..!! Thank you
Great Video Ed!
Question for you
How to make the time display 10:0 to read 10:00?
Thank You!
timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${"0"+Math.floor(fakeDuration % 60)}`;
And...
let seconds = Math.floor(elapsed % 60);
let minutes = Math.floor(elapsed / 60);
if(seconds < 10){
seconds = "0"+seconds;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
Result: 10:00... 09:59...
@@DavidSR92 MrGold many thanks for your assistance. Much appreciated!
@@DavidSR92 wow thats smart 👍🏼 do I understand correctly that "0"+ converts string to number?
I solved it with a ternary:
// Select sound
timeSelect.forEach(option => {
option.addEventListener('click', function() {
fakeDuration = this.getAttribute('data-time');
let minutes = Math.floor(fakeDuration / 60);
let seconds = Math.floor(fakeDuration % 60);
const remainderSeconds = seconds % 60;
timeDisplay.textContent = `${minutes}:${
remainderSeconds < 10 ? '0' : ''
}${remainderSeconds}`;
});
});
@@EugeniaChe You don't convert a string to number (casting), simply, if the number is less than 10, you add a string "0" in front. Anyway, as you mentioned, with a ternary condition could also be solved, great idea! The good thing about programming is that there are a thousand ways to do the same :)
This is super awesome Ed.Thank you much Ed. you made learning super fun and easy.
A wonderful tutorial for beginners. Thanks
Awesome!! This guy is really cool.
You buddy inspire and motivate me whenever I watch your helpful videos.I haven't subscribed any channel for long time, because there is heaps of content to watch and cover, but today you pushed me to subscribe your channel. Many thanks.
I have an error in app.js at24:23 of your video really I don't what can I do to improve this problem can you help me?
Your method of teaching is amazing, Thank you ☺️
Hello! How can i change a text block in tag, like you did in 9:32 on the video - When every variable jumped on separate line?
Subbed. Been watching your vids and following along as i'm super green to js and your vids are fantastic. TY for all the work you've put into helping noobs out!!
I love your ideas
Thank you❤🌹😊
Real compact yet helpful video! Thank always Ed 👍
Thank you so much for amazing videos like this one, you're not only handsome, but a great creator of content, thank you for helping us beginners to get the hang of JS with such interesting projects :D
Very nice dude, i learn also JS since few month and it was a funny project ;)
Excellent content my friend! You're awesome!
your videos are pretty good and fun! btw I just started meditating you just got me covered!! btw make a CSS Grid tutorial! Thanks!
Css grid will be coming! Thank you so much!
noob question, but why does he separate the video/ audio tags source with a separate source tag, is that faster than putting in-line scr??
Hi Edwin. Really awesome video. Is there any way to make the circle progress bar animate smoother? Also, any simpler way of having a second digit added to the 'second' during countdown?
How can i upload that online on internet? Can somebody help me
really an awsome video enjoyed a lottts!!
Man you remind me of Jim Carry, my favorit Actor hhhhh :) Eddy we love you man ! Hope you back is better now
This makes me wanna meditate 👍
You are motivating and educating me! Thanks a lot! Keep going!!
I realy love you bild projects from the scratch and show your full mind path.
My goal was to make a few of these full projects because I know when I started learning that they helped me the most. Happy you liked it!
Nice attn to data attributes, thanks!
love this idea for an app! well done man :)
great video, would love to see more tutorials in your style. Thanks!
Thank you, you are great person, your vibes encourage me to learn
26:00 get the length *oof* the outline
Amazing tutorial. Super fun! I am curious about how to fix the replay option so that it displays 10:00, 5:00, 2:00 instead of 10:0, 5:0, 2:0, and will keep working to figure it out but would love if there is a way to receive help!
You need to add some code to the "seconds" variable. If seconds < 10 then seconds = "0" + seconds.
What a beautiful app! Thank you!
What if user decides in a middle of meditation, that he wants to swap duration from 2 minutes to 5 minutes? It should starting to count from 5:00 instead of the point it was left on. Also, it should not auto play after picking different sound. I love your videos Ed, but because you try to rush them in order for them not to be too long you leave so many small, irritating bugs. You can always split the video into two parts and get the app finished.
That's awesome video !! I Love it
How did you format the line of code at 9:30 in to individual lines?
Thx so much for making these great videos , they really helped a lot 😁💙
Fabulous and smart work! Thanks for sharing!
Very nice project. But I have a question. Background turns white when I click a different button, how can I fix it? Thank a lot.
Is there a backend or a way you can recommend to implement it?
Can u plzz tell how u got the sounds so that i can get more sounds too.plzz
Very good tutorial! Thanks a lot for that!
That's a verry good project idea. I am gonna try this with Flask. Thank you for this amazing idea (:
This is a super cool concept and I've been following every single step, even pausing in between and checking for errors. I've done all of the code and I feel like I'm losing my mind. The timer, the buttons, and the outline are all not functioning. This is my second time watching the video and I have no idea why mine isn't turning out right. I even checked the source code on GitHub and it still doesn't work. Am I missing something? Otherwise great video for an outline!
I had the same issue , make sure your are calling timeDisplay.textContent = `${Math.floor(durationFake / 60)}:${Math.floor(
durationFake % 60
) right after you set the durationFake to be 600 and apply the strokeDasharray attritbutes .
This is how my code is ..
//Duration
let durationFake = 600;
outline.style.strokeDashoffset = outlineLength;
outline.style.strokeDasharray = outlineLength;
timeDisplay.textContent = `${Math.floor(durationFake / 60)}:${Math.floor(
durationFake % 60
)}`;
Hopefully that helps .
also my timeSelect is like this
timeSelect.forEach((option) => {
option.addEventListener("click", function () {
durationFake = this.getAttribute("data-time");
timeDisplay.textContent = `${Math.floor(durationFake / 60)}:${Math.floor(
durationFake % 60
)}`;
});
});
This project is pretty good! It helps me know better about web development.Thank you,sir.👍👍👍
You're Awesome Man
i am new in javascript.i tried to follow your project but when i reached "const outlineLength = outline.getTotalLength();" in this line my laptop showed to error in my laptop what i do??????plz answer me
I'm having the same issue, did you get it fixed ?
@@omar_mtl ditto here. Is there any way to fix this? Please halp
Thanks, nice!
Why do you pass "song" in as parameter to the "checkPlaying" function? (the constant would be accessible anyway)
Parameters seem cleaner, but then "video" and "play" should also be parameters. What do you think?
Thank you! So fun and informative.
Another great tutorial. Thanks mate.
Just Loved it...!!!
Awesome video. I'm just curious did you install any JavaScript Packages?
Thank You Bro.. NIce app... Feels goods after making this app....
Awesome tutorial thanks very much!
Can you tell us where did you take the videos from? The Beach one and the rain one? :)
Thanks bro ,for such amazing video
Marvelous~The one and only
MAN U R MY FAVORITE WEB DEVELOPER.. MUCH LOVE FROM INDIA ❤️❤️
Where did you find the meditation videos and sounds that you use for the video?
I like this tutorial :)
thx created!
this video is amazing ! Thank you !
What theme is that? And does it comes with the Icon pack as Well?
Where did you find the music and video files? Want to add more
it looking really awesome bro love u .
Dev Ed your the best
Awesome Project!!