कोडपेन: 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
1 उत्तर
सबसे बढ़िया उत्तर
"insert('.')" को इच्छानुसार जोड़ें
1
Hasan Al-Aref
17 पद 2020, 14:39
insert(.)? इसका क्या मतलब है