В документе есть две кнопки: +
и -
.
При нажатии на кнопку +
размер шрифта элемента .story
должен увеличиваться на 1px
по умолчанию.
Если текущий размер шрифта элемента .story
равен или больше 20px
- он должен увеличиваться на 2px
.
При нажатии на кнопку 0
размер шрифта элемента .story
должен уменьшаться на 1px
по умолчанию.
Если текущий размер шрифта элемента .story
равен или больше 20px
- он должен уменьшаться на 2px
.
Используй внутренний скрипт
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
index.html
<!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: 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>
</body>
</html>