Calculator of scientific v3

bySiddikur Rahman Rayhan (Tamim ) •
0

 

<html>
   <head>
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
       
       <style>
          
           body{
    padding:0;
    margin:0;
    background-image: radial-gradient(circle, #20242a, #15252a, #0c2524, #0f2419, #1a2109);
}
 
.cal{
    width:350px;
    height:450px;
    background-image: linear-gradient(to bottom, #282d34, #1c272b, #13201f, #0e1813, #0b0f01);
    left:2%;
    top:5%;
    border-radius:20px;
    position:absolute ;
    overflow:hidden ;
    text-align:center;
    box-shadow:0px 5px 3px  white;
   
}
#eql{
    width:100px;
     height:40px;
     left:0%;
     position:relative;
     background-image: radial-gradient(circle, #afe3af, #94e191, #77df71, #57dc4d, #25d814);
     margin:10px;
     font-size:27px;
     border-radius:8px;
     box-shadow:2px 3px 0px 0px #7BF495;
     font-weight:bold;
     outline:none ;
}

.sign{
    background-image: radial-gradient(circle, #ffcaef, #fca8e3, #f784d7, #f25cca, #eb19bd);
    box-shadow:2px 3px 0px 0px #EB19BD;
    font-size:20px;
}

.sin{
    background-image: radial-gradient(circle, #ffe6ca, #fbca9a, #f6ad6d, #f18e43, #eb6b19);
    box-shadow:2px 3px 0px 0px #EB6B19;
    font-size:18px;
}

.log{
    background-image: radial-gradient(circle, #cfcaff, #b1b0fa, #8f98f5, #6681f0, #196beb);
     box-shadow:2px 3px 0px 0px #196BEB;
      font-size:18px;
}
#allClear{
     width:100px;
     height:40px;
      background-image: radial-gradient(circle, #f49ca4, #f27f85, #ed6265, #e54142, #d8141c);
      font-size:27px;
      border-radius:8px;
      box-shadow:2px 3px 0px 0px #F47B7B;
    
}
#clear{
    background-image: radial-gradient(circle, #f49ca4, #f27f85, #ed6265, #e54142, #d8141c);
     box-shadow:2px 3px 0px 0px #F47B7B;
      font-size:20px;

}

#display{
     border:3px solid orange;
    background-color:black;
    color:white;
    font-size:20px;
    height:50px;
    width:auto;
   
    position:relative;
    margin:30px;
    text-align:right;
    font-weight:bold;
    outline:none ;
}
.x{
   background-image: radial-gradient(circle, #e9c1e7, #e9a1e8, #e67eea, #e156eb, #d909ed);
   font-size:18px;
   box-shadow:2px 3px 0px 0px #E457F2;
}

.br{
    background-image: radial-gradient(circle, #e5f8c3, #d9f7a1, #cbf67e, #bef455, #aff216);
     box-shadow:2px 3px 0px 0px #C1F250;
      font-size:18px;
    
}
.num{
  
   font-size:17px;
   box-shadow:2px 3px 0px 0px gray;
   font-weight:bold;
   border-color:orange;
   background-image: radial-gradient(circle, #e3f9f7, #c5f3f2, #a4ecf0, #7ee5f1, #49def4);
}

.operator{
   font-size:25px;
   box-shadow:2px 1px 0px 0px #F4F449;
   background-image: radial-gradient(circle, #ebe49a, #eee681, #f1e866, #f4ea46, #f6ec0c);
   
}
input[type="button"]{
width:50px;
   height:30px;
   margin:4px;
   border-radius:7px;
  position:relative;
  text-align:center;
  font-weight:bold;
  outline:none ;
  left:5%;
}
footer{
  color:white;
  top:95%;
  position:absolute;
  left:10%;
}
       </style>
   </head>
  
      <form name="calculator" class="cal">
         <table>
           
            <tr>
              <td colspan="5">
                 <input type="text" name="display" id="display" disabled >
              </td>
           </tr>
          
           <tr>
               <td colspan="2">
                    <input type="button" id="allClear" name="clear" value="AC" onclick="calculator.display.value = '0'">
                </td>
              <td>
                    <input type="button" id="clear" name="bbr" value="C" onclick="deleteChar(calculator.display)">
                </td>
              <td>
                    <input type="button" class="sign" name="sign" value="&#177" onclick="changeSign(calculator.display)">
                </td>
              <td>
                   <input type="button" class="sign" name="pi" value=π onclick="calculator.display.value += 3.14159265359">
                </td>  
           </tr>
          
           <tr>
             <td>
                   <input type="button" class="x" name="doit" value=x&#178; onclick="calculator.display.value = (eval(calculator.display.value)*eval(calculator.display.value))">
                </td>
               <td>
                   <input type="button" class="x" name="doit" value="x&#179;" onclick="calculator.display.value = (eval(calculator.display.value)*eval(calculator.display.value)*eval(calculator.display.value))">
                </td> <td>
                   <input type="button" class="x" name="root" value=√ onclick="calculator.display.value = Math.sqrt(calculator.display.value)">
                </td> <td>
                  
                    <input type="button" class="x" id="factorial" name="factorial" value="x!" onclick="fact(calculator.display.value) ">
                </td>
               
               <td>
                   <input type="button" class="x" name="exp" value="e^x" onclick="calculator.display.value=Math.exp(calculator.display.value)">   
               <td>
                
            
           </tr>
          
          
           <tr>
              <td>
                   <input type="button" class="log" name="ln" value=ln onclick="calculator.display.value = Math.log(calculator.display.value)">
                </td>
              <td>
                   <input type="button" class="log" name="log" value=log onclick="calculator.display.value = Math.log10(calculator.display.value)">
                </td>
             <td>
                   <input type="button" class="sin" name="sin" value="sin" onclick="calculator.display.value = Math.sin(calculator.display.value)">
                </td>
                 <td>
                   <input type="button" class="sin" name="cos" value="cos" onclick="calculator.display.value = Math.cos(calculator.display.value)">
                </td>
               
                   <td>
                   <input type="button"  class="sin"  name="tan" value="tan" onclick="calculator.display.value = Math.tan(calculator.display.value)">
                </td>
               
           </tr>
          
            <tr>
              <td><input type="button" class="num" name="seven" value="7" onclick="calculator.display.value += '7'"></td>
              <td><input type="button" class="num" name="eight" value="8" onclick="calculator.display.value += '8'"></td>
              <td><input type="button" class="num" name="nine" value="9" onclick="calculator.display.value += '9'"></td>
              <td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'"></td>
               <td><input type="button" class="operator" name="mul" value="*" onclick="calculator.display.value += '*'"></td>
           </tr>
          
           <tr>
              <td><input type="button" class="num" name="fore" value="4" onclick="calculator.display.value += '4'"></td>
              <td><input type="button" class="num" name="five" value="5" onclick="calculator.display.value += '5'"></td>
              <td><input type="button" class="num" name="six" value="6" onclick="calculator.display.value += '6'"></td>
              <td><input type="button" class="operator" name="sub" value="-" onclick="calculator.display.value += '-'"></td>
             <td><input type="button" class="operator" name="div" value="/" onclick="calculator.display.value += '/'"></td>
           </tr>
          
            <tr>
              <td><input type="button" class="num"name="one" value="1" onclick="calculator.display.value += '1'"></td>
              <td><input type="button"class="num" name="two" value="2" onclick="calculator.display.value += '2'"></td>
              <td><input type="button" class="num" name="three" value="3" onclick="calculator.display.value += '3'"></td>
              <td><input type="button" class="operator" name="dot" value="." onclick="calculator.display.value += '.'"></td>
               <td><input type="button" class="operator" name="modulo" value="%" onclick="calculator.display.value += '%'"></td>
           </tr>
          
           <tr>
              <td><input type="button" class="num" name="zero" value="0" onclick="calculator.display.value += '0'"></td>
             <td>
                    <input type="button" class="br" name="fbr" value="(" onclick="calculator.display.value += '('">
                </td>

     <td>
                    <input type="button" class="br" name="bbr" value=")" onclick="calculator.display.value += ')'">
                </td>
<td colspan="2">
                   <input type="button" id="eql" name="doit" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
                </td>
           </tr>
           </table>
           </form>
            <footer>
       <i class="fa fa-copyright">created by Siddikur Rahman Rayhan</i>
     </footer>
     <script>
        
        
alert ("Enjoy your day with my code😀 if you like my code give upvote for it 🌼🌹")

function fact(x) {
if(x == 0) {
return 1;
}
if(x < 0 ) {
return undefined;
}
for(var i = x; --i; ) {
x *= i;
}
calculator.display.value=x;
}

function changeSign(input) {
    if(input.value.substring(0, 1) == "-")
        input.value = input.value.substring(1, input.value.length)
    else
        input.value = "-" + input.value
}

function deleteChar(input) {
    input.value = input.value.substring(0, input.value.length - 1)
}
     </script>
           </body>
           </html>

Siddikur Rahman Rayhan (Tamim )

Siddikur Rahman Rayhan from Bangladesh is a versatile individual with a keen interest in technology, cricket, politics, and Islamic studies. With a strong academic background and proficiency in multiple languages, he excels in blogging, YouTube, web development, Graphix Design and content creation. Skilled in video editing, meme generation, and photography, Rayhan is dedicated to personal and professional growth, seeking connections with like-minded individuals to support his endeavors.

إرسال تعليق (0)
أحدث أقدم