@local30

Как сделать ограничитель поля символов?

Как сделать ограничитель поля символов?
Есть код калькулятора. Там имеются различные баги. Один из них - это то, что символы вылезают на границу самого калькулятора. Как это можно исправить?
659be067bbb67897689345.png
HTML
<details>
				<summary>Канкулятор</summary>
					<div class="calc">
						<div class="calc-screen">
							<p>0</p>
						</div>
						<div class="buttons">
							<div class="btn_calc ac bg-grey">AC</div>
							<div class="btn_calc plus-minus bg-grey">+/-</div>
							<div class="btn_calc percent bg-grey">%</div>
							<div class="btn_calc division bg-orange">/</div>

							<div class="btn_calc seven">7</div>
							<div class="btn_calc eight">8</div>
							<div class="btn_calc nine">9</div>
							<div class="btn_calc myltiply bg-orange">X</div>

							<div class="btn_calc four">4</div>
							<div class="btn_calc five">5</div>
							<div class="btn_calc six">6</div>
							<div class="btn_calc minus bg-orange">-</div>

							<div class="btn_calc one">1</div>
							<div class="btn_calc two">2</div>
							<div class="btn_calc three">3</div>
							<div class="btn_calc plus bg-orange">+</div>

							<div class="btn_calc zero">0</div>
							<div class="btn_calc dot">.</div>
							<div class="btn_calc equal bg-orange">=</div>
						</div>
					</div>
					</details>

CSS
.calc {
  width: 300px;
  height: 500px;
  border: 1px solid #000;
  border-radius: 20px;
  background: #000;
  color: #fff;
  font-family: Arial;
  padding: 18px;
}

.calc-screen {
  height: 125px;
  padding: 10px;
  display: grid;
  justify-items: end;
  align-items: end;
  margin-bottom: 25px;
}

.calc-screen p {
  text-align: right;
  font-size: 4rem;
  margin: 0;
}

.buttons {
  display: grid;
  font-weight: bold;
  grid-template-areas:
  "ac plus-minus percent divison"
  "seven eight nine multi"
  "four five six minus"
  "one two three plus"
  "zero zero dot equal";
  grid-gap: 7px;
  justify-items: center;
}

.btn_calc {
  width: 60px;
  height: 60px;
  background: #333;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  user-select: none;
}

.btn_calc.zero {
  grid-area: zero;
  width: 100%;
  border-radius: 34px;
}

.btn_calc:hover {
  filter: brightness(120%);
}

.btn_calc:active {
  filter: brightness(90%)
}

.btn_calc.bg-grey {
  background: #a6a6a6;
}

.btn_calc.bg-orange {
  background: #ff9501;
}

.btn_calc.ac.bg-grey {
  color: #000;
}

.btn_calc.plus-minus.bg-grey {
  color: #000;
}

.btn_calc.percent.bg-grey {
  color: #000;
}

JS
let a = ''; // first number
let b = ''; // secont number
let sign = ''; // знак операции
let finish  = false;

const digit = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
const action = ['-', '+', 'X', '/'];

// экран
const out = document.querySelector('.calc-screen p');

function clearAll () {
    a = ''; // first number and result
    b = ''; // second number
    sign = ''; // знак
    finish = false;
    out.textContent = 0;
}

document.querySelector('.ac').onclick = clearAll;

document.querySelector('.buttons').onclick = (event) => {
    // нажата не кнопка
    if(!event.target.classList.contains('btn_calc')) return;
    // нажата кнопка clearAll ac
    if(event.target.classList.contains('AC')) return;

    out.textContent = '';
    // получаю нажатую кнопку
    const key = event.target.textContent;

    // если нажата клавиша 0-9 или .
    if (digit.includes(key)) {
        if (b ==='' && sign === '') {
            a += key;

            out.textContent = a;
        }
        else if (a!=='' && b!=='' && finish) {
            b = key;
            finish = false;
            out.textContent = b;
        }
        else {
            b += key;
            out.textContent = b;
        }
        console.table(a, b , sign);
        return;
    }

     // если нажата клавиша + - / *
     if (action.includes(key)) {
        sign = key;
        out.textContent = sign;
        console.table(a, b , sign);
        return;
    }

    // нажата =
    if (key === '=') {
        if (b ==='') b = a;
        switch (sign) {
            case "+":
                a = (+a) + (+b);
                break;
            case "-":
                a = a - b;
                break;
            case "X":
                a = a * b;
                break;
            case "/":
                if (b === '0') {
                    out.textContent = 'Ошибка';
                    a = '';
                    b = '';
                    sign = '';
                    return;
                }
                a = a / b;
                break;
        }
        finish = true;
        out.textContent = a;
        console.table(a, b , sign);
    }

}
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 2
yesbro
@yesbro
Думаю, помогаю думать
Для начала реши как ты будешь отображать числа в которых число разрядов больше чем достуно в калькуляторе для вывода. А потом уже можно заниматься исправлением бага.
Ответ написан
Комментировать
@AlexandraWeather
oveflo-x: scroll / hidden на родителя можно
если hidden, то нужно будет париться с представлением больших чисел (всякие там e вставлять, вместо разрядов)
если scroll, то надо будет скроллбар прятать
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
16 июн. 2024, в 08:11
1000 руб./за проект
16 июн. 2024, в 07:58
600 руб./в час
16 июн. 2024, в 07:57
10000 руб./за проект