From 1207b823d73d5e3b7595f6d232d29f4f9c2a0f5a Mon Sep 17 00:00:00 2001
From: thamaragerigr <thamaragerigr@gmail.com>
Date: Thu, 16 Jul 2020 14:59:09 +0200
Subject: [PATCH] added new folders/ chnge readme

---
 .../EjerciciosPracticos.md"                   |   0
 Generales/General.md                          |   0
 HTML/PreguntasHTML.md                         |   4 +-
 JavaScript/PreguntasJavaScript.md             | 232 ++++++++++++++++
 README.md                                     | 255 ++----------------
 reto.js                                       |  16 --
 6 files changed, 257 insertions(+), 250 deletions(-)
 create mode 100644 "Ejercicios de c\303\263digo/EjerciciosPracticos.md"
 create mode 100644 Generales/General.md
 create mode 100644 JavaScript/PreguntasJavaScript.md
 delete mode 100644 reto.js

diff --git "a/Ejercicios de c\303\263digo/EjerciciosPracticos.md" "b/Ejercicios de c\303\263digo/EjerciciosPracticos.md"
new file mode 100644
index 0000000..e69de29
diff --git a/Generales/General.md b/Generales/General.md
new file mode 100644
index 0000000..e69de29
diff --git a/HTML/PreguntasHTML.md b/HTML/PreguntasHTML.md
index 14e81ef..2b81ac7 100644
--- a/HTML/PreguntasHTML.md
+++ b/HTML/PreguntasHTML.md
@@ -1,4 +1,4 @@
-¿Qué has aprendido en esta semana?
+<!-- ¿Qué has aprendido en esta semana?
 ¿Qué es lo que te interesa de la programación?
 ¿Podría describir algún problema técnico que haya resuelto recientemente?
 ¿Cuáles son las consideraciones del área de interfaces, rendimiento, posicionamiento, mantenimiento o seguridad que toma en cuenta al desarrollar sitios o aplicaciones web?
@@ -21,4 +21,4 @@ Explique las ventajas y desventajas de usar animaciones en CSS contrario a usar
 
 ### ¿Qué significa CORS y a qué problema está relacionado?
 
