Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Comparing onchange and oninput
We learned how to change the font size in an article when a user moves the slider. But it can be inconvenient when using our current configuration because the text will change too dramatically. This is because the onchange event handler is only triggered when the user releases the slider after moving it. As a result, the text only changes once, and it can be abrupt.
In order for the text to change more smoothly, we need to change the font size many times, but gradually. To do this, you need to obtain a new value each time the position of the slider is changed. The oninput event handler can help us do this. We already worked with it in one of the previous chapters.
Let’s figure out what the difference is between the two handlers:
onchangeruns when the user commits a changed field value. For example, when they release the slider after moving it, or when they edit a text field and then move focus away from it.oninputruns whenever the user changes the field’s value, without waiting for them to finish. For example, it runs as the user moves the slider. It also runs when the user types, pastes, or deletes text, even while they continue editing.
Let’s make it pleasanter to adjust the font size. To do this, change the onchange handler to oninput. After that, make sure that the text in the article changes smoothly and not abruptly.
When we change the size of elements, the browser must redraw the page. This is a resource-intensive operation, and it should be performed as rarely as possible. Use the oninput handler carefully.
You can learn about how the browser handles various changes and animations by reading this article.
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;
longread.style.fontSize = sizeSetting.value + 'px';
};
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