Добавление чисел в форме при нажатии на цифры и очистка поля при нажатии на кнопку С

Question

При нажатии на число, это число выводится в белое поле в правом верхнем углу экрана.
При нажатии на кнопку “c” в левом верхнем углу экрана происходит сброс числа.

Не понимаю, как это реализовать? (( Код на codepen.io

.page {
  min-width: 320px;
  max-width: 480px;
  max-height: 800px;
  min-height: 455px;
  margin: 0 auto;
}

.header {
  min-width: 320px;
  min-height: 70px;
  background: #cd74c3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__button {
  width: 38px;
  height: 42px;
  margin-left: 24px;
  background-color: #fefe96;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  /* display: flex;
  align-items: center;
  text-align: center; */
  border: none;
  color: #030092;
}

.header__form {
  min-width: 62.5%;
  min-height: 42px;
  background-color: #f5f5f5;
  margin-right: 24px;
}

.content {
  background-color: #edd3ea;
  padding-top: 36px;
  padding-right: 24px;
  padding-bottom: 5.2%;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.bar__item {
  width: 52px;
  height: 70px;
  transition: width 0.5s;
}

.bar__item:hover {
  cursor: pointer;
}

.bar__item_active {
  width: 70px;
  cursor: pointer;
}

.bar__item_color_blue {
  background-color: #4a48ba;
  transition: 0.5s;
}

.bar__item_color_red {
  background-color: #f3535d;
}

.bar__item_color_green {
  background-color: #0e9d59;
}

.bar__item_color_orange {
  background-color: #ff961c;
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(81.25px, 130px));
  grid-template-rows: repeat(4, minmax(81.25px, auto));
  align-items: stretch;
  justify-items: stretch;
  background: silver;
  transition: 1s;
}

.table-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #edd3ea;
  box-sizing: border-box;
  color: #ffff80;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="keywords" content="HTML, CSS, Grid, JavaScript" />
  <meta name="author" content="Volkov Andrey" />
  <link rel="stylesheet" href="index.css" />
  <title>Document</title>
</head>

<body>
  <div class="page">
    <header class="header">
      <button class="header__button">с</button>
      <form class='header__form' value=' '></form>
    </header>
    <main class="content table">
      <section class="bar">
        <div class="bar__item  bar__item_color_blue" data-color="blue"></div>
        <div class="bar__item bar__item_color_red" data-color="red"></div>
        <div class="bar__item bar__item_color_green" data-color="green"></div>
        <div class="bar__item bar__item_color_orange" data-color="orange"></div>
      </section>
      <section class="table-grid">
        <div class="table-grid__item">1</div>
        <div class="table-grid__item">2</div>
        <div class="table-grid__item">3</div>
        <div class="table-grid__item">4</div>
        <div class="table-grid__item">5</div>
        <div class="table-grid__item">6</div>
        <div class="table-grid__item">7</div>
        <div class="table-grid__item">8</div>
      </section>
    </main>
  </div>
  <script src='index.js'></script>
</body>

</html>

Answer 1

Вот тебе вариант. Если надо что бы в поле всегда было одно число, то поменяешь 1 строчку)

let btns = document.querySelectorAll('.table-grid__item')

let input = document.getElementById('value')

let clearBtn  = document.querySelector('header button')
btns.forEach((item)=>{
  item.addEventListener('click', (e)=>{
     let num = +item.innerHTML
     input.value +=num 
  })
})

clearBtn.addEventListener('click', (e)=>{
     input.value = ''
})

.page {
  min-width: 320px;
  max-width: 480px;
  max-height: 800px;
  min-height: 455px;
  margin: 0 auto;
}

.header {
  min-width: 320px;
  min-height: 70px;
  background: #cd74c3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__button {
  width: 38px;
  height: 42px;
  margin-left: 24px;
  background-color: #fefe96;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  /* display: flex;
  align-items: center;
  text-align: center; */
  border: none;

  color: #030092;
}

.header__form {
  min-width: 62.5%;
  min-height: 42px;
  background-color: #f5f5f5;
  margin-right: 24px;
  position: relative
}

.header__form input{
  width: 100%;
  height:100%;
  display:block;
  position: absolute;
  left:0;
  top:0;
}

.content {
  background-color: #edd3ea;
  padding-top: 36px;
  padding-right: 24px;
  padding-bottom: 5.2%;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.bar__item {
  width: 52px;
  height: 70px;
  transition: width 0.5s;
}

.bar__item:hover {
  cursor: pointer;
}

.bar__item_active {
  width: 70px;
  cursor: pointer;
}

.bar__item_color_blue {
  background-color: #4a48ba;
  transition: 0.5s;
}

.bar__item_color_red {
  background-color: #f3535d;
}

.bar__item_color_green {
  background-color: #0e9d59;
}

.bar__item_color_orange {
  background-color: #ff961c;
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(81.25px, 130px));
  grid-template-rows: repeat(4, minmax(81.25px, auto));
  align-items: stretch;
  justify-items: stretch;
  background: silver;
  transition: 1s;
}

.table-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #edd3ea;
  box-sizing: border-box;
  color: #ffff80;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="HTML, CSS, Grid, JavaScript" />
    <meta name="author" content="Volkov Andrey" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
</head>
<body>
    <div class="page">
        <header class="header">
            <button class="header__button">с</button>
            <form class='header__form'>
              <input type='text' name='value' id='value'>
            </form>
        </header>
        <main class="content table">
        <section class="bar">
            <div class="bar__item  bar__item_color_blue" data-color="blue"></div>
            <div class="bar__item bar__item_color_red" data-color="red"></div>
            <div class="bar__item bar__item_color_green" data-color="green"></div>
            <div class="bar__item bar__item_color_orange" data-color="orange"></div>
        </section>
        <section class="table-grid">
            <div class="table-grid__item">1</div>
            <div class="table-grid__item">2</div>
            <div class="table-grid__item">3</div>
            <div class="table-grid__item">4</div>
            <div class="table-grid__item">5</div>
            <div class="table-grid__item">6</div>
            <div class="table-grid__item">7</div>
            <div class="table-grid__item">8</div>
        </section>
    </main>
    </div>
    <script src='index.js'></script>
</body>
</html>

БЛОГ НА HUSL

Добавление чисел в форме при нажатии на цифры и очистка поля при нажатии на кнопку С

Ответы (1 шт):