Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Reading the slider value
The font color settings are ready. Let’s work on the font size. The user can change the font size in the article by moving the slider. If you move the slider to the left, the font size will shrink, and if you move it to the right, then it will grow. The selected size should be displayed on the page next to the field.
The field with the slider has the size-setting class. This is what it looks like in the markup:
<input class="size-setting" type="range" min="8" max="48" step="1" value="14">The slider allows the user to select a number from a specified range. In our case it is an integer between 8 and 48. The default value is 14, because the font size in the article is currently 14px.
The value that the user selects is retrieved in JavaScript using the value property. We need to output this value to the page next to the field. The web designer prepared an element with the pixels class to do this.
Font size (<span class="pixels">14</span>px)To show the selected number, write it to the textual content of the element with the pixels class.
We need to obtain the value when the user moves the slider. Use the onchange event handler. For example:
// Find the field and element to output the value
let range = document.querySelector('input');
let span = document.querySelector('span');
// Add the event handler to the field
range.onchange = function () {
// Output the value to the page
span.textContent = range.value
}Find the necessary elements and output the selected font size to the page.
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');
// Declare a variable here
colorSetting.onchange = function () {
longread.style.color = colorSetting.value;
};
// Add an event handler 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
- On line 3, declare a variable
sizeSettingand assign an element to it with thesize-settingclass. - On the next line, declare a variable
pixelsand assign the element with thepixelsclass to it. - On line 10, add the
onchangeevent handler to thesizeSettingelement. - Inside this handler assign the
sizeSetting.valuevalue topixels.textContent. - In the mini-browser, move the “Font Size” slider as far to the right as possible. Notice that the new font size is displayed next to the field (48px), but the article’s font size has not changed.
Comments