ASMR Programming - Calculator App Coding - No Talking

Поділитися
Вставка
  • Опубліковано 31 жов 2024

КОМЕНТАРІ • 3,4 тис.

  • @GrandNebSmada
    @GrandNebSmada 2 роки тому +10131

    Me: Watches a video of someone else programming instead of working on my own project that I keep putting off

  • @RuphiaYen
    @RuphiaYen 2 роки тому +963

    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.

  • @123lovegirls123
    @123lovegirls123 Рік тому +657

    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

    • @AsmrProg
      @AsmrProg  Рік тому +27

      Thanks 🙏❤️

    • @МагаРусских
      @МагаРусских Рік тому +4

      А как убрать прозрачный фон?

    • @AsmrProg
      @AsmrProg  Рік тому +5

      @user-ig9gd8sm1p sorry! Please write in english 🙏

    • @abhinavgangwar4690
      @abhinavgangwar4690 Рік тому +4

      ​@@AsmrProgi dont understand his language but youtube translation shows "How do i remove the transparent background?"

    • @МагаРусских
      @МагаРусских Рік тому

      Короче я разобрался! Просто зажимаете ctrl + Alt + c

  • @Websitedr
    @Websitedr Рік тому +1973

    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.

    • @AsmrProg
      @AsmrProg  Рік тому +76

      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 🙏❤️

    • @AsmrProg
      @AsmrProg  Рік тому +29

      It’s good, good luck 👏❤️

    • @KoenigseggEditz856
      @KoenigseggEditz856 Рік тому +38

      “basic project for beginners”, yez very basic calculator go brrrrr

    • @AsmrProg
      @AsmrProg  Рік тому +10

      😉🙏❤️

    • @andressepulveda1661
      @andressepulveda1661 Рік тому +27

      for bengginers? i feel its a lot of things for to learn T_T

  • @TheGalekGames
    @TheGalekGames Рік тому +167

    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!

    • @AsmrProg
      @AsmrProg  Рік тому +13

      Great, keep it up 😉❤️

    • @5dollasubwayfootlong
      @5dollasubwayfootlong Рік тому +4

      HTML? In COLLEGE? What were you doing in high school...? Unless you're not a tech major, that's concerning.

    • @TheGalekGames
      @TheGalekGames Рік тому

      @@5dollasubwayfootlong programmer analyst, IT stuff... Learned python a bit in school.

    • @zombiezoo1384
      @zombiezoo1384 Рік тому +5

      I never learned html and css or javascript still could understand 60-70% of this (except i understood javascript part like 30-40 %)

    • @AsmrProg
      @AsmrProg  Рік тому +4

      🙄

  • @ptfs_plane_spotter-d4k
    @ptfs_plane_spotter-d4k Рік тому +83

    This honestly taught me loads as a beginner JS programmer, wow. Thanks!

  • @Bard_Gaming
    @Bard_Gaming Рік тому +45

    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 '

    • @AsmrProg
      @AsmrProg  Рік тому +9

      Nice and Thanks a lot for your additional info 🙏❤️

  • @Mmelihhhozklc
    @Mmelihhhozklc Рік тому +250

    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....

    • @AsmrProg
      @AsmrProg  Рік тому +15

      Thanks a lot Melih 🙏❤️

    • @AsmrCode12
      @AsmrCode12 Рік тому +2

      I found this channel a few days ago and now I don't miss a video, great work there

    • @AsmrProg
      @AsmrProg  Рік тому +1

      @csstutorials184 thanks a lot for supporting 🙏❤️

  • @HeadstudiosAu
    @HeadstudiosAu Рік тому +124

    Man... this guy really made the calculator, and the styles and everything from scratch.

  • @quintenmckinney
    @quintenmckinney 2 роки тому +105

    I love coming back to your videos after I finish a college class and finally understanding what your doing

    • @AsmrProg
      @AsmrProg  2 роки тому +3

      Thx Quinten 🙏❤️

    • @ethanborin7797
      @ethanborin7797 2 роки тому +9

      Exactly the same with me, all of a sudden it makes sense hahahah

    • @AsmrProg
      @AsmrProg  2 роки тому +1

      Oh thx a lot Ethan 🙏❤️

  • @bcvuazy-old6585
    @bcvuazy-old6585 Рік тому +9

    I am a newer web developer and I didn't know about that preview extension.... You are my savior.

  • @Dogeforlife0
    @Dogeforlife0 Рік тому +109

    Even though I don't know anything about coding, watching this with my music is the most relaxing thing I've experienced

  • @rinri_ustav
    @rinri_ustav 2 роки тому +147

    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👀

    • @AsmrProg
      @AsmrProg  2 роки тому +5

      Thx a lot bro, i will code back-end soon😉❤️

  • @SarahCoding23
    @SarahCoding23 Рік тому +15

    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!

    • @AsmrProg
      @AsmrProg  Рік тому

      Thanks a lot 🙏❤️

  • @davidwilliam6555
    @davidwilliam6555 Рік тому +12

    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!

    • @AsmrProg
      @AsmrProg  Рік тому +2

      Thanks a lot, it was on of our first videos, so have some bugs!!

    • @davidwilliam6555
      @davidwilliam6555 Рік тому +1

      It actually taught me a lot, so I tried building on it a little! Just arrived here, I'm gonna check more! Thanks!!

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Thanks 🙏❤️

  • @OmAn1994
    @OmAn1994 Рік тому +21

    It feels so dam good to know JavaScript and hear the keyboard type all of what you already know.
    Keep it up

  • @melnikponedelnik
    @melnikponedelnik Рік тому +30

    Круто, очень нравится! No Talking - это здорово. Всё итак понятно без воды🙂

    • @AsmrProg
      @AsmrProg  Рік тому +3

      Thanks 🙏❤️

    • @atlasworkout3651
      @atlasworkout3651 Рік тому +1

      @@AsmrProg что за клавиатура ?

    • @AsmrProg
      @AsmrProg  Рік тому

      Please write english!!

    • @respectableandserious
      @respectableandserious Рік тому +1

      @@AsmrProg what model of keyboard?

    • @AsmrProg
      @AsmrProg  Рік тому +2

      @KPACOTA_KOTA hi, in this video it’s Lenovo legion 5 laptop keyboard!

  • @napoleaobatata
    @napoleaobatata 3 місяці тому +3

    every time I see a video from this guy I feel more motivated to continue programming

    • @AsmrProg
      @AsmrProg  3 місяці тому

      Keep going on 🙏❤️

  • @codewithatharv
    @codewithatharv Рік тому +27

    I really like the hardwork you do to make every single video.

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Thank you so much for understanding me 🙏❤️

    • @codewithatharv
      @codewithatharv Рік тому +1

      @@AsmrProg btw what laptop is that?

    • @AsmrProg
      @AsmrProg  Рік тому +3

      Lenovo legion 5

  • @meloselezi8829
    @meloselezi8829 11 місяців тому +2

    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!

    • @AsmrProg
      @AsmrProg  11 місяців тому +1

      Thanks so much 🙏❤️

  • @fatpandaftw7570
    @fatpandaftw7570 10 місяців тому +3

    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

    • @AsmrProg
      @AsmrProg  10 місяців тому

      Glad it is helpful, keep it up 😉❤️

  • @AsmrProg
    @AsmrProg  2 роки тому +199

    Please like and subscribe if you want to support me create new videos❤️

    • @bilgilerleefsanesin1207
      @bilgilerleefsanesin1207 2 роки тому +2

      where can i find this keyboard?

    • @ALIKOWOT
      @ALIKOWOT 2 роки тому +2

      this is noutbook

    • @AsmrProg
      @AsmrProg  2 роки тому

      Hi, From amazon site

    • @AsmrProg
      @AsmrProg  2 роки тому

      No lenovo legion 5

    • @markmark5793
      @markmark5793 Рік тому +2

      Я сделал) добрый вечер из Новосибирска)

  •  Рік тому +2

    I finished watching it without even getting bored.

  • @samuelsaggin6058
    @samuelsaggin6058 2 роки тому +8

    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.

    • @AsmrProg
      @AsmrProg  2 роки тому +1

      Hi Samuel, Thanks bro, Your comment is energy for me 🙏❤️

  • @CidKagenouuuYT
    @CidKagenouuuYT Рік тому +3

    this channel is Unique he is replying to every comments.
    You earn a subs for that😮

    • @AsmrProg
      @AsmrProg  Рік тому

      Yes my audience comments are important for me 😉❤️

  • @AwaysNix
    @AwaysNix 8 місяців тому

    I feel happy after studying javascript for a month made understand your code, thanks for your incredible content!

    • @AsmrProg
      @AsmrProg  7 місяців тому

      Thanks 🙏❤️

  • @eenayeah
    @eenayeah Рік тому +6

    I am not even a programmer but I am watching this very intently. It is quite interesting!

  • @yeahBOII154
    @yeahBOII154 Рік тому +4

    please release this, this is the first calculator website i have seen that's not basically just adds

  • @MagnumDB
    @MagnumDB Рік тому +1

    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!

    • @AsmrProg
      @AsmrProg  Рік тому

      Thanks a lot for your good support and energy 🙏

  • @blobstudio
    @blobstudio Рік тому +22

    who else is instead of listening to the asmr here to learn

    • @AsmrProg
      @AsmrProg  Рік тому +1

      🙄🙄

    • @Repulsion-kt3tx
      @Repulsion-kt3tx 16 днів тому

      ​@@AsmrProgdid you even find out what he was trying to comment !?

  • @skillzorskillsson8228
    @skillzorskillsson8228 2 роки тому +61

    You should probably use grid instead of flex when making a calculator. It kinda makes things easier ^^

    • @AsmrProg
      @AsmrProg  2 роки тому +20

      Yes Skillzor, but with flex designs are more responsive and it’s easier than grid. But thanks for your comment🙏❤️

    • @AsmrProg
      @AsmrProg  2 роки тому

      🙏

    • @dedelabinouze5110
      @dedelabinouze5110 2 роки тому +5

      @Edward G. Stone For the love of god don't

    • @AsmrProg
      @AsmrProg  2 роки тому

      🙏❤️

    • @lemon5962
      @lemon5962 2 роки тому +1

      @Edward G. Stone whaat..

  • @vividwater
    @vividwater 4 місяці тому

    Senior fullstack js dev here. I came for the ASMR aspect, wasn't disappointed.
    Just one thing though:
    Please use a linter on save. (also please space out your css selectors from the brackets as well as if and else from the brackets, the code is condensed otherwise and makes it a bit annoying to read.
    Thanks for the content, keep it up.

  • @yaetuna
    @yaetuna Рік тому +8

    Love this channel , help me have more motivation to continue this work though i was very tired , thank for the ASMR

  • @eballer48
    @eballer48 Рік тому +3

    Watching you write allll those buttons reminds me how much I love JSX and React :P

  • @TMNuka
    @TMNuka 3 години тому

    I'm start programming from this video. Thank you!

  • @AliHaghbin-c3i
    @AliHaghbin-c3i Рік тому +6

    this is actually very good! My expertise is in Python, but it was really intresting for me to watch this! Keep going man!

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Thanks a lot 🙏❤️

  • @abdurrafaywali4756
    @abdurrafaywali4756 10 місяців тому +3

    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!

    • @AsmrProg
      @AsmrProg  10 місяців тому +1

      Hi, it’s great to hear it, thanks 🙏❤️

  • @adlzinn
    @adlzinn Рік тому +1

    bro that design was insanelly beautiful, congrats!!!!

  • @jhonatansilva1148
    @jhonatansilva1148 Рік тому +10

    Hello, I follow you from Brazil 🇧🇷, I like many of your videos, while they are relaxing, you pass on incredible knowledge, keep it up!

  • @turistography2835
    @turistography2835 Рік тому +7

    i never knew how much i needed a video like thik. thank you!!!

  • @emilia4903
    @emilia4903 Рік тому +1

    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.

  • @laphynix7773
    @laphynix7773 Рік тому +3

    This is the best tutorial I've seen. Thanks! Now I know how to do a calculator!

    • @AsmrProg
      @AsmrProg  Рік тому +2

      Thx a lot 🙏❤️

  • @KreativeHands100
    @KreativeHands100 Рік тому +5

    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....

    • @AsmrProg
      @AsmrProg  Рік тому

      Thanks for good comment 🙏❤️

  • @ArioKing-t3s
    @ArioKing-t3s 11 місяців тому +1

    Hello, I am studying computer engineering in Turkey, I am improving myself outside the university, I think your videos will be very useful to me, your videos are very good, very nice people, they are very useful for improving themselves, thank you very much for your videos.

    • @AsmrProg
      @AsmrProg  11 місяців тому +1

      Hi, thanks so much for your good vibes and energy 🙏❤️

  • @sanyaYT434
    @sanyaYT434 Рік тому +272

    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

    • @AsmrProg
      @AsmrProg  Рік тому +15

      Sorry?!

    • @DRACA0410
      @DRACA0410 Рік тому +4

      As for that window that shows the website next to the code, how to do it?

    • @AsmrProg
      @AsmrProg  Рік тому +17

      Hi bro, it’s live preview extension 🙏

    • @King_sobb
      @King_sobb 5 місяців тому +2

      Bro this was literally in the description

    • @tonight_lonely
      @tonight_lonely 4 місяці тому

      Саня сигма

  • @geovannewashington
    @geovannewashington Рік тому +7

    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?

    • @AsmrProg
      @AsmrProg  Рік тому +2

      Yes, video is edited, it’s takes more than 1h

  • @phamngoctung1389
    @phamngoctung1389 4 місяці тому

    TÔI KHÔNG THỂ KIÊN NHẪN XEM HẾT, NHƯNG BẠN RẤT GIỎI, CẢM ƠN NHỮNG GÌ BẠN LÀM.

  • @sybinh1505
    @sybinh1505 Рік тому +3

    Thank you, dude, hope that you will soon release the teaching video.
    But add Vietnamese subtitles to your videos.

  • @shivaayritik6680
    @shivaayritik6680 Рік тому +3

    Hey! I also want to learn all of it. When will you teach us too?❤️❤️ Waiting for your tutorial for beginner friendly. ❤️

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Hi, we are working on courses, soon will tell subscribers in channel how to start it 😉

  • @AdarshMPrœ
    @AdarshMPrœ 4 місяці тому +2

    I learn about new keywords of css from this channel :P
    By watching full video with asmr

  • @RianRudro
    @RianRudro Рік тому +5

    It’s masterpiece 👌Thanks Dude❤

  • @АнтонЧестный-л7б
    @АнтонЧестный-л7б 2 роки тому +5

    thanks for the keyboard, immediately like it!!!

  • @preethikae8519
    @preethikae8519 Рік тому +2

    Its impressive how you can code without encountering any error, you have achieved god tier

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Hi, no! Video is edited!

  • @erik6786
    @erik6786 Рік тому +3

    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!!.

    • @AsmrProg
      @AsmrProg  Рік тому +2

      Great, keep going on, with experience anything is possible 😉❤️

    • @kauecostasilva4307
      @kauecostasilva4307 10 місяців тому

      até que fim um brasileiro

    • @kauecostasilva4307
      @kauecostasilva4307 10 місяців тому

      vou começar a aprender alguma linguagem agora em 2024, tu sabe dizer se é bom começar por python?

    • @kauecostasilva4307
      @kauecostasilva4307 10 місяців тому

      i'm going to start learning some language now in 2024, can you tell me if it's good to start with python?@@AsmrProg

    • @AsmrProg
      @AsmrProg  9 місяців тому

      @kauecostasilva4307 please write in English 🙏

  • @grip244
    @grip244 Рік тому +6

    Ok hold up, this mans is typing their own hex colors by heart??? WTF Bro, I applaud you!

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Hi, no! Video is edited 🙏

  • @maps_com
    @maps_com Рік тому +16

    The funny thing is i learned programming in this video more than UA-cam tutorials, keep it up!

  • @cosmo_7
    @cosmo_7 8 місяців тому

    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

  • @GainsGoblin
    @GainsGoblin Рік тому +5

    O-oh no is that vanilla js, html and css ? ? ? Where are my 12GB of npm modules ? ??

  • @riddims5852
    @riddims5852 Рік тому +7

    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!

    • @AsmrProg
      @AsmrProg  Рік тому

      Thanks for good comment, keyboard is my laptop’s keyboard, Lenovo legion 5

  • @isah_sales
    @isah_sales Рік тому +2

    That was beautiful, contrats!! I'll give you a tip: when you're in the middle of a line, and you want to go to the bottom line, press CTRL + Enter

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Thanks a lot bro, but with hotkeys beginners don’t understand what we do!!

    • @Enoiye
      @Enoiye Рік тому +1

      @@AsmrProg get onsreen keystrock display

    • @AsmrProg
      @AsmrProg  Рік тому

      Sorry what?!

  • @ariel5269
    @ariel5269 Рік тому +5

    Aprendi bastante vendo o vídeo, obrigado meu mano

  • @2011Feijao
    @2011Feijao 2 роки тому +13

    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...

    • @AsmrProg
      @AsmrProg  2 роки тому +2

      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😉

    • @2011Feijao
      @2011Feijao 2 роки тому +1

      @@AsmrProg Thanks @AsmrProg I will observe it carefully hahahha I apreciate it. Very nice video! :)

    • @AsmrProg
      @AsmrProg  2 роки тому

      Thx bro🙏❤️

    • @youbsalama9309
      @youbsalama9309 2 роки тому +1

      he didn't use freamworks he created the classes

    • @AsmrProg
      @AsmrProg  2 роки тому +1

      Yes, Thx for comment ❤️🙏

  • @GodsGlare0
    @GodsGlare0 9 місяців тому +1

    It's very comforting to watch the person in this video coding so easily.

    • @AsmrProg
      @AsmrProg  9 місяців тому +1

      Because video edited!

    • @GodsGlare0
      @GodsGlare0 9 місяців тому +1

      @@AsmrProg Still, it's very impressive for me, who doesn't know how to code.

    • @AsmrProg
      @AsmrProg  9 місяців тому

      @GodsGlare0 🙏❤️

  • @beatjhpr
    @beatjhpr Рік тому +6

    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!

    • @AsmrProg
      @AsmrProg  Рік тому +2

      Thanks 🙏 Newmen gm610

  • @陳俊-p4k
    @陳俊-p4k 5 місяців тому +10

    Decimal number: Did someone just forget me?

  • @AshishVerma-yu8hp
    @AshishVerma-yu8hp Місяць тому

    Bro i m a high school student i really really love to code found ur channel too interesting . ❤❤❤hope u make more interesting projects . Love frm india

  • @KivixEU
    @KivixEU Рік тому +8

    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!

    • @AsmrProg
      @AsmrProg  Рік тому +2

      Hi bro thx for good comment, extensions available on my channel community page 🙏❤️

  • @FBI_open_up248
    @FBI_open_up248 2 роки тому +8

    Very nice video. How did you configure your cursor? I really like the trail and the click effect.

    • @AsmrProg
      @AsmrProg  2 роки тому +3

      Hi, it’s screen recorder effects

    • @Danidanijr
      @Danidanijr Рік тому +1

      @@AsmrProg what recorder do you use?

    • @AsmrProg
      @AsmrProg  Рік тому

      EZ Screen Recorder

  • @Retrovoider
    @Retrovoider Рік тому +1

    I aint got a single clue about how to code or none of that and I also don't listen to asmr
    But for some reason these kinds of videos where it's just keyboard sound is actually really nice

  • @angeler4872
    @angeler4872 2 роки тому +6

    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.

    • @AsmrProg
      @AsmrProg  2 роки тому

      Don’t worry and keep going on, you will succeed 😉❤️

  • @ryaadzz
    @ryaadzz 8 місяців тому +4

    At the end of the video, where is the code to solve the bug?!!

    • @AsmrProg
      @AsmrProg  7 місяців тому

      Hi, I solved it in video!

  • @djtomoy
    @djtomoy Рік тому +1

    Finally an app for adding numbers together 🙌🙌🙌🙌

  • @Saironsmv
    @Saironsmv Рік тому +9

    Очень крутой формат, залипательно.

  • @joan_lagos
    @joan_lagos 2 місяці тому +5

    Here is the code from the video. I will be adding more features over time, so it might be edited occasionally:

    Calculator
    html {
    box-sizing: border-box;
    height: 100%;
    }
    *,
    *::before,
    *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    }
    body {
    align-items: center;
    background: linear-gradient(320deg, #eb92be, #ffef78, #63c9b4);
    display: flex;
    font-family: 'Dosis', sans-serif;
    font-display: swap;
    height: inherit;
    justify-content: center;
    }
    .wrapper {
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    background: rgba(255, 255, 255, 0.30);
    flex-basis: 400px;
    height: 540px;
    padding: 20px 35px;
    }
    .screen {
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    font-size: 35px;
    overflow: auto;
    padding: 20px;
    text-align: right;
    width: 326px;
    }
    .calc-button-row {
    display: flex;
    justify-content: space-between;
    margin: 5% 0;
    }
    .calc-button {
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    flex-basis: 20%;
    font-family: inherit;
    font-size: 24px;
    height: 65px;
    }
    .calc-button:last-child {
    color: #fff;
    background: #d72880;
    }
    .calc-button:last-child:hover {
    background-color: inherit;
    color: inherit;
    }
    .calc-button:hover {
    background-color: inherit;
    }
    .calc-button:active {
    background-color: #ffef78;
    }
    .double {
    flex-basis: 47%;
    }
    .triple {
    flex-basis: 47%;
    }
    .pi-button {
    flex-basis: 20%;
    }

    0

    C

    ÷
    7
    8
    9
    ×
    4
    5
    6

    1
    2
    3
    +
    π
    0
    =

    let runningTotal = 0;
    let buffer = "0";
    let expression = "";
    let previousOperator = null;
    let operatorInMemory = null;
    let piDisplayed = false;
    const screen = document.querySelector('#display');
    const piValue = "3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948954930381964428810975665933446128475648233786783165271201909145648566923460348610454326648213393607260249141273";
    function buttonClick(value) {
    if (isNaN(value)) {
    handleSymbol(value);
    } else {
    handleNumber(value);
    }
    screen.innerText = expression || "0";
    }
    function handleNumber(number) {
    if (buffer === "0" || piDisplayed) {
    buffer = number;
    piDisplayed = false;
    } else {
    buffer += number;
    }
    expression += number;
    }
    function handleSymbol(symbol) {
    switch (symbol) {
    case 'C':
    buffer = '0';
    runningTotal = 0;
    previousOperator = null;
    operatorInMemory = null;
    expression = "";
    piDisplayed = false;
    break;
    case '←':
    if (piDisplayed) {
    buffer = "0";
    expression = expression.slice(0, -piValue.length);
    piDisplayed = false;
    } else if (buffer.length === 1) {
    buffer = "0";
    expression = expression.slice(0, -1);
    } else {
    buffer = buffer.substring(0, buffer.length - 1);
    expression = expression.slice(0, -1);
    }
    break;
    case '=':
    if (previousOperator === null) {
    return;
    }
    flushOperation(parseFloat(buffer));
    previousOperator = null;
    buffer = runningTotal.toString();
    expression = buffer;
    break;
    case '÷':
    case '×':
    case '−':
    case '+':
    handleMath(symbol);
    expression += symbol;
    break;
    case 'π':
    buffer = piValue;
    expression += piValue;
    piDisplayed = true;
    break;
    }
    }
    function handleMath(symbol) {
    if (buffer === "0" && !piDisplayed) {
    return;
    }
    const floatBuffer = parseFloat(buffer);
    if (runningTotal === 0) {
    runningTotal = floatBuffer;
    } else {
    flushOperation(floatBuffer);
    }
    previousOperator = symbol;
    buffer = "";
    }
    function flushOperation(floatBuffer) {
    if (previousOperator === "+") {
    runningTotal += floatBuffer;
    } else if (previousOperator === "−") {
    runningTotal -= floatBuffer;
    } else if (previousOperator === "×") {
    runningTotal *= floatBuffer;
    } else if (previousOperator === "÷") {
    runningTotal /= floatBuffer;
    }
    }
    Calculator V2: (Things implemented)
    New Features:
    • Added a button that displays the first 200 digits of pi (π), which was not present in the original version.
    • All digits and numbers will now appear on the screen as expected.
    Changes Made:
    • Adjusted parts of the code to ensure everything is visible on the screen. When you click "π" and then "C," pi will disappear. Also, when you click "π" and then "←," all digits of pi will disappear, not just one.

  • @evanotoole787
    @evanotoole787 Рік тому +1

    As a C/C++ programmer that works on GUI apps, this looks relatively fun to do.

  • @Pedro19893
    @Pedro19893 Рік тому +3

    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?

    • @AsmrProg
      @AsmrProg  Рік тому +1

      if you have experience you will know all of codes!

  • @wajidaliansari7648
    @wajidaliansari7648 Рік тому +3

    where can i get the source code of this project

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Hi, here the full source : drive.google.com/file/d/1vXEro1zflp4atJOjFcrhrMjBzTiE3RdD/view?usp=sharing

  • @cybermoja
    @cybermoja Рік тому +1

    Nice, over 30 mins, it took me a couple of hours to code this before.

  • @roboticreaper2662
    @roboticreaper2662 2 роки тому +4

    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?

    • @AsmrProg
      @AsmrProg  2 роки тому +2

      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 (=)

  • @abdalmoamenabdalmoamen2202
    @abdalmoamenabdalmoamen2202 Рік тому +3

    How I can be a pro programer?
    Sorry I doesn't very good at English

    • @AsmrProg
      @AsmrProg  Рік тому +3

      Hi, just experience!

  • @IvanPlay-h9y
    @IvanPlay-h9y 8 місяців тому +1

    This video is pure motivation for me to learn programming❤

  • @teamok1025
    @teamok1025 Рік тому +3

    Basically a tutorial using a keyboard

  • @randumbbz2019
    @randumbbz2019 Рік тому +3

    Watching coding while shitting so I don't shit while coding

  • @manjulamuthuraman3847
    @manjulamuthuraman3847 Рік тому +3

    Source code please 😢

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Hi, here the code :
      drive.google.com/file/d/1vXEro1zflp4atJOjFcrhrMjBzTiE3RdD/view?usp=sharing

    • @manjulamuthuraman3847
      @manjulamuthuraman3847 Рік тому +3

      One of my favourite coder. Thanks you sir

    • @AsmrProg
      @AsmrProg  Рік тому

      🙏❤️

    • @Rohit-cj6eb
      @Rohit-cj6eb 19 днів тому

      If you need source code for calculator then coding is not for you find some different job

  • @NewYork81983
    @NewYork81983 Рік тому +13

    This was not ASMR to me at all. The slow motion typing gave me serious anxiety lmao

  • @xamle6523
    @xamle6523 10 місяців тому +2

    Being proud when created something new !

    • @AsmrProg
      @AsmrProg  10 місяців тому +1

      Yes 😁❤️

  • @D1orjhs
    @D1orjhs Рік тому +1

    this has to be the best asmr channel i’ve ever came across

  • @ishan4467
    @ishan4467 Рік тому +1

    That is the best sounding membrane keyboard i have ever heard.

  • @bu2dev
    @bu2dev Рік тому +1

    this video even learns me html css and javascript thank you bro 🙏❤ keep going your the best programmer! ❤

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Thanks so much 🙏❤️

  • @WUNNA3500
    @WUNNA3500 Рік тому +1

    why this so chill

  • @SophiaWoessner
    @SophiaWoessner Рік тому +1

    I bought one of these quieter satisfying keyboards and it absolutley helps

  • @luis.galicia
    @luis.galicia 3 місяці тому +1

    I always like this project, it always has been a basic task since i was in the school perfect for learning

  • @tormado
    @tormado 8 місяців тому

    Been around the block, the linear gradient rule blew my mind for some reason 😅 that's a new one for me

  • @Not_Flood
    @Not_Flood Рік тому +1

    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!

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Thanks a lot my old subscriber ❤️🙏

  • @zyan...
    @zyan... 14 днів тому

    gostei do fato de ter dado um bug e pôde consertar para vermos 🤩 se fosse no kotlin eu iria ficar feliz porque acho que entendi melhor no seu vídeo mesmo sem falas

  • @ai_coding
    @ai_coding Рік тому +1

    this calculator is so clean. Thank you for this.

    • @AsmrProg
      @AsmrProg  Рік тому

      Thanks bro 🙏❤️

    • @ai_coding
      @ai_coding Рік тому +1

      @@AsmrProg np. how would you recommend compiling it into a .exe?

    • @AsmrProg
      @AsmrProg  Рік тому +1

      You can’t do it, if you want exe you need code it with java!

  • @egor.761
    @egor.761 11 місяців тому +1

    That filling, when you are watching video not for the sake of relax, and in order to learn some thing

    • @AsmrProg
      @AsmrProg  11 місяців тому

      🙏❤️😉

  • @mysterjd34
    @mysterjd34 Рік тому +2

    Bro you're killng me. Pro tip. Instead of copying and pasting lines; select what you want, then use SHIFT-ALT-DownArrow. So much faster.

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Ok bro, thanks 🙏❤️

    • @HavingFunIsFun4U
      @HavingFunIsFun4U Місяць тому

      are you suggesting he is not a problem simply because he does not use a copy paste shortcut

  • @aamanali8564
    @aamanali8564 Рік тому +1

    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! 💯

    • @AsmrProg
      @AsmrProg  Рік тому +1

      Great 😉🙏❤️

  • @WagmiVibes
    @WagmiVibes Рік тому +2

    I subscribed because of the way you reply every comment, Great skills ❤