همانطور که در تصویر می بینید، این یک ماشین حساب است. شما یک برنامه ماشین حساب مشابه این را در یک وب سایت بسیار آشنا مانند CodePen پیدا خواهید کرد، اما آن برنامه بسیار دشوار خواهد بود. اگر مبتدی هستید یا به دنبال کدهای ساده هستید، قطعا درک آن برای شما دشوار است.
در تصویر تعدادی دکمه و اعداد وجود دارد. وقتی روی آن دکمه خاص کلیک می کنید، شماره آن دکمه روی نمایشگر نشان داده می شود. اگر احساس می کنید درک آنچه می گویم دشوار است. آموزش تصویری کامل این برنامه (Working Calculator) را می توانید مشاهده کنید.
آموزش تصویری طراحی ماشین حساب کار با جاوا اسکریپت
امیدوارم طرح ها، مفاهیم و کدها را درک کرده باشید. فکر میکنم این ویدیو میتواند به مبتدیان کمک کند تا CSS را عمیقاً بشناسند. اگر می خواهید سورس کد این برنامه (Working Calculator) را دریافت کنید. شما می توانید آن را به راحتی از لینک زیر دریافت کنید.
شما همچنین می توانید این ماشین حساب را با توجه به نیازها پس از چند تغییر بسازید. همچنین، می توانید این برنامه را دوباره طراحی کنید تا این ماشین حساب را به سطح بعدی ببرید.
ماشین حساب کار با استفاده از HTML CSS و jQuery [کدهای منبع]
برای ایجاد این برنامه (Working Calculator). ابتدا باید دو فایل یک فایل HTML و دیگری CSS ایجاد کنید. پس از ایجاد این فایل ها فقط کدهای زیر را در فایل خود قرار دهید. ابتدا یک فایل HTML با نام index.html ایجاد کنید و کدهای داده شده را در فایل HTML خود قرار دهید. به یاد داشته باشید، شما باید یک فایل با پسوند html ایجاد کنید.
دوم، یک فایل CSS با نام style.css ایجاد کنید و کدهای داده شده را در فایل CSS خود قرار دهید. به یاد داشته باشید، شما باید یک فایل با پسوند css ایجاد کنید.
این همه است، اکنون شما با موفقیت یک ماشین حساب کار با استفاده از HTML CSS و jQuery ایجاد کرده اید. اگر کد شما کار نمی کند یا با هر گونه خطا/مشکلی مواجه شده اید، لطفاً نظر خود را در صفحه کامنت بگذارید یا از صفحه تماس با ما تماس بگیرید.