Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Setting the font size
We learned how to obtain the value from the field with the slider and output it to the page. But the font size in the article has not changed yet. To fix this, take the obtained value and write it to the article styles. To do this, use the style property.
In CSS the font-size property is responsible for the font size. When accessing CSS properties with dot notation in JavaScript, replace hyphens with camelCase: capitalize each word after the first. For example:
| CSS | JavaScript |
|---|---|
| font-size | fontSize |
| background-color | backgroundColor |
| border-left-width | borderLeftWidth |
It turns out that in order to change the font size we need to assign a new value to the fontSize property:
let element = document.querySelector('p');
// Set the paragraph’s font size to 24px
element.style.fontSize = '24px';We obtain a number from the field with the slider. But in order to assign the font size, we also need to specify the units of measurement. In our case, this will be pixels. Use concatenation to obtain the correct value:
longread.style.fontSize = sizeSetting.value + 'px';Imagine that the user selected the number 16 using the slider. In that case the result of concatenation is written to the element styles: '16px':
<article class="longread" style="font-size: 16px">Set the article text to the font size the user selected, and make sure that the setting works.
Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page page-longread light-theme">
<header class="page-header">
<div class="container">
<a class="header-logo" href="index.html">
<img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo">
</a>
<a href="subscription.html" class="subscription-link">Subscription</a>
<button class="theme-button" type="button">Change the theme</button>
</div>
</header>
<main class="index-main">
<div class="controls">
<div class="container">
<div class="color-filters">
<label>Font color:
<select class="filter color-setting" name="font-color">
<option value="inherit" selected>Default</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="ghostwhite">Light gray</option>
<option value="pink">Pink</option>
<option value="darkred">Dark red</option>
<option value="darkorange">Orange</option>
<option value="saddlebrown">Brown</option>
<option value="gold">Gold</option>
<option value="greenyellow">Lime green</option>
<option value="forestgreen">Green</option>
<option value="aquamarine">Aquamarine</option>
<option value="lightskyblue">Sky blue</option>
<option value="lightsteelblue">Gray blue</option>
<option value="darkblue">Navy blue</option>
<option value="indigo">Indigo</option>
<option value="mediumpurple">Violet</option>
<option value="purple">Purple</option>
</select>
</label>
<label>Background color:
<select class="filter background-setting" name="background-color">
<option value="inherit" selected>Default</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="ghostwhite">Light gray</option>
<option value="pink">Pink</option>
<option value="darkred">Dark red</option>
<option value="darkorange">Orange</option>
<option value="saddlebrown">Brown</option>
<option value="gold">Gold</option>
<option value="greenyellow">Lime green</option>
<option value="forestgreen">Green</option>
<option value="aquamarine">Aquamarine</option>
<option value="lightskyblue">Sky blue</option>
<option value="lightsteelblue">Gray blue</option>
<option value="darkblue">Navy blue</option>
<option value="indigo">Indigo</option>
<option value="mediumpurple">Violet</option>
<option value="purple">Purple</option>
</select>
</label>
</div>
<label>Font size (<span class="pixels">14</span>px)
<input class="size-setting" type="range" min="8" max="48" step="1" value="14">
</label>
</div>
</div>
<article class="longread">
<div class="container">
<h1>Why Do We Need Algorithms?</h1>
<p>Many people are afraid of the word "algorithm." It can seem to them that this is something complicated, but in reality it is just a complete set of instructions. You use algorithms in everyday life, for example when you cook from a recipe, navigate from point A to point B with GPS, or solve a quadratic equation.</p>
<p>When developers talk about algorithms, they often discuss well-known solutions to standard problems, such as searching or sorting a list. Many algorithms were invented even before there were computers: for example, the radix sorting algorithm was patented in the United States in the nineteenth century to process census data.</p>
<p>Various algorithms can be used effectively to solve the same problem. Imagine that you have a list in which you want to find an element. Let's assume this is a list of products for sale in an online store, and the user enters a product name starting with the letter "E" in the filter. How can we do that?</p>
<p>If the list is sorted alphabetically, then a binary search is the most suitable: you look in the middle of the list and find a product there whose name begins with "K", for example. The list is sorted, so you know for sure that the product you need is on the left side of the list, because "E" occurs before "K" in the alphabet. Now take the left side of the list and perform another binary search on it.</p>
<p>If the list is not sorted, then a brute force search is better. According to this method, you go through the list from the beginning to the end until you find the element that you are interested in. In the worst case, you will have to look through all of the elements. Knowing the list’s size tells you the maximum number of elements you may need to check.</p>
<p>You need to select the appropriate algorithm for the problem at hand. Gain an understanding of the data that you are working with, and build on that.</p>
</div>
</article>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="FlashNews! portal logo">
</a>
</div>
</footer>
<script src="themes.js"></script>
<script src="read-mode.js"></script>
</body>
</html>
/* Longread styles */
.controls {
padding: 16px 0 6px;
overflow-x: hidden;
}
.controls label {
font-size: 14px;
line-height: 24px;
margin-bottom: 14px;
}
.color-filters {
display: flex;
margin-right: -20px;
}
.color-filters label {
display: flex;
flex-direction: column;
flex-grow: 1;
margin-right: 20px;
}
.color-filters .filter {
margin-top: 4px;
}
.controls .filter {
margin-left: 0;
}
.longread {
min-height: calc(100vh - 237px);
padding-bottom: 1em;
font-size: 14px;
}
.longread h1 {
margin: 1em 0 0.6em;
line-height: 1.2;
}
.longread p {
margin: 0 0 0.8em;
line-height: 1.6;
}
/* Cross-browser range input without JavaScript */
.size-setting {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 10px;
margin-top: 8px;
padding: 2px 0;
border-radius: 5px;
outline-offset: 0;
}
.size-setting::-webkit-slider-thumb {
box-sizing: border-box;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
}
.size-setting::-moz-range-thumb {
box-sizing: border-box;
-moz-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
}
.size-setting::-ms-thumb {
box-sizing: border-box;
width: 20px;
height: 20px;
border-radius: 50%;
}
/* Color themes */
.page-longread.light-theme {
background-color: #ffffff;
color: #333333;
}
.light-theme .controls {
background-color: #eae9f2;
}
.light-theme .size-setting {
background-color: #ffffff;
box-shadow: inset 0 0 0 1px #b6aaff;
outline-color: #b6aaff;
}
.light-theme .size-setting::-webkit-slider-thumb {
background-color: #ffffff;
border: 5px solid #6653d9;
}
.light-theme .size-setting::-moz-range-thumb {
background-color: #ffffff;
border: 5px solid #6653d9;
}
.light-theme .size-setting::-ms-thumb {
background-color: #ffffff;
border: 5px solid #6653d9;
}
.light-theme .size-setting::-webkit-slider-thumb:active {
background-color: #6653d9;
}
.light-theme .size-setting::-moz-range-thumb:active {
background-color: #6653d9;
}
.light-theme .size-setting::-ms-thumb:active {
background-color: #6653d9;
}
.page-longread.dark-theme {
background-color: #0a0910;
color: #f2f2f2;
}
.dark-theme .controls {
background-color: #17161a;
}
.dark-theme .size-setting {
background-color: #0a0910;
box-shadow: inset 0 0 0 1px #473c8d;
outline-color: #6653d9;
}
.dark-theme .size-setting::-webkit-slider-thumb {
background-color: #0a0910;
border: 5px solid #9484f2;
}
.dark-theme .size-setting::-moz-range-thumb {
background-color: #0a0910;
border: 5px solid #9484f2;
}
.dark-theme .size-setting::-ms-thumb {
background-color: #0a0910;
border: 5px solid #9484f2;
}
.dark-theme .size-setting::-webkit-slider-thumb:active {
background-color: #9484f2;
}
.dark-theme .size-setting::-moz-range-thumb:active {
background-color: #9484f2;
}
.dark-theme .size-setting::-ms-thumb:active {
background-color: #9484f2;
}
let longread = document.querySelector('.longread');
let colorSetting = document.querySelector('.color-setting');
let sizeSetting = document.querySelector('.size-setting');
let pixels = document.querySelector('.pixels');
colorSetting.onchange = function () {
longread.style.color = colorSetting.value;
};
sizeSetting.onchange = function () {
pixels.textContent = sizeSetting.value;
// Change font size here
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
100%
Console
Comments