Object Oriented Programming

OOP, or Object Oriented Programming, is one of the major approaches to the software
development process. In OOP, objects and classes organize code to describe things and
what they can do.
In this course, you'll learn the basic principles of OOP in JavaScript, including the this
keyword, prototype chains, constructors, and inheritance.

Crea un objeto básico de JavaScript

Piensa en cosas que la gente ve todos los días, como coches, tiendas y aves. Todos
estos son objetos: cosas tangibles con las que la gente puede observar e interactuar.
¿Cuáles son algunas de las cualidades de estos objetos? Un coche tiene ruedas. Las
tiendas venden artículos. Las aves tienen alas.
Estas cualidades, o propiedades, definen los que constituye un objeto. Ten en cuenta que
objetos similares comparten las mismas propiedades, pero posiblemente tengan valores
diferentes para estas propiedades. Por ejemplo, todos los coches tienen ruedas, pero no
todos los coches tienen la misma cantidad de ruedas.
Los objetos en JavaScript son usados para modelar objetos del mundo real, dándoles
propiedades y comportamientos como sus contrapartes del mundo real. Aquí hay un
ejemplo usando estos conceptos para crear un objeto duck (pato):
let duck = {
name: "Aflac",
numLegs: 2
};
El objeto duck tiene dos pares propiedad/valor: un name (nombre) de Aflac y un numLegs
(número de patas) de 2.
Crea un objeto dog con las propiedades name y numLegs y asígnales una cadena y un
número, respectivamente.

Utiliza notación de puntos para acceder a las propiedades de un objeto

En el último desafío creaste un objeto con varias propiedades. Ahora verás cómo acceder
a los valores de esas propiedades. Por ejemplo:
let duck = {
name: "Aflac",
numLegs: 2
};
console.log(duck.name);

Se utiliza notación de puntos con el nombre del objeto, duck, seguido por el nombre de la
propiedad, name, para acceder al valor de Aflac.

Crea un método en un objeto

Los objetos pueden tener un tipo de propiedad especial, llamada método.
Los métodos son propiedades que son funciones. Estos agregan diferentes
comportamientos a los objetos. Aquí está el ejemplo de duck con un método:
let duck = {
name: "Aflac",
numLegs: 2,
sayName: function() {return "The name of this duck is " + duck.name + ".";}
};
duck.sayName();
Este ejemplo agrega el método sayName, el cual es una función que devuelve una
oración que entrega el nombre del duck (pato). Ten en cuenta que el método accedió a la
propiedad name en la sentencia de retorno usando duck.name. El siguiente desafío
abarcara otra forma de hacer esto.

Haz el código más reutilizable con la palabra clave "this"

El último desafío introdujo un método al objeto duck. Usó la notación de puntos
duck.name para acceder al valor de la propiedad name dentro de la declaración de
retorno:
sayName: function() {return "The name of this duck is " + duck.name + ".";}
Aunque esta es una forma válida de acceder a la propiedad del objeto, existe un
problema. Si el nombre de la variable cambia, cualquier código que haga referencia al
nombre original también tendría que ser actualizado. En una definición breve de un objeto,
esto no es un problema, pero si un objeto tiene muchas referencias a sus propiedades
hay una mayor probabilidad de error.
Una forma de evitar estos problemas es con palabra clave this:
let duck = {
name: "Aflac",
 numLegs: 2,
sayName: function() {return "The name of this duck is " + this.name + ".";}
};
this es un tema profundo, y el ejemplo anterior es sólo una forma de usarlo. En el contexto
actual, this se refiere al objeto con el que el método está asociado: duck. Si el nombre del
objeto se cambia a mallard, no es necesario encontrar todas las referencias a duck en el
código. Hace que el código sea reutilizable y mas fácil de leer.
Define una función "Constructor"
Las funciones Constructors crean nuevos objetos. Definen propiedades y
comportamientos que pertenecerán al nuevo objeto. Piensa que son el modelo para la
creación de nuevos objetos.
A continuación se muestra un ejemplo de un constructor:
function Bird() {
this.name = "Albert";
this.color = "blue";
this.numLegs = 2;
}
Este constructor define un objeto Bird con las propiedades name, color y numLegs
establecidas a Albert, blue y 2 respectivamente. Los constructores tienen las siguientes
convenciones:
Están definidos con un nombre en mayúscula para distinguirlos de otras funciones que no
son constructors.
Utilizan la palabra clave this para establecer propiedades del objeto que crearán. Dentro
del constructor, this se refiere al nuevo objeto que creará.
Los Constructors definen propiedades y comportamientos en vez de devolverlos como un
valor como lo harían otras funciones.
Utiliza un constructor para crear objetos
Aquí tenemos el constructor Bird del desafío anterior:
function Bird() {
this.name = "Albert";
this.color = "blue";
this.numLegs = 2;
}
let blueBird = new Bird();
NOTA: this dentro del constructor siempre se refiere al objeto que se está creando.
Observa que se utiliza el operador new cuando llamamos a un constructor. Esto le indica
a JavaScript que cree una nueva instancia de Bird llamada blueBird. Sin el operador new,
dentro del constructor this no haría referencia al nuevo objeto, dando resultados
inesperados. Ahora blueBird tiene todas las propiedades definidas dentro del constructor
Bird:
blueBird.name;
blueBird.color;
blueBird.numLegs;
Al igual que cualquier otro objeto, sus propiedades pueden ser accedidas y modificadas:
blueBird.name = 'Elvira';
blueBird.name;
Extender constructores para recibir argumentos
Los constructores de Bird y Dog del último desafío funcionaron bien. Sin embargo, nota
que todas las Birds que son creadas con el constructor Bird, automáticamente se
nombran Albert, son de color azul y tienen dos patas. ¿Qué pasa si quieres Birds (aves)
con diferentes valores para nombre y color? Es posible cambiar manualmente las
propiedades de cada Bird (ave), pero sería bastante trabajo:

let swan = new Bird();

swan.name = "Carlos";
swan.color = "white";
Supongamos que estabas escribiendo un programa para hacer seguimiento de cientos o
incluso miles de aves diferentes en un aviario. Tardaría mucho tiempo en crear todas las
aves, para luego cambiar las propiedades a diferentes valores para cada una. Para crear
más fácilmente diferentes objetos Bird, puedes diseñar tu constructor de aves para
aceptar parámetros:

function Bird(name, color) {

this.name = name;
this.color = color;
this.numLegs = 2;
}
Luego pasa los valores como argumentos para definir cada ave única en el constructor
Bird: let cardinal = new Bird("Bruce", "red"); Esto genera una nueva instancia de Bird con
propiedades name y color que tienen como valor Bruce y red, respectivamente. La
propiedad numLegs aún está establecida en 2. El cardinal tiene estas propiedades:

cardinal.name
cardinal.color
cardinal.numLegs
El constructor es más flexible. Ahora es posible definir las propiedades para cada Bird en
el momento que se crea. Esta es una manera en que los constructores de JavaScript son
tan útiles. Estos agrupan objetos basados en características y comportamiento
compartidos, y definen un plano que automatiza su creación.

Crea otro constructor Dog. Esta vez, configúralo para que tome los parámetros name y
color, y ten la propiedad numLegs fija a 4. Luego crea un nuevo Dog almacenado en una
variable terrier. Pasale dos cadenas de texto como argumentos para las propiedades
name y color.

Verifica el constructor de un objeto con "instanceof"

