diff --git a/img/code.png b/img/code.png new file mode 100644 index 0000000..504e8d9 Binary files /dev/null and b/img/code.png differ diff --git a/img/code2.png b/img/code2.png new file mode 100644 index 0000000..d546f99 Binary files /dev/null and b/img/code2.png differ diff --git a/metodos_arrays/boot.css b/metodos_arrays/boot.css new file mode 100644 index 0000000..abe4b7e --- /dev/null +++ b/metodos_arrays/boot.css @@ -0,0 +1,66 @@ +h1{ + text-align: center; +} + + +.main { + /*border: 2px red solid;*/ + display: grid; + grid-template-columns: repeat(auto-fill,23%); + text-align: center; + grid-gap: 2%; + padding: 5%; + + } + .main .main_pop{ + padding: 10px; + border-radius: 10px; + box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + background-color: orange; +} + +.main .main_pop .main_pop_btn { + + background: rgb(24, 24, 24); + color: rgb(245, 245, 245); + border: none; + border-radius: 100px; + padding: 10%; + +} + +.main .main_pop .main_pop_btn:hover{ + background: rgb(245, 245, 245); + color: rgb(24, 24, 24); + transition: background .3s ease-in; +} + +.resultado{ + user-select: none; +} + +.ico { + cursor: pointer; + +} + +.ico:hover{ + color: #ddd; +} + +.span { + display: none; +} + +img{ + max-width:100%; + cursor: pointer; +} + +img:hover{ + opacity: .5; +} + +.modal-title{ + flex-grow: 1; +} \ No newline at end of file diff --git a/metodos_arrays/metodos_arrays.html b/metodos_arrays/metodos_arrays.html index 7485982..ed57479 100644 --- a/metodos_arrays/metodos_arrays.html +++ b/metodos_arrays/metodos_arrays.html @@ -1,80 +1,93 @@ + JS Review - + + + + + -

Transformadores

-
-
-

Pop

- -
-
-

Shift

- -
-
-

Push

- -
-
-

Reverse

- -
-
-

Unshift

- -
-
-

Sort

- -
-
-

Splice

- -
-
+ +
+
+

Pop

+ + -

Accesores

-
-
-

Join

- -
-
-

Slice

- -
-
-

Otros

- -
-
+ + +
+
+

Shift

+ + -

De Repetición

-
-
-

Filter

- -
-
-

ForEach

- -
-
-

Map

- + + +
-
- + + + + - + + + diff --git a/metodos_arrays/metodos_arrays.js b/metodos_arrays/metodos_arrays.js index 34e7155..78f6c11 100644 --- a/metodos_arrays/metodos_arrays.js +++ b/metodos_arrays/metodos_arrays.js @@ -1,13 +1,18 @@ +'use strict'; +//The code where i copy + +const modalBody = document.querySelector('.resultado'); + let popTest = () =>{ let nombres = ['pedro','paco','maria']; - document.write('Original: ' + nombres + '
'); + modalBody.innerHTML += 'Original: ' + nombres + '
'; let resultado = nombres.pop(); // Remueve el ultimo y lo devuele - document.write('POP: ' + resultado + '
'); + modalBody.innerHTML += 'POP: ' + resultado + '
'; - document.write('Resultado: ' + nombres); + modalBody.innerHTML += 'Resultado: ' + nombres; } @@ -15,15 +20,185 @@ let popTest = () =>{ let shiftTest = () =>{ let nombres = ['pedro','paco','maria']; - document.write('Original: ' + nombres + '
'); + modalBody.innerHTML += 'Original: ' + nombres + '
'; let resultado = nombres.shift(); // Remueve el primero y lo devuele - document.write('Shift: ' + resultado + '
'); + modalBody.innerHTML += 'Shift: ' + resultado + '
'; - document.write('Resultado: ' + nombres); + modalBody.innerHTML += 'Resultado: ' + nombres; + +} + + + +//All const necessary to popup +const respuesta = document.querySelector('.respuesta'); +const img = document.querySelector('.img-pop'); +const modalContainer = document.querySelector('.scroll'); +const closeReload = document.querySelectorAll('.btn-cerrar'); + +const img2 = document.querySelector('.img-shift'); + + +//Clickboard the code +const copyText = () => { + let textarea = document.createElement('textarea'); + textarea.value = ` + const modalBody = document.querySelector('.resultado'); + let popTest = () =>{ + let nombres = ['pedro','paco','maria']; + + modalBody.innerHTML += 'Original: ' + nombres + '
'; + + let resultado = nombres.pop(); // Remueve el ultimo y lo devuele + + modalBody.innerHTML += 'POP: ' + resultado + '
'; + + modalBody.innerHTML += 'Resultado: ' + nombres; + + }`; + document.body.appendChild(textarea); + textarea.select(); + navigator.clipboard.writeText(textarea.value); + document.body.removeChild(textarea); +}; + +const copyText2 = () => { + let textarea = document.createElement('textarea'); + textarea.value = ` + const modalBody = document.querySelector('.resultado'); + let popTest = () =>{ + let nombres = ['pedro','paco','maria']; + + modalBody.innerHTML += 'Original: ' + nombres + '
'; + + let resultado = nombres.pop(); // Remueve el ultimo y lo devuele + + modalBody.innerHTML += 'POP: ' + resultado + '
'; + + modalBody.innerHTML += 'Resultado: ' + nombres; + + }`; + document.body.appendChild(textarea); + textarea.select(); + navigator.clipboard.writeText(textarea.value); + document.body.removeChild(textarea); +}; + + +//Show the code in the page +const showResult = ()=>{ + img.style.opacity = '1'; + img.style.cursor = 'default'; + respuesta.innerHTML = 'Resultado
'; + popTest(); +} +const showResult2 = ()=>{ + img2.style.opacity = '1'; + img2.style.cursor = 'default'; + respuesta.innerHTML = 'Resultado
'; + shiftTest(); } + + +let count = 0; + +img.addEventListener('click',()=>{ + count++; + if (count == 1) { + copyText(); + showResult(); + modalContainer.scrollTo(0,1000); + } +}) + +closeReload[0].addEventListener('click',()=>{ + location.reload(true); +}) +closeReload[1].addEventListener('click',()=>{ + location.reload(true); +}) + + +let count2 = 0; +img2.addEventListener('click',()=>{ + count2++; + if (count2 == 1) { + copyText2(); + showResult2(); + modalContainer.scrollTo(0,1000); + } +}) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + let pushTest = () =>{ diff --git a/test/hola.html b/test/hola.html new file mode 100644 index 0000000..f555ab0 --- /dev/null +++ b/test/hola.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/test/hola.js b/test/hola.js new file mode 100644 index 0000000..37c33fe --- /dev/null +++ b/test/hola.js @@ -0,0 +1,11 @@ + +const btn = document.querySelector('.btn'); + +btn.addEventListener('click', () =>{ + let input = document.createElement('input'); + input.value = 'text'; + document.body.appendChild(input); + input.select(); + navigator.clipboard.writeText(input.value); + document.body.removeChild(input); +}); diff --git a/test/pepe.css b/test/pepe.css new file mode 100644 index 0000000..e69de29 diff --git a/test/pepe.html b/test/pepe.html new file mode 100644 index 0000000..d31e7c2 --- /dev/null +++ b/test/pepe.html @@ -0,0 +1,46 @@ + + + + + + + + + + + Hello, world! + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/pepe.js b/test/pepe.js new file mode 100644 index 0000000..e69de29