https://github.com/juanesgalvis/tarjetaproductos

Diseño de tarje de producto en la mentoría con Diego de Granda en Platzi Master (5-5-2020)
https://github.com/juanesgalvis/tarjetaproductos

css3 flexbox html5 javascript platzi-master

Last synced: 2 months ago
JSON representation

Diseño de tarje de producto en la mentoría con Diego de Granda en Platzi Master (5-5-2020)

• Host: GitHub
• URL: https://github.com/juanesgalvis/tarjetaproductos
• Owner: JuanesGalvis
• Created: 2020-05-06T01:02:48.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-05-06T04:01:31.000Z (about 5 years ago)
• Last Synced: 2025-02-05T19:46:41.843Z (4 months ago)
• Topics: css3, flexbox, html5, javascript, platzi-master
• Language: CSS
• Size: 289 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## RETO - TARJETA DE PRODUCTO

He añadido botones para cambiar a diferentes colores de tenis, además el en titulo aparece el color y cada botón el color de la sección.

### Amarillo:

![Amarillo](https://i.ibb.co/5G4mrkg/Amarilla.png)

### Azul:

![Azul](https://i.ibb.co/HhWDRJ4/Azul.png)

### Negro:

![Negro](https://i.ibb.co/5n2Kvq7/Negro.png)

### Rojo:

![Rojo](https://i.ibb.co/5nNdGjF/Rojo.png)

### Blanco:

![Blanco](https://i.ibb.co/HdfYnpQ/Blanco.png)

## Código importante:

```javascript

/* FUNCIONAMIENTO DE LOS BOTONES */

Boton.addEventListener('click', () =>{

    const URL_Tenis = 'imagen.png';

    Personalizacion( "color de fondo", "color imgBox", URL_Tenis, 'Color', 'Color Boton', "Color letra del boton");  

})

```

------------

```javascript

/* FUNCIÓN QUE MODIFICA EL ESTILO Y ATRIBUTOS DEL HTML */

function Personalizacion(colorFondo, ColorImgBox, tenis, color, colorBtn, TextoBtn)

{

    /* FONDO */

    Body.style.backgroundColor = colorFondo;

    imgBox.style.backgroundColor = ColorImgBox;

    /* TENIS */

    IMG.setAttribute('src', tenis);

    IMG.style.width = '500px';

    IMG.style.height = '554px';

    /* TITULO DE LA TARJET */

    Titulo.innerHTML = `Nike ${color} 2020`;

    /* BOTON DE COMPRA */

    BotonCompra.style.backgroundColor = colorBtn;

    BotonCompra.style.color = TextoBtn;

}

```