<!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 page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
Comments