задача
В документе есть две кнопки: + и -.
При нажатии на кнопку + размер шрифта элемента .story должен увеличиваться на 1px по умолчанию.
Если текущий размер шрифта элемента .story равен или больше 20px - он должен увеличиваться на 2px.
При нажатии на кнопку - размер шрифта элемента .story должен уменьшаться на 1px по умолчанию.
Если текущий размер шрифта элемента .story равен или больше 20px - он должен уменьшаться на 2px.
Используй внутренний скрипт
Используй getComputedStyle, чтобы получить текущий размер элемента.
код
<!DOCTYPE html>
<html>
<head>
<title>
Font size
</title>
<style>
* {
font-family: monospace;
}
.container {
display: grid;
gap: 16px;
grid-template-columns: 75px auto;
}
.column {
display: flex;
}
.buttons-wrapper {
flex-direction: column;
}
.story {
font-size: 13px;
}
.button {
font-size: 20px;
text-align: center;
color: white;
cursor: pointer;
}
.label {
padding: 12px 0;
}
.plus-button {
background-color: #739E82;
}
.minus-button {
background-color: #E9806E;
}
p + p {
margin-left: 20px;
}
.buttons-wrapper, p {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="column buttons-wrapper">
<div class="button plus-button">+</div>
<div class="label">Font size</div>
<div class="button minus-button">-</div>
</div>
<div class="column story">
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversations?”</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
</div>
</div>
<script>
const story = document.querySelector('.story')
let styleStory = getComputedStyle(story)
let font = parseInt(styleStory.fontSize)
const plus = document.querySelector('.plus-button')
const minus = document.querySelector('.minus-button')
plus.addEventListener('click', ()=> {
font += font >=20 ? 2 : 1;
story.style.fontSize = `${font}px`
console.log(story.style.fontSize)
})
minus.addEventListener('click', ()=> {
font -= font >=20 ? 2 : 1;
story.style.fontSize = `${font}px`
console.log(story.style.fontSize)
})
</script>
</body>
</html>
не проходит по следующим пунктам:
Нажатие по .plus-button должно увеличить размер шрифта .story на 2 пикселя, если текущий размер шрифта больше или равен 20px
Нажатие по .minus-button должно уменьшить размер шрифта .story на 1px, если текущий размер шрифта меньше, чем 20px
Нажатие по .minus-button должно уменьшить размер шрифта .story на 2 пикселя, если текущий размер шрифта больше или равен 20px