ASMR Programming - Calculator App Coding - No Talking
Вставка
- Опубліковано 11 чер 2024
- In this video, I designed a Glassmorphism Calculator using HTML, CSS and JavaScript. This Calculator is very easy to code and we use just a bit JavaScript and Also CSS and HTML codes isn't too long.
Symbols : ← , − , × , ÷ , +
If you enjoy, please subscribe to my channel😉
Video Contents :
00:00 - HTML coding
06:28 - CSS Styles Coding
13:33 - Coding Main Design
20:05 - JavaScript Coding
33:25 - Fix Minus Bugs
33:40 - Final Result
♡ 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
Me: Watches a video of someone else programming instead of working on my own project that I keep putting off
Thx 🙏❤️
@@AsmrProg lmao though you gonna motivate him to start working
🙏❤️
😂😂😂
🙏❤️
Please like and subscribe if you want to support me create new videos❤️
where can i find this keyboard?
this is noutbook
Hi, From amazon site
No lenovo legion 5
Я сделал) добрый вечер из Новосибирска)
For anyone asking the VSCode extensions, here they are and I quote:
1 - Beautify to make my codes beautiful
2 - Error lens that showing code errors!
3 - GlassIt-VSC for transparent bg
4 - Live Preview that shows my code changes without refreshing page!
5 - Reui 2 theme
Thanks 🙏❤️
А как убрать прозрачный фон?
@user-ig9gd8sm1p sorry! Please write in english 🙏
@@AsmrProgi dont understand his language but youtube translation shows "How do i remove the transparent background?"
Короче я разобрался! Просто зажимаете ctrl + Alt + c
00:00 - HTML coding
06:28 - CSS Styles Coding
13:33 - Coding Main Design
20:05 - JavaScript Coding
33:25 - Fix Minus Bugs
33:40 - Final Result
Sorry?!
As for that window that shows the website next to the code, how to do it?
Hi bro, it’s live preview extension 🙏
Bro this was literally in the description
Very good basic project for beginners here. The whole learn to code but where to start I'll suggest a calculator now. Needs a output field, button representation and what functions they do when clicked. Great stuff here love the live server too wish I had it in the 90s when I was hitting F5 after every save.
Thanks for your good comment, it’s energy for me to create new video’s and grow my channel, glad to have subscribers like you 🙏❤️
It’s good, good luck 👏❤️
“basic project for beginners”, yez very basic calculator go brrrrr
😉🙏❤️
for bengginers? i feel its a lot of things for to learn T_T
I like how you use sections in html instead of arranging it in css. Others just use div and arrange it in css. So it is good that you utilize other tags of html instead of just using div for everything. I learned a lot in this video.
Thx a lot Yayen 🙏❤️
I didnt get it
Get what!!??
@@AsmrProg im confused, im sorry
🙏❤️
Man... this guy really made the calculator, and the styles and everything from scratch.
🙏❤️
There is nothing complicated
🙏❤️
Not necessarily his first time doing it...
🙏❤️
This honestly taught me loads as a beginner JS programmer, wow. Thanks!
Thanks 🙏❤️
I love coming back to your videos after I finish a college class and finally understanding what your doing
Thx Quinten 🙏❤️
Exactly the same with me, all of a sudden it makes sense hahahah
Oh thx a lot Ethan 🙏❤️
I'm SO glad UA-cam algorithms recommended me your channel😳
I'd like to be and practicing backend coding, but I really enjoyed your video and already learned new methods from it. You helped me to concentrate and gave motivation to try coding something like this project. Thank you very much and good luck in future projects while I'll look after them, cuz I subscribed👀
Thx a lot bro, i will code back-end soon😉❤️
Here's how I would do the js part:
Since JS can already do everything a calculator can do, simply add every button symbol (except '
Nice and Thanks a lot for your additional info 🙏❤️
Im 3 weeks into college and im learning HTML, I'm glad I understood a decent amount of what you were typing although on a complex level. This was awesome thanks!
Great, keep it up 😉❤️
HTML? In COLLEGE? What were you doing in high school...? Unless you're not a tech major, that's concerning.
@@5dollasubwayfootlong programmer analyst, IT stuff... Learned python a bit in school.
I never learned html and css or javascript still could understand 60-70% of this (except i understood javascript part like 30-40 %)
🙄
i love this video. its been only 5 minutes but i am obsessed how beautiful is coding. All the imagination, you can put into words and you do not even have to talk....
Thanks a lot Melih 🙏❤️
I found this channel a few days ago and now I don't miss a video, great work there
@csstutorials184 thanks a lot for supporting 🙏❤️
Even though I don't know anything about coding, watching this with my music is the most relaxing thing I've experienced
Thanks 🙏❤️
Love this channel , help me have more motivation to continue this work though i was very tired , thank for the ASMR
Thanks 🙏❤️
It feels so dam good to know JavaScript and hear the keyboard type all of what you already know.
Keep it up
Thanks 🙏❤️
I really like the hardwork you do to make every single video.
Thank you so much for understanding me 🙏❤️
@@AsmrProg btw what laptop is that?
Lenovo legion 5
Hey just wanted to say love your videos, they’ve helped me out a lot with learning new coding syntax and different ways of doing things. I also appreciate how all your source codes are free to view, it’s been very helpful in my learning journey so thank you
Glad it is helpful, keep it up 😉❤️
i never knew how much i needed a video like thik. thank you!!!
Thanks bro 🙏❤️
Your calculator ASMR is not only incredibly calming but also intresting from a coding perspective! I love the way you use sections in your html code!
Thanks a lot 🙏❤️
I am a newer web developer and I didn't know about that preview extension.... You are my savior.
Thanks 🙏❤️
Thank you for the video, i didnt expect this to be so fast and easy I even added sound on the buttons to make it stand out a bit.
Great, nice job 👍
Круто, очень нравится! No Talking - это здорово. Всё итак понятно без воды🙂
Thanks 🙏❤️
@@AsmrProg что за клавиатура ?
Please write english!!
@@AsmrProg what model of keyboard?
@KPACOTA_KOTA hi, in this video it’s Lenovo legion 5 laptop keyboard!
thanks bro, this live preview extension helped me a lot, it's hard to change tabs all the time. anyway great asmr
😉❤️🙏
This is the best tutorial I've seen. Thanks! Now I know how to do a calculator!
Thx a lot 🙏❤️
This Is a good video for someone who Is a beginner In coding and loves playing around with all this kind of stuff.
Yes bro, but for beginners i have 2 new playlist in my channel 🙏❤️
Hello, I follow you from Brazil 🇧🇷, I like many of your videos, while they are relaxing, you pass on incredible knowledge, keep it up!
Thank you very much! 🙏❤️
Um pobre sempre será pobre
🙏
@@marcelofonseca3105 Ué
Man, I LOVE UA-cam algorithims.
What an amazing video! I didn't think I could just watch someone programming for almost 30 minutes in a row.
I'm just beggining my developer carrer (I'm 16) and u inspired me very much, thanks mate.
Hi Samuel, Thanks bro, Your comment is energy for me 🙏❤️
Amazing tutorial!!
Little tips:
After you do 8+2 and get 10, you can't erase the 0 only. That's because, inside case '=' you have "buffer = runningTotal;". It actually should be "buffer = String(runningTotal);".
Also, if you try to erase one number at a time from a negative result, you're gonna have to erase the negative sign too, and it's not necessary. So you could put "if(buffer === "-"){buffer=0}" after the substring cutting. Bugs solved!
Thanks a lot, it was on of our first videos, so have some bugs!!
It actually taught me a lot, so I tried building on it a little! Just arrived here, I'm gonna check more! Thanks!!
Thanks 🙏❤️
I feel happy after studying javascript for a month made understand your code, thanks for your incredible content!
Thanks 🙏❤️
Amazing job! I’ve been learning the art of coding myself and seeing it done smooth like this is so nice! Great video! Keep killing it and making people stoked!!!🔥🔥🔥🔥🔥🔥🔥🔥👏👏👏👏👏
Thanks, keep going on 😉❤️
I am not even a programmer but I am watching this very intently. It is quite interesting!
Thanks 🙏❤️
Watching you write allll those buttons reminds me how much I love JSX and React :P
🙏😉
bro that design was insanelly beautiful, congrats!!!!
Thanks 🙏❤️
this has to be the best asmr channel i’ve ever came across
Thanks 🙏❤️
Ok hold up, this mans is typing their own hex colors by heart??? WTF Bro, I applaud you!
Hi, no! Video is edited 🙏
thanks for the keyboard, immediately like it!!!
Thx 🙏❤️
that's so amazing idea thankyou for this , i love programming and ASMR
Thanks 🙏❤️
was doing some coding and was very confused why it wasn't working. decided to take a break and see if I could find some video tutorials explaining some functions I was using, found your video after a bit of scrolling. find it interesting, decided to sit and watch. lo and behold, thanks to watching this video, I realized my very silly mistake: I forgot to add a button to click! thank you for your amazing video!
thanks a lot bro 🙏❤️
Very interesting! What plug-in / extension you're using to get this browser inside of vscode?
Hi, Thx 🙏❤️ Live Preview Plugin
It’s masterpiece 👌Thanks Dude❤
🙏❤️
this video even learns me html css and javascript thank you bro 🙏❤ keep going your the best programmer! ❤
Thanks so much 🙏❤️
I bought one of these quieter satisfying keyboards and it absolutley helps
Good 🙏
Decimal number: Did someone just forget me?
Very nice video. How did you configure your cursor? I really like the trail and the click effect.
Hi, it’s screen recorder effects
@@AsmrProg what recorder do you use?
EZ Screen Recorder
Did one for TOP, it is a beginner project but damn it was difficult doing it. Looking back at it now, I feel proud I did it.
❤️🙏
bro i really find this beautiful man. it is like art
Thanks 🙏❤️
Great video! I have a question tho, I can see that you already have everything setup, like the design, colors etc... my question is, how long you think it would take to do the exact same project but from completly start, maybe trwice the time of the video?
Yes, video is edited, it’s takes more than 1h
Woe, very nice man! Thanks for doing it slowly so we can learn with you! Where all this html, css, classes come from? Do you import some file or download it from vscode? Where can I find them? I would like to learn more about web development and UI/UX design...
Hi Thiago, thanks for your good comment🙏 all of files and things you need i show in the video, video is from 0 to 100😉
@@AsmrProg Thanks @AsmrProg I will observe it carefully hahahha I apreciate it. Very nice video! :)
Thx bro🙏❤️
he didn't use freamworks he created the classes
Yes, Thx for comment ❤️🙏
The funny thing is i learned programming in this video more than UA-cam tutorials, keep it up!
Thanks 🙏❤️
I remember your first vids, old pfp and when u still didnt have lots of subs and views. your channel really grew up so fast, keep it up!
Thanks a lot my old subscriber ❤️🙏
this calculator does the calculation as soon as you enter a symbol. if it were to keep displaying the expression and calculate after user has entered a bunch of operations together, it'd be a lot harder (order of operation and parentheses). how would u do this?
In this calculator, js just use display number and operation in real time, for parentheses and order of operation we need a calculator that wait for all commands then after user clicked on (=) that calculate operations, but here js automatically use (=)
Very good project, really learned a lot from this in a very relaxing way. Can you please tell me what extensions you have for VS Code, would be very helpful!
Hi bro thx for good comment, extensions available on my channel community page 🙏❤️
this video is amazing, ur giving me hopes on coding !!!
Thanks 🙏❤️
Watching it and listen to my coding playlist is 🔥🔥🔥
🙏❤️
I have always considered ASMR a pointless, dumb, stupid, and futile term and so was the case with everything related to it. Untill I cam across this video, and I realised, man, nothing's better than ASMR programming!
Hi, it’s great to hear it, thanks 🙏❤️
Hello from Brazil! Thanks for making this kind of content. Learn and relax 😊. Your keyboard seems very good. Can you say the brand/model that you use? Thank you again!
Thanks 🙏 Newmen gm610
Been around the block, the linear gradient rule blew my mind for some reason 😅 that's a new one for me
Watching a video and trying my best. It's not easy because I don't even know the properties of CSS well, but it's really awesome! 💯
Great 😉🙏❤️
please release this, this is the first calculator website i have seen that's not basically just adds
🙏❤️
as someone who is just getting into the coding world, thank you.
may i ask what keyboard you use, i'm really in love with it!
Thanks for good comment, keyboard is my laptop’s keyboard, Lenovo legion 5
At the moment I'm also learning programming and I can't do that much yet, but by watching your videos all the time, I'm learning it automatically except Javascript I don't understand that yet. Take good care of yourself!
Thanks so much 🙏❤️
you encourage me to continue learning programming
Yes why no?
Hey! first I want to say I love your videos. and you are teaching me so much. I notice you flip back and forth through you pages in VS Code. I don't know if you know this already, but you are able to have both Index.html, and you CSS on the same screen at the same time. that way you can't go from HTML to CSS easier for more cleaner videos....
Thanks for good comment 🙏❤️
this is actually very good! My expertise is in Python, but it was really intresting for me to watch this! Keep going man!
Thanks a lot 🙏❤️
gracias por tus tutoriales de programación estoy estudiando y practicando y tus videos me ayudan mucho gracias bro¡¡¡¡
Thanks 🙏❤️
I subscribed because of the way you reply every comment, Great skills ❤
Thanks 🙏❤️
Aprendi bastante vendo o vídeo, obrigado meu mano
🙏❤️
You should probably use grid instead of flex when making a calculator. It kinda makes things easier ^^
Yes Skillzor, but with flex designs are more responsive and it’s easier than grid. But thanks for your comment🙏❤️
🙏
@Edward G. Stone For the love of god don't
🙏❤️
@Edward G. Stone whaat..
can you say I did everything as shown in the video but my calculator doesn’t work the buttons can’t be pressed???
bro this is next level and professional programmer i only can watch video and only i can imagine in my dreams to create calculator but this actually making salute man you have earn a sub Thanks for increasing my information
Thanks for supporting 🙏❤️
Estoy intentando aprender programación, apenas y comprendo un poco el HTML pero veo más y más vídeos y siento que es imposible, perooo trataré de seguir aprendiendo sobre el tema.
Don’t worry and keep going on, you will succeed 😉❤️
Hey! I also want to learn all of it. When will you teach us too?❤️❤️ Waiting for your tutorial for beginner friendly. ❤️
Hi, we are working on courses, soon will tell subscribers in channel how to start it 😉
Love ur content brother this helps me alot
Thx bro 🙏❤️
Thank u bro, it's easy to understanding. Great job
Thanks 🙏❤️
Vídeo sensacional, estou começando agora e entendi a parte do HTML e CSS, passou pro JS não entendi mais nada, espero chegar nesse nivel o quanto antes!!.
Great, keep going on, with experience anything is possible 😉❤️
até que fim um brasileiro
vou começar a aprender alguma linguagem agora em 2024, tu sabe dizer se é bom começar por python?
i'm going to start learning some language now in 2024, can you tell me if it's good to start with python?@@AsmrProg
@kauecostasilva4307 please write in English 🙏
Muito bom o vídeo, parabéns
Thanks 🙏❤️
Nice, over 30 mins, it took me a couple of hours to code this before.
🙏❤️
this calculator is so clean. Thank you for this.
Thanks bro 🙏❤️
@@AsmrProg np. how would you recommend compiling it into a .exe?
You can’t do it, if you want exe you need code it with java!
Очень крутой формат, залипательно.
Thanks bro 🙏❤️
Thank you, dude, hope that you will soon release the teaching video.
But add Vietnamese subtitles to your videos.
Thanks 🙏❤️
Oooh love love love this. I can relax and learn. But there’s no way I could enjoy this video with all the loud ads every few minutes. Thank goodness I can watch without them!
Thanks a lot for your good support and energy 🙏
Being proud when created something new !
Yes 😁❤️
who else is instead of listening to the asmr here to learn
🙄🙄
At the end of the video, where is the code to solve the bug?!!
Hi, I solved it in video!
I finished watching it without even getting bored.
🙏❤️
Well done mate! l am so greatful to see your magic on your programming. l would like to learn programming, but l am starting with the basics of HTML and CSS first.
It’s great, keep going on, we will have courses for it 😉
As someone who has just started learning code (Python), I'm just like "How the hell does he know all of this from memory" I feel like I will never be capable of doing this on my own...
Did anyone else feel the same at the beginning?
if you have experience you will know all of codes!
where can i get the source code of this project
Hi, here the full source : drive.google.com/file/d/1vXEro1zflp4atJOjFcrhrMjBzTiE3RdD/view?usp=sharing
That is the best sounding membrane keyboard i have ever heard.
Thanks 🙏❤️
It's very comforting to watch the person in this video coding so easily.
Because video edited!
@@AsmrProg Still, it's very impressive for me, who doesn't know how to code.
@GodsGlare0 🙏❤️
It's amazing how you can program such an in-depth game in only half an hour
Pro-tip for when you play though, don't shoot the balloon with the arrow, that'll blow your whole PC up
Thx 🙏❤️
LMAO I see you have playede calculator as featured in TAWOG😂
😂😂😂😂
Meanwhile me: uses eval function to do arithmetic 💀
🙏❤️
I liked how you used emmet at the beginning for writing general html, but not for writing the calculator layout itself. Though it may be better if you want a longer asmr video
Hi, thanks for your video! I'm an Italian guy that loves coding, especially in Python. I like your programming abilities and all of your video! Keep going!
Thanks a lot my italian bro 🙏❤️
Basically a tutorial using a keyboard
🙏❤️
Watching coding while shitting so I don't shit while coding
🙏
i just found your YT and i really like the vidoes im going to try my hands on all your projects. keep it up
Thanks 🙏❤️
looks beautiful well done! thanks for sharing
🙏❤️
Source code please 😢
Hi, here the code :
drive.google.com/file/d/1vXEro1zflp4atJOjFcrhrMjBzTiE3RdD/view?usp=sharing
One of my favourite coder. Thanks you sir
🙏❤️