Build A Meditation App With Javascript HTML & CSS!
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- Check out my courses here!
developedbyed.com
I am super excited to bring you another vanilla javascript project that we are going to build from scratch!
We will be creating a meditation/ambient sounds app that a user can enjoy by picking the amount of time to listen to and choose different ambient sounds.
We will take a look at working and manipulating music and video with javascript and how to build out a timer.
Feel free to add this project to your portofolio if you wish!
Lets build out a meditation app with html css and javascript!
❤Become a patreon for exclusive videos and more!
/ dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
📕 Things covered in this video:
-Working with audio tag and video tag in HTML
-How to change sounds with javascript
-Manipulating video with javascript
-Creating a javascript project for your portofolio
📔 Materials used in this video:
github.com/DevEdwin/meditatio...
🛴 Follow me on:
Twitter: / deved94
Github: github.com/DevEdwin
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: / lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ / aka-dj-quads
Creative Commons - Attribution-ShareAlike 3.0 Unported- CC BY-SA 3.0
creativecommons.org/licenses/b... - วิทยาศาสตร์และเทคโนโลยี
![รวมเพลงลูกทุ่ง 6 หนุ่มไทบ้าน ฮิตติดกระแส ชุดที่ 1 l มนต์แคน ไมค์ ไผ่ เสถียร ไหมไทย พี [Longplay]](http://i.ytimg.com/vi/GD2v1OjMw5I/mqdefault.jpg)
Take a deep breath and enjoy
How will u rotate circle from top instead of from quarter?
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?
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!!
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.
This was a brilliant tutorial Ed, more of this please!
WE need more tutorials like this. You are entertaining yet informative in your code explanation
I find your videos really helpful Thanks for the time you put into making these its very much appreciated
Edwin, thank you for sharing with experience! Great job! Dreams come true!
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!!
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 helped me understand javascript a little bit, 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
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 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.
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.
Awesome Project ....Thanks For Share it....!! LOVE YOU BRO..
That was some enjoyable experience building this tranquille app along with you. Thanks a lot!
Oh, my God ! this is so fun!! i love it !!! more more more! please do more!
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
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.
Please make more such projects, thanks a lot
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!!
Thanks for this video, I began to learn JS and this is a very good practice for me.
This is super awesome Ed.Thank you much Ed. you made learning super fun and easy.
Real compact yet helpful video! Thank always Ed 👍
this is awesome it is a really fun and effective way of learning javascript. thank you very much I love your videos keep going
This project is pretty good! It helps me know better about web development.Thank you,sir.👍👍👍
I really enjoyed coding along with you ,
Keep up the good work
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
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
Thanks, this is a great example! i will see it several times!
love this idea for an app! well done man :)
You are motivating and educating me! Thanks a lot! Keep going!!
Excellent content my friend! You're awesome!
Fabulous and smart work! Thanks for sharing!
Your method of teaching is amazing, Thank you ☺️
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.
Thank you so much for this video. it is very helpful !
Wow this is an great project, I need to try it! Awesome job Ed :)
Eyy thanks so much Telmo!
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
really an awsome video enjoyed a lottts!!
Hi! I'm studying Web develop. Your video is so inspired to me! Thanks!!
Thx so much for making these great videos , they really helped a lot 😁💙
Thank you, you are great person, your vibes encourage me to learn
Great video. Really learned a lot.
That's a verry good project idea. I am gonna try this with Flask. Thank you for this amazing idea (:
great video, would love to see more tutorials in your style. Thanks!
A wonderful tutorial for beginners. Thanks
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?
Awesome Project!!
What a beautiful app! Thank you!
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!
this video is amazing ! Thank you !
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!
Another great tutorial. Thanks mate.
Very helpful tutorial and very well explained.. thanks a lot
I love your ideas
Thank you❤🌹😊
Very good tutorial! Thanks a lot for that!
Thank you! So fun and informative.
its a great for practice and ad to my portfolio, Thanks Ed, greeting from Spain
Interesting tutorial. It's simple coding with the basics, but the result is good. I appreciated the use of ES6. Thanks
Thank you so much for the cool tutorial project. I made it
This makes me wanna meditate 👍
Very nice dude, i learn also JS since few month and it was a funny project ;)
That's awesome video !! I Love it
Really good thank you for this tuto !
Just Loved it...!!!
Awesome tutorial thanks very much!
perfect , i love it
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?
I like this tutorial :)
thx created!
Nice attn to data attributes, thanks!
You're Awesome Man
Marvelous~The one and only
it looking really awesome bro love u .
I like your video, it helps me a lot!
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
Thanks bro ,for such amazing video
Great work
Thank You Bro.. NIce app... Feels goods after making this app....
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!
Thanks for the tutorial!
this is awesome , thank you .
This is so awesome
Dev Ed your the best
Great tutorial!!
Amazing project..!
I love it thanks a lot!
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??
Cool project. 🤙🏼
Awesome! Thank you
You are the Excellence of TH-cam 🖖🖖
you are cool and you TEACH US cool stuffs
Awesome! Subbed!
Thanks for all ... We still waiting for the next
Am a new subscriber thank you for the knowledge sir
great effort thank you
Thanks, like always
Number 1💥💥💥thanks
Hello,Edwin
Thank you so much for this tutorial.
could you please tell me data-time=""and what is use of it.