طراحی سایت وب کاران | طراحی سایت ، سئو وب سایت
طراحی ماشین حساب حرفه ای
آموزش طراحی ماشین حساب با استفاده از 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 ایجاد کرده اید. اگر کد شما کار نمی کند یا با هر گونه خطا/مشکلی مواجه شده اید، لطفاً نظر خود را در صفحه کامنت بگذارید یا از صفحه تماس با ما تماس بگیرید.
