طراحی سایت وب کاران | طراحی سایت ، سئو وب سایت
طراحی ماشین حساب حرفه ای
آموزش طراحی ماشین حساب با استفاده از HTML,CSS,jQuery ، امروز در این وب سایت یاد خواهید گرفت که چگونه با استفاده از HTML، CSS و jQuery یک ماشین حساب ایجاد کنید.
بیشتر بخوانید: طراحی سایت قسطی
همانطور که در تصویر می بینید، این یک ماشین حساب است. یک برنامه ماشین حساب مانند این را در وب سایت بسیار معروفی مانند CodePen خواهید یافت، اما این برنامه بسیار دشوار خواهد بود. اگر مبتدی هستید یا به دنبال کدهای ساده هستید، قطعا درک آن برای شما دشوار خواهد بود.
در تصویر چندین دکمه و اعداد وجود دارد. وقتی روی آن دکمه خاص کلیک می کنید، شماره آن دکمه روی نمایشگر نشان داده می شود. اگر فکر می کنید درک آنچه من می گویم دشوار است. آموزش تصویری کامل این برنامه (Working Calculator) را می توانید مشاهده کنید.
آموزش تصویری طراحی ماشین حساب کار با جاوا اسکریپت
امیدوارم طرح، مفاهیم و کدها را درک کرده باشید. فکر می کنم این ویدیو می تواند به مبتدیان کمک کند تا CSS را عمیقاً درک کنند. اگر می خواهید سورس کد این برنامه (Working calculator) را دریافت کنید. از لینک زیر می توانید به راحتی آن را دریافت کنید.
بیشتر بخوانید: قیمت سئو وردپرس
همچنین می توانید پس از ایجاد تغییراتی، این ماشین حساب را با توجه به نیاز خود بسازید. همچنین، می توانید این برنامه را دوباره طراحی کنید تا این ماشین حساب را به سطح بعدی ببرید.
ماشین حساب کار با استفاده از HTML CSS و jQuery [کدهای منبع]
برای ایجاد این برنامه (Working Calculator). ابتدا باید دو فایل ایجاد کنید، یکی HTML و دیگری CSS. پس از ایجاد این فایل ها کافیست کدهای زیر را در فایل خود قرار دهید. ابتدا یک فایل HTML به نام index.html ایجاد کنید و کدهای داده شده را در فایل HTML خود قرار دهید. به یاد داشته باشید که باید یک فایل با پسوند html ایجاد کنید.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Calculator</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="center">
<form name="forms">
<input type="text" id="display" name="display" disabled>
<div class="buttons">
<input type="button" id="seven" value="7">
<input type="button" id="eight" value="8">
<input type="button" id="nine" value="9">
<input type="button" id="divide" value="/"><br>
<input type="button" id="four" value="4">
<input type="button" id="five" value="5">
<input type="button" id="six" value="6">
<input type="button" id="multi" value="*"><br>
<input type="button" id="one" value="1">
<input type="button" id="two" value="2">
<input type="button" id="three" value="3">
<input type="button" id="subs" value="-"><br>
<input type="button" id="dot" value=".">
<input type="button" id="zero" value="0">
<input type="button" id="add" value="+">
<input type="button" id="clear" value="C"><br>
<input type="button" id="equal" value="=">
</div>
</form>
</div>
<script>
$(document).ready(function(){
$('#one').click(function(){
document.forms.display.value += 1;
});
$('#two').click(function(){
document.forms.display.value += 2;
});
$('#three').click(function(){
document.forms.display.value += 3;
});
$('#four').click(function(){
document.forms.display.value += 4;
});
$('#five').click(function(){
document.forms.display.value += 5;
});
$('#six').click(function(){
document.forms.display.value += 6;
});
$('#seven').click(function(){
document.forms.display.value += 7;
});
$('#eight').click(function(){
document.forms.display.value += 8;
});
$('#nine').click(function(){
document.forms.display.value += 9;
});
$('#zero').click(function(){
document.forms.display.value += 0;
});
$('#add').click(function(){
document.forms.display.value += '+';
});
$('#subs').click(function(){
document.forms.display.value += '-';
});
$('#multi').click(function(){
document.forms.display.value += '*';
});
$('#divide').click(function(){
document.forms.display.value += '/';
});
$('#dot').click(function(){
document.forms.display.value += '.';
});
$('#equal').click(function(){
if (display.value == "") {
alert("Please enter any numbers to calculate!");
}else{
document.forms.display.value =
eval(document.forms.display.value);
}
});
$('#clear').click(function(){
document.forms.display.value = "";
});
})
</script>
</body>
</html>دوم، یک فایل CSS با نام style.css ایجاد کنید و کدهای داده شده را در فایل CSS خود قرار دهید. به یاد داشته باشید، شما باید یک فایل با پسوند css ایجاد کنید.
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#9cebfc,#6ae1fb);
}
.center{
/* display: none; */
width: 350px;
background: black;
border-radius: 20px;
}
input[type="text"]{
height: 60px;
width: 300px;
margin-top: 40px;
border-radius: 1px;
border: 1px solid #e1e7ea;
color: black;
font-size: 22px;
font-weight: bold;
text-align: right;
padding-right: 20px;
background: linear-gradient(#d1dce0,#dfe6e9);
}
form .buttons{
width: 300px;
margin: 10px 25px 0 25px;
padding: 10px 0;
}
input[type="button"]{
width: 58px;
height: 55px;
margin: 5px;
font-size: 22px;
line-height: 55px;
border-radius: 3px;
border: 1px solid #d9d9d9;
background: linear-gradient(#d9d9d9, #bfbfbf);
}
input[type="button"]:hover{
transition: .5s;
background: linear-gradient(#bfbfbf, #d9d9d9);
}
input#clear{
background: #ff1a1a;
border: 1px solid #cc0000;
color: white;
}
input#equal{
width: 275px;
margin: 10px 0 10px 0;
font-size: 30px;
color: white;
background: #ff3d00;
border: 1px solid #b32a00;
}این همه است، اکنون شما با موفقیت یک ماشین حساب کار با استفاده از HTML CSS و jQuery ایجاد کرده اید. اگر کد شما کار نمی کند یا با هر گونه خطا/مشکلی مواجه شده اید، لطفاً نظر خود را در صفحه کامنت بگذارید یا از صفحه تماس با ما تماس بگیرید.
