El cambiador de color de fondo es un proyecto que permite cambiar el color de fondo de las páginas web con facilidad. Hay cuadros de color en una página web cuando el usuario hace clic en cualquiera de ellos, luego el color resultante aparecerá en el fondo de la página web. Hace que las páginas web se vean atractivas.
Estructura del archivo:
- índice.html
- estilo.css
- guión.js
Requisitos previos: se necesitan conocimientos básicos de HTML, CSS y JavaScript. El proyecto contiene archivos HTML, CSS y JavaScript. El archivo HTML agrega estructura, seguido de estilo usando CSS y JavaScript le agrega funcionalidad.
Archivo HTML: index.html El diseño HTML se crea utilizando la etiqueta div, el atributo id y las etiquetas de anclaje para llamar a funciones. Define la estructura de la página web.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Background changer using JavaScript</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Background changer with a color box</h1> <div> <a onclick="bgchange(id)" id="color1"> #e58e26</a> <a onclick="bgchange(id)" id="color2"> #f9b4ab</a> <a onclick="bgchange(id)" id="color3"> #B1FB17</a> <a onclick="bgchange(id)" id="color4"> #78e08f</a> <a onclick="bgchange(id)" id="color5"> #fd79a8</a> </div> <script src="script.js"></script> </body> </html>
Archivo CSS: style.css Mediante el uso de propiedades CSS, decoraremos la página web y la haremos atractiva. Las propiedades de color, ancho, alto y posición se proporcionan según los requisitos del proyecto.
CSS
body {
background: #81ecec;
}
h1 {
color:#6203e0;
}
div {
width:25%;
height: 50px;
display: flex;
justify-content: space-around;
padding: 10px;
background: white;
}
#color1 {
flex: 1;
background: #e58e26;
color:#e58e26;
}
#color2 {
flex: 1;
background: #f9b4ab;
color: #f9b4ab;
}
#color3 {
flex: 1;
background: #B1FB17;
color: #B1FB17;
}
#color4 {
flex: 1;
background: #78e08f;
color: #78e08f;
}
#color5 {
flex: 1;
background: #fd79a8;
color: #fd79a8;
}
Archivo JavaScript: script.js El código JavaScript se utiliza para dar funcionalidad a la página web. Aquí usamos la función de flecha con el parámetro «id».
Javascript
const bgchange =(id) => {
document.body.style.background =
document.getElementById(id).innerHTML;
}
Producción:
- Antes de elegir el color:
Cambiador de fondo con cuadro de color
- Después de elegir el color:
Cambiador de fondo con cuadro de color
Publicación traducida automáticamente
Artículo escrito por kunalbhade y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA