grg8881m Goto Github PK

usa-objetos-para-hacer-b-squedas-

Los objetos pueden ser considerados como un almacenamiento clave/valor, como un diccionario. Si tienes datos tabulares, puedes utilizar un objeto para hacer una búsqueda de valores en lugar de una declaración switch o encadenar if/else. Esto es de mucha utilidad cuando se sabe que los datos de entrada están limitados a un cierto rango. Aquí hay un ejemplo de una simple búsqueda de alfabeto inverso: const alpha = { 1:"Z", 2:"Y", 3:"X", 4:"W", ... 24:"C", 25:"B", 26:"A" }; alpha[2]; alpha[24]; const value = 2; alpha[value]; alpha[2] es la cadena Y, alpha[24] es la cadena C, y alpha[value] es la cadena Y. Convierte la declaración switch en un objeto llamado lookup. Úsalo para buscar val y asignar la cadena asociada a la variable result.

usa-recursi-n-para-crear-un-rango-de-n-meros

Continuando con el desafío anterior, te ofrecemos otra oportunidad de crear una función recursiva para resolver un problema. Hemos definido una función llamada rangeOfNumbers con dos parámetros. La función debe devolver un arreglo de enteros que comienza con el número representado por el parámetro startNum y termina con el número representado por el parámetro endNum. El número inicial será siempre menor o igual que el número final. Tu función debe utilizar recursión, llamándose a sí misma, y no utilizar bucles de ningún tipo. También debe funcionar en el caso que startNum y endNum sean iguales.

usa-selectores-de-atributos-para-dar-estilo-a-elementos

Hasta ahora, has añadido atributos id o class a elementos para aplicarles estilos específicos. Estos se conocen también como selectores de ID y de clase. Sin embargo, existen otros selectores CSS que puedes utilizar para seleccionar grupos personalizados de elementos a los que quieras aplicar el mismo estilo. Volvamos a nuestra CatPhotoApp para practicar el uso de selectores CSS. Para este desafío, usarás el selector de atributos [attr=value] para aplicar estilo a las casillas de verificación (checkboxes) en CatPhotoApp. Este selector busca estilos que tengan un valor de atributo específico. Por ejemplo, el código a continuación cambia los márgenes de todos los elementos que tengan el atributo type con el valor radio: [type='radio'] { margin: 20px 0px 20px 0px; } Usando el selector de atributos type, intenta asignar a las casillas de verificación de CatPhoto App un margen superior (margin-top) de 10px y un margen inferior (margin-bottom) de 15px.

usa-sintaxis-de-clases-para-definir-una-funci-n-constructora

usa-sintaxis-de-desestructuraci-n-para-asignar-variables-desde-arreglos

ES6 hace que desestructurar arreglos sea tan fácil como desestructurar objetos. Una diferencia clave entre el operador de propagación y la desestructuración de arreglos es que el operador de propagación desempaca todos los contenidos de un arreglo en una lista separada por comas. En consecuencia, no puedes elegir qué elementos deseas asignar como variables. Desestructurar un arreglo nos permite hacer exactamente eso: const [a, b] = [1, 2, 3, 4, 5, 6]; console.log(a, b); La consola mostrará los valores de a y b como 1, 2. A la variable a se le asigna el primer valor del arreglo, y a b se le asigna el segundo valor del arreglo. También podemos acceder al valor en cualquier índice de un arreglo con la desestructuración usando comas para alcanzar el índice deseado: const [a, b,,, c] = [1, 2, 3, 4, 5, 6]; console.log(a, b, c); La consola mostrará los valores de a, b, y c como 1, 2, 5. Utiliza la sintaxis de desestructuración para intercambiar los valores de a y b para que a reciba el valor almacenado en b, y b reciba el valor almacenado en a.

usa-sintaxis-de-desestructuraci-n-para-asignar-variables-desde-objetos

usa-sintaxis-de-desestructuraci-n-para-asignar-variables-desde-objetos-anidados

usa-sintaxis-de-desestructuraci-n-para-extraer-valores-de-objetos

La sintaxis de desestructuración es una sintaxis especial introducida en ES6, para asignar los valores directamente desde un objeto. Considera el siguiente código ES5: const user = { name: 'John Doe', age: 34 }; const name = user.name; const age = user.age; name tendría una cadena con valor John Doe, y age tendría el número 34. Aquí hay una sentencia de asignación equivalente usando la sintaxis de desestructuración de ES6: const { name, age } = user; De nuevo, name tendrá una cadena con valor John Doe, y age tendrá el número 34. Aquí, las variables name y age serán creadas y se asignarán los valores respectivos a partir del objeto user. Puedes observar que esto es mucho más limpio. Puedes extraer tantos o pocos valores del objeto como desees. Reemplaza las dos asignaciones con una sintaxis de desestructuración equivalente. Todavía deben seguir asignando las variables today y tomorrow con los valores de today y tomorrow del objeto HIGH_TEMPERATURES.

usa-un-atributo-de-id-para-aplicar-estilo-a-un-elemento

