Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Obtener el valor de un control deslizante
El ajuste del color del texto está listo. Pasemos al tamaño de la fuente. Los usuarios podrán cambiar el tamaño del texto del artículo con el control deslizante. Al moverlo a la izquierda, el texto debe hacerse más pequeño; al moverlo a la derecha, más grande. El tamaño elegido debe aparecer en la página, junto al control.
El control deslizante tiene la clase size-setting. Así aparece en el marcado:
<input class="size-setting" type="range" min="8" max="48" step="1" value="14">El control deslizante permite elegir un número dentro de un intervalo. En nuestro caso, un entero de 8 a 48. El valor predeterminado es 14, porque el tamaño de la fuente del artículo es de 14px.
En JavaScript obtenemos el valor elegido con la propiedad value. Debemos mostrarlo en la página, junto al control. Para eso, el marcado ya incluye un elemento <output> con la clase pixels:
Tamaño del texto (<output class="pixels">14</output>px)El material previo presenta el elemento <output>. Escribiremos en su contenido de texto el número que elija el usuario.
Necesitamos obtener el valor cuando se mueva el control deslizante. Usaremos el manejador de eventos onchange. Por ejemplo:
// Buscamos el campo y el elemento que mostrará el valor
let range = document.querySelector('input');
let output = document.querySelector('output');
// Agregamos un manejador de eventos al campo
range.onchange = function () {
// Mostramos el valor en la página
output.textContent = range.value;
}Busquemos los elementos necesarios y mostremos en la página el tamaño del texto elegido.
Todos los archivos
<!DOCTYPE html>
<html lang="es">
<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="Logotipo del portal FlashNews!">
</a>
<a href="subscription.html" class="subscription-link">Suscripción</a>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="index-main">
<div class="controls">
<div class="container">
<div class="color-filters">
<label>Color del texto:
<select class="filter color-setting" name="font-color">
<option value="inherit" selected>Predeterminado</option>
<option value="black">Negro</option>
<option value="white">Blanco</option>
<option value="ghostwhite">Gris claro</option>
<option value="pink">Rosa</option>
<option value="darkred">Rojo oscuro</option>
<option value="darkorange">Naranja</option>
<option value="saddlebrown">Marrón</option>
<option value="gold">Dorado</option>
<option value="greenyellow">Verde lima</option>
<option value="forestgreen">Verde</option>
<option value="aquamarine">Aguamarina</option>
<option value="lightskyblue">Azul cielo</option>
<option value="lightsteelblue">Azul grisáceo</option>
<option value="darkblue">Azul oscuro</option>
<option value="indigo">Índigo</option>
<option value="mediumpurple">Violeta</option>
<option value="purple">Púrpura</option>
</select>
</label>
<label>Color del fondo:
<select class="filter background-setting" name="background-color">
<option value="inherit" selected>Predeterminado</option>
<option value="black">Negro</option>
<option value="white">Blanco</option>
<option value="ghostwhite">Gris claro</option>
<option value="pink">Rosa</option>
<option value="darkred">Rojo oscuro</option>
<option value="darkorange">Naranja</option>
<option value="saddlebrown">Marrón</option>
<option value="gold">Dorado</option>
<option value="greenyellow">Verde lima</option>
<option value="forestgreen">Verde</option>
<option value="aquamarine">Aguamarina</option>
<option value="lightskyblue">Azul cielo</option>
<option value="lightsteelblue">Azul grisáceo</option>
<option value="darkblue">Azul oscuro</option>
<option value="indigo">Índigo</option>
<option value="mediumpurple">Violeta</option>
<option value="purple">Púrpura</option>
</select>
</label>
</div>
<label>Tamaño del texto (<output class="pixels">14</output>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>Para qué sirven los algoritmos</h1>
<p>La palabra algoritmo asusta a muchas personas: parece algo complicado, pero en realidad es un conjunto completo de instrucciones. También usas algoritmos en la vida diaria, por ejemplo, cuando sigues una receta, utilizas un navegador para ir del punto A al punto B o resuelves una ecuación cuadrática.</p>
<p>Cuando quienes programan hablan de algoritmos, suelen referirse a soluciones conocidas para problemas habituales. Muchos algoritmos se inventaron antes que las computadoras: por ejemplo, el algoritmo de ordenamiento por dígitos se patentó en Estados Unidos en el siglo XIX para procesar los datos de un censo de población.</p>
<p>Un mismo problema puede resolverse con distintos algoritmos. Imagina que necesitas encontrar un elemento en una lista. Supongamos que es una lista de productos de una tienda en línea y alguien escribe en el filtro el nombre de un producto que empieza con «E». ¿Cómo lo encuentras?</p>
<p>Si la lista está ordenada alfabéticamente, puedes usar la búsqueda binaria: miras en la mitad de la lista y encuentras, por ejemplo, un producto cuyo nombre empieza con «K». Como la lista está ordenada y «E» va antes que «K», sabes que el producto que buscas está en la mitad izquierda. Tomas esa mitad y repites el procedimiento.</p>
<p>Si la lista no está ordenada, conviene una búsqueda secuencial: recorres los elementos desde el principio hasta encontrar el que te interesa. En el peor caso tendrás que revisarlos todos, pero podrás estimar de antemano cuánto tiempo tomará la búsqueda.</p>
<p>Elige el algoritmo según el problema. Identifica con qué datos trabajas y parte de ahí.</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="Logotipo del portal FlashNews!">
</a>
</div>
</footer>
<script src="themes.js"></script>
<script src="read-mode.js"></script>
</body>
</html>
/* Estilos del artículo largo */
.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;
}
/* Control de rango compatible sin scripts */
.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%;
}
/* Temas de color */
.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');
// Declara aquí la variable
colorSetting.onchange = function () {
longread.style.color = colorSetting.value;
};
// Agrega aquí el manejador de eventos
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- En la línea 3, declara la variable
sizeSettingy guarda en ella el elemento con la clasesize-setting. - En la siguiente línea, declara la variable
pixelsy guarda en ella el elemento con la clasepixels. - En la línea 10, agrega al elemento
sizeSettingun manejador de eventosonchange. - Dentro de ese manejador, asigna a
pixels.textContentel valor desizeSetting.value. - En el mininavegador, mueve el control «Tamaño del texto» hasta el extremo derecho y suéltalo. Observa que junto al control aparece el nuevo tamaño, 48px, pero el texto del artículo todavía no cambia.