سورس کد html ماشین حساب

4 سال پیش - خواندن 4 دقیقه

سلام دوستان امروز با یه سورس باحال در خدمتتون هستم سورس کد یه ماشین حساب با ظاهری زیبا بدون مقدمه بریم سراغ کد نظرات خود رو کامنت کنید لایک رو فراموش نکنید 🙃

با تشکر امیررضاکریمی 

ظاهر سورس
ظاهر سورس


123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#eeff00 , #ff9900);
}
.container{
  z-index: 12;
  width: 300px;
  padding: 0px;
  border-radius: 12px;
  margin-left: 0px;
  border: none;
  outline: none;
  background: linear-gradient(#ff5e00 , #eeff00);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);
}
.container input[type="text"]{
  width: 100%;
  height: 100px;
  margin: 0px;
  outline: none;
  border: none;
  color: #fff;
  font-size: 25px;
  font-family: monospace;
  text-align: right;
  padding-right: 10px;
  pointer-events: none;
  background: transparent;
}
.container input[type="button"]{
  height: 65px;
  width: 75.5px;
  color: #fff;
  width: ;
  background:transparent;
  border-radius: 0px;
  margin: 0px;
  outline: none;
  border: none;
  margin-left: -5px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.container input[type="button"]:hover{
  background: rgb(81, 255, 0, 0.2);
}
.buttons{
  margin-left: 5px;
}
.about{
  z-index: 11;
  width: 250px;
  height: 70px;
  margin-top: -245px;
  position: absolute;
  padding: 0px;
  border-radius: 12px 12px 0px 0px;
  margin-left: 0px;
  border: none;
  outline: none;
  background: linear-gradient(#e05200 , #eb5600);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);
}
.me{
  padding: 15px;
  font-size: 30px;
  text-align: center;
  font-family: monospace;
  color: #fff;
}
    </style>
    
   </head>
<body>


 <div class="about">
   <div class="me">
     _raj.py_dev
   </div>
 </div>

<div class="container">
   <form action="#" name="forms">
     <input type="text" name="answer">

     <div class="buttons">
       <input type="button" value="AC" ="forms.answer.value = ''">
       <input type="button" value="DEL" ="forms.answer.value = forms.answer.value.substr(0 , forms.answer.value.length -1)">
       <input type="button" value="%" ="forms.answer.value += '%'">
       <input type="button" value="/" ="forms.answer.value += '/'">
     </div>
     <div class="buttons">
       <input type="button" value="7" ="forms.answer.value += '7'">
       <input type="button" value="8" ="forms.answer.value += '8'">
       <input type="button" value="9" ="forms.answer.value += '9'">
       <input type="button" value="*" ="forms.answer.value += '*'">
     </div>
     <div class="buttons">
       <input type="button" value="4" ="forms.answer.value += '4'">
       <input type="button" value="5" ="forms.answer.value += '5'">
       <input type="button" value="6" ="forms.answer.value += '6'">
       <input type="button" value="-" ="forms.answer.value += '-'">
     </div>
     <div class="buttons">
       <input type="button" value="1" ="forms.answer.value += '1'">
       <input type="button" value="2" ="forms.answer.value += '2'">
       <input type="button" value="3" ="forms.answer.value += '3'">
       <input type="button" value="+" ="forms.answer.value += '+'">
     </div>
     <div class="buttons">
       <input type="button" value="0"  ="forms.answer.value += '0'">
       <input type="button" value="00" ="forms.answer.value += '00'">
       <input type="button" value="." ="forms.answer.value += '.'">
       <input type="button" value="=" ="try{forms.answer.value = eval(forms.answer.value);} catch(err){alert('Please enter valid expression'); forms.answer.value = ''}">
     </div>
   </form>
 </div>
</body>
</html>
1
کــارمـا :
6088
برنامه نویس و طراح وب هستم. چند ساله با وردپرس و المنتور طراحی سایت انجام می دم. در ضمن در حال یادگیری زبان پایتون و جاوا اسکریپت هستم!
بفرست

مشاهده نظرات بیشتر...
amirrezak
برای اینکه نوشته‌های بعدی امیررضا کریمی را از دست ندهید در امیگو
ثبت نام کنید
نوشته‌های بعدی امیررضا کریمی را از دست ندهید.