Cada vez que una función constructora crea un nuevo objeto, se dice que ese objeto es
una instancia de su constructor. JavaScript proporciona una manera conveniente de
verificar esto con el operador instanceof. instanceof permite comparar un objeto con un
constructor, devuelve true o false basado en si ese objeto fue creado o no con dicho
constructor. Aquí hay un ejemplo:
let Bird = function(name, color) {
this.name = name;
this.color = color;
this.numLegs = 2;
}
let crow = new Bird("Alexis", "black");
crow instanceof Bird;
Aquí el método instanceof devolverá true.
Si un objeto es creado sin usar un constructor, instanceof verificará que no es una
instancia de ese constructor:
let canary = {
 name: "Mildred",
color: "Yellow",
numLegs: 2
};

canary instanceof Bird;

Aquí el método instanceof devolverá false.

Comprender las propiedades directas

En el siguiente ejemplo, el constructor Bird define dos propiedades: name y numLegs:
function Bird(name) {
this.name = name;
this.numLegs = 2;
}
let duck = new Bird("Donald");
let canary = new Bird("Tweety");
name y numLegs se llaman propiedades directas, porque están definidas directamente en
la instancia del objeto. Eso significa que duck y canary tienen su propia copia separada de
estas propiedades. De hecho, cada instancia de Bird tendrá su propia copia de estas
propiedades. El siguiente código añade todas las propiedades directas de duck al arreglo
ownProps:
let ownProps = [];
for (let property in duck) {
if(duck.hasOwnProperty(property)) {
ownProps.push(property);
}
}
console.log(ownProps);
La consola mostrará el valor ["name", "numLegs"].

Utiliza propiedades "prototype" para reducir código duplicado

Dado que numLegs probablemente tendrán el mismo valor para todas las instancias de
Bird, esencialmente tienes una variable duplicada numLegs dentro de cada instancia de
Bird.
Esto puede que no sea un problema cuando sólo hay dos instancias, pero imagina si hay
millones de instancias. Eso sería un montón de variables duplicadas.
Una mejor forma es utilizar el prototype de Bird. Las propiedades del prototype se
comparten entre TODAS las instancias de Bird. A continuación se explica cómo añadir
numLegs al prototipo Bird prototype:
Bird.prototype.numLegs = 2;
Ahora todas las instancias de Bird tienen la propiedad numLegs.
console.log(duck.numLegs);
console.log(canary.numLegs);
Dado que todas las instancias tienen automáticamente las propiedades en el prototype,
piensa en prototype como una "receta" para crear objetos. Ten en cuenta que el prototype
de duck y canary es parte del constructor Bird como Bird.prototype. Casi todos los objetos
en JavaScript tienen una propiedad prototype que es parte de la función constructora que
lo creó.

Itera sobre todas las propiedades

Ahora has visto dos tipos de propiedades: propiedades directas y propiedades prototype.
Las propiedades directas se definen directamente en la propia instancia del objeto. Y las
propiedades prototype se definen en el prototype.
function Bird(name) {
this.name = name; //own property
}
Bird.prototype.numLegs = 2; // prototype property
let duck = new Bird("Donald");
A continuación, se explica cómo se agregan las propiedades directas de duck al arreglo
ownProps y las propiedades prototype al arreglo prototypeProps:
let ownProps = [];
let prototypeProps = [];
for (let property in duck) {
if(duck.hasOwnProperty(property)) {
ownProps.push(property);
 } else {
prototypeProps.push(property);
}
}

console.log(ownProps);
console.log(prototypeProps);
console.log(ownProps) debe mostrar ["name"] en la consola, y
console.log(prototypeProps) debe mostrar ["numLegs"].

Entiende la propiedad constructor

Hay una propiedad especial constructor ubicada en instancias de objeto duck y beagle
que fueron creados en desafíos anteriores:
let duck = new Bird();
let beagle = new Dog();
console.log(duck.constructor === Bird);
console.log(beagle.constructor === Dog);
Ambas llamadas console.log devolverían true en la consola.
Ten en cuenta que la propiedad constructor hace referencia a la función constructor que
creo la instancia. La ventaja de la propiedad constructor es que es posible verificar esta
propiedad para averiguar qué tipo de objeto es. Así es como se podría utilizar:
function joinBirdFraternity(candidate) {
if (candidate.constructor === Bird) {
return true;
} else {
return false;
}
}
Nota: dado que la propiedad constructor se puede sobreescribir (se verá en los próximos
dos desafíos), por lo general, es mejor utilizar el método instanceof para verificar el tipo de
un objeto.
Cambia el prototipo a un nuevo objeto
Hasta ahora, has estado agregando propiedades al prototype (prototipo) individualmente:
Bird.prototype.numLegs = 2;
Esto se vuelve tedioso después de varias propiedades.
Bird.prototype.eat = function() {
console.log("nom nom nom");
}
Bird.prototype.describe = function() {
console.log("My name is " + this.name);
}
Una forma más eficiente es establecer el prototype a un nuevo objeto que ya contenga las
propiedades. De esta forma, las propiedades son añadidas todas a la vez:
Bird.prototype = {
numLegs: 2,
eat: function() {
console.log("nom nom nom");
},
describe: function() {
console.log("My name is " + this.name);
}
};

Recuerda establecer la propiedad "constructor" al cambiar el prototipo

Hay un efecto secundario crucial de ajustar manualmente el prototipo a un nuevo objeto.
¡Elimina la propiedad constructor! Esta propiedad puede ser usada para verificar cuál
función de constructor creó la instancia. Sin embargo, dado que la propiedad ha sido
sobrescrita, ahora devuelve resultados falsos:
duck.constructor === Bird;
duck.constructor === Object;
duck instanceof Bird;
En orden, estas expresiones se evaluarían como false, true y true.
Para solucionar esto, cada vez que un prototipo se establece de forma manual a un nuevo
objeto, recuerda definir la propiedad constructor:
Bird.prototype = {
constructor: Bird,
numLegs: 2,
eat: function() {
console.log("nom nom nom");
},
describe: function() {
console.log("My name is " + this.name);
}
};

Entendiendo de dónde viene el prototipo de un objeto

Así como las personas heredamos genes de nuestros padres, los objetos también
heredan su prototype directamente de la función constructor que lo creó. Por ejemplo,
aquí el constructor Bird crea el objeto duck:

function Bird(name) {
this.name = name;
}
let duck = new Bird("Donald");
duck hereda su prototype de la función constructor Bird. Puedes mostrar esta relación con
el método isPrototypeOf:
Bird.prototype.isPrototypeOf(duck);
Este devolvería true.

Comprende la cadena "prototype"

Todos los objetos en JavaScript (con algunas excepciones) tienen un prototype. Además,
el prototype de un objeto en sí mismo es un objeto.
function Bird(name) {
this.name = name;
}
typeof Bird.prototype;
Debido a que prototype es un objeto, ¡unprototype puede tener su propio prototype! En
este caso, el prototype de Bird.prototype es Object.prototype:
Object.prototype.isPrototypeOf(Bird.prototype);
¿Por qué sería útil? Quizás recuerdes el método hasOwnProperty del desafío pasado:
let duck = new Bird("Donald");
duck.hasOwnProperty("name");
El método hasOwnProperty se define en Object.prototype al cual se puede acceder con
Bird.prototype, al que se puede acceder con duck. Este es un ejemplo de la cadena
prototype. En esta cadena prototype, Bird es el supertype de duck mientras que duck es el
subtype. Object es un supertype de Bird y duck. Object es un supertype de todos los
objetos en JavaScript. Por lo tanto, cualquier objeto puede utilizar el método
hasOwnProperty.

Usa herencia para que no te repitas

