कोडपेन: https://codepen.io/HasanTheSyrian_/pen/OJNNjyV

इसे इलेक्ट्रान पर चलाया जा रहा है। इलेक्ट्रॉन रेंडरर पूर्वापेक्षाएँ शामिल नहीं थी। किसी कारण से, यह अभी भी मुझे वीएससी, एचटीएमएल दस्तावेज़ में "तर्क अभिव्यक्ति अपेक्षित" त्रुटि देता है। मैंने कई चीजों की कोशिश की, लेकिन फिर भी किसी कारण से मुझे वही त्रुटि देता है।

Index.html

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
  </head>
  <body>

    <tittle>
      <h1><em>Hasan's Super Ultimate Extra Cool Calculator Of Destruction</em></h1>
      </tittle>
      
      <div class="main">
      <form name="form"> <input name="textview" type="text" class="textview"> </form>
      </div>

      <p>
      <div class="containerOne">
              <button><div class="btn buttonC" onclick="clean()">      C </div></button>
              <button><div class="btn buttonPlus" onclick="insert('+')">   + </div></button>
              <button><div class="btn buttonMinus" onclick="insert('-')">  - </div></button>
              <button><div class="btn buttonX" onclick="insert('*')">      X </div></button>
              
                 <button><div class="btn buttonSeven" onclick="insert(7)"> 7 </div></button>
                 <button><div class="btn buttonEight" onclick="insert(8)"> 8 </div></button>
                 <button><div class="btn buttonNine" onclick="insert(9)">  9 </div></button>
                 <button><div class="btn buttonDiv" onclick="insert('/')">   / </div></button>
                 
                    <button><div class="btn buttonFour" onclick="insert(4)">   4 </div></button>
                    <button><div class="btn buttonFive" onclick="insert(5)">   5 </div></button>
                    <button><div class="btn buttonSix" onclick="insert(6)">    6 </div></button>
                    <button><div class="btn buttonEquals" onclick="equal()"> = </div></button> 
      
                       <button><div class="btn buttonOne" onclick="insert(1)">   1 </div></button>
                       <button><div class="btn buttonTwo" onclick="insert(2)">   2 </div></button>
                       <button><div class="btn buttonThree" onclick="insert(3)"> 3 </div></button>
                       <button> <div class="btn buttonZero" onclick="insert(0)">  0 </div></button> 

                        <button> <div class="btn buttonPi" onclick="insert(3.14)">  𝜋 </div></button>
                        <button> <div class="btn buttonPi" onclick="insert(.)">  . </div></button> 
              
      </div>
      </p>
  </body>
</html>

Index.css

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: auto;
  max-width: 38rem;
  padding: 2rem;
  background-color: #298fca; 
}

h1 {

padding: 20px;
font-size: 25px;
text-align: center;
color:rgb(255, 255, 255);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.textview {

user-select: none; /* This removes text-highlight form behind the numbers */
font-family: Impact;
justify-content: center;
display: block;
text-align: center;
opacity: 0.3;
margin: 0 auto;
border: 0px;
height: 30px;
width: 208px;
font-size: 20px;
}

.containerOne { /* This contains all buttons */

margin: 0 auto;
max-width: 216px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
}

button { /* The backside of the button/button itself */

border-radius: 22px;
height: 50px;
width: 50px;
border: none;
font-size: 30px;
justify-content: center;
margin: 2px;
color: white;
background-color: #5ba4cf;
}

.btn { /* The frontside of the button */
 
  user-select: none; /* This makes the user unable to select/highlight the text inside the calculator buttons */
  font-family: Impact;
  position: center;  
  flex: 1 1 auto;
  text-align: center;
  text-transform: uppercase;
  transition: 1s; /* How long the animation will take to fully execute */
  background-size: 500% auto;
  color: rgb(214, 214, 214); /* Color of the numbers/text inside the buttons */   
  text-shadow: 0.5px 0.5px 2px black;
  border-radius: 20px;    
}

.buttonC {

  background-image: linear-gradient(to right, #69cee0 0%, #298fca 100%);

}

.buttonPlus {

  background-image: linear-gradient(to right, #69cee0 0%, #298fca 100%);

}

.buttonMinus {

  background-image: linear-gradient(to right, #69cee0 0%, #298fca 100%);

}

.buttonX {

  background-image: linear-gradient(to right, #69cee0 0%, #298fca 100%);

}

.buttonDiv {

  background-image: linear-gradient(to right, #69cee0 0%, #298fca 100%);

}

.buttonPi {

  background-image: linear-gradient(to right, #69cee0 0%, #298fca 100%);

}

.buttonEquals {

  background-image: linear-gradient(to right, #69cee0 0%, #298fca 100%);

}

.buttonSeven {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);

}

.buttonEight {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);

}

.buttonNine {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);

}

.buttonFour {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);

}

.buttonFive {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);

}

.buttonSix {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);
  
}

.buttonOne {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);

}

.buttonTwo {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);

}

.buttonThree {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);

}

.buttonZero {

  background-image: linear-gradient(to right, #298fca 0%, #69cee0 100%);

}

.btn:hover {
  cursor: pointer;
  background-position: center right;
}

button:active,
button:focus {
  outline: none;  
}

.textview:focus,
.textview:active {
  outline: none;
}

Index.js


function insert(num){ // Calculator functions

  document.form.textview.value = document.form.textview.value+num
}
function equal(){
  var exp = document.form.textview.value
  if(exp){
      document.form.textview.value = eval(exp)
  }
}
function clean(){
  document.form.textview.value = ""

}
function back(){
  var exp = document.form.textview.value
  document.form.textview.value = exp.substring(0,exp.length-1)
}

//
function decimal(){
  
  document.form.textview.value = document.form.textview.value+num.toFixed(2);
  
} // Here

2
Hasan Al-Aref 15 अगस्त 2020, 14:41
एर्म insert(.)? इसका क्या मतलब है
 – 
Aluan Haddad
15 अगस्त 2020, 14:44
1
बाप रे। मैं मजाक भी नहीं कर रहा हूं, मैंने अभी देखा कि मैं भूल गया '' जिस क्षण मैंने आपकी टिप्पणी देखी। "सम्मिलित करें ('।')" ठीक काम करता है।
 – 
Hasan Al-Aref
15 अगस्त 2020, 14:46
शायद आप एक उत्तर पोस्ट कर सकते हैं, इसलिए इसे स्वीकार किया जा सकता है?
 – 
Darren Cook
16 अगस्त 2020, 10:21
मुझे लगता है कि यह सिर्फ एक साधारण टाइपो है इसलिए यह वास्तव में एक उत्तर के लायक नहीं है। धन्यवाद
 – 
Aluan Haddad
16 अगस्त 2020, 13:20

1 उत्तर

सबसे बढ़िया उत्तर

"insert('.')" को इच्छानुसार जोड़ें

1
Hasan Al-Aref 17 पद 2020, 14:39