Build A Meditation App With Javascript HTML & CSS!

[@rickgale3182]

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]

Proud of you and keep going! Don't let an accident stop you from anything!

[@rickgale3182]

@@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 😃!

[@cjwebdev]

@@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.

[@fawadrehman114]

What are you doing now?

[@developedbyed]

Take a deep breath and enjoy

[@punit6121]

How will u rotate circle from top instead of from quarter?

[@navjeetbharti544]

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.

[@sanson143]

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!!

[@leejones8050]

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.

[@developedbyed]

Thank you so much! Will remember to console log more in the future!

[@saifullahrahman]

Please make more such projects, thanks a lot

[@nahidkarimankur4828]

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

[@thedesigner2299]

this helped me understand javascript a little bit, thanks!

[@CHUNKYSLYDER]

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.

[@bigd1386]

Hi! I'm studying Web develop. Your video is so inspired to me! Thanks!!

[@miajones3476]

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!!

[@Jakersfire]

This was a brilliant tutorial Ed, more of this please!

[@cryonide2008]

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.

[@ukaszmichalik5914]

thANKS TOO

[@MarioMaier]

Thanks for this video, I began to learn JS and this is a very good practice for me.

[@conoroshea5644]

I find your videos really helpful Thanks for the time you put into making these its very much appreciated

[@adkham_badalbaev]

Edwin, thank you for sharing with experience! Great job! Dreams come true!

[@emon-ahmed]

Awesome Project ....Thanks For Share it....!! LOVE YOU BRO..

[@qasimaaro4981]

WE need more tutorials like this. You are entertaining yet informative in your code explanation

[@heavydirtysoul1491]

That was some enjoyable experience building this tranquille app along with you. Thanks a lot!

[@crystalkearneyhennings743]

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.

[@chengzhang4341]

Oh, my God ! this is so fun!! i love it !!! more more more! please do more!

[@einspanner1]

Thanks, this is a great example! i will see it several times!

[@RoaaAlmadi98]

this is awesome it is a really fun and effective way of learning javascript. thank you very much I love your videos keep going

[@KuldeepSolankiYT]

your videos are pretty good and fun! btw I just started meditating you just got me covered!! btw make a CSS Grid tutorial! Thanks!

[@developedbyed]

Css grid will be coming! Thank you so much!

[@pasqualegiorgio]

Interesting tutorial. It's simple coding with the basics, but the result is good. I appreciated the use of ES6. Thanks

[@haenleinjane9594]

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.

[@vikrantkambli9265]

Thank you so much for this video. it is very helpful !

[@freddyprotech5099]

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!

[@yoezerdorji8204]

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

[@Telmosampaio]

Wow this is an great project, I need to try it! Awesome job Ed :)

[@developedbyed]

Eyy thanks so much Telmo!

[@zsee345]

I really enjoyed coding along with you , Keep up the good work

[@craigdavies6937]

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.

[@john_21544]

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

[@BoisNation]

Your my favorite coding channel! I enjoyed doing this project along with you. Please do more of this!

[@prithwishdey7131]

how do you get the length of SVG?

[@avizmotiongrafix]

A wonderful tutorial for beginners. Thanks

[@ismail-devland]

Man you remind me of Jim Carry, my favorit Actor hhhhh :) Eddy we love you man ! Hope you back is better now

[@krishnam384]

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

[@psykoonthestreet8640]

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!!

[@malhaar707]

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.

[@gaminglife9793]

I love your ideas Thank you❤🌹😊

[@HostDotPromo]

This makes me wanna meditate 👍

[@biLLie_wiLLie]

I realy love you bild projects from the scratch and show your full mind path.

[@developedbyed]

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!

[@dgalhotra2091]

This is super awesome Ed.Thank you much Ed. you made learning super fun and easy.

[@juancarlosvillan7619]

its a great for practice and ad to my portfolio, Thanks Ed, greeting from Spain

[@ashwins.m1800]

You are the Excellence of KZbin 🖖🖖

[@_filmina3764]

Real compact yet helpful video! Thank always Ed 👍

[@mdegginger4761]

Great Video Ed! Question for you How to make the time display 10:0 to read 10:00? Thank You!

[@DavidSR92]

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...

[@mdegginger4761]

@@DavidSR92 MrGold many thanks for your assistance. Much appreciated!

[@EugeniaChe]