Una cosa genial de los atributos id es que, al igual que las clases, puedes aplicarles estilos con CSS. Sin embargo, un id no es reutilizable y solo debe aplicarse a un único elemento. Un id también tiene mayor especificidad (importancia) que una clase, así que si aplicas un id y una clase al mismo elemento y sus estilos se contradicen, se aplicarán los estilos del id. A continuación te mostramos un ejemplo de cómo puedes tomar tu elemento con el atributo id llamado cat-photo-element y asignarle el color de fondo verde. En tu elemento style agrega la siguiente declaración: #cat-photo-element { background-color: green; } Ten en cuenta que dentro de tu elemento style siempre debes hacer referencia a las clases agregándoles un punto . adelante del nombre. Para hacer referencia a un id, debes agregar # delante de su nombre. Intenta asignar a tu formulario, que ahora tiene el atributo id llamado cat-photo-form, un fondo verde.

usa-un-media-query-para-cambiar-una-variable

Las variables CSS pueden simplificar la forma en que utilizas "media queries" (consultas sobre el tipo de dispositivo donde se muestra el documento HTML). Por ejemplo, cuando la pantalla es más pequeña o más grande que el breakpoint de tu media query, puedes cambiar el valor de una variable, y su estilo se aplicará dondequiera que la utilices. Modifica el selector :root de la media query para que --penguin-size sea redefinido y reciba un valor de 200px. Además, redefine --penguin-skin y asígnale el valor black (negro). Luego, cambia el tamaño de la vista previa para ver este cambio en acción.

usa-una-clase-css-para-aplicar-estilos-a-un-elemento

Las clases son estilos reutilizables que se pueden agregar a los elementos HTML. A continuación te presentamos un ejemplo de cómo declarar una clase CSS: <style> .blue-text { color: blue; } </style> Puedes ver que hemos creado una clase CSS llamada blue-text dentro de la etiqueta <style>. Puedes aplicar una clase a un elemento HTML de este modo: <h2 class="blue-text">CatPhotoApp</h2>. Ten en cuenta que en tu elemento CSS style, los nombres de clase comienzan con un punto. En el atributo "class" de tus elementos HTML, el nombre de la clase no lleva punto delante. Dentro de tu elemento style, cambia el selector h2 a .red-text y actualiza el valor del color de blue a red. Asigna a tu elemento h2 el atributo class con un valor de red-text.

usa-variables-css-para-modificar-varios-elementos-a-la-vez

Las Variables CSS son una manera poderosa de modificar varias propiedades de estilos CSS a la vez, cambiando su valor en un único sitio. Sigue las instrucciones a continuación para ver cómo puedes cambiar el estilo de varios elementos modificando únicamente tres valores. En la clase penguin, cambia el valor black a gray, el valor gray a white y el valor yellow a orange.

use-asterisco-para-importar-todo-de-un-archivo

use-la-etiqueta-s-para-tachar-texto

Para tachar texto, que es cuando una línea horizontal atraviesa los caracteres, puede usar la setiqueta. Muestra que una sección de texto ya no es válida. Con la setiqueta, el navegador aplica el CSS de text-decoration: line-through;al elemento. Envuelva la setiqueta Googledentro de la h4etiqueta y luego agregue la palabra Alphabetal lado sin el formato tachado.

use-para-importar-todo-de-un-archivo

utiliza-c-digo-hexadecimal-hex-code-para-indicar-colores-espec-ficos

¿Sabías que hay otras maneras de representar colores en CSS? Una de estas formas se llama código hexadecimal, o código hex (hex code) para abreviar. Generalmente usamos decimales, o números de base 10, los cuales utilizan los símbolos del 0 al 9 para representar cada dígito. Los números hexadecimales (o hex) son números de base 16. Esto significa que utilizan dieciseis símbolos distintos. Al igual que en los números decimales, en hexadecimal los símbolos 0-9 representan los valores de cero a nueve. Luego A,B,C,D,E,F representan los valores de diez a quince. Todos estos símbolos juntos, de 0 a F, pueden representar un dígito en hexadecimal, lo que da un total de 16 valores posibles. Puedes encontrar más información sobre los números hexadecimales aquí. En CSS, podemos representar colores utilizando 6 dígitos hexadecimales, dos para los componentes de rojo (R), verde (G) y azul (B). Por ejemplo, #000000 corresponde al color negro, y también es el valor más bajo posible. Puedes encontrar más información sobre sistema de colores RGB aquí. body { color: #000000; } Reemplaza la palabra black en el "background-color" (color de fondo) de nuestro elemento body con su código hexadecimal equivalente, #000000.

utiliza-c-digo-hexadecimal-hex-code-para-mezclar-colores

