Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Ajustar el color del texto
Ya conocemos la propiedad style y cambiamos el color del texto del artículo. Cupcake quiere que el texto tome el color elegido en la lista desplegable «Color del texto». En el capítulo anterior ya trabajamos con una lista desplegable.
La lista «Color del texto» tiene 18 valores. Para elegir uno, basta con desplegarla y hacer clic en el color deseado:
El valor elegido se guarda en la propiedad value de la lista desplegable. Para aplicar ese color al texto, debemos asignar el valor elegido a la propiedad style.color del artículo.
El color del texto debe cambiar cuando se elija un nuevo valor, así que usaremos el manejador de eventos onchange. Por ejemplo:
// Buscamos la lista desplegable
let select = document.querySelector('select');
// Agregamos un manejador de eventos a la lista
select.onchange = function () {
// Cambiamos el color del texto por el valor elegido
longread.style.color = select.value;
};La lista «Color del texto» del sitio de noticias tiene la clase color-setting. La buscaremos y la guardaremos en una variable. Después le agregaremos un manejador de eventos y cambiaremos el color del texto del artículo por el valor 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');
// Declara aquí la variable
longread.style.color = 'purple';
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 2, declara la variable
colorSettingy guarda en ella el elemento con la clasecolor-setting. - Debajo, agrega al elemento
colorSettingun manejador de eventosonchange. - Mueve la instrucción
longread.style.color = 'purple';al interior del manejador. - Dentro del manejador, sustituye
'purple'por el valor elegido en la lista desplegable:colorSetting.value. - En el mininavegador, elige «Naranja» en la lista «Color del texto». Observa que el texto del artículo se volvió naranja.