ASMR Programming - Calculator App Coding - No Talking
HTML-код
- Опубликовано: 5 июн 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
🙏❤️
😂😂😂
🙏❤️
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...
🙏❤️
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 %)
🙄
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
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
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 🙏❤️
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 RUclips 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😉❤️
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 🙏❤️
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 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
i never knew how much i needed a video like thik. thank you!!!
Thanks bro 🙏❤️
Ok hold up, this mans is typing their own hex colors by heart??? WTF Bro, I applaud you!
Hi, no! Video is edited 🙏
Круто, очень нравится! 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!
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 👍
This is the best tutorial I've seen. Thanks! Now I know how to do a calculator!
Thx a lot 🙏❤️
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é
thanks bro, this live preview extension helped me a lot, it's hard to change tabs all the time. anyway great asmr
😉❤️🙏
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 😉❤️
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 🙏❤️
Man, I LOVE RUclips 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 🙏❤️
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 🙏❤️
that's so amazing idea thankyou for this , i love programming and ASMR
Thanks 🙏❤️
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 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 🙏❤️
I feel happy after studying javascript for a month made understand your code, thanks for your incredible content!
Thanks 🙏❤️
thanks for the keyboard, immediately like it!!!
Thx 🙏❤️
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 ❤️🙏
Decimal number: Did someone just forget me?
this has to be the best asmr channel i’ve ever came across
Thanks 🙏❤️
The funny thing is i learned programming in this video more than RUclips tutorials, keep it up!
Thanks 🙏❤️
It’s masterpiece 👌Thanks Dude❤
🙏❤️
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 🙏❤️
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 🙏❤️
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 ❤️🙏
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
Very interesting! What plug-in / extension you're using to get this browser inside of vscode?
Hi, Thx 🙏❤️ Live Preview Plugin
this video even learns me html css and javascript thank you bro 🙏❤ keep going your the best programmer! ❤
Thanks so much 🙏❤️
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.
❤️🙏
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
who else is instead of listening to the asmr here to learn
🙄🙄
I subscribed because of the way you reply every comment, Great skills ❤
Thanks 🙏❤️
That filling, when you are watching video not for the sake of relax, and in order to learn some thing
🙏❤️😉
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 🙏❤️
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
I bought one of these quieter satisfying keyboards and it absolutley helps
Good 🙏
this video is amazing, ur giving me hopes on coding !!!
Thanks 🙏❤️
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
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..
bro i really find this beautiful man. it is like art
Thanks 🙏❤️
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 🙏❤️
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 🙏❤️
please release this, this is the first calculator website i have seen that's not basically just adds
🙏❤️
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 😉🙏❤️
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 🙏❤️
Aprendi bastante vendo o vídeo, obrigado meu mano
🙏❤️
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 😉❤️
Watching it and listen to my coding playlist is 🔥🔥🔥
🙏❤️
gracias por tus tutoriales de programación estoy estudiando y practicando y tus videos me ayudan mucho gracias bro¡¡¡¡
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 🙏❤️
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 😉
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 😉
Очень крутой формат, залипательно.
Thanks bro 🙏❤️
Been around the block, the linear gradient rule blew my mind for some reason 😅 that's a new one for me
Thank u bro, it's easy to understanding. Great job
Thanks 🙏❤️
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 (=)
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
Я сделал) добрый вечер из Новосибирска)
Love ur content brother this helps me alot
Thx bro 🙏❤️
you encourage me to continue learning programming
Yes why no?
Thank you, dude, hope that you will soon release the teaching video.
But add Vietnamese subtitles to your videos.
Thanks 🙏❤️
Watching coding while shitting so I don't shit while coding
🙏
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 🙏❤️
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 🙏❤️
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!
Basically a tutorial using a keyboard
🙏❤️
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!
Being proud when created something new !
Yes 😁❤️
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
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😂
😂😂😂😂
looks beautiful well done! thanks for sharing
🙏❤️
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
Meanwhile me: uses eval function to do arithmetic 💀
🙏❤️
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.
🙏❤️
Nice, over 30 mins, it took me a couple of hours to code this before.
🙏❤️
where can i get the source code of this project
Hi, here the full source : drive.google.com/file/d/1vXEro1zflp4atJOjFcrhrMjBzTiE3RdD/view?usp=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
🙏❤️
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 🙏
For beginners, it doesn’t need to be fancy, make it work first. Once working you can style it in your own way.
This was not ASMR to me at all. The slow motion typing gave me serious anxiety lmao
Ok