En este artículo, vamos a aprender cómo crear una página web que genere deseos de cumpleaños aleatorios utilizando HTML, CSS y JavaScript.
Acercarse:
Código HTML: en esta sección, crearemos una estructura básica del archivo HTML, es decir, que contenga etiquetas <html>, <head>, <body>, etc.
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div class="body-bg"></div> <div class="container"> <div class="container-data"> <div id="msg"></div> </div> </div> </body> </html>
Código CSS: Se utiliza para establecer los estilos al documento HTML. Aquí, establecemos el ancho, alto y posición del documento. Usaremos una consulta de medios CSS para establecer los estilos en diferentes tamaños de pantallas.
CSS
.body-bg {
width: 100%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: radial-gradient(#00E7BD, #013A4E);
transition: all 0.5s;
}
.container {
width: 80%;
height: 80%;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: linear-gradient(#00E7BD, #013A4E);
box-shadow: 0 0 20px 2px #013A4E;
}
.container-data {
padding: 24px;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: #fff;
font-family: Arial;
font-size: 3vw;
}
@media only screen and (max-width: 763px) {
.container-data {
padding: 24px;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: #fff;
font-family: Arial;
font-size: 6vw;
}
}
@media only screen and (max-height: 423px) {
.container-data {
padding: 24px;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: #fff;
font-family: Arial;
font-size: 4vw;
}
}
Código JavaScript: ahora queremos mostrar el mensaje de cumpleaños aleatorio a alguien y esto se puede hacer a través de JavaScript. En esta sección, almacenamos todos los mensajes en una variable de array y luego usamos la propiedad array.length para verificar el tamaño de la array. Después de eso, use la función math.random() para generar un número aleatorio para mostrar el mensaje aleatorio.
JavaScript
var messages = ["Happy birthday to GFG",
"Happy birthday to GeeksforGeeks",
"Happy birthday to Geeks"];
var i = messages.length;
var s = Math.floor(Math.random() * i);
document.getElementById("msg")
.innerHTML = '" ' + messages[s] + ' "';
Código completo: después de combinar las tres secciones de código anteriores, genera un mensaje de deseo de cumpleaños aleatorio.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<style>
.body-bg {
width: 100%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: radial-gradient(#00e7bd, #013a4e);
transition: all 0.5s;
}
.container {
width: 80%;
height: 80%;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: linear-gradient(#00e7bd, #013a4e);
box-shadow: 0 0 20px 2px #013a4e;
}
.container-data {
padding: 24px;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: #fff;
font-family: Arial;
font-size: 3vw;
}
@media only screen and (max-width: 763px) {
.container-data {
padding: 24px;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: #fff;
font-family: Arial;
font-size: 6vw;
}
}
@media only screen and (max-height: 423px) {
.container-data {
padding: 24px;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: #fff;
font-family: Arial;
font-size: 4vw;
}
}
</style>
</head>
<body>
<div class="body-bg"></div>
<div class="container">
<div class="container-data">
<div id="msg"></div>
</div>
</div>
<script>
var messages = ["Happy birthday to GFG",
"Happy birthday to GeeksforGeeks",
"Happy birthday to Geeks"];
var i = messages.length;
var s = Math.floor(Math.random() * i);
document.getElementById("msg")
.innerHTML = '" ' + messages[s] + ' "';
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por NavdeepSharma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA