Здравствуйте, делаю калькулятор. Пока я не определил размер шрифта кнопок ввода (input) чисел, кнопка (button) никуда не уходила, но сейчас уходит. Т.е. если размер шрифта убрать с кнопок вода (input) то кнопка будет стоять ровненько и красивенько в ряду.
Надеюсь, вы поняли меня.
CSS:
@import url('https://fonts.googleapis.com/css2?family=Sono:wght@300&display=swap');
body{
margin: 0;
/* background-color: #d0e5b2; */
background-color: #cfeea7;
}
body * {
box-sizing: border-box;
}
header{
position: relative;
font-family: 'Sono', sans-serif;
font-weight: bold;
background-color: #00b9ff;
height: calc(1.5vw + 1.5vh);
}
header article {
position: relative;
font-size: calc(1vw + 1vh);
text-align: center;
}
input{
position: relative;
display: inline-flex;
font-family: 'Sono', sans-serif;
font-size: 3vw;
margin: 0 auto;
width: 18.81vw;
height: 10.81vh;
margin: 0.3vw;
background-color: white;
color: black;
border: 0.3vw solid #cfeea7;
border-radius: 0.3vw;
}
input:hover{
border: 0.3vw solid #00b9ff;
}
button{
position: relative;
width: 18.7vw;
height: 10.81vh;
left: 0.3vw;
margin-bottom: 0.3vw;
padding: 0 auto;
display: inline-block;
border: 0.3vw solid #cfeea7;
border-radius: 0.3vw;
}
button:hover{
border: 0.3vw solid #00b9ff;
}
.fa-delete-left{
position: relative;
margin: 0 auto;
margin: auto;
}
.bt_calc{
position: relative;
white-space:nowrap;
margin: 0 auto;
width: 79.24vw;
top: 1vh;
}
.zero, .fake_primer, .primer, .error{
text-align: end;
margin-right: 13vw;
font-family: 'Sono', sans-serif;
margin-top: 5vh;
}
.error{
color: #e30024;
}
#bt18, #bt20{
width: 9.21vw;
}
#bt20{
margin-left: 0.1vw;
}
@media screen and (max-width: 913px) {
header{
height: calc(2.5vw + 2.5vh);
}
header article{
font-size: calc(1.7vw + 1.7vh);
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/3e8a6aa84f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style2.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="script.js"></script>
</head>
<body>
<div id="app">
<header>
<article>dvoryashin</article>
</header>
<h1 class="zero" v-if="zero">0</h1>
<h1 class="fake_primer" v-if="show_fake_primer">{{fake_primer}}</h1>
<h1 class="primer" v-else>{{primer}}</h1>
<h1 class="error" v-if="show_vivod=true">{{vivod_err}}</h1>
<!-- Комментарии здесь для того, чтобы кнопки были прижаты друг к другу. Подробнее: https://codepen.io/anon/pen/megQVe -->
<div class="bt_calc"><!--
--><input type="button" value="(" id="bt18" v-on:click="calc('(')"><!--
--><input type="button" value=")" id="bt20" v-on:click="calc(')')"><!--
--><input type="button" value="c" id="bt21" v-on:click="c()"><!--
--><input type="button" value="=" id="bt17" v-on:click="ravno"><!--
--><button value="back" id="bt19" v-on:click="back(app)">
<i class="fa-solid fa-delete-left"></i>
</button>
<br><!--
--><input type="button" value="7" id="bt1" class="calccifra" v-on:click="calc(7)"><!--
--><input type="button" value="8" id="bt2" class="calccifra" v-on:click="calc(8)"><!--
--><input type="button" value="9" id="bt3" class="calccifra" v-on:click="calc(9)"><!--
--><input type="button" value="/" id="bt15" v-on:click="calc('/')">
<br>
<input type="button" value="4" id="bt4" class="calccifra" v-on:click="calc(4)"><!--
--><input type="button" value="5" id="bt5" class="calccifra" v-on:click="calc(5)"><!--
--><input type="button" value="6" id="bt6" class="calccifra" v-on:click="calc(6)"><!--
--><input type="button" value="*" id="bt11" v-on:click="calc('*')">
<br>
<input type="button" value="1" id="bt7" class="calccifra" v-on:click="calc(1)"><!--
--><input type="button" value="2" id="bt8" class="calccifra" v-on:click="calc(2)"><!--
--><input type="button" value="3" id="bt9" class="calccifra" v-on:click="calc(3)"><!--
--><input type="button" value="-" id="bt13" v-on:click="calc('-')">
<br>
<input type="button" value="0" id="bt12" v-on:click="calc(0)"><!--
--><input type="button" value="." id="bt15" v-on:click="calc('.')"><!--
--><input type="button" value="%" id="bt15" v-on:click="procent()"><!--
--><input type="button" value="+" id="bt14" v-on:click="calc('+')">
<br>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
//если zero = true то показывается нолик
zero: true,
// имитирует пример, который высчитывается через eval. Нужен для того, чтобы знак процента не выводился
fake_primer: "",
// настоящий пример, который высчитывается
primer: "",
//вывод об ошибке
vivod_err: "",
//
show_vivod: false,
show_primer: false,
show_fake_primer: true,
},
methods: {
calc: function (value) {
var primer = this.primer;
this.zero = false;
this.primer = String(this.primer);
this.primer += value;
this.fake_primer = String(this.fake_primer);
this.fake_primer += value;
},
procent: function (){
this.primer = String(this.primer);
this.primer += '/100';
this.fake_primer += '/100';
},
ravno: function (){
try {
this.primer = eval(this.primer);
this.primer = String(this.primer);
this.show_vivod = true;
this.fake_primer = this.primer;
this.show_primer = true;
this.show_fake_primer = false;
} catch (err) {
this.vivod_err = err;
this.vivod_err = String(this.vivod_err);
this.vivod_err = this.vivod_err.slice(6);
}
},
back: function (){
this.primer = this.primer.slice(0, -1);
this.fake_primer = this.fake_primer.slice(0, -1);
if(this.primer == ''){
this.zero = true;
}
},
c: function () {
this.primer = "";
this.vivod = "";
this.fake_primer = "";
this.zero = true;
this.vivod_err = "";
},
}
})
document.addEventListener('keydown', (event) => {
const keyName = event.key;
if(keyName === "/" || keyName === "*" || keyName === "-" || keyName === "+" || keyName === "." || keyName === "0" || keyName === "1" || keyName === "2" || keyName === "3" || keyName === "4" || keyName === "5" || keyName === "6" || keyName === "7" || keyName === "8" || keyName === "9" || keyName === "(" || keyName === ")"){
app.calc(keyName);
app.zero = false;
}
if(keyName === '%'){
app.procent();
}
if (keyName === 'Backspace') {
app.back();
}
if(keyName === 'Enter'){
app.ravno();
}
if(keyName === 'c'){
app.c();
app.zero = true;
}
})
</script>
</html>
Простой
Средний