Repasemos: En código hexadecimal se utilizan 6 dígitos hexadecimales para representar los colores, dos para el componente rojo (R), verde (G) y azul (B). ¡A partir de estos tres colores puros (rojo, verde y azul) podemos variar las cantidades de cada componente de color para crear más de 16 millones de colores distintos! Por ejemplo, el naranja es rojo puro mezclado con algo de verde y nada de azul. En hex code, esto se traduce como #FFA500. El dígito 0 es el número más bajo en hex code, y representa la ausencia total de color. El dígito F es el número más alto en hex code, y representa el brillo máximo. Reemplaza las palabras clave de color en nuestro elemento style con los códigos hexadecimales correctos.

utiliza-clockwise-notation-para-especificar-el-margen-de-un-elemento

Intentemos de nuevo, pero esta vez con margin. En lugar de especificar las propiedades margin-top, margin-right, margin-bottom, y margin-left individualmente, puedes especificarlas todas en una sola línea, como se muestra a continuación: margin: 10px 20px 10px 20px; Estos cuatro valores se leen en el sentido de las agujas del reloj: arriba, derecha, abajo, izquierda, (top, right, bottom, left) y producirán exactamente el mismo resultado que usar las instrucciones específicas de margen. Usa clockwise notation (notación en el sentido de las agujas del reloj) para asignarle al elemento con la clase blue-box un margen de 40px en su lado superior e izquierdo pero un margen de solo 20px en su lado inferior y derecho.

utiliza-clockwise-notation-para-especificar-el-relleno-padding-de-un-elemento

En lugar de especificar las propiedades padding-top, padding-right, padding-bottom, y padding-left individualmente, puedes especificarlas todas en una sola línea, como se muestra a continuación: padding: 10px 20px 10px 20px; Estos cuatro valores se leen en el sentido de las agujas del reloj: arriba, derecha, abajo, izquierda, (top, right, bottom, left) y producirán exactamente el mismo resultado que usar las instrucciones específicas de padding. Utiliza clockwise notation (notación en el sentido de las agujas del reloj) para asignarle al elemento con la clase .blue-box un padding de 40px en su lado superior e izquierdo pero solo 20px en su lado inferior y derecho.

utiliza-el-operador-de-propagaci-n-para-evaluar-los-arreglos-en-el-lugar

utiliza-el-par-metro-rest-con-par-metros-de-funci-n

utiliza-getters-accesores-y-setters-mutadores-para-controlar-el-acceso-a-un-objeto

utiliza-getters-y-setters-mutadores-para-controlar-el-acceso-a-un-objeto

utiliza-la-etiqueta-strong-para-poner-el-texto-en-negrita-dise-o-web-responsivo-

utiliza-la-etiqueta-u-para-subrayar-texto

utiliza-la-exportaci-n-para-compartir-un-bloque-de-c-digo

utiliza-la-funci-n-parseint-

La función parseInt() analiza una cadena y devuelve un entero. A continuación, te presentamos un ejemplo: const a = parseInt("007"); La función anterior convierte la cadena 007 al entero 7. Si el primer carácter de la cadena no puede ser convertido en un número, entonces devuelve NaN. Utiliza parseInt() en la función convertToInteger para convertir la cadena de entrada str a un número entero, y devuélvelo.

utiliza-la-funci-n-parseint-con-radix-base-

La función parseInt() analiza una cadena y devuelve un entero. Recibe un segundo argumento para la base (radix), que especifica la base del número representado en la cadena. La base (radix) puede ser un número entero entre 2 y 36. La llamada a la función se realiza de la siguiente manera: parseInt(string, radix); Y aquí hay un ejemplo: const a = parseInt("11", 2); La variable radix indica que 11 está en el sistema binario, o base 2. Este ejemplo convierte la cadena 11 a un entero 3. Utiliza parseInt() en la función convertToInteger para convertir un número binario en un número entero, y devolverlo.

utiliza-la-notaci-n-de-corchetes-para-encontrar-el-car-cter-en-simo-final-en-una-cadena

Puedes usar el mismo principio que acabamos de usar para recuperar el último carácter de una cadena para recuperar el carácter enésimo final. Por ejemplo, puedes obtener el valor de la antepenúltima letra de la cadena const firstName = "Augusta" usando firstName[firstName.length - 3] Ejemplo: const firstName = "Augusta"; const thirdToLastLetter = firstName[firstName.length - 3]; thirdToLastLetter tendrá una cadena con valor s. Usa notación de corchetes para encontrar el penúltimo carácter en la cadena lastName. Sugerencia: Intenta mirar el ejemplo de arriba si te quedas atascado.

utiliza-la-notaci-n-de-corchetes-para-encontrar-el-en-simo-car-cter-en-una-cadena

También puedes usar notación de corchetes para obtener el carácter en otras posiciones dentro de una cadena. Recuerda que las computadoras empiezan a contar desde 0, así que el primer carácter es en realidad el carácter cero. Ejemplo: const firstName = "Ada"; const secondLetterOfFirstName = firstName[1]; secondLetterOfFirstName tendrá una cadena con valor d. Intentemos establecer thirdLetterOfLastName (tercera letra del apellido) para que sea igual a la tercera letra de la variable lastName usando notación de corchetes. Sugerencia: Intenta mirar el ejemplo de arriba si te quedas atascado.