// Formato standard de la función flecha let sum = (a, b) => a + b; // Funciones flecha multilineas let fibonacci=(num)=>{ let a=1,b=1,c=a+b; for (let i=2;i<num;i++){ c=a+b; a=b; b=c; } return c; } console.log(sum(2,3)) function checkEdad(edad,si,no){ let res=""; if(edad>=18){ res=si(); }else{ res=no(); } console.log(res); } checkEdad(10,function(){return "Puedes entrar al casino";},function(){return "No puedes entrar al casino";}); checkEdad(20,()=>"Puedes entrar al casino",()=>"No puedes entrar al casino");
Ejercicio JS
Haced un programa que muestre por consola los números primos del 2 al 100.
Probemos los bucles
Hagamos con JS algunos ejercicios típicos:
Fibonacci hasta el término 20
Tabla de multiplicar del 7
Probemos el if… y todo lo demás
Cread un script de JS que nos pida (con prompt) la edad al usuario y la altura en centímetros
Si la edad es mayor de 16 o la altura mayor de 150 que muestre un mensaje que diga ‘Puedes pasar’
¿Qué pasa si el usuario no pone ningún valor (ya sabemos como son)?
Ejercicio repaso final CSS y HTML
Ejercicio bootstrap
Cread una página que tenga:
1.- Una barra de navegación con Inicio nosotros productos servicios contacto
2.- Un slider de cuatro fotos con caption (las que queráis)
3.- Una barra con diferentes secciones: Nacional Internacional Destacados
Que al pinchar en cada una nos muestre una información de cada apartado. Cada apartado tendrá una foto a la izquierda y un texto a la derecha.
Bootstrap
Para empezar, nuestra amiga w3schools:
https://www.w3schools.com/bootstrap4/default.asp
https://www.w3schools.com/bootstrap5/index.php
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php
Ahí encontraremos la explicación de todos los elementos de bootstrap muy bien explicados, pero también podemos ir a las fuentes:
https://getbootstrap.com/docs/4.6/getting-started/introduction/
https://getbootstrap.com/docs/5.0/getting-started/introduction/
Novedades de 5.0 respecto a 4:
https://www.pedrodelanube.com/bootstrap-5-que-hay-de-nuevo/
Aquí encontraremos diferentes bootstraps tuneados:
Y aquí templates listos para usar:
https://colorlib.com/wp/free-bootstrap-templates/
En trifulcas hay código de muchos ejemplos:
https://trifulcas.com/ejemplos-bootstrap/
https://trifulcas.com/ejemplo-bootstrap-2/
https://codepen.io/ajaypatelaj/pen/prHjD
Un análisis exhaustivo del grid de bootstrap:
https://trifulcas.com/analisis-del-grid-de-bootstrap/
Ejemplos del grid de bootstrap:
https://coreui.io/docs/layout/grid/
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
Repaso final plantilla
1.- Comprobad que todo lo que se ha pedido esté.
2.- Que el suscribirse desaparezca solo o al darle un botón de cerrar.
3.- EL tema responsive, que los anchos de las imágenes queden bien y no pequeños y montados
4.- Poned un menú hamburguesa para el menú (lo tenéis en el apartado de media querie o podéis buscar uno propio)
5.- Si a alguien le da tiempo, sed creativos y libres.
Generadores de CSS
Códigos predefinidos:
Creación de rejilla:
Generador de botones:
https://cssbuttongenerator.com/
Generador de cajas:
Varios:
https://html-css-js.com/css/generator/
De olas:
De radios:
https://9elements.github.io/fancy-border-radius/#30.30.64.30–.
De todo:
https://www.smashingmagazine.com/2021/03/css-generators/
https://www.codu.co/articles/transform-your-css-game-bookmark-these-10-css-generators-mwdcv_0k
Flipadas CSS
https://codepen.io/finnhvman/pen/xXpzVN
https://webkit.org/blog-files/3d-transforms/morphing-cubes.html
https://github.com/xieranmaya/blog/issues/12