There are two buttons in the document: +
and -
.
When the +
button is clicked, the font size of the .story
element should increase by 1px
by default.
If the current font size of the .story
element is equal to or greater than 20px
, it must increase by 2px
.
When you click on the 0
button, the font size of the .story
element should decrease by 1px
by default.
If the current font size of the .story
element is equal to or greater than 20px
, it should decrease by 2px
.
Use the internal script
This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task
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>