@@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}`; }); });

[@DavidSR92]

​@@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 :)

[@aiiaznsk8er]

great video, would love to see more tutorials in your style. Thanks!

[@GaelDenysiak]

Very nice dude, i learn also JS since few month and it was a funny project ;)

[@tausifkhan8440]

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?

[@sunnydivino]

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

[@danielawaritefe4589]

2021 this still bangs!

[@joshuatao7020]

This project is pretty good! It helps me know better about web development.Thank you,sir.👍👍👍

[@conradmichael4504]

Your method of teaching is amazing, Thank you ☺️

[@bloomscode3825]

Nice attn to data attributes, thanks!

[@kennethcampbell8170]

Great video. Really learned a lot.

[@grigoriskokozides7337]

You are motivating and educating me! Thanks a lot! Keep going!!

[@samuelpimenta1942]

Excellent content my friend! You're awesome!

[@HoldenTudiks81]

Thx so much for making these great videos , they really helped a lot 😁💙

[@HaxGuru]

Hey I love your videos! Can you make a tutorial on how to make a custom HTML5 video player? Thanx

[@moiseekpai1913]

Yeah I would love it

[@erickcepeda4339]

Thank you, you are great person, your vibes encourage me to learn

[@yasaswini7977]

really an awsome video enjoyed a lottts!!

[@sayandutta2669]

MAN U R MY FAVORITE WEB DEVELOPER.. MUCH LOVE FROM INDIA ❤️❤️

[@matik93DNA]

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.

[@Fieldsplanet]

Thank you so much for the cool tutorial project. I made it

[@vatsalaykhobragade]

That's a verry good project idea. I am gonna try this with Flask. Thank you for this amazing idea (:

[@davidaffran7447]

love this idea for an app! well done man :)

[@lisamccormack6542]

What a beautiful app! Thank you!

[@qiutyrion8328]

Fabulous and smart work! Thanks for sharing!

[@paarthbathla615]

You're Awesome Man

[@aarthichandrasekaran1226]

you are cool and you TEACH US cool stuffs

[@ろっトン]

I like this tutorial :) thx created!

[@ОфелияБаширова]

Please make more such projects

[@bleckkarrington1073]

Thanks for all ... We still waiting for the next

[@rastaragazza]

Very good tutorial! Thanks a lot for that!

[@jackbaker3906]

Thank you! So fun and informative.

[@devanshimittal7986]

could you also make a video on deploying a website ?? it would be very helpful

[@TheYoudude1998]

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??

[@mostmojo]

Very good stepwise explanation! 😄What route do you suggest taking to better understand JavaScript? (Want to jump the gun from Ruby to JS, so been doing your videos!) Perhaps your javascript series? :) Have a good day!

[@thanhcao8358]

this video is amazing ! Thank you !

[@stuartmcpherson4446]

Awesome tutorial thanks very much!

[@shreyassalunkhe122]

Just Loved it...!!!

[@kachisideo6001]

Dev Ed your the best

[@rylanzhou7617]

Marvelous~The one and only

[@gurmin9062]

Thank You Bro.. NIce app... Feels goods after making this app....

[@ИгорьПарфенов-п2ь]

Hello 👋🏿 I’m from Russia Thanks for your video Good luck 👍🏿

[@importantprogramminglearn9483]

Забавно :)

[@Raaseth]

Very helpful tutorial and very well explained.. thanks a lot

[@mohaimanmohammadabdul7130]

Awesome Project!!

[@matheusmartinscremes5090]

Thanks for the tutorial!

[@oakley6889]

If you are using internet explorer as your browser THIS WONT WORK. Switch to chrome as the CSS command "justify-content: space-evenly;" isn't supported so the web-page will not look right due to incorrect formatting. i am just like many of you, a beginner to these languages (but at an intermediate level in other languages), so as far as i'm aware there is no other way of writing this command that will allow you to use explorer... Besides, who actually uses explorer (I just hadn't changed my default)

[@tomluna5557]

you are my one source of inspiration after Traversy. I hold you to heart bro. expect my follow at tweeter. this evening

[@eternalincantation]

where is the stop/restart timing button :D thanks for the vid!

[@kushagarwal2151]

Great work

[@fanuel2198]

That's awesome video !! I Love it

[@myverse_sb]

at 29:05 I just realized he put "//Get total length oof the circle"🤣😂

[@nammsy]

you are such a talented nerd :P

[@kuldeepgaur2272]

Thanks bro ,for such amazing video

[@ThatDumbDoge]

26:00 get the length *oof* the outline

[@Hodag37]

Awesome video. I'm just curious did you install any JavaScript Packages?

[@bijoyking5297]

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

[@omar_mtl]

I'm having the same issue, did you get it fixed ?

[@subtituladoschile1024]

@@omar_mtl ditto here. Is there any way to fix this? Please halp