Check out my courses here!
https://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!
https://www.patreon.com/dev_ed
📕 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:
https://github.com/DevEdwin/meditation-app
🛴 Follow me on:
Twitter: https://twitter.com/deved94
Github: https://github.com/DevEdwin
🎵 Music:
Outro:
LAKEY INSPIRED – Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired
Intro:
Dj Quads
Track Name: “Every Morning”
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads
Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0
http://creativecommons.org/licenses/b…
Original source
38 responses to “Build A Meditation App With Javascript HTML & CSS!”
Can you apply this to Flutter ?
Thanks, like always
How do you make this responsive?
Can someone send me line + how to make then changing time it start counts from zero not from the same time ?
Awesome! 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.
Thanks bro ,for such amazing video
Hey Ed, Loving it so far but got stuck right after JS, it keep showing error 'Document not defined' really confusing Can you help?
Hi, thank's for your tutorial, I'm beginner in dev'web, I'd like to follow you on twitter, but your account doesn't exist.
How I can do.
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?
this is awesome , thank you .
This is Great .
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 😀
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.
Really good thank you for this tuto !
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
Noo worries i followed you on https://github.com/developedbyed
I wanna follw you on github
Your twiiter id is not showing up on clicking link
WE need more tutorials like this. You are entertaining yet informative in your code explanation <3. Keep up the good work Ed!
cringe
you are my one source of inspiration after Traversy. I hold you to heart bro. expect my follow at tweeter. this evening
Hello,Edwin
Thank you so much for this tutorial.
could you please tell me data-time=""and what is use of it.
I finished after following every single step. It was difficult because i'm a newbie but it helped me lots. Thanks Dev ED! Please subscribe to his channel, he truly deserves it.
Here you have the files for this webapp. I hope it helps you to compare when lost like the 56234 times I was during the process purely because I'm dumb but persistent. Thanks all!
https://github.com/simonfernandezprada/Html-Css-Js-Exercises
My play button isn't clickable. I don't know what I'm doing wrong. I've tried for three days to make this exercise but so far no dice. Any help would be awesome
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!!
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)
The best
you are wonderful!
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 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
looking to import mp3 files in Atom! Can anyone help me out?
Mine says video.play and video.pause are not a function please help?
thanks a lot
FYM what is that track outline??
this just made my day…thanks bro
Am a new subscriber thank you for the knowledge sir
A wonderful tutorial for beginners. Thanks