ASMR Programming - Weather App With Javascript - No Talking
Vložit
- čas přidán 6. 06. 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 CZcams
Thanks 🙏❤️
yep
🙏❤️
for real? ...
Sorry?!
This is both relaxing and educational at the same time.
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!
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 😉
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 😁❤️
No way, theres a channel like this. I love asmr and Im just now starting to learn web dev, very cool.
Thanks bro 🙏❤️
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 🙏❤️
Great stuff! This is so valuable. Great examples and easy way to learn while enjoying the ASMR
Thanks 🙏❤️
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 🙏❤️
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 🙏❤️
Love the way, you simplified the coding. Thanks a lot.
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.
😉🙏
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've learnt more watching these types of videos than a whole hour-long lecture. Thanks!!
🙏😉❤️
Most satisfying video ever!! Instant motivation :)
Thanks a lot 🙏❤️
Absolutely lovely! I want to thank you from Italy for uploading beautiful videos like this one! Keep going!
Thanks a lot bro ❤️🙏
?!
After watching this video, I’m some kind of interested to start learning Web-development. Thanks for your work! 😊
Thanks 🙏❤️
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!
🙏❤️
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!
A very relaxing and useful video. Thanks a lot
Thanks a lot 🙏❤️
Love the way the keyboard lights originate from the key pressed. Very cool!
Thanks 🙏❤️
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 🙏
this is beautiful. just started my programming journey and this is weirdly motivating
Thanks 🙏❤️
Good luck
Thanks 🙏❤️
i really hate learning coding but this video made it so much better omg i really appreciate this and need moreeee
Thanks 🙏❤️
your code is so easy to follow. learned a bit from this, thanks!
Thanks ❤️🙏
simple code, perfect speed, great results. WOW subbed
Thanks 🙏❤️
Hello! I really enjoy watching your asmr coding videos, you really are the best.
Thanks so much bro 🙏❤️
Love the "No talking" videos in youtube. Whether it is game walkthrough or any else.
Thanks 🙏❤️
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 🙏❤️
actually this is now true asmr
loved it keep it up!!!
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
Currently learning Javascript, I'm learning more from these project tutorials than my actual teacher
Support me with your likes😉🙏❤️
First time viewing a video like this - really enjoyed it! Also, great keyboard
Thanks bro 🙏❤️
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
🙏❤️
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!
This is perfect! I can learn while relaxing!
Thanks 🙏❤️
Amazing! Dont know that this asmr prog is exactly what i need to!
Thanks 🙏❤️
i have zero interest in programming but this is so chill that it makes me keep watching
🙏❤️
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 🙏❤️
This is so cathartic. Thank you!
Thanks 🙏❤️
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 🙏
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!
It's so cool, hope you make more videos! Thank U so much ! You inspire me a lot !
Thanks 🙏❤️
Keep doing it man. Love it
🙏❤️
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 🙏
I'm not even into ASMR and I'm mesmerized by this performance...
🙏❤️
Thanks for the upload.
I find your videos extremely amusing and useful.
Keep up the great work 👍
goodjob sir keep the goodwork up appreciate your content ✌✌
Thanks a lot bro 🙏❤️
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 amazing, thank you!!
🙏❤️
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 👏👏
From now smooth you are at typing all that and doing all this work, it makes me wanna learn programming 😂
🙏❤️
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 😉🙏
This is a very good job! Definitely like!
Thanks 🙏❤️
Thank you, very relaxing. Learned a lot too!!
Thanks 🙏❤️
Who came to this video because of the keyboard😂😂
😁❤️
I would like to ask how to setup the background in VS Code. It looks so cool!
Hi bro, it’s glassit extension 🙏
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 🙏❤️
Great job... Would help a great number of ppl learning to code
Thanks 🙏❤️
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!
I just love your keyboard! So colorful! 😍
Thanks 🙏❤️
Thank you so much! I needed this! UR the best! ;)
🙏❤️
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...
🙏❤️
what IDE are you using?
Visual studio code
proud to be subscriber of AsmrProg , big fan brother and we all love you 😘🤩🤩😍🥰🥰🥰
Thanks a lot 🙏❤️
So cool man, I need hours of this
Thanks a lot 🙏❤️
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 🙏
As bayrakları as as🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷
🙏❤️
Watching this makes me love programming, I'll design something better,this work is amazing❤❤❤
Thanks 🙏❤️
Best way to Learn & Sleep!! A masterpiece we Didnt knew we Need
Thanks 🙏❤️
name
?!
@@AsmrProg of the weather app
It’s openweather api!
@@AsmrProg no that you made
No name
Someone who is not programming in vim and still using mouse to get the work done? What a refreshing content :)
Thanks 🙏❤️
Your rgb is so pretty!! :D Thanks for the great clicky clicky asmr
Thabks 🙏❤️
you earned a new sub in me with this nice idea for videos, keep 'em coming, they're great!
Thanks bro 🙏❤️
TBH i learn alot from this channel, keep up the good work
Keep going on 🙏❤️
I'm totally subscribing 🤯
Thanks 🙏❤️
Just found Ur channel, love it❤
🙏❤️
Hats off brotha, great video
Thanks 🙏❤️
ASMR and Programming?? wow, love the idea dude!
Thanks bro 🙏❤️
Oh i'm definitely subscribing to you!
🙏❤️
Inspired by your video, I decided to DIY all the apps on my phone😃
😉🙏
Tobe honest, Im not the one understanding about coding. But by somehow, i can just watched and enjoyed it, ngl
Briliant work. Tks
Thanks bro 🙏❤️
It was helpful and satisfying at the same time
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 😉🙏❤️
¡Excelente vídeo, gracias! Suscrito.
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 😉❤️
your just awesome... you help me to build my first project
thanks a lot
🙏❤️
i love the way your hands have this teleportation skills too
Thx 🙏❤️
this is really awesome❤
Thanks 🙏❤️
Great tutorial, Thanks bro
Please LIKE video if you want to support my channel 🙏❤️
Great content, relax and learn.
Thanks 🙏❤️
😘😘😘That's so much helpful... Thanks for a video... God bless you 😇🌹
Thx 🙏❤️
I love your keyboard!!!
🙏❤️
GOAT. No talking just coding is best
🙏❤️
Always inspired by such programming vidios
🙏❤️
Nice job! keep going ✌
Thanks a lot 🙏❤️