Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Configuring the background color
We learned how to change the font color and size depending on the values that the user selected. All that we have left to do is to program the article background color setting. This is done in a way that is very similar to how font color setting is adjusted. We will obtain the values from the dropdown list with the background-setting class.
The background-color property is responsible for the background color in the CSS. To change it from JavaScript, the property name must be written in CamelCase.
Let’s get down to business!
The style property allows us not only to change styles, but also to obtain them, too. Of course, you can only use it to figure out those styles that are specified in the markup and in the style attribute of the element itself. These styles are also called embedded styles.
To obtain all of the styles that are already applied to an element, use the window.getComputedStyle method. You can read more about it in the specification.
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. It turns out that you use algorithms in your everyday life, such as, for example, when you cook according to a recipe, or you get from point A to point B using your GPS navigation, or you solve a quadratic equation.</p>
<p>When developers talk about algorithms, they are not referring to just any kind of algorithm, but only to what are considered the popular solutions to standard problems. 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 that this is a list of products for sale in an online store, and the user enters a product name in the filter that starts with the letter "E". 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 scenario, you will have to look through all of the elements, but then at least you will have advanced knowledge of the amount of time that is required to find the desired item.</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.oninput = 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
- The “Background Color” dropdown list has the
background-colorclass. Save the list to thebackgroundSettingvariable. - Add the
onchangeevent handler to thebackgroundSettingdropdown list. - Assign the
backgroundSetting.valuevalue tolongread.style.backgroundColorinside the handler. - In the mini-browser select the value “Pink” from the “Background Color” dropdown list and make sure that the article background color is now pink.
Comments