Hay un principio en la programación llamado No te repitas (Don't Repeat Yourself "DRY").
La razón por la que el código repetido es un problema es porque cualquier tipo de cambio
requiere corregir código en múltiples lugares. Esto suele significar más trabajo para los
programadores y más espacio para errores.
Observa en el siguiente ejemplo como el método describe es compartido por Bird y Dog:
Bird.prototype = {
constructor: Bird,
describe: function() {
console.log("My name is " + this.name);
}
};
Dog.prototype = {
constructor: Dog,
describe: function() {
console.log("My name is " + this.name);
}
};
El método describe se repite en dos lugares. El código se puede editar para seguir el
principio DRY creando un supertype (o padre) llamado Animal:
function Animal() { };
Animal.prototype = {
constructor: Animal,
describe: function() {
console.log("My name is " + this.name);
}
};
Dado que Animal incluye el método describe, puedes eliminarlo de Bird y Dog:

Bird.prototype = {
constructor: Bird
};
Dog.prototype = {
constructor: Dog
};
Hereda comportamientos de un supertipo (supertype)
En el desafío anterior, creaste un supertype llamado Animal que definía comportamientos
compartidos por todos los animales:
function Animal() { }
Animal.prototype.eat = function() {
console.log("nom nom nom");
};
Este desafío y el siguiente cubrirán como reutilizar los métodos de Animal dentro de Bird y
Dog sin tener que definirlos otra vez. Se utiliza una técnica llamada herencia. Este desafío
cubre el primer paso: crear una instancia del supertype (o objecto padre). Ya conoces una
forma de crear una instancia de Animal utilizando el operador new:
let animal = new Animal();
Hay algunas desventajas cuando se utiliza esta sintaxis para la herencia, pero son
demasiado complejas para el alcance de este desafío. En su lugar, hay un enfoque
alternativo que no tiene esas desventajas:
let animal = Object.create(Animal.prototype);
Object.create(obj) crea un objeto nuevo y establece obj como el prototype del nuevo
objeto. Recuerda que prototype es como la "receta" para crear un objecto. Al establecer el
prototype de animal como el prototype de Animal, estás dándole a la instancia animal la
misma “receta" que a cualquier otra instancia de Animal.
animal.eat();
animal instanceof Animal;
Aquí el método instanceof devolvería true.

Establece el prototipo de hijo para una instancia del padre

En el desafío anterior, viste el primer paso para heredar el comportamiento del supertipo
(o padre) Animal: creando una nueva instancia de Animal.

Este desafío cubre el siguiente paso: establecer el prototipo prototype del subtipo (o hijo)
—en este caso, Bird— para ser una instancia de Animal.
Bird.prototype = Object.create(Animal.prototype);
Recuerda que el prototipo prototype es como la "receta" para crear un objeto. En cierto
modo, la receta de Bird ahora incluye todos los "ingredientes" clave de Animal.

let duck = new Bird("Donald");

duck.eat();
duck hereda todas las propiedades de Animal, incluyendo el método eat.

Restablece una propiedad "constructor" heredada

Cuando un objeto hereda el prototype de otro objeto, también hereda la propiedad del
constructor del supertipo.
Por ejemplo:
function Bird() { }
Bird.prototype = Object.create(Animal.prototype);
let duck = new Bird();
duck.constructor
Pero duck y todas las instancias de Bird deberían mostrar que fueron construidas por Bird
y no Animal. Para ello, puedes establecer manualmente la propiedad del constructor de
Bird al objeto Bird:
Bird.prototype.constructor = Bird;
duck.constructor
Añade métodos después de la herencia
Una función constructor que hereda su objeto prototype de una función constructor
"supertype" puede seguir teniendo sus propios métodos además de los heredados.
Por ejemplo, Bird es un constructor que hereda su prototype de Animal:
function Animal() { }
Animal.prototype.eat = function() {
console.log("nom nom nom");
};
function Bird() { }
Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Bird;
Además de lo que se hereda de Animal, se quiere añadir un comportamiento que sea
exclusivo de los objetos Bird. Aquí, Bird obtendrá una función fly(). Las funciones se
añaden al prototype de Bird's del mismo modo que cualquier función constructor:

Bird.prototype.fly = function() {
console.log("I'm flying!");
};
Ahora las instancias de Bird tendrán métodos tanto eat() como fly():
let duck = new Bird();
duck.eat();
duck.fly();
duck.eat() mostrará la cadena nom nom nom en consola, y duck.fly() mostrará la cadena
I'm flying!.

Sobrescribir métodos heredados

En lecciones anteriores, aprendiste que un objeto puede heredar su comportamiento
(métodos) de otro objeto al referenciar su prototype:
ChildObject.prototype = Object.create(ParentObject.prototype);
Luego, el ChildObject recibió sus propios métodos al encadenarlos a su prototype:
ChildObject.prototype.methodName = function() {...};
Es posible sobreescribir un método heredado. Se hace de la misma manera: agregando
un método a ChildObject.prototype usando el mismo nombre de método que el que se va
a sobrescribir. Aquí hay un ejemplo de Bird sobrescribiendo el método eat() heredado de
Animal:
function Animal() { }
Animal.prototype.eat = function() {
return "nom nom nom";
};
function Bird() { }
Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.eat = function() {
return "peck peck peck";
};
Si tienes una instancia de let duck = new Bird(); y llamas a duck.eat(), así es como
JavaScript busca el método en la cadena prototype de duck:
duck => ¿Está eat() definido aquí? No.
Bird => ¿Está eat() definido aquí? => Sí. Ejecútala y detén la búsqueda.
Animal => eat() también está definido, pero JavaScript dejó de buscar antes de llegar a
este nivel.
Object => JavaScript dejó de buscar antes de llegar a este nivel.

Utiliza un "mixin" para añadir un comportamiento común entre objetos no

relacionados
Como ya has visto, el comportamiento se comparte mediante una herencia. Sin embargo,
hay algunos casos en los que la herencia no es la mejor opción. La herencia no funciona
bien con objetos que no están relacionados como Bird y Airplane. Ambos pueden volar
pero un Bird no es un tipo de Airplane y viceversa.
Para objetos no relacionados es mejor utilizar mixins. Un "mixin" permite a otros objetos
utilizar una colección de funciones.
let flyMixin = function(obj) {
obj.fly = function() {
console.log("Flying, wooosh!");
}
};
El flyMixin toma a cualquier objeto y le da el método fly.
let bird = {
name: "Donald",
numLegs: 2
};
let plane = {
model: "777",
numPassengers: 524
};

flyMixin(bird);
flyMixin(plane);
Aquí bird y plane son pasados a flyMixin el cual después asigna la función fly a cada
objeto. Ahora bird y plane pueden volar:
bird.fly();
plane.fly();
La consola mostraría la cadena Flying, wooosh! dos veces, una por cada llamada a .fly().
Ten en cuenta cómo el mixin permite que el mismo método fly sea reutilizado por los
objetos bird y plane los cuales no están relacionados.

Utiliza closures para evitar que las propiedades de un objeto se puedan modificar
desde fuera
En el desafío anterior, bird tenía una propiedad pública name. Se considera pública
porque se puede acceder y cambiar fuera de la definición de bird.
bird.name = "Duffy";
Por lo tanto, cualquier parte de tu código puede cambiar fácilmente el nombre "name" de
bird a cualquier valor. Piensa en cosas como contraseñas y cuentas bancarias que se
pueden cambiar fácilmente por cualquier parte de tu base de código. Eso podría crear
muchos problemas.
La forma más sencilla de hacer privada esta propiedad pública es creando una variable
dentro de la función constructora. Esto cambia el alcance de esa variable para que esté
dentro de la función constructora versus disponible globalmente. De este modo, la
variable solo puede ser accesible y cambiable por métodos que también estén dentro de
la función constructora.
function Bird() {
let hatchedEgg = 10;
this.getHatchedEggCount = function() {
return hatchedEgg;
};
}
let ducky = new Bird();
ducky.getHatchedEggCount();
Aquí getHatchedEggCount es un método privilegiado, porque tiene acceso a la variable
privada hatchedEgg. Esto es posible porque hatchedEgg está declarada en el mismo
contexto que getHatchedEggCount. En JavaScript, una función siempre tiene acceso al
contexto en el que se creó. A esto se le llama closure.

Comprende las funciones que son invocadas inmediatamente (IIFE)

Un patrón común en JavaScript es la ejecución de una función apenas declarada:
(function () {
console.log("Chirp, chirp!");
})();
Esta es una expresión de función anónima que se ejecuta de inmediato y produce Chirp,
chirp! inmediatamente.
Ten en cuenta que la función no tiene nombre y que no se almacena en un valor. Los dos
paréntesis () al final de la expresión de la función hacen que se ejecute o invoque de
forma inmediata. Este patrón se conoce como una expresión de función inmediatamente
invocada o IIFE (por sus siglas en inglés).

Utiliza una IIFE para crear un módulo

Una expresión de función inmediatamente invocada (IIFE) se utiliza a menudo para
agrupar la funcionalidad relacionada en un solo objeto o módulo. Por ejemplo, en el
desafío anterior se definieron dos "mixins":
function glideMixin(obj) {
obj.glide = function() {
console.log("Gliding on the water");
};
}
function flyMixin(obj) {
obj.fly = function() {
console.log("Flying, wooosh!");
};
}
Podemos agrupar estos mixins en un módulo:

let motionModule = (function () {

return {
glideMixin: function(obj) {
obj.glide = function() {
console.log("Gliding on the water");
};
},
flyMixin: function(obj) {
obj.fly = function() {
console.log("Flying, wooosh!");
};
}
}
})();
Ten en cuenta que has invocado una IIFE que devuelve un objeto motionModule. El
objeto devuelto contiene todos los comportamientos de los mixins como propiedades del
objeto. La ventaja del patrón del módulo es que todos los comportamientos de movimiento
pueden ser empaquetados en un solo objeto que puede ser usado por otras partes del
código. Así se debe utilizar:
motionModule.glideMixin(duck);
duck.glide();
Functional Programming
Functional Programming is another popular approach to software development. In
Functional Programming, code is organized into smaller, basic functions that can be
combined to build complex programs.
In this course, you'll learn the core concepts of Functional Programming including pure
functions, how to avoid mutations, and how to write cleaner code with methods like .map()
and .filter().
Front End Development Libraries
Bootstrap
Bootstrap is a front end framework used to design responsive web pages and applications.
It takes a mobile-first approach to web development, and includes pre-built CSS styles and
classes, plus some JavaScript functionality.
In this course, you'll learn how to build responsive websites with Bootstrap, and use its
included classes to style buttons, images, forms, navigation, and other common elements.

Utiliza diseño adaptable con contenedores de fluido de Bootstrap

En la seccion de HTML5 y CSS de freeCodeCamp construimos un 'Cat Photo App'. Ahora
volvamos a él. Esta vez, vamos a estilizarlo utilizando el popular framework CSS
adaptable de Bootstrap.
Bootstrap averiguará cuan ancha es tu pantalla y responderá redimensionando tus
elementos HTML - de ahí el nombre diseño adaptable.
Con diseño adaptable, no hay necesidad de diseñar una versión móvil de tu sitio web. Se
verá bien en dispositivos con pantallas de cualquier ancho.
Puedes añadir Bootstrap a cualquier aplicación agregando el siguiente código en la parte
superior de tu HTML:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"/>
En este caso, ya lo hemos añadido por ti en esta página, tras bambalinas. Ten en cuenta
que para cerrar la etiqueta link puedes utilizar > o />.
Para comenzar, debemos anidar todo nuestro HTML (menos la etiqueta link y el elemento
style) en un elemento div con la clase container-fluid.
Haz imágenes adaptables a dispositivos móviles
Primero, agrega una nueva imagen debajo de la existente. Establece su atributo src a
https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg.
Sería genial si esta imagen pudiera tener exactamente el ancho de la pantalla de nuestro
teléfono.
Afortunadamente, con Bootstrap, todo lo que necesitamos hacer es agregar la clase img-
responsive a nuestra imagen. Hazlo, y la imagen debería caber perfectamente en el
ancho de tu página.
Centrar texto con Bootstrap
Ahora que estamos usando Bootstrap, podemos centrar nuestro encabezado para que
luzca mejor. Lo único que necesitamos hacer es agregar la clase text-center a nuestro
elemento h2.
Recuerda que puedes agregar varias clases al mismo elemento separando cada una de
ellas con un espacio, de la siguiente manera:
<h2 class="red-text text-center">your text</h2>
Crea un botón de Bootstrap
Bootstrap tiene sus propios estilos para los elementos button, que se ven mucho mejor
que los de HTML puro.
Crea un nuevo elemento button debajo de la foto grande de tu gatito. Dale las clases btn y
btn-default, así como el texto de Like.

Crea un botón Bootstrap como elemento de bloque

Normalmente, tus elementos button con las clases btn y btn-default son tan anchos como
el texto que los contiene. Por ejemplo:
<button class="btn btn-default">Submit</button>
Este botón será tan ancho como la palabra Submit.
Al convertirlos en elementos de bloque con la clase adicional btn-block, tu botón se
estirará para llenar completamente el espacio horizontal de tu página y cualquier elemento
siguiente se posicionará en una "nueva línea" debajo del bloque.
<button class="btn btn-default btn-block">Submit</button>
Este botón tomará el 100% del ancho disponible.
Ten en cuenta que estos botones aún necesitan la clase btn.
Agrega la clase de Bootstrap btn-block a tu botón de Bootstrap.

Prueba el arcoíris de colores del botón de Bootstrap

La clase btn-primary es el color principal que usarás en tu aplicación. Es útil para resaltar
acciones que deseas que tu usuario realice.
Reemplaza la clase btn-default de Bootstrap por btn-primary en tu botón.
Ten en cuenta que este botón aún necesitará las clases btn y btn-block.
Llama a acciones opcionales con btn-info
Bootstrap viene con varios colores predefinidos para los botones. La clase btn-info se
utiliza para llamar la atención sobre las acciones opcionales que el usuario puede realizar.
Crea un nuevo botón de Bootstrap a nivel de bloque debajo de tu botón de Like con el
texto Info, y agrégale la clase de Boostrap btn-info.
Ten en cuenta que estos botones todavía necesitan las clases btn y btn-block.

Advierte a tus usuarios de una acción peligrosa con btn-danger

Bootstrap viene con varios colores predefinidos para botones. La clase btn-danger es el
color del botón que usarás para notificar a los usuarios que el botón realiza una acción
destructiva, como eliminar la foto de un gato.
Crea un botón con el texto Delete y dale la clase btn-danger.
Ten en cuenta que estos botones todavía necesitan las clases btn y btn-block.

Utiliza la cuadrilla (grid) Bootstrap para poner elemento de lado a lado

Bootstrap utiliza un sistema adaptable de cuadrilla de 12 columnas, el cual hace que sea
fácil poner elementos en dos filas y especificar la anchura relativa de cada elemento. La
mayoría de las clases de Bootstrap pueden ser aplicadas a un elemento div.
Bootstrap tiene diferentes atributos de ancho de columna que usa dependiendo cuan
ancha es la pantalla del usuario. Por ejemplo, los teléfonos tienen pantallas más angostas
y las laptops tienen pantallas más anchas.
Tomemos por ejemplo la clase de Bootstrap col-md-*. Aquí, md significa mediano y * es
un número que especifica cuántas columnas de ancho deben tener los elementos. En
este caso, el ancho de columna de un elemento en una pantalla de tamaño mediano,
como una laptop, está siendo especificado.
En el 'Cat Photo App' que estamos creando, vamos a usar col-xs-*, donde xs significa
extra pequeño ("extra small" como una pantalla de teléfono), y * es el número de
columnas que va a tomar el elemento en anchura.
Pon los botones Like, Info y Delete lado a lado, anidando los tres dentro de un elemento
<div class="row">, luego, cada uno de ellos dentro de un elemento <div class="col-xs-4">.
La clase row es aplicada a un div, y los botones mismos pueden ser anidados dentro de
él.

Adiós CSS Personalizado. Hola Bootstrap

Podemos limpiar nuestro código y hacer que nuestro 'Cat Photo App' se vea más
convencional utilizando los estilos incorporados de Bootstrap en lugar de los estilos
personalizados que creamos antes.
No te preocupes - habrá mucho tiempo para personalizar nuestro CSS después.
Borra las declaraciones de CSS .red-text, p y .smaller-image de tu elemento style para
que las únicas declaraciones en tu elemento style sean h2 y thick-green-border.
Luego, borra el elemento p que contiene un enlace muerto. Después, borra la clase red-
text de tu elemento h2 y reemplázalo con la clase de Bootstrap text-primary.
Finalmente, remueve la clase smaller-image de tu primer elemento img y reemplázalo con
la clase img-responsive.

Usa un span para apuntar a elementos en línea

Puedes usar spans para crear elementos en línea. ¿Recuerdas cuando usamos la clase
btn-block para hacer que el botón ocupe toda la fila completa?
Eso ilustra la diferencia entre un elemento "inline" y un elemento "block".
Usando el elemento en línea span, puedes alinear varios elementos, e incluso estilizar
diferentes partes de la misma línea de manera diferente.
Usando un elemento span, anida la palabra love dentro del elemento p que actualmente
tiene el texto Things cats love. Luego dale a span la clase text-danger para cambiar el
texto a rojo.
Así es como harías esto para el elemento p que tiene el texto Top 3 things cats hate:
<p>Top 3 things cats <span class="text-danger">hate:</span></p>

Crea un título personalizado

Haremos un encabezado simple para nuestro 'Cat Photo App' colocando el título y la
imagen del gato relajándose en la misma fila.
Recuerda que Bootstrap utiliza un sistema de cuadrícula adaptable, el cual hace más fácil
poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de
las clases de Bootstrap pueden ser aplicadas a un elemento div.
Anida tu primera imagen y tu elemento h2 dentro de un solo elemento <div class="row">.
Anida tu elemento h2 dentro de <div class="col-xs-8"> y tu imagen en un <div class="col-
xs-4"> para que estén en la misma línea.
¿Observas cómo la imagen ahora tiene el tamaño adecuado para ajustarse al texto?

Agrega iconos Font Awesome a nuestros botones

Font Awesome es una conveniente librería de iconos. Estos iconos pueden ser fuentes
web o gráficos vectoriales. Estos iconos son tratados como fuentes. Puedes especificar su
tamaño usando píxeles, y ellos asumirán el tamaño de fuente de su elemento HTML
padre.
Puedes incluir Font Awesome en cualquier aplicación agregando el siguiente código al
principio de tu HTML:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
En este caso, ya lo hemos añadido por ti en esta página tras bambalinas.
El elemento i fue originalmente usado para crear elementos itálicos, pero ahora es
comúnmente usado para iconos. Puedes añadir las clases de Font Awesome al elemento
i para convertirlo en un icono, por ejemplo:
<i class="fas fa-info-circle"></i>
Ten en cuenta que el elemento span también es aceptable para usar con iconos.
Usa Font Awesome para añadir un icono thumbs-up a tu botón de "Like", dándole un
elemento i con las clases fas y fa-thumbs-up. Asegúrate de dejar el texto Like junto al
icono.

Agrega iconos Font Awesome a todos nuestros botones

Font Awesome es una conveniente librería de iconos. Estos pueden ser fuentes web o
gráficos vectoriales. Estos iconos son tratados como fuentes. Puedes especificar su
tamaño usando píxeles, y ellos asumirán el tamaño de fuente de su elemento HTML
padre.
Utiliza Font Awesome para agregar un icono info-circle a su botón info y un icono trash al
botón borrar.
**Nota:**El elemento span es una alternativa aceptable al elemento i para las direcciones
a continuación.

Botones de radio con estilo adaptable

¡Puedes utilizar también las clases col-xs-* de Bootstrap en elementos form! De esta
forma nuestros botones de radio se distribuirán uniformemente a través de la página, sin
importar el ancho de la resolución de pantalla.
Anida tus dos botones de radio dentro de un elemento <div class="row">. Luego, anida
cada uno de ellos dentro de un elemento <div class="col-xs-6">.
Nota: Como recordatorio, los botones de radio son elementos input con el valor de tipo
radio.

Casillas de verificación con estilo adaptativo

Dado que las clases de Bootstrap col-xs-* son aplicables a todos los elementos form,
¡también puedes usarlas para tus casillas de verificación! De esta manera, las casillas de
verificación se distribuirán uniformemente por toda la página, independientemente de la
amplitud de la resolución de la pantalla.
Anida las tres casillas de verificación en un elemento <div class="row">. Luego, anida
cada uno de ellos en un elemento <div class="col-xs-4">.

Estiliza entradas de texto como controles de formulario

Puedes agregar el icono fa-paper-plane de Font Awesome agregando <i class="fa fa-
paper-plane"></i> dentro de tu elemento button de envío.
Dale a tu campo de entrada de texto la clase form-control. Dale a tu botón de envío de
formulario las clases btn btn-primary. También asígnale a este botón el icono de Font
Awesome fa-paper-plane.
Todos los elementos textuales <input>, <textarea>, y <select> con la clase .form-control
tienen un ancho de 100%.

Alinea elementos de formulario de manera adaptable con Bootstrap

Ahora coloquemos tus input de formulario y tu button de envío en la misma línea. Vamos
a hacer esto de la misma forma que antes: Usando un elemento div con la clase row, y
otros elementos div dentro de este usando la clase col-xs-*.
Coloca juntos tu campo de texto input y tu button de envío dentro de un div con la clase
row. Anida tu campo de texto input dentro de un div con la clase col-xs-7. Anida tu button
de envío del formulario dentro de un div con la clase col-xs-5.
Este es el ultima desafio que vamos a hacer para nuestro 'Cat Photo App' por ahora.
¡Esperamos que hayas disfrutado aprendiendo Font Awesome, Bootstrap y diseño
adaptativo!

Crea un encabezado de Bootstrap

Ahora construyamos algo desde cero para practicar nuestras habilidades de HTML, CSS
y Bootstrap.
Construiremos una zona de juegos de jQuery, que pronto utilizaremos en nuestros
desafíos de jQuery.
Para empezar, crea un elemento h3, con el texto jQuery Playground.
Colorea tu elemento h3 con la clase text-primary y céntralo con la clase text-center de
Bootstrap.

Aloja nuestra página dentro de un container-fluid div de Bootstrap

Ahora vamos a asegurarnos que todo el contenido de tu página sea adaptable para
dispositivos móviles.
Anidemos tu elemento h3 dentro de un elemento div con la clase container-fluid.

Crea una fila Bootstrap

Ahora crearemos una fila Bootstrap para nuestros elementos en línea.
Crea un elemento div debajo de la etiqueta h3, con la clase row.

Divide tu fila de Bootstrap

Ahora que tenemos una fila de Bootstrap, vamos a dividirla en dos columnas para
hospedar nuestros elementos.
Crea dos elementos div dentro de tu fila, ambos con la clase col-xs-6.

Crea Bootstrap wells

Bootstrap tiene una clase llamada well que puede crear una sensación visual de
profundidad en tus columnas.
Anida un elemento div con la clase well dentro de cada uno de tus elementos col-xs-6 div.

Agrega elementos dentro de tus recursos de Bootstrap

Ahora estamos a varios elementos div de profundidad en cada columna de nuestra fila.
Esto es lo más profundo que necesitaremos ir. Ahora podemos agregar nuestros
elementos button.
Anida tres elementos button dentro de cada uno de los elementos div que posean una
clase well.

Aplica el estilo predeterminado de botón de estilo de Bootstrap

Bootstrap tiene otra clase de botón llamada btn-default.
Aplica las clases btn y btn-default a cada uno de tus elementos button.
Crear una clase para seleccionar con selectores jQuery
No es necesario que todas las clases tengan su correspondiente CSS. A veces creamos
clases sólo con el propósito de seleccionar aquellos elementos más fácilmente utilizando
jQuery.
Dale a cada uno de tus elementos button la clase target.

Añade atributos de "id" a elementos de Bootstrap

Recuerda que además de los atributos de clase, puedes darle a cada uno de tus
elementos un atributo id.
Cada "id" debe ser único en un elemento específico y utilizarse una sola vez por página.
Vamos a dar un "id" único a cada uno de nuestros elementos div con la clase well.
Recuerda que puedes dar un "id" a un elemento de esta manera:
<div class="well" id="center-well">
Agrega el "id" left-well al elemento de la izquierda con la clase "well". Agrega el "id" right-
well al elemento de la derecha con la clase "well".

Etiqueta wells de Bootstrap

Para mayor claridad, vamos a etiquetar nuestros dos wells con sus ids.
Sobre tu "left-well", dentro de su elemento div col-xs-6, agrega un elemento h4 con el
texto #left-well.
Sobre tu "right-well", dentro de su elemento div col-xs-6 agrega un elemento h4 con el
texto #right-well.

Dale un id único a cada elemento

También vamos a querer poder usar jQuery para seleccionar cada botón por su id único.
Dale a cada uno de tus botones un id único, empezando con target1 y finalizando con
target6.
Asegúrate de que target1 a target3 se encuentren en #left-well y target4 a target6 se
encuentren en #right-well.

Etiqueta botones de Bootstrap

Así como etiquetamos nuestros "wells", también queremos etiquetar nuestros botones.
Dale a cada uno de tus elementos button, texto que corresponde a su id.

Usa comentarios para aclarar el código

Cuando empecemos a usar jQuery, vamos a modificar elementos HTML sin necesidad de
cambiarlos en HTML.

Vamos a asegurarnos de que todos sepan que no deben modificar nada de este código
directamente.
Recuerda que puedes empezar un comentario con <!-- y terminarlo con -->
Agrega un comentario en la parte superior de tu HTML que diga Code below this line
should not be changed

jQuery
jQuery is one of the most widely used JavaScript libraries in the world.
In 2006 when it was released, all major browsers handled JavaScript slightly differently.
jQuery simplified the process of writing client-side JavaScript, and also ensured that your
code worked the same way in all browsers.
In this course, you'll learn how to use jQuery to select, remove, clone, and modify different
elements on the page.

Aprende como funciona la etiqueta script y la función "document ready"

Ahora estamos listos para aprender jQuery, la herramienta de JavaScript más popular de
todos los tiempos.
Antes de empezar a usar jQuery, necesitamos agregar algunas cosas a nuestro HTML.
Primero, agrega un elemento script en la parte superior de tu página. Asegúrate de
cerrarlo en la siguiente línea.
Tu navegador ejecutará cualquier JavaScript dentro de un elemento script, incluyendo
jQuery.
Dentro de tu elemento script, agrega este código: $(document).ready(function() { a tu
script. Luego ciérralo en la siguiente línea (todavía dentro de tu elemento script) con: });
Aprenderemos más sobre functions más tarde. Lo importante a saber es que el código
que pongas dentro de esta function (función) se ejecutará tan pronto como tu navegador
haya cargado tu página.
Esto es importante porque sin tu document ready function, tu código podría ejecutarse
antes de que se procese tu HTML, lo que causaría errores.
Apunta a elementos HTML con selectores usando jQuery
Ahora tenemos una función document ready.

Ahora vamos a escribir nuestra primera declaración de jQuery. Todas las funciones de
jQuery comienzan con un $, usualmente conocido como un operador de signo de dólares.
jQuery a menudo selecciona un elemento HTML con un selector, y luego le hace algo a
ese elemento.
Por ejemplo, hagamos que todos tus elementos button reboten. Simplemente agrega este
código dentro de tu función document ready:
$("button").addClass("animated bounce");
Ten en cuenta que ya hemos incluido tanto la librería jQuery como la librería Animate.css
en segundo plano para que puedas usarlos en el editor. Así que estás usando jQuery para
aplicar la clase Animate.css bounce a tus elementos button.

Apunta a elementos por clase usando jQuery

¿Ves cómo hemos hecho que todos tus elementos button reboten? Los seleccionamos
con $("button"), luego agregamos algo de clases CSS a ellos con .addClass("animated
bounce");.
Acabas de usar la función .addClass() de jQuery, que te permite agregar clases a los
elementos.
Primero, apuntemos tus elementos div con la clase well usando el selector $(".well").
Ten en cuenta que, al igual que con las declaraciones CSS, escribes un . antes del
nombre de la clase.
Luego usa la función .addClass() de jQuery para agregar las clases animated y shake.
Por ejemplo, puedes hacer que todos los elementos con la clase text-primary se agiten
agregando lo siguiente a tu función document ready function:
$(".text-primary").addClass("animated shake");

Apunta a elementos por id usando jQuery

También puedes apuntar a elementos por su atributo id.
Primero apunta a tu elemento button con el id target3 usando el selector $("#target3").
Ten en cuenta que, al igual que con las declaraciones CSS, escribes un # antes del
nombre del id.
Luego usa la función .addClass() de jQuery para agregar las clases animated y fadeOut.
Así es como harás que el elemento button con el id target6 se desvanezca:
$("#target6").addClass("animated fadeOut");

Elimina tus funciones jQuery

Estas animaciones fueron geniales al principio, pero ahora distraen un poco.
Elimina las tres funciones de jQuery que están dentro de tu document ready function, pero
deja intacta tu función document ready function en sí.

Apunta al mismo elemento con múltiples selectores jQuery

Ahora conoces tres maneras de seleccionar elementos: por tipo: $("button"), por clase: $
(".btn"), y por id $("#target1").
Aunque es posible agregar múltiples clases en una sola llamada .addClass(), vamos a
agregarlos al mismo elemento de tres maneras diferentes.
Usando .addClass(), agrega solo una clase a la vez al mismo elemento, de tres maneras
diferentes:
Agrega la clase animated a todos los elementos con el tipo button.
Agrega la clase shake a todos los botones con la clase .btn.
Agrega la clase btn-primary al botón con id #target1.
Nota: Solo debes apuntar a un elemento y agregar solo una clase a la vez. En total, tus
tres selectores individuales terminarán agregando las tres clases shake, animated, y btn-
primary a #target1.

Elimina clases de un elemento con jQuery

De la misma manera en que puedes agregar clases a un elemento con la función
addClass() de jQuery, puedes eliminarlos con la función removeClass() de jQuery.
Así es como lo harías para un botón específico:
$("#target2").removeClass("btn-default");
Eliminemos la clase btn-default de todos nuestros elementos button.

Cambia el CSS de un elemento usando jQuery

También podemos cambiar el CSS de un elemento HTML utilizando directamente jQuery.
jQuery tiene una función llamada .css() que te permite cambiar el CSS de un elemento.
Así es como cambiaríamos su color a azul:
$("#target1").css("color", "blue");
Esto es ligeramente diferente a una declaración CSS normal, porque la propiedad CSS y
su valor están entre comillas y separados con coma en lugar de con dos puntos.
Elimina tus selectores de jQuery, dejando document ready function vacío.
Selecciona target1 y cambia su color a rojo.

Deshabilita un elemento usando jQuery

También puedes cambiar las propiedades que no son CSS de tus elementos HTML con
jQuery. Por ejemplo, puedes desactivar botones.
Cuando deshabilitas un botón, se mostrará en gris y no se podrá hacer clic sobre este.
jQuery tiene una función llamada .prop() que te permite ajustar las propiedades de los
elementos.
Así es como deshabilitarías todos los botones:
$("button").prop("disabled", true);
Deshabilita solo el botón target1.

Cambia el texto dentro de un elemento usando jQuery

Con jQuery, puedes cambiar el texto entre las etiquetas de abertura y cierre de un
elemento. Puedes incluso cambiar el código HTML.
jQuery tiene una función llamada .html() que te permite agregar etiquetas HTML y texto
dentro de un elemento. Cualquier contenido anterior dentro del elemento será
completamente reemplazado con el contenido que proporciones usando esta función.
Así es como reescribirías y enfatizarías el texto de nuestro título:
$("h3").html("<em>jQuery Playground</em>");
jQuery también tiene una función similar llamada .text() que solamente altera el texto sin
agregar etiquetas. En otras palabras, esta función no evaluará ninguna etiqueta HTML
que le pasemos, pero en cambio, la tratará como el texto por el que quieres reemplazar el
contenido existente.
Cambia el botón con id target4 enfatizando su texto.
Vea nuestro artículo de noticias para <em> aprender la diferencia entre <i> y <em> y sus
usos.
Ten en cuenta que mientras la etiqueta <i> tradicionalmente se usaba para enfatizar texto,
fue adaptada para ser usada como etiqueta para iconos. La etiqueta <em> ahora es
ampliamente aceptada como la etiqueta de énfasis. Cualquiera de las dos servirá para
este desafío.

Remueve un elemento usando jQuery

Ahora vamos a eliminar un elemento HTML de su página utilizando jQuery.
jQuery tiene una función llamada .remove() que eliminará completamente un elemento
HTML
Remueve el elemento #target4 de la página utilizando la función .remove().

Usa appendTo para mover elementos con jQuery

Ahora intentemos mover elementos de un div a otro.
jQuery tiene una función llamada appendTo() que te permite seleccionar elementos HTML
y agregarlos a otro elemento.
Por ejemplo, si quisiéramos mover target4 desde nuestro "right well" a nuestro "left well",
usaríamos:
$("#target4").appendTo("#left-well");
Mueve tu elemento target2 desde tu left-well a tu right-well.

Clona un elemento usando jQuery

Además de mover elementos, también puedes copiarlos de un lugar a otro.
jQuery tiene una función llamada clone() que hace una copia de un elemento.
Por ejemplo, si quisiéramos copiar target2 de nuestro left-well a nuestro right-well,
usaríamos:
$("#target2").clone().appendTo("#right-well");
¿Notaste que esto implica pegar dos funciones jQuery juntas? Esto es llamado function
chaining (encadenamiento de funciones) y es una forma conveniente de lograr cosas con
jQuery.
Clona tu elemento target5 y agrégalo a tu left-well.

Apunta al padre de un elemento usando jQuery

Cada elemento HTML tiene un elemento parent (padre) del cual inherits (hereda)
propiedades.
Por ejemplo, tu elemento jQuery Playground h3 tiene el elemento padre de <div
class="container-fluid">, que en sí mismo tiene el padre body.
jQuery tiene una función llamada parent() que te permite acceder al padre del elemento
que hayas seleccionado.
Aquí hay un ejemplo de cómo usarías la función parent() si quieres dar al elemento padre
del elemento left-well un color de fondo azul:
$("#left-well").parent().css("background-color", "blue")
Dale al padre del elemento #target1 un color de fondo rojo.

Apunta al hijo de un elemento usando jQuery

Cuando los elementos HTML se colocan un nivel por debajo de otro, se denominan hijos
de ese elemento. Por ejemplo, los elementos botón en este desafío con el texto #target1,
#target2, y #target3 son todos hijos del elemento <div class="well" id="left-well">.
jQuery tiene una función llamada children() que te permite acceder a los hijos del
elemento que hayas seleccionado.
Aquí hay un ejemplo de cómo usarías la función children() para dar a los hijos de tu
elemento left-well el color blue:
$("#left-well").children().css("color", "blue")
Dale a todos los hijos de tu elemento right-well el color naranja.

Apunta a un hijo específico de un elemento usando jQuery

Has visto por qué los atributos id son muy convenientes para apuntar con los selectores
de jQuery. Pero no siempre tendrás tan buenos id's con los que trabajar.
Afortunadamente, jQuery tiene algunos otros trucos para apuntar a los elementos
correctos.
jQuery usa selectores de CSS para apuntar elementos. El selector target:nth-child(n) de
CSS, te permite seleccionar todos los enésimos elementos con el tipo de elemento o la
clase apuntada.
Así es como le darías al tercer elemento en cada "well" la clase de rebote:
$(".target:nth-child(3)").addClass("animated bounce");
Haz que el segundo niño en cada uno de sus elementos de "well" rebote. Debes
seleccionar los hijos de los elementos con la clase target.

Apunta a elementos pares utilizando jQuery

También puedes apuntar a elementos basado en sus posiciones, usando los
selectores :odd o :even.
Ten en cuenta que jQuery es indexado desde el cero, lo que significa que el primer
elemento de una selección tiene la posición 0. Esto puede ser un poco confuso, ya que
contra-intuitivamente, :odd selecciona el segundo elemento (posición 1), cuarto elemento
(posición 3), y así sucesivamente.
Así es como apuntas a todos los elementos impares con la clase target y les das clases:
$(".target:odd").addClass("animated shake");
Intenta seleccionar todos los elementos pares target y darle las clases de animated y
shake. Recuerda que even se refiere a la posición de los elementos con un sistema de
indexado desde cero en mente.

Usa jQuery para modificar la página completa

Hemos terminado de jugar con nuestra área de juego de jQuery. ¡Vamos a derribarlo!
jQuery también puede seleccionar al elemento body.
Así es como haríamos que el cuerpo entero se desvaneciera: $
("body").addClass("animated fadeOut");
Pero hagamos algo más dramático. Agrega las clases animated y hinge a tu elemento
body.

SASS
Sass, or "Syntactically Awesome StyleSheets", is a language extension of CSS. It adds
features that aren't available in basic CSS, which make it easier for you to simplify and
maintain the style sheets for your projects.
In this Sass course, you'll learn how to store data in variables, nest CSS, create reusable
styles with mixins, add logic and loops to your styles, and more.

Almacena datos con variables Sass

Una característica de Sass que es diferente de CSS es que utiliza variables. Se declaran
y establecen para almacenar datos, de forma similar a JavaScript.
En JavaScript, las variables se definen mediante las palabras clave let y const. En Sass,
las variables comienzan con un $ seguido del nombre de la variable.
Aquí hay un par de ejemplos:
$main-fonts: Arial, sans-serif;
$headings-color: green;
Y para usar las variables:
h1 {
font-family: $main-fonts;
color: $headings-color;
}
Un ejemplo en el que las variables son útiles es cuando un número de elementos tiene
que ser del mismo color. Si se cambia ese color, el único lugar para editar el código es el
valor de la variable.
Crea una variable $text-color y asígnala como red. Luego, cambia el valor de la propiedad
color para el .blog-post y h2 a la variable $text-color.

Anida CSS con Sass

Sass permite anidar las reglas CSS, que es una forma útil de organizar una hoja de estilo.
Normalmente, cada elemento está dirigido a una línea diferente para darle estilo, así:
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
Para un proyecto grande, el archivo CSS tendrá muchas líneas y reglas. Aquí es donde la
anidación puede ayudar a organizar tu código colocando reglas de estilo hijo dentro de los
respectivos elementos padres:
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
 }
}
}
Utiliza la técnica de anidación mostrada anteriormente para reorganizar las reglas CSS
para ambos hijos del elemento .blog-post. Para fines de prueba, el h1 debe ir antes del
elemento p.
Crea CSS reutilizable con Mixins
En Sass, un mixin es un grupo de declaraciones de CSS que pueden reutilizarse a través
de la hoja de estilo.
Las nuevas funciones de CSS tardan en ser adoptadas por completo y estar listas para su
uso en todos los navegadores. A medida que se agregan funciones a los navegadores,
las reglas CSS que las utilizan pueden necesitar prefijos de proveedor. Consideremos
box-shadow:
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
Es mucho teclear para reescribir esta regla para todos los elementos que tienen un box-
shadow, o para cambiar cada valor para probar diferentes efectos. Mixins son como
funciones para CSS. Aquí está cómo escribir una:
@mixin box-shadow($x, $y, $blur, $c){
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
La definición empieza con @mixin seguido de un nombre personalizado. Los parámetros (
$x, $y, $blur, y $c en el ejemplo anterior) son opcionales. Ahora cada vez que se necesite
una regla box-shadow, una sola línea llamando al mixin reemplaza el tener que escribir
todos los prefijos del proveedor. Se llama a un mixin con la directiva @include:
div {
@include box-shadow(0px, 0px, 4px, #fff);
}
Escribe un mixin para border-radius y dale un parámetro $radius. Debe utilizar todos los
prefijos de proveedor del ejemplo. Luego usa el mixin border-radius para dar al elemento
#awesome un border radius de 15px.

Usa @if y @else para agregar lógica a tus estilos

La directiva @if en Sass es útil para probar un caso específico: funciona igual que la
sentencia if en JavaScript.
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
Y al igual que en JavaScript, @else if y @else prueban más condiciones:
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
Crea un mixin llamado border-stroke que toma un parámetro $val. El mixin debe
comprobar las siguientes condiciones utilizando @if, @else if, y @else:
light - 1px solid black
medium - 3px solid black
heavy - 6px solid black
Si $val no es light, medium, o heavy, el borde debe establecerse en none.

Usa @for para crear un bucle Sass

La directiva @for agrega estilos en un bucle, muy similar a un bucle for en JavaScript.
@for se utiliza de dos maneras: "de principio hasta el fin" o "de principio a fin". La principal
diferencia es que el "de principio a fin" excluye el número final como parte de la cuenta, y
"de principio hasta el fin" incluye el número final como parte de la cuenta.
Aquí hay un ejemplo de principio hasta el fin:
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
La parte #{$i} es la sintaxis para combinar una variable (i) con texto para hacer una
cadena. Cuando el archivo Sass se convierte en CSS, tiene este aspecto:
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
...
.col-12 {
width: 100%;
}
Esta es una manera poderosa de crear un diseño de cuadrícula (grid). Ahora tienes doce
opciones de ancho de columna disponibles como clases CSS.
Escribe una directiva @for que tome una variable $j que vaya de 1 a 6.
Debes crear 5 clases llamadas .text-1 a .text-5 donde cada una tiene un font-size
establecido en 15px multiplicado por el índice.
Usa @each para asignar elementos en una lista
El último desafío mostró cómo la directiva @for utiliza un valor inicial y final para hacer un
bucle un determinado número de veces. Sass también ofrece la directiva @each que hace
un bucle sobre cada elemento de una lista o mapa. En cada iteración, la variable se
asigna al valor actual de la lista o del mapa.
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
Un mapa tiene una sintaxis ligeramente diferente. He aquí un ejemplo:
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
Ten en cuenta que la variable $key es necesaria para hacer referencia a las claves en el
mapa. De lo contrario, el CSS compilado tendría color1, color2... en él. Los dos ejemplos
anteriores se convierten en el siguiente CSS:
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
Escribe una directiva @each que recorra una lista: blue, black, red y asigna cada variable
a una clase .color-bg, donde la parte color cambia para cada elemento. Cada clase debe
establecer el background-color al respectivo color.

Aplica un estilo hasta que se cumpla una condición con @while

La directiva @while es una opción con funcionalidad similar al bucle while de JavaScript.
Crea reglas CSS hasta que se cumpla una condición.
El desafío @for dio un ejemplo para crear un sistema de cuadrícula (grid) simple. Esto
también puede funcionar con @while.
$x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
Primero, define una variable $x y establécela a 1. A continuación, utiliza la directiva
@while para crear el sistema de cuadrícula while $x sea menor que 13. Después de
configurar la regla CSS para width, $x se incrementa por 1 para evitar un bucle infinito.
Usa @while para crear una serie de clases con diferentes font-sizes.
Debe haber 5 clases diferentes desde text-1 hasta text-5. Luego ajusta font-size a 15px
multiplicado por el número de índice actual. ¡Asegúrate de evitar un bucle infinito!

Divide tus estilos en trozos más pequeños con parciales

Parciales en Sass son archivos separados que contienen segmentos de código CSS.
Estos se importan y son utilizados en otros archivos Sass. Esta es una gran manera de
agrupar código similar en un módulo para mantenerlo organizado.
Los nombres de los parciales comienzan con el carácter de guión bajo (_), que le dice a
Sass que es un pequeño segmento de CSS y no para convertirlo en un archivo CSS.
También, los archivos Sass terminan con la extensión de archivo .scss. Para introducir el
código en el parcial en otro archivo Sass, utiliza la directiva @import.
Por ejemplo, si todos tus mixins se guardan en un parcial llamado "_mixins.scss", y son
necesarios en el archivo "main.scss", es cómo usarlos en el archivo principal:
@import 'mixins'
Ten en cuenta que el guión bajo y la extensión del archivo no son necesarios en la
declaración import - Sass entiende que es un parcial. Una vez que un parcial es importado
en un archivo, todas las variables, mixins y otros códigos están disponibles para usar.
Escribe una instrucción @import para importar un nombre parcial _variables.scss en el
archivo main.scss.