-Cross-Origin Resource Sharing (CORS)
\ No newline at end of file
+Cross-Origin Resource Sharing (CORS) -->
\ No newline at end of file
diff --git a/JavaScript/PreguntasJavaScript.md b/JavaScript/PreguntasJavaScript.md
new file mode 100644
index 0000000..7a06d7a
--- /dev/null
+++ b/JavaScript/PreguntasJavaScript.md
@@ -0,0 +1,232 @@
+# Preguntas-de-Entrevista: JavaScript
+
+## ¿Qué significa 'event delegation'?
+
+### ¿Qué definimos como evento?
+
+Cosas que le ocurren a un elemento de HTML. Esto puede ser detonado por:
+
+- **change**: Un cambio en el elemento
+- **click**: Cuando el usuario hace click en el elemento
+- **mouseover**: El usuario mueve el mouse sobre el elemento
+- **mouseout**: El usuario mueve el mouse fuera el elemento
+- **keydown**: Cuando se presiona una letra del teclado
+- **load**: Cuando el navegador termina de cargar la página
+
+Significa **_añadir un event listener a un elemento padre_**, en lugar de añadirlo a sus descendientes. El evento será detonado cuando sea 'triggered' en los elementos descendientes. Se usa porque:
+
+- Solo se **_necesita un 'handler' en el elemento padre_**, en lugar de añadir uno a cada descendiente.
+- No hay necesidad de **_desconectar el 'handler'_** si algun elemento descendiente es eliminado.
+
+```
+<ul class=”characters”>
+</ul>
+<script>
+  function toggleDone (event) {
+    console.log(event.target)
+  }
+  const characterList = document.querySelector('.characters')
+  characterList.addEventListener('click', toggleDone)
+</script>
+```
+
+> ⛔ Se le añade un event listener al padre para los elementos que serán añadidos después de que la página carge
+
+[What is event delegation?](https://medium.com/@bretdoucette/part-4-what-is-event-delegation-in-javascript-f5c8c0de2983)
+
+## ¿Cómo funciona el 'this'?
+
+**El objeto contexto de JavaScript en el cual se está ejecutando el código actual.** Su valor dependerá de como sea llamada la función.
+
+Se puede generalizar su uso bajo las siguientes reglas:
+
+1. Si la palabra `new`es usada para llamar una función, el `this` dentro de la función es un nuevo objeto.
+
+```
+function ConstructorExample() {
+    console.log(this);
+    this.value = 10;
+    console.log(this);
+}
+new ConstructorExample();
+// -> {}
+// -> { value: 10 }
+```
+
+2. Si applay`,`call`o`bind`son usados para llamar a una función, el`this` dentro de ella es un objeto que es pasado como argumento.
+
+```
+function fn() {
+    console.log(this);
+}
+var obj = {
+    value: 5
+};
+var boundFn = fn.bind(obj);
+boundFn();     // -> { value: 5 }
+fn.call(obj);  // -> { value: 5 }
+fn.apply(obj); // -> { value: 5 }
+```
+
+3. Si una función es llamada como un método usando 'dot notation', el `this` hará referencia al objeto que tiene esa función como propiedad.
+
+```
+var obj = {
+    value: 5,
+    printThis: function() {
+        console.log(this);
+    }
+};
+obj.printThis(); // -> { value: 5, printThis: ƒ }
+```
+
+> ⛔ Se puede decir que cuando hay un punto al lado izquierdo de la función (cuando se invoca), el `this` es el objeto a la izquier del punto.
+
+4. Si una función es invocada como una función libre, es decir, de ninguna de las manera previamente mencionadas, el `this`es el objeto global. En el navegador es `window`.
+
+```
+function fn() {
+    console.log(this);
+}
+// If called in browser:
+fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}
+```
+
+> ⛔ Esta regla se diferencia de la nro 3 ya que una función que no es declarada como método automaticamente se convierte en propiedad del objeto global `window`. Esto es por ende, una invocación de un método implícito. Cuando llamamos a fn (), se interpreta como window.fn(), entonces `this` es `window`. 
+
+    console.log(fn === window.fn); // -> true
+
+5. Si más de uno de las anteriores se combinan, la que sea major es la que determinará el valor de `this`.
+
+6. Si se habla de una función flecha, se ignoran todas las reglas anteriores y el `this` recibe el valor de su scope en el momento de su creación
+
+```
+const obj = {
+    value: 'abc',
+    createArrowFn: function() {
+        return () => console.log(this);
+    }
+};
+const arrowFn = obj.createArrowFn();
+arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }
+```
+Fuente: [The Simple Rules to ‘this’ in Javascript](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3)
+
+## Diferencias entre `null`, `undefiend` y undeclared
+
+- `null:` posee el valor explícito de nulo. Representa que no tiene valor, que a diferencia de undefined que no ha sigo definida.
+
+```jsx
+var foo = null;
+console.log(foo === null); // true
+console.log(typeof foo === 'object'); // true
+
+console.log(foo == undefined); // true. Wrong, don't use this to check!
+(type coertion)
+```
+
+- `undefined:` Ha sido declarada pero no se le ha asignado ningun valor.
+
+```jsx
+var foo;
+console.log(foo); // undefined
+console.log(foo === undefined); // true
+console.log(typeof foo === "undefined"); // true
+
+console.log(foo == null); // true. Wrong, don't use this to check!
+
+function bar() {}
+var baz = bar();
+console.log(baz); // undefined
+```
+
+- undeclared: son variables que han sido creadas sin identificador (let, var, const)
+
+```jsx
+function foo() {
+  x = 1; // Throws a ReferenceError in strict mode
+}
+
+foo();
+console.log(x); // 1
+```
+
+## Explica cómo funciona la herencia de prototipos
+
+Todos los objetos en JS poseen una propiedad `_proto_`, la cual hace referencia a otro objeto, el cual es llamado el prototipo del objeto. Cuando se accede a una propiedad a través de un objeto y no es encontrada, se buscará en el `_proto_` del objeto hasta conseguir lo que esta buscando.
+
+## ¿Qué son `closures`? ¿Por qué y para qué usarlas?
+
+<!-- 
+## Diferencia entre clase y funcion
+
+## Funciones normales vs de flecha
+
+## Async vs defer
+
+## == vs ===
+
+## setTimeout vs setInterval
+
+##  different DOM API’s
+
+## DOM vs Virtual DOM
+
+## ¿Cómo funciona el event loop?
+
+## Difference between call, bind and apply
+
+## Explain Promise
+
+## What is variable hoisting
+
+## Difference between document.ready(){} and window.onload(){}
+
+## Callback vs Promise
+
+## Prototypal inheritance
+
+## Write polyfill for Filter, Reduce, Promise
+
+## CORS
+
+## Can you describe the main difference between a .forEach loop and a .map() loop and why you would pick one versus the other?
+
+## What's a typical use case for anonymous functions?
+
+## Difference between: function Person(){}, var person = Person(), and var person = new Person()?
+
+## Explain Ajax in as much detail as possible.
+
+## What are the advantages and disadvantages of using Ajax?
+
+## SEO
+
+## What are the pros and cons of using Promises instead of callbacks?
+
+## Explain the difference between synchronous and asynchronous functions.
+
+## What is the definition of a higher-order function?
+
+## Can you name two programming paradigms important for JavaScript app developers?
+
+## What is functional programming?
+
+## What is the difference between classical inheritance and prototypal inheritance?
+
+##  When is classical inheritance an appropriate choice?
+
+## When is prototypal inheritance an appropriate choice?
+
+## What are two-way data binding and one-way data flow, and how are they different?
+
+## What are the pros and cons of monolithic vs microservice architectures?
+
+## What is asynchronous programming, and why is it important in JavaScript?
+
+-----
+#### What kind of SQL statement retrieves data from a table
+#### Why is caching used to increase read performance?
+#### Which of the following HTTP request methods should not alter the state of the server?
+#### Which type of testing would best measure which version of a landing page results in more sing-ups?
+####  -->
\ No newline at end of file
diff --git a/README.md b/README.md
index dda4a97..5e73a89 100644
--- a/README.md
+++ b/README.md
@@ -1,232 +1,23 @@
-# Preguntas-de-Entrevista 💅
-
-## ¿Qué significa 'event delegation'?
-
-### ¿Qué definimos como evento?
-
-Cosas que le ocurren a un elemento de HTML. Esto puede ser detonado por:
-
-- **change**: Un cambio en el elemento
-- **click**: Cuando el usuario hace click en el elemento
-- **mouseover**: El usuario mueve el mouse sobre el elemento
-- **mouseout**: El usuario mueve el mouse fuera el elemento
-- **keydown**: Cuando se presiona una letra del teclado
-- **load**: Cuando el navegador termina de cargar la página
-
-Significa **_añadir un event listener a un elemento padre_**, en lugar de añadirlo a sus descendientes. El evento será detonado cuando sea 'triggered' en los elementos descendientes. Se usa porque:
-
-- Solo se **_necesita un 'handler' en el elemento padre_**, en lugar de añadir uno a cada descendiente.
-- No hay necesidad de **_desconectar el 'handler'_** si algun elemento descendiente es eliminado.
-
-```
-<ul class=”characters”>
-</ul>
-<script>
-  function toggleDone (event) {
-    console.log(event.target)
-  }
-  const characterList = document.querySelector('.characters')
-  characterList.addEventListener('click', toggleDone)
-</script>
-```
-
-> ⛔ Se le añade un event listener al padre para los elementos que serán añadidos después de que la página carge
-
-[What is event delegation?](https://medium.com/@bretdoucette/part-4-what-is-event-delegation-in-javascript-f5c8c0de2983)
-
-## ¿Cómo funciona el 'this'?
-
-**El objeto contexto de JavaScript en el cual se está ejecutando el código actual.** Su valor dependerá de como sea llamada la función.
-
-Se puede generalizar su uso bajo las siguientes reglas:
-
-1. Si la palabra `new`es usada para llamar una función, el `this` dentro de la función es un nuevo objeto.
-
-```
-function ConstructorExample() {
-    console.log(this);
-    this.value = 10;
-    console.log(this);
-}
-new ConstructorExample();
-// -> {}
-// -> { value: 10 }
-```
-
-2. Si applay`,`call`o`bind`son usados para llamar a una función, el`this` dentro de ella es un objeto que es pasado como argumento.
-
-```
-function fn() {
-    console.log(this);
-}
-var obj = {
-    value: 5
-};
-var boundFn = fn.bind(obj);
-boundFn();     // -> { value: 5 }
-fn.call(obj);  // -> { value: 5 }
-fn.apply(obj); // -> { value: 5 }
-```
-
-3. Si una función es llamada como un método usando 'dot notation', el `this` hará referencia al objeto que tiene esa función como propiedad.
-
-```
-var obj = {
-    value: 5,
-    printThis: function() {
-        console.log(this);
-    }
-};
-obj.printThis(); // -> { value: 5, printThis: ƒ }
-```
-
-> ⛔ Se puede decir que cuando hay un punto al lado izquierdo de la función (cuando se invoca), el `this`
-> es el objeto a la izquier del punto.
-
-4. Si una función es invocada como una función libre, es decir, de ninguna de las manera previamente mencionadas, el `this`es el objeto global. En el navegador es `window`.
-
-```
-function fn() {
-    console.log(this);
-}
-// If called in browser:
-fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}
-```
-
-> ⛔ Esta regla se diferencia de la nro 3 ya que una función que no es declarada como método automaticamente se convierte en propiedad del objeto global `window`. Esto es por ende, una invocación de un método implícito. Cuando llamamos a fn (), se interpreta como window.fn(), entonces `this` es `window`. 
-
-    console.log(fn === window.fn); // -> true
-
-5. Si más de uno de las anteriores se combinan, la que sea major es la que determinará el valor de `this`.
-
-6. Si se habla de una función flecha, se ignoran todas las reglas anteriores y el `this` recibe el valor de su scope en el momento de su creación
-
-```
-const obj = {
-    value: 'abc',
-    createArrowFn: function() {
-        return () => console.log(this);
-    }
-};
-const arrowFn = obj.createArrowFn();
-arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }
-```
-[The Simple Rules to ‘this’ in Javascript](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3)
-
-## Diferencias entre `null`, `undefiend` y undeclared
-
-- `null:` posee el valor explícito de nulo. Representa que no tiene valor, que a diferencia de undefined que no ha sigo definida.
-
-```jsx
-var foo = null;
-console.log(foo === null); // true
-console.log(typeof foo === 'object'); // true
-
-console.log(foo == undefined); // true. Wrong, don't use this to check!
-(type coertion)
-```
-
-- `undefined:` Ha sido declarada pero no se le ha asignado ningun valor.
-
-```jsx
-var foo;
-console.log(foo); // undefined
-console.log(foo === undefined); // true
-console.log(typeof foo === "undefined"); // true
-
-console.log(foo == null); // true. Wrong, don't use this to check!
-
-function bar() {}
-var baz = bar();
-console.log(baz); // undefined
-```
-
-- undeclared: son variables que han sido creadas sin identificador (let, var, const)
-
-```jsx
-function foo() {
-  x = 1; // Throws a ReferenceError in strict mode
-}
-
-foo();
-console.log(x); // 1
-```
-
-## Explica cómo funciona la herencia de prototipos
-
-Todos los objetos en JS poseen una propiedad `_proto_`, la cual hace referencia a otro objeto, el cual es llamado el prototipo del objeto. Cuando se accede a una propiedad a través de un objeto y no es encontrada, se buscará en el `_proto_` del objeto hasta conseguir lo que esta buscando.
-
-## ¿Qué son `closures`? ¿Por qué y para qué usarlas?
-
-## Diferencia entre clase y funcion
-
-## Funciones normales vs de flecha
-
-## Async vs defer
-
-## == vs ===
-
-## setTimeout vs setInterval
-
-##  different DOM API’s
-
-## DOM vs Virtual DOM
-
-## ¿Cómo funciona el event loop?
-
-## Difference between call, bind and apply
-
-## Explain Promise
-
-## What is variable hoisting
-
-## Difference between document.ready(){} and window.onload(){}
-
-## Callback vs Promise
-
-## Prototypal inheritance
-
-## Write polyfill for Filter, Reduce, Promise
-
-## CORS
-
-## Can you describe the main difference between a .forEach loop and a .map() loop and why you would pick one versus the other?
-
-## What's a typical use case for anonymous functions?
-
-## Difference between: function Person(){}, var person = Person(), and var person = new Person()?
-
-## Explain Ajax in as much detail as possible.
-
-## What are the advantages and disadvantages of using Ajax?
-
-## SEO
-
-## What are the pros and cons of using Promises instead of callbacks?
-
-## Explain the difference between synchronous and asynchronous functions.
-
-## What is the definition of a higher-order function?
-
-## Can you name two programming paradigms important for JavaScript app developers?
-
-## What is functional programming?
-
-## What is the difference between classical inheritance and prototypal inheritance?
-
-##  When is classical inheritance an appropriate choice?
-
-## When is prototypal inheritance an appropriate choice?
-
-## What are two-way data binding and one-way data flow, and how are they different?
-
-## What are the pros and cons of monolithic vs microservice architectures?
-
-## What is asynchronous programming, and why is it important in JavaScript?
-
------
-#### What kind of SQL statement retrieves data from a table
-#### Why is caching used to increase read performance?
-#### Which of the following HTTP request methods should not alter the state of the server?
-#### Which type of testing would best measure which version of a landing page results in more sing-ups?
-#### 
\ No newline at end of file
+<div align="center">
+  <h1>Preguntas-de-Entrevista 💅</h1>
+
+  <a class="header-badge" target="_blank" href="linkedin.com/in/thamaragerigr">
+     <img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
+  </a>
+  
+  <a class="header-badge" target="_blank" href="https://twitter.com/gerig_thamara">
+    <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/gerig_thamara?style=social">
+  </a>
+  <sub>
+   <p>¡Hola!👋 He creado esta guía con preguntas que he recopilado en internet para prácticar antes de una entrevista (de Junior Front-End Developer, para ser más específica!). Si tienes alguna propuestas o sugerencia, no dudes en contactarme!🤸‍♀️</p>
+  </sub>
+
+  <h3 align="left">Tabla de contenidos</h3>
+
+ <ul align="left">
+   <!-- <li><a href="./HTML/PreguntasHTML.md">HTML</a></li>
+   <li><a href="./CSS/PreguntasCSS.md">CSS</a></li> -->
+   <li><a href="./JavaScript/PreguntasJavaScript.md">JavaScript</a></li>
+   <li><a href="./Ejercicios de código/EjerciciosPracticos.md">Ejercicios de Código</a></li>
+ </ul>
+<div>
\ No newline at end of file
diff --git a/reto.js b/reto.js
deleted file mode 100644
index 34eec6e..0000000
--- a/reto.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const ciudadesElegidas = ['Tokio', 'Río', 'Berlín', 'Moscú', 'Helsinki']
-///// Newbie
-function estaIncluidaEstaCiudad(ciudad) {
-    if (ciudadesElegidas.includes(ciudad)) {
-        return true
-    } else {
-        return false
-    }
-}
-/////// Mid-level
-function estaIncluidaEstaCiudad(ciudad) {
-    if (ciudadesElegidas.includes(ciudad)) return true;
-    return false
-}
-////// God
-const estaIncluidaEstaCiudad = ciudad => (ciudadesElegidas.includes(ciudad)) ? true : false