ASMR Programming - Weather App With Javascript - No Talking
HTML-код
- Опубликовано: 31 май 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!
This is both relaxing and educational at the same time.
Yes 😉🙏
Now THIS is high quality content. I think I've found my favourite side of RUclips
Thanks 🙏❤️
yep
🙏❤️
for real? ...
Sorry?!
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!
No way, theres a channel like this. I love asmr and Im just now starting to learn web dev, very cool.
Thanks bro 🙏❤️
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 😉
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 🙏❤️
Love the way, you simplified the coding. Thanks a lot.
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 🙏❤️
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'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 🙏❤️
Damn! Addicted to the typing sound!
Great work, Mate!
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 ❤️🙏
?!
Most satisfying video ever!! Instant motivation :)
Thanks a lot 🙏❤️
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 have zero interest in programming but this is so chill that it makes me keep watching
🙏❤️
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!
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 👏👏
I've learnt more watching these types of videos than a whole hour-long lecture. 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
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 🙏
your code is so easy to follow. learned a bit from this, thanks!
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!
🙏❤️
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 🙏❤️
Love the way the keyboard lights originate from the key pressed. Very cool!
Thanks 🙏❤️
First time viewing a video like this - really enjoyed it! Also, great keyboard
Thanks bro 🙏❤️
A very relaxing and useful video. Thanks a lot
Thanks a lot 🙏❤️
Hello! I really enjoy watching your asmr coding videos, you really are the best.
Thanks so much bro 🙏❤️
simple code, perfect speed, great results. WOW subbed
Thanks 🙏❤️
This is perfect! I can learn while relaxing!
Thanks 🙏❤️
i really hate learning coding but this video made it so much better omg i really appreciate this and need moreeee
Thanks 🙏❤️
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!
actually this is now true asmr
loved it keep it up!!!
Thanks 🙏❤️
It's so cool, hope you make more videos! Thank U so much ! You inspire me a lot !
Thanks 🙏❤️
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 🙏❤️
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 🙏
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
🙏❤️
Amazing! Dont know that this asmr prog is exactly what i need to!
Thanks 🙏❤️
This is amazing, thank you!!
🙏❤️
Currently learning Javascript, I'm learning more from these project tutorials than my actual teacher
Support me with your likes😉🙏❤️
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!
Thank you, very relaxing. Learned a lot too!!
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...
🙏❤️
you earned a new sub in me with this nice idea for videos, keep 'em coming, they're great!
Thanks bro 🙏❤️
Best way to Learn & Sleep!! A masterpiece we Didnt knew we Need
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 🙏❤️
I just love your keyboard! So colorful! 😍
Thanks 🙏❤️
From now smooth you are at typing all that and doing all this work, it makes me wanna learn programming 😂
🙏❤️
Who came to this video because of the keyboard😂😂
😁❤️
Keep doing it man. Love it
🙏❤️
Thank you so much! I needed this! UR the best! ;)
🙏❤️
I would like to ask how to setup the background in VS Code. It looks so cool!
Hi bro, it’s glassit extension 🙏
Great job. Which vscode theme are you using ?
Thanks 🙏 Reui 2
This is a very good job! Definitely like!
Thanks 🙏❤️
So cool man, I need hours of this
Thanks a lot 🙏❤️
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 program do you use to get the green circle and red line on your mouse?
Hi, it’s screen recorder effects!
TBH i learn alot from this channel, keep up the good work
Keep going on 🙏❤️
Watching this makes me love programming, I'll design something better,this work is amazing❤❤❤
Thanks 🙏❤️
what IDE are you using?
Visual studio code
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 🙏
Just found Ur channel, love it❤
🙏❤️
Your rgb is so pretty!! :D Thanks for the great clicky clicky asmr
Thabks 🙏❤️
As bayrakları as as🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷🇹🇷
🙏❤️
name
?!
@@AsmrProg of the weather app
It’s openweather api!
@@AsmrProg no that you made
No name
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 🙏❤️
It was helpful and satisfying at the same time
Thanks 🙏❤️
proud to be subscriber of AsmrProg , big fan brother and we all love you 😘🤩🤩😍🥰🥰🥰
Thanks a lot 🙏❤️
Inspired by your video, I decided to DIY all the apps on my phone😃
😉🙏
i love the way your hands have this teleportation skills too
Thx 🙏❤️
ASMR and Programming?? wow, love the idea dude!
Thanks bro 🙏❤️
your just awesome... you help me to build my first project
thanks a lot
🙏❤️
Hats off brotha, great video
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 🙏❤️
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 🙏❤️
Oh i'm definitely subscribing to you!
🙏❤️
Great content, relax and learn.
Thanks 🙏❤️
I'm totally subscribing 🤯
Thanks 🙏❤️
Great tutorial, Thanks bro
Please LIKE video if you want to support my channel 🙏❤️
this is really awesome❤
Thanks 🙏❤️
I love your keyboard!!!
🙏❤️
lowkey i have just learnt soo many new shordcuts
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!
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 🙏❤️
Always inspired by such programming vidios
🙏❤️
Someone who is not programming in vim and still using mouse to get the work done? What a refreshing content :)
Thanks 🙏❤️
Thank you!
🙏❤️
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!
🙏❤️
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 😉❤️