diff --git a/basicos.code-workspace b/basicos.code-workspace new file mode 100644 index 0000000..76533e5 --- /dev/null +++ b/basicos.code-workspace @@ -0,0 +1,13 @@ +{ + "folders": [ + { + "path": "." + }, + { + "path": "C:\\Users\\usuario\\Desktop\\Ejercicios\\xabier\\botones compra" + } + ], + "settings": { + "workbench.colorCustomizations": {} + } +} \ No newline at end of file diff --git a/exercici1/css/styles.css b/exercici1/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/exercici1/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/exercici1/img/click.png b/exercici1/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/exercici1/img/click.png differ diff --git a/exercici1/index.html b/exercici1/index.html new file mode 100644 index 0000000..02fb72c --- /dev/null +++ b/exercici1/index.html @@ -0,0 +1,42 @@ + + + + + + + + + Basic jS1 + + +
+
+
+ +
+
+
+ TheClick36 +
+
IndexOf()
+

Click the to see the index of j in:

+

"My favorite dessert is Jelly"

+

+ + Go somewhere +
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/exercici1/js/functions.js b/exercici1/js/functions.js new file mode 100644 index 0000000..394e863 --- /dev/null +++ b/exercici1/js/functions.js @@ -0,0 +1,15 @@ + +let x = "My favorite dessert is Jello"; +let y = x.indexOf('J'); +console.log(y); +/* document.getElementById('boton1').onClick = function(){ + myFunction() +}; */ + +function myFunction() { + + + document.getElementById('pintar').innerHTML = y; + } + + diff --git a/exercici2/css/styles.css b/exercici2/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/exercici2/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/exercici2/img/click.png b/exercici2/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/exercici2/img/click.png differ diff --git a/exercici2/index.html b/exercici2/index.html new file mode 100644 index 0000000..1268946 --- /dev/null +++ b/exercici2/index.html @@ -0,0 +1,36 @@ + + + + + + + + + Basic jS2 + + +
+
+
+ +
+
+
+ TheClick36 +
+
Prompt
+

Click the to see the answer to the prompts!

+

+ Go somewhere +
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/exercici2/js/functions.js b/exercici2/js/functions.js new file mode 100644 index 0000000..6387e6a --- /dev/null +++ b/exercici2/js/functions.js @@ -0,0 +1,12 @@ +let nombre = prompt('¿ Cual es su nombre por favor?'); +let apellidos = prompt(' ¿y su primer apellido?'); +let juntos = (`${nombre} ${apellidos}`); + console.log(nombre + " " + apellidos); + + function myFunction() { + juntos == (`${nombre = ' '}`)|| juntos == (`${nombre = ' '} ${apellidos = ' '}`)? + document.getElementById('pintar').innerHTML = "Hola desconocido!": + + document.getElementById('pintar').innerHTML = (`Hola ${juntos}`); + + } ; \ No newline at end of file diff --git a/exercici3/css/styles.css b/exercici3/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/exercici3/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/exercici3/img/click.png b/exercici3/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/exercici3/img/click.png differ diff --git a/exercici3/index.html b/exercici3/index.html new file mode 100644 index 0000000..4832715 --- /dev/null +++ b/exercici3/index.html @@ -0,0 +1,38 @@ + + + + + + + + + Basic jS3/Copia + + +
+
+
+ +
+
+
+ TheClick36 +
+
Match!
+

Click the to see if the words match!.

+

+

+

