ASMR Programming - Weather App With Javascript - No Talking
ฝัง
- เผยแพร่เมื่อ 25 พ.ค. 2024
- Hello Everyone ✨I am starting a new series following the challenge of 100 days of code. i will create random apps, web apps, and all things that you need to know about javascript 😎
Become a Javascript Developer now with our 100 Days of Code javascript Development Bootcamp course!✅
day 10 - 100 days javascript coding ⚜️
Join the full "100 Days Of JavaScript Code - Web Development Bootcamp" course :
• 100 Days of JavaScript...
In this tutorial, I am gonna showing to you how to code a weather app with javascript. in this tutorial also we use a weather api and we get data from api❗️
Day 10 - Source Code : github.com/AsmrProg-YT/100-da...
source of all projects also will upload in AsmrProg github page :
github.com/AsmrProg-YT
with this coding bootcamp you will learn how to be an javascript developer✅
Follow my 100 days of javascript playlist i will upload video's of javascript projects in it for easier access and video's in this playlist sorted by day 1 to day 100 😉
100 days of javascript Playlist : • 100 Days of JavaScript...
Every week i will update this playlist ✅
Video Contents :
00:00 - Intro (100 days of code - day 10)
00:48 - Warming fingers
01:00 - Main codes
01:11 - Api Key
02:09 - Html coding
04:30 - Main styles
04:50 - Container styles
05:31 - Search box
07:28 - Weather box
10:35 - Not found
11:22 - Animations
12:04 - Main js codes
12:42 - Search function
19:25 - Fix bugs
20:00 - Final result
Asmr Game Coding Playlist : • ASMR Game Coding
Other Video's :
Coding IOS (Iphone) Calendar : • ASMR Programming - Cod...
Coding IOS (IPhone) Dynamic Music : • ASMR Programming - Cod...
Subscribe → bit.ly/3Lf1K4A ✅
Subscriptions, good comments and likes are great support for me 😍
Don't re-upload or edit the videos on your channel.
All copyrights by AsmrProg.
About AsmrProg Channel :
Here I upload ASMR programming tutorials related to HTML, CSS, Sass, JavaScript, React, PHP, Frameworks such as Bootstrap and more along with creative UI/UX Designs.
AsmrProg is a community for web developers from all levels to learn and grow their skills in front-end and back-end web development.
AsmrProg
Asmr Prog
ASMR Programming
ASMR Coding
ASMR keyboard typing
ASMR web design
ASMR coding html
ASMR coding website
No Talking ASMR
No Talking Coding
No Talking Programming
New video has been uploaded according to your vote in community page, Day 10 of 100 days coding! Please LIKE video to support my channel 😉🙏
Hi bro, it’s live server extension, and for second question it’s easy if you have experience 🙏
From courses in my country + search!
Thanks bro 🙏❤️
Hi, it's Reui 2 theme
Hi bro, no, if you have experience it’s easy
Never occured to me that ASMR could be an avenue for programming videos, but this was quite enjoyable!
Thanks bro 🙏❤️
Exactly how I feel ❤️
Thanks 🙏❤️
Yup, can confirm. Most of the time programming is thinking, looking up things, fixing bugs, and typing on a keyboard :p. The thinking being likely the quietest part about the whole thing too. Even if its completely quiet, we can just listen to music anyways. Especially a chill soundtrack, like Oldschool Runescape
Yes its correct, but if I didn’t edited video, video time will be more than 2h!
Now THIS is high quality content. I think I've found my favourite side of TH-cam
Thanks 🙏❤️
yep
🙏❤️
for real? ...
Sorry?!
This is both relaxing and educational at the same time.
Yes 😉🙏
Vanilla JS, I miss programming like this. Sometimes I do exactly what you're doing in this video. Just plain, straight to business code. Pure and classic joy. You got one more subscriber.
Thanks a lot bro 🙏❤️
I also love vanilla JS. Every project I end up involved in is with React or Next. I loved when I started coding and made my first JS apps
@faustovii1085 yes 😁❤️
Everything he goes on notepad++ its like a flashbang
🙏❤️
@@AsmrProg hey, how did you get the seemless background thing? Is it an extension and if so what is it called?
Bro it’s glassit extension 🙏
Notepad++ has dark mode
Vscode is better for coding!
currently studying javascript, you are one of my greatest inspiration. Love your code
Thanks a lot bro 🙏❤️
Same! I hope it's going well for you! Wishing you great growth :D !
Thanks 🙏❤️
Just wanted to say thanks for the video! I used this as a tutorial to get introduced into more serious programming. I was able to program my first scripts in html, css, and js. I also was able to do my first attempt at pulling data from APIs. Thank you so much and I look forward to your other projects!
Thanks a lot 🙏❤️ keep going on 😉
No way, theres a channel like this. I love asmr and Im just now starting to learn web dev, very cool.
Thanks bro 🙏❤️
Love the way, you simplified the coding. Thanks a lot.
Thanks 🙏❤️
Great stuff! This is so valuable. Great examples and easy way to learn while enjoying the ASMR
Thanks 🙏❤️
Dude I came across your video for the first time and instantly hit the subscribe button. This right here is epic content you are providing. Literally amazing! It was so satisfying and the sky background of the IDE is just amazing. Thank you so much and I hope you keep on making these beautiful videos! Cheers bro!
Thanks a lot 🙏❤️
I've learnt so much, since this was an asmr video and had no explanation I had to go and figure out stuff.
Thanks for the content.
Thanks 🙏❤️
Nice video! And the application has really good and smooth animations, very cool.
One thing: if you know the weather values in the JSON response will potentially never change, then you could just have an enumerable with the path to the images for each weather type. That way you can remove the switch/case statement and do something like weatherEnum[weather] to get the img path, otherwise it will return empty just like the default case in the switch/case statement IIRC. Thanks for the content!
Yes bro we can do it and our code will be object oriented, but because of channel beginners and some of my beginner audience i did it in the simplest way 🙏 anyway thanks for suggestion ❤️
@@AsmrProg oh, I get it! Nice :) well thought then.
😉🙏
i have zero interest in programming but this is so chill that it makes me keep watching
🙏❤️
I loved this! I was worried about following a tutorial without any explanation but this really helped introduce me to javascript for web dev.
Thanks 🙏
Absolutely lovely! I want to thank you from Italy for uploading beautiful videos like this one! Keep going!
Thanks a lot bro ❤️🙏
?!
I started learning web development a week ago and just finished html and I am starting with css, watching this video made me confident that I can do it too. You made it look so easy
Really helpful ❤
Thanks 🙏❤️
How long does it take to learn both?
All depends on your interest and experience!
always been more of a Java developer than a Web Developer, because I find putting together stylesheets to be just a bunch of boring trial and error. You have impressed me, and inspired me a bunch with that CSS!
🙏❤️
Most satisfying video ever!! Instant motivation :)
Thanks a lot 🙏❤️
After watching this video, I’m some kind of interested to start learning Web-development. Thanks for your work! 😊
Thanks 🙏❤️
this is beautiful. just started my programming journey and this is weirdly motivating
Thanks 🙏❤️
Good luck
Thanks 🙏❤️
your code is so easy to follow. learned a bit from this, thanks!
Thanks ❤️🙏
Love the way the keyboard lights originate from the key pressed. Very cool!
Thanks 🙏❤️
Estou começando na programação. Seus vídeos são ótimos, ajudam-me bastante. Muito obrigado.
Thanks a lot 🙏❤️
Me dá agonia ver teclas backspace ou seta pro lado repetidas vezes! CTRL+Home, CTRL+End, Home e End pelo amor! Por isso que eu uso teclado avulso mesmo no laptop!
🙏❤️
@@AildoTorres deve ser pra clicar mais no teclado e prolongar o vídeo, afinal quem assiste asmr n tá nem aí pra eficiência dele
Hello! I really enjoy watching your asmr coding videos, you really are the best.
Thanks so much bro 🙏❤️
Thanks for the upload.
I find your videos extremely amusing and useful.
Keep up the great work 👍
dude this just popped up in my recommended and i think ASMR programming has got to be my new favorite thing on youtube
Thanks 🙏😉❤️
i really hate learning coding but this video made it so much better omg i really appreciate this and need moreeee
Thanks 🙏❤️
A very relaxing and useful video. Thanks a lot
Thanks a lot 🙏❤️
I've learnt more watching these types of videos than a whole hour-long lecture. Thanks!!
🙏😉❤️
omg how much you practiced this? That was so clean a 20 min of clean code and only a few errors, keep going and i proud of your effort 👏👏
when using emmet, you can just type .class-name instead of div.class-name and it'll assume you're creating a div, so when you press enter, you'd have ``. same goes for creating a div with the id
you can also create an element with as many classes you want, just add a `.` for each new class, so for the icon, you would have `i.fa-solid.fa-water`
Hi, thanks for suggestion but i do it because i want beginners know what I’m doing 🙏
You inspire me a lot when coding, currently studying C++ in college and taking Java next semester!! In mu free time I want to learn Python, CSS, and HTML as well just to what you’re doing as well! Keep posting man!
Thanks a lot bro 🙏❤️
Doing the same. I am currently doing c++ too just wanted to ask what channels are you reffering to do c++
Bro I didn’t checked c++ channels sorry 🙏
Python is quite quick and easy to learn, definitely my favourite language. I've only started coding a year ago and the first one I learnt was c #, keep it up man! 👍
It’s good bro 🙏 I’m worked python too!
simple code, perfect speed, great results. WOW subbed
Thanks 🙏❤️
First time viewing a video like this - really enjoyed it! Also, great keyboard
Thanks bro 🙏❤️
Love the "No talking" videos in youtube. Whether it is game walkthrough or any else.
Thanks 🙏❤️
This made me think that software itself should be ASMR, like a design principle where everything has smooth, subtle, textural form, movement, appearance, sound. I’d like to see that become a design aesthetic / principle.
Thx 🙏❤️
It's so cool, hope you make more videos! Thank U so much ! You inspire me a lot !
Thanks 🙏❤️
Damn! Addicted to the typing sound!
Great work, Mate!
you know what motivated me more than learning how to code? To buy myself a new keyboard!! Its so pretty
Thanks a lot 🙏❤️
I'm learning how to code just because I like how the colored lines look lol
🙏❤️
Good video :)
One small thing, which is in line with teaching beginners: it makes sense to farm out large sections of code into smaller functions to avoid creating one function which is long as War and Peace.
like the hide and show section in case of a 404. It would not change the coding logic (as in it does not introduce anything complex) but allows the code to be separated and introduces code re-usability without actually calling attention to it thus scarring people away.
Also the switch could be simply a function which would return the string of 'images/filename.png' so you would have only one image.src set
(please note: i am not criticising your work, this is just something i believe is important from the very early stages to keep the functions short and teaches beginners of the importance of structuring, naming conventions and context separation - rather than letting them running into "bugs" which is most often solved through pushing variables into the global space )
However feel free to ignore it ::) its your channel, its your work and I appreciate the work you put in this
Besides that its a great video and channel :)
Thanks a lot for your advices and good words 🙏❤️
I'm super grateful for this video, thank you, and as a beginner, I just ran into this problem: cannot read properties of null (reading 'addEventListener').. So the problem is in this gigantic function that we have here, somewhere.. so to debug this I'm reading it over and over again.. I figured out that the API routes have changed over time, or maybe because I'm using the free package, I need different routes. I'm trying to fix it, and we'll see. I hope I can fix it, I even made my own illustrations for the app, but they'll never show up unless I figure this out.
Thanks a lot, to fix it check my github, i have info of it there!
This is perfect! I can learn while relaxing!
Thanks 🙏❤️
This is so cathartic. Thank you!
Thanks 🙏❤️
I always thought this was hard after doing it for a week It seems pretty solid I think anyone can do it Just practicing for 6 to 9 months can land you a job and also cool video.
Yes bro, it’s easy if you practice 🙏❤️
@@oppenheimer11 build google homepage is not really that hard learning CSS and HTML I study for 6hr everyday tho I think is more hard to learn JavaScript
Yes, html css is easy but Javascript is a bit harder!
@@AsmrProg yea because CSS is pretty basic English to understand and HTML the same you can probably learn it in 2 month feel comfortable using it while JavaScript can take over 6 to 9 months to get used to it is all practice
Yes, if you have more experience it will be more easier 🙏
Currently learning Javascript, I'm learning more from these project tutorials than my actual teacher
Support me with your likes😉🙏❤️
actually this is now true asmr
loved it keep it up!!!
Thanks 🙏❤️
goodjob sir keep the goodwork up appreciate your content ✌✌
Thanks a lot bro 🙏❤️
I'm not even into ASMR and I'm mesmerized by this performance...
🙏❤️
Amazing! Dont know that this asmr prog is exactly what i need to!
Thanks 🙏❤️
nice work bro, i just learn html css and now starting in JS. Just some tips for you bro, you can use CTRL + Enter to move on new line without spamming right arrow key then press enter. Just some humble tips from me hehe
Thanks a lot, i will use it 🙏❤️
nice tip thank you, gonna try it at work on monday.
Yes, it’s useful
This is not an ASMR, this is an amazing tutorial
Thanks 🙏❤️
@@AsmrProg which keyboard do u use?
In this video it’s newmen gm610
@@AsmrProg which is the keyboard you would recommend would be best for s person starting to code like me, wireless or wired doesn't matter
Check our last video, varmilo minilo keyboard is great! When you tap it, it feels very good 😉🙏
Great job... Would help a great number of ppl learning to code
Thanks 🙏❤️
Thank you, very relaxing. Learned a lot too!!
Thanks 🙏❤️
I would like to ask how to setup the background in VS Code. It looks so cool!
Hi bro, it’s glassit extension 🙏
From now smooth you are at typing all that and doing all this work, it makes me wanna learn programming 😂
🙏❤️
Best way to Learn & Sleep!! A masterpiece we Didnt knew we Need
Thanks 🙏❤️
Thank you so much! I needed this! UR the best! ;)
🙏❤️
Who came to this video because of the keyboard😂😂
😁❤️
Can you include the extensions you use on Visual Studio Code? I like them and think some people like myself are curious as what they are. Thanks and i love the videos!
Hi bro, there is a post about it in my channel community page 🙏
@@AsmrProg you have a lot of community posts. You want me to look through every post until I find the one that talks about extensions?..
It’s in the newer posts! I have many extensions but that one’s im using i write in community posts!
@@doubleking8365 you must not want it that bad then...
🙏❤️
I just love your keyboard! So colorful! 😍
Thanks 🙏❤️
This is amazing, thank you!!
🙏❤️
Great job. Which vscode theme are you using ?
Thanks 🙏 Reui 2
what program do you use to get the green circle and red line on your mouse?
Hi, it’s screen recorder effects!
Watching this makes me love programming, I'll design something better,this work is amazing❤❤❤
Thanks 🙏❤️
This is a very good job! Definitely like!
Thanks 🙏❤️
To be able to code so smoothly is nearly impossible. Do you have the code written somewhere and you just copy it when making videos?
Hi bro, yes i run codes before recording and fix bugs, then on recording i have another screen for clear code 🙏
@@AsmrProg keep the work up 👏
Thanks 🙏❤️
@@AsmrProg yeah i was really stuned that you did all this in one take, how long did it take to finish ?
Hi, the video you watch for example is 20min it was 1h, after many edits its this, i want my subscribers have good content to watch 🙏
what IDE are you using?
Visual studio code
you earned a new sub in me with this nice idea for videos, keep 'em coming, they're great!
Thanks bro 🙏❤️
Keep doing it man. Love it
🙏❤️
As bayrakları as as🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷
🙏❤️
name
?!
@@AsmrProg of the weather app
It’s openweather api!
@@AsmrProg no that you made
No name
Inspired by your video, I decided to DIY all the apps on my phone😃
😉🙏
Holy molly I came here cause I think typing ASMR could help me sleep but no, your content keeps me awake cause I continue my programming practice
Thanks bro 🙏❤️
Your rgb is so pretty!! :D Thanks for the great clicky clicky asmr
Thabks 🙏❤️
TBH i learn alot from this channel, keep up the good work
Keep going on 🙏❤️
proud to be subscriber of AsmrProg , big fan brother and we all love you 😘🤩🤩😍🥰🥰🥰
Thanks a lot 🙏❤️
Just found Ur channel, love it❤
🙏❤️
Adam yazıyor ya. Yapıyorsun reis bu sporu sen. Eline emeğine klavyene sağlık. İzlerken bile hipnotize oldum adeta.
Thanks a lot for your good words 🙏❤️
It was helpful and satisfying at the same time
Thanks 🙏❤️
So cool man, I need hours of this
Thanks a lot 🙏❤️
Great content, relax and learn.
Thanks 🙏❤️
Excellent.
I would have added:
Resetting the input.value so as soon as you finish inputing your city then it goes empty again.
Great job, I followed along.
Great, keep it up 😉❤️
Someone who is not programming in vim and still using mouse to get the work done? What a refreshing content :)
Thanks 🙏❤️
your just awesome... you help me to build my first project
thanks a lot
🙏❤️
when you select words, you can use CTRL+SHIFT+arrows, to jump-select to the next word, instead of only SHIFT+arrow and jump-select by character.
Oh very useful, thanks 🙏❤️
😘😘😘That's so much helpful... Thanks for a video... God bless you 😇🌹
Thx 🙏❤️
Oh i'm definitely subscribing to you!
🙏❤️
ASMR and Programming?? wow, love the idea dude!
Thanks bro 🙏❤️
Hats off brotha, great video
Thanks 🙏❤️
Great tutorial, Thanks bro
Please LIKE video if you want to support my channel 🙏❤️
I'm totally subscribing 🤯
Thanks 🙏❤️
this is really awesome❤
Thanks 🙏❤️
i am a complete newbie at programming. rn im learning html+css and watching ur video is quite shocking because i learn a lot of new shortcut.
its actually impressive that vscode have all that shortcut
Keep going on 😉🙏❤️
i love the way your hands have this teleportation skills too
Thx 🙏❤️
such a clean code, easy to understand. wp dude. I subbed
Thanks bro 🙏❤️
Did it work out for you ??
What code? I just saw markup language...
@@AsmrProg maybe you should have comment on each of function. Thank you
JavaScript!
Always inspired by such programming vidios
🙏❤️
¡Excelente vídeo, gracias! Suscrito.
Thanks 🙏❤️
Im the only one that found this videos great to learn? I so good to see all the teoric stuffs being applied and actually understand them
No you aren’t alone 😉🙏
@@AsmrProg 3 months of styuding JS later and i understand everything. Love this video
Great, keep going on 😉🙏
@@AsmrProg Thanks!
🙏❤️
This was such an relaxing video
Thanks 🙏❤️
@@AsmrProg You welcome, keep up the great coding. Want to see some html, like a digital portfolio next please!
@TheQuiteGamerINC 🙏❤️