вот с любым количеством .story. Не проходит проверку
<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: 16px;
}
.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 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 plusButton = document.querySelector('.plus-button')
const minusButton = document.querySelector('.minus-button')
const storyElem = document.querySelectorAll('.story')
const fontSizeStoryText = getComputedStyle(storyElem[0]).fontSize
let fontSizeNumber = parseInt(fontSizeStoryText,10);
plusButton.addEventListener('click', () => {
if(fontSizeNumber >= 20) {
fontSizeNumber+=2
} else {
fontSizeNumber++
}
for(let i = 0; i < storyElem.length; i++) {
storyElem[i].style.fontSize = fontSizeNumber + 'px';
console.log(getComputedStyle(storyElem[i]).fontSize)
}
})
minusButton.addEventListener('click', () => {
if(fontSizeNumber >= 20) {
fontSizeNumber-=2
} else {
fontSizeNumber--
}
for(let i = 0; i < storyElem.length; i++) {
storyElem[i].style.fontSize = fontSizeNumber + 'px';
console.log(getComputedStyle(storyElem[i]).fontSize)
}
})
</script>
</body>
</html>
