Ejemplo funciones flecha

// 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");

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 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:

https://bootswatch.com/

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

https://freefrontend.com/bootstrap-grid-examples/

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:

https://csslayout.io/

Creación de rejilla:

https://grid.layoutit.com/

Generador de botones:

https://cssbuttongenerator.com/

Generador de cajas:

https://cssarrowplease.com/

Varios:

https://html-css-js.com/css/generator/

De olas:

https://getwaves.io/

De radios:

https://9elements.github.io/fancy-border-radius/#30.30.64.30–.

De todo:

https://uiverse.io/

https://www.smashingmagazine.com/2021/03/css-generators/

https://www.codu.co/articles/transform-your-css-game-bookmark-these-10-css-generators-mwdcv_0k