+ Go somewhere +
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/exercici3/js/functions.js b/exercici3/js/functions.js new file mode 100644 index 0000000..1bbdf93 --- /dev/null +++ b/exercici3/js/functions.js @@ -0,0 +1,36 @@ + + +/* function azar(){ +// recorrido palabras pa generar el random +for (i=0; i < palabrasLength; i++){ + document.getElementById('pintar').innerHTML = azar(); + +} + +} */ + function myFunction() { + let texto = prompt('Introduce una palabra de la A a la Z').toLowerCase(); + + document.getElementById('pintar1').innerHTML = (`La letra inscrita es la ${texto}`); + + // Debo generar YO el random y no cogerlo del string escrito en prompt + + //declaración de DONDE coge el string para generar el random + + let palabras = "ABCÇDEFGHIJKLMNOPQRSTUVWXTZabcçdefghiklmnopqrstuvwxyz"; + // cuantos elementos quiero random + // let palabrasLength = " "; + // donde coloco el valor de ese random + + let azarPalabra = Math.floor(Math.random()* palabras.toLowerCase().length); + + let randomPalabra = palabras.toLowerCase().substring(azarPalabra, azarPalabra+1); + document.getElementById('pintar2').innerHTML = (`La letra generada es la ${randomPalabra}`); + //comparamos los dos valores + + let compara = texto.includes(randomPalabra); + document.getElementById('pintar').innerHTML = compara; + +} +/* Finalmente he tenido que buscar el random en el prompt. pequeño descanso y quiero hacerlo con un random */ + \ No newline at end of file diff --git a/exercici4/css/styles.css b/exercici4/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/exercici4/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/exercici4/img/click.png b/exercici4/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/exercici4/img/click.png differ diff --git a/exercici4/index.html b/exercici4/index.html new file mode 100644 index 0000000..5ec0de1 --- /dev/null +++ b/exercici4/index.html @@ -0,0 +1,42 @@ + + + + + + + + + Basic jS4 + + +
+
+
+ +
+
+
+ TheClick36 +
+
Jubilación
+

Click the to see how long til...

+

You stop working!

+

+ + Go somewhere +
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/exercici4/js/functions.js b/exercici4/js/functions.js new file mode 100644 index 0000000..c03afe3 --- /dev/null +++ b/exercici4/js/functions.js @@ -0,0 +1,29 @@ + +let edad = prompt("How old are you?"); +let edadJubilacion = 67; +let jubiladoYa = (edadJubilacion - edad); +console.log(edad); + + +/* function jubilado(){ + if(edad < edadJubilacion){ + return ("You need still" +" "+ jubiladoYa +" " +" to become a goverment employ!") + }else{ + return ("You are rather lucky,"+" "+ -jubiladoYa +" "+ "years enjoying your well earned peace of mind.") + } +}; + +function myFunction() { + document.getElementById('pintar').innerHTML = jubilado(); + } ; + document.getElementById('boton1').onClick = function(){ + myFunction(); +}; */ + const myFunction = () =>{ + edad < edadJubilacion ? + document.getElementById('pintar').innerHTML = (`You need still ${jubiladoYa} to become a goverment employ!`): + document.getElementById('pintar').innerHTML = (`You are rather lucky ${-jubiladoYa} years enjoying your well earned peace of mind.`); + } + + + diff --git a/exercici5/css/styles.css b/exercici5/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/exercici5/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/exercici5/img/click.png b/exercici5/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/exercici5/img/click.png differ diff --git a/exercici5/index.html b/exercici5/index.html new file mode 100644 index 0000000..352bf70 --- /dev/null +++ b/exercici5/index.html @@ -0,0 +1,67 @@ + + + + + + + + + Basic jS5 + + +
+
+
+ + + +
+
+
+ TheClick36 +
+
Beverages
+
+ + +
+
+ + +
+
+ + +
+
+

Click the to see what kind of beverages

+

you are allow to take

+

+ + Go somewhere +
+
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/exercici5/js/functions.js b/exercici5/js/functions.js new file mode 100644 index 0000000..ecb967e --- /dev/null +++ b/exercici5/js/functions.js @@ -0,0 +1,107 @@ +let bebidas = [ + 'cerveza', + 'coca-cola', + 'leche' +]; +/* let edad = prompt('How old are you?'); */ + +/* let cervezaCheck = document.getElementById('check1').checked; +console.log(cervezaCheck); */ +/*Con esta formula no me deja ni elegir del checklist */ + +document.getElementById('boton1').onClick = function(){ + myFunction(); +} +function myFunction() { + let edadBebidas = prompt( " "+'How old you said you are?'); + edadBebidas = parseInt(edadBebidas); + if( edadBebidas == ('')){ + document.getElementById('pintar').innerHTML = ('no age, no drink!'); + }else if( edadBebidas < ('18')){ + document.getElementById('pintar').innerHTML = ('You could have Coca-cola or Milk.'); + }else{ + document.getElementById('pintar').innerHTML =('You are big enough to have' + " "+ bebidas + " "+' do enjoy it!'); + } + + /* document.getElementById('pintar').innerHTML = bebidas; */ + } + +function addClassCheck(e){ + if(e.checked){ + e.classList.add("marked"); + }else{ + e.classList.remove("marked"); + } + if(document.getElementsByClassName("marked").length > 1){ + alert("Marca sólo una opción por favor."); + e.checked = false; + e.classList.remove("marked"); + } +} + +function getValue(value){ + //variable para evitar que salte el prompt al desmarcar casilla + // No es mia, let(var) realizada por Xabier Ayape + let marcados = document.getElementsByClassName("marked"); + if(marcados.length == 0){ + return; +} + let edadBebidas = prompt(value +" "+ "...um, ...let me see:"+ " "+'How old are you?'); + edadBebidas = parseInt(edadBebidas); + if( edadBebidas == ('')){ + alert('no age, no drink!'); + }else if( edadBebidas < ('18')){ + alert('There is no way you can drink that here. Truly sorry.'); + }else{ + alert('You are big enough, do enjoy it!'); + } +} +function getValue1(value){ + //variable para evitar que salte el prompt al desmarcar casilla + // No es mia, let(var) realizada por Xabier Ayape + let marcados = document.getElementsByClassName("marked"); + if(marcados.length == 0){ + return; +} + let edadBebidas = prompt(value +" "+ "...um, ...let me see:"+ " "+'How old are you?'); + edadBebidas = parseInt(edadBebidas); + if( edadBebidas == ('')){ + alert('no age, no drink!'); + }else if( edadBebidas < ('16')){ + alert('Your teeth are not ready yet!'); + }else{ + alert('Have fun and enjoy it!'); + } +} +function getValue2(value){ + //variable para evitar que salte el prompt al desmarcar casilla + // No es mia, let(var) realizada por Xabier Ayape + let marcados = document.getElementsByClassName("marked"); + if(marcados.length == 0){ + return; +} + let edadBebidas = prompt(value +" "+ "...um, ...let me see:"+ " "+'How old are you?'); + edadBebidas = parseInt(edadBebidas); + if( edadBebidas == ('')){ + alert('no age, no drink!'); + }else{ + alert('Best thing to look after yourself!'); + } +} + + + +/*BIBLIOGRAFIA +Checklist + +Recogida datos check list y aparición prompt + +https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox +respuesta: ZOE + +******************* +parseInt + Transformación string a numero + + https://github.com/bcncodes-training/basics-JS/blob/master/jubilacion.js +*/ diff --git a/exercici6/css/styles.css b/exercici6/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/exercici6/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/exercici6/img/click.png b/exercici6/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/exercici6/img/click.png differ diff --git a/exercici6/index.html b/exercici6/index.html new file mode 100644 index 0000000..b18e2f9 --- /dev/null +++ b/exercici6/index.html @@ -0,0 +1,41 @@ + + + + + + + + + Basic jS6 + + +
+
+
+ +
+
+
+ TheClick36 +
+
toUpperCase
+

Click the to see wonders with your name.

+

+ + Go toUpperCase! +
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/exercici6/js/functions.js b/exercici6/js/functions.js new file mode 100644 index 0000000..215a1dd --- /dev/null +++ b/exercici6/js/functions.js @@ -0,0 +1,26 @@ + + +let x = prompt('Write your name dear friend.'); + + +/* function myFunction() { + + if(x == ('')){ + document.getElementById('pintar').innerHTML = ('No name, no gain!'); + }else{ + + document.getElementById('pintar').innerHTML = (x.toUpperCase() + " " +" press F12"); + + } + +} +console.log(x.toUpperCase() + " "+ " is a great name!"); */ + +const myFunction = () =>{ + x == ('') ? + document.getElementById('pintar').innerHTML = ('No name, no gain!'): + document.getElementById('pintar').innerHTML = (x.toUpperCase() + " " +" press F12"); +}; + + + diff --git a/exercici7/css/styles.css b/exercici7/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/exercici7/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/exercici7/img/click.png b/exercici7/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/exercici7/img/click.png differ diff --git a/exercici7/index.html b/exercici7/index.html new file mode 100644 index 0000000..4f3dc62 --- /dev/null +++ b/exercici7/index.html @@ -0,0 +1,41 @@ + + + + + + + + + Basic jS7 + + +
+
+
+ +
+
+
+ TheClick36 +
+
Intro Data
+

Click the to see the driver's name.

+

+ + Intro Data! +
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/exercici7/js/functions.js b/exercici7/js/functions.js new file mode 100644 index 0000000..33c6ec3 --- /dev/null +++ b/exercici7/js/functions.js @@ -0,0 +1,27 @@ + + +let x = prompt('Write a name for the Driver.'); +let nameDriver = 'Mister D'; +/* function myFunction() { + let namePrompt = ()=>{ + if(x == ('')){ + document.getElementById('pintar').innerHTML = ('No name, no gain!'); + }else{ + + document.getElementById('pintar').innerHTML = (x.toUpperCase() + " " +" is your driving name"+ ('
') + `${nameDriver} is the browser's name`); + + + } + } + return namePrompt(); + +}; +console.log(x.toUpperCase() + " "+ " is a great name!"); */ + +const myFunction = () =>{ + (x == (''))? + document.getElementById('pintar').innerHTML = ('No name, no gain!'): + document.getElementById('pintar').innerHTML = (x.toUpperCase() + " " +" is your driving name"+ ('
') + `${nameDriver} is the browser's name`); +}; + + diff --git a/exercici8/css/styles.css b/exercici8/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/exercici8/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/exercici8/img/click.png b/exercici8/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/exercici8/img/click.png differ diff --git a/exercici8/index.html b/exercici8/index.html new file mode 100644 index 0000000..edb762b --- /dev/null +++ b/exercici8/index.html @@ -0,0 +1,41 @@ + + + + + + + + + Basic jS8 + + +
+
+
+ +
+
+
+ TheClick36 +
+
Name's length
+

Click the to see the larger's name.

+

+ + length! +
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/exercici8/js/functions.js b/exercici8/js/functions.js new file mode 100644 index 0000000..725cf87 --- /dev/null +++ b/exercici8/js/functions.js @@ -0,0 +1,34 @@ + + +let x = prompt('Write a name for the Driver.'); +let nameDriver = 'Mister D'; +/* let larger = x.length > nameDriver.length; +let shorter = x.length < nameDriver.length; +let same = x.length == nameDriver.length; */ +// aprender a utilizarlos como parametros + +const myFunction = ()=> { + larger = x.length > nameDriver.length? + + document.getElementById('pintar').innerHTML = (`You ${x} got a larger name, it has ${x.length} characters`): + document.getElementById('pintar').innerHTML = (`I, ${nameDriver} got the larger name, I've got ${nameDriver.length} characters`); + same = x.length == nameDriver.length? + + document.getElementById('pintar').innerHTML = (`You ${x} and I ${nameDriver} got the same number of characters`): + false; + none = x.length == ""? + + document.getElementById('pintar').innerHTML = (`No name, no game`): + false; +}; + + + +/* const myFunction = ()=> { + larger? + document.getElementById('pintar').innerHTML = (`You ${x} got a larger name, it has ${x.length} characters`): + document.getElementById('pintar').innerHTML = (`I, ${nameDriver} got the larger name, I've got ${nameDriver.length} characters`); + same? + document.getElementById('pintar').innerHTML = (`You ${x} and I ${nameDriver} gort the same number of characters`): + false; +}; */ \ No newline at end of file diff --git a/exercici9/css/styles.css b/exercici9/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/exercici9/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/exercici9/img/click.png b/exercici9/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/exercici9/img/click.png differ diff --git a/exercici9/index.html b/exercici9/index.html new file mode 100644 index 0000000..f1f3fa5 --- /dev/null +++ b/exercici9/index.html @@ -0,0 +1,41 @@ + + + + + + + + + Basic jS9 + + +
+
+
+ +
+
+
+ TheClick36 +
+
Palindromes
+

Click the to check if it is a palindrome.

+

+ + .match() +
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/exercici9/js/functions.js b/exercici9/js/functions.js new file mode 100644 index 0000000..4a33845 --- /dev/null +++ b/exercici9/js/functions.js @@ -0,0 +1,36 @@ +// Solución visualizada en +// https://www.freecodecamp.org +// utilizaremos la iteración for () para que se trabaje mejor en strings largos + +// constante regex para limpiar el string + +let phrase = prompt(`Escribe un palíndrome!`); + +const myFunction = ()=> { + + + let clearString = phrase.match(/[^A-Za-z0-9]/g); +// esta es la misma let clearString = /\W_]/g; +//llevamos al str a minusculas y quitamos los espacios vacios + let str = phrase.toLowerCase().replace(clearString, ''); +//medimos cuan largo es el string + let lengthString = str.length; + + //loop for + for(let i = 0; i < lengthString/2; i++){ + //iterción continua hasta que NO sean iguales las comparaciones + if(str[i] !== str[lengthString -1 -i]){ + + return (document.getElementById('pintar').innerHTML = (`${phrase} is not a palindrome`)); + } +} + //else devuelve verdadero + + + return (document.getElementById('pintar').innerHTML = (`${phrase} it is a palindrome`)); +}; + + + + + diff --git a/kata_grow/css/styles.css b/kata_grow/css/styles.css new file mode 100644 index 0000000..9d6ad0c --- /dev/null +++ b/kata_grow/css/styles.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&display=swap'); +body{ + font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif; + font-size: 125%; + +} +.container{ + margin-top:9vh; +} \ No newline at end of file diff --git a/kata_grow/img/click.png b/kata_grow/img/click.png new file mode 100644 index 0000000..1d239a5 Binary files /dev/null and b/kata_grow/img/click.png differ diff --git a/kata_grow/index.html b/kata_grow/index.html new file mode 100644 index 0000000..02fb72c --- /dev/null +++ b/kata_grow/index.html @@ -0,0 +1,42 @@ + + + + + + + + + Basic jS1 + + +
+
+
+ +
+
+
+ TheClick36 +
+
IndexOf()
+

Click the to see the index of j in:

+

"My favorite dessert is Jelly"

+

+ + Go somewhere +
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/kata_grow/js/functions.js b/kata_grow/js/functions.js new file mode 100644 index 0000000..394e863 --- /dev/null +++ b/kata_grow/js/functions.js @@ -0,0 +1,15 @@ + +let x = "My favorite dessert is Jello"; +let y = x.indexOf('J'); +console.log(y); +/* document.getElementById('boton1').onClick = function(){ + myFunction() +}; */ + +function myFunction() { + + + document.getElementById('pintar').innerHTML = y; + } + +