Generador de cotizaciones aleatorias usando HTML, CSS y JavaScript
En el desarrollo moderno del sitio web, se observan citas en cualquier lado de la página web. Estas citas aleatorias se generan con la ayuda de un generador de cotizaciones aleatorias. El generador de cotizaciones aleatorias se crea con la ayuda de HTML, CSS y JavaScript. Las citas se utilizan para enfocar a los usuarios y con una mente de palo a contenido.
Teniendo en cuenta la importancia de las cotizaciones en las páginas web, la guía de hoy lo ayudará a crear un generador de cotización aleatorio utilizando HTML, CSS y JavaScript.
Cómo crear un generador de cotizaciones aleatorias?
Es una mejor práctica usar el generador de cotizaciones aleatorias en su página web. El funcionamiento de un generador de cotizaciones aleatorias es fácil de entender. Extrae una cita al azar cada vez presionando un clic y presentándola en la ventana del navegador. Además, los usuarios pueden recuperar/extraer cotizaciones de diferentes fuentes, como matrices, bases de datos o API.
Ejemplo
Un ejemplo se adapta para generar un generador de cotizaciones aleatorias utilizando el HTML, CSS y JavaScript.
Para una mejor comprensión, hemos explicado explícitamente los códigos HTML, CSS y JavaScript.
Html
El siguiente código de ejemplo se refiere a la parte HTML del generador de cotizaciones aleatorias.
rel = "Stylesheet"/>
En este código, la descripción se enumera aquí:
- En primer lugar, las fuentes de Google se importan y un enlace a una hoja de estilo externo (cuyo código se explica a continuación) también se coloca.
- Se especifica un área/contenedor para mostrar la cotización aleatoria por etiquetas.
- Después de eso, el párrafo La etiqueta se usa para pasar la cotización como un valor para identificación.
- El y Las etiquetas son "autor" de ID asociadas y "cita".
- Un botón llamado "Presiona el botón" es creado.
- Por último, el ".js”(Cuyo código se explica a continuación) está vinculado con este archivo HTML.
Usando CSS
El propósito de agregar un archivo CSS es dar un aspecto atractivo y atractivo a la interfaz.
*relleno: 2;
margen: 3;
dimensionamiento de la caja: border-box;
Font-Family: "Poppins", sans-serif;
.botón de contenedor
Color de fondo: #ffffff;
borde: ninguno;
relleno: 15px 45px;
Border-Radius: 5px;
tamaño de fuente: 18px;
Font-peso: 600;
color verde;
cursor: puntero;
cuerpo
Color de fondo: blanco;
La descripción del código es la siguiente:
- El relleno, margen, dimensionamiento de la caja, y Familia tipográfica se utilizan para todos los elementos HTML.
- Después de eso, se asignan algunas propiedades al botón como Tamaño de fuente, color, color de fondo, etc.
- Finalmente, el fondo El color del cuerpo se selecciona para ser blanco para la visibilidad de los usuarios.
Javascript
El código JavaScript asociado con el archivo HTML se proporciona a continuación:
Dejar citar = documento.getElementById ("cita");Sea autor = documento.getElementById ("autor");
Sea btn = documento.getElementById ("BTN");
const url = "https: // API.citable.io/aleatorio ";
Deje getq = () =>
buscar (url)
.entonces ((data) => datos.json ())
.entonces ((item) =>
cita.inntext = elemento.contenido;
autor.inntext = elemento.autor;
);
;
ventana.addEventListener ("cargar", getq);
btn.addEventListener ("hacer clic", getq);
La descripción del código se menciona a continuación:
- En primer lugar, tres variables (cita, autor y btn) se utilizan para vincular con Html elementos.
- Después de eso, se importa una API para representar cotizaciones aleatorias.
- Además, el obtener W() El método se utiliza para obtener el contenido de un cita con un autor nombre.
- Finalmente, el AddEventListener La propiedad se emplea pasando un hacer clic valor como argumento.
Producción
La salida muestra las cotizaciones aleatorias en el navegador empleando HTML, CSS y JavaScript. Al presionar cada vez, se genera una nueva cita aleatoria en el navegador.
Conclusión
A generador de cotizaciones aleatorias se desarrolla utilizando HTML, CSS, y Javascript. El Html El archivo proporciona el área/contenedor específico para mostrar una cotización. El papel de un CSS El archivo es para dar propiedades de estilo como color de fuente, color de fondo, tamaño de texto, etc. Para que el generador sea atractivo/atractivo para los usuarios. Además, Javascript proporciona las operaciones lógicas para extraer la cotización aleatoria. Aquí, has aprendido que todos estos pasos se dan en un orden ordenado.