💡 Generador de citas aleatorias en HTML, CSS y JavaScript
En este artículo, analizaremos cómo crear un generador de citas aleatorias simple usando HTML, CSS y JavaScript. ✨ Este es un gran proyecto para que los principiantes practiquen el uso de las tres tecnologías al mismo tiempo. Al final del artículo, tendrás una aplicación lista para usar que genera citas aleatorias, te permite copiarlas, expresarlas y compartirlas en Twitter. ¡Empecemos!
✨ Demo del proyecto | 📂 Descargar el código fuente en GitHub
🤖 En la aplicación Kodik ¡Puedes aprender HTML, CSS y JavaScript, así como muchos otros cursos para comenzar tu viaje en el desarrollo web! 🌱
🛠️ Preparación
Antes de empezar a escribir el código, asegúrate de que tienes lo siguiente:
🗒️ Editor de código: Puedes usar cualquier editor de texto, pero te recomiendo Visual Studio Code, ya que es cómodo y tiene muchas extensiones útiles.
🛈 Navegador: Cualquier navegador moderno, como Chrome o Firefox, para probar tu aplicación.
📘 Conocimientos básicos de HTML, CSS y JavaScript: Es recomendable tener conocimientos básicos para comprender mejor el proyecto, pero también puedes seguir este artículo incluso sin preparación.
Ahora que estás listo, ¡empecemos a crear nuestro proyecto desde un archivo HTML en blanco! 🌱
🗃️ Paso 1: Creación de HTML
HTML es la base de nuestra aplicación. Creamos un archivo index.html, en el que describimos la estructura del futuro generador de citas:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Генератор случайных цитат | Coursme</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Цитата дня</header>
<div class="content">
<div class="quote-area">
<i class="fas fa-quote-left"></i>
<p class="quote">Никогда не сдавайтесь, потому что вы никогда не знаете, может быть, следующая попытка окажется успешной.</p>
<i class="fas fa-quote-right"></i>
</div>
<div class="author">
<span>__</span>
<span class="name">Мэри Кэй Эш</span>
</div>
</div>
<div class="buttons">
<div class="features">
<ul>
<li class="speech"><i class="fas fa-volume-up"></i></li>
<li class="copy"><i class="fas fa-copy"></i></li>
<li class="twitter"><i class="fab fa-twitter"></i></li>
</ul>
<button>Новая цитата</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>En este archivo hemos creado el marco principal de nuestra aplicación. Contiene un título, un área para mostrar citas y autor, así como botones para la interacción.
🖼️ Paso 2: Estilizar con CSS
¡Ahora vamos a hacer nuestra aplicación más bonita! Para ello, utilizamos CSS. Creamos un archivo style.css y añadimos estilos:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #5372F0;
}
.wrapper{
width: 605px;
background: #fff;
border-radius: 15px;
padding: 30px 30px 25px;
box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
header{
font-size: 35px;
font-weight: 600;
text-align: center;
}
.quote{
font-size: 22px;
text-align: center;
}
.author{
font-size: 18px;
font-style: italic;
text-align: right;
}
button{
border: none;
color: #fff;
padding: 13px 22px;
background: #5372F0;
border-radius: 30px;
cursor: pointer;
}Hemos añadido estilos para una interfaz cómoda y agradable: hemos cambiado la fuente, establecido el fondo, añadido estilos para los botones y el texto.
💡 Paso 3: Añadir lógica con JavaScript
Ahora es el momento de añadir funcionalidad a nuestra aplicación usando JavaScript. Creamos un archivo script.js y añadimos el siguiente código:
// Obtener todos los elementos DOM necesarios
const quoteText = document.querySelector(".quote"),
quoteBtn = document.querySelector("button"),
authorName = document.querySelector(".name"),
speechBtn = document.querySelector(".speech"),
copyBtn = document.querySelector(".copy"),
twitterBtn = document.querySelector(".twitter"),
synth = speechSynthesis;
// Función para obtener una cita aleatoria
function randomQuote() {
quoteBtn.classList.add("loading");
quoteBtn.innerText = "Loading Quote...";
fetch("https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=ru")
.then(response => response.json())
.then(result => {
quoteText.innerText = result.quoteText;
authorName.innerText = result.quoteAuthor || "Unknown author";
quoteBtn.classList.remove("loading");
quoteBtn.innerText = "New quote";
});
}
// Eventos para botones
speechBtn.addEventListener("click", () => {
if (!quoteBtn.classList.contains("loading")) {
let utterance = new SpeechSynthesisUtterance(`${quoteText.innerText} from ${authorName.innerText}`);
synth.speak(utterance);
}
});
copyBtn.addEventListener("click", () => {
navigator.clipboard.writeText(quoteText.innerText);
});
twitterBtn.addEventListener("click", () => {
let tweetUrl = `https://twitter.com/intent/tweet?url=${quoteText.innerText}`;
window.open(tweetUrl, "_blank");
});
quoteBtn.addEventListener("click", randomQuote);🧐 Explicación de los métodos
Obtener todos los elementos DOM necesarios:
quoteText: Enlace al elemento donde se mostrará el texto de la cita.
quoteBtn: Enlace al botón para generar una nueva cita.
authorName: Enlace al elemento que muestra el nombre del autor de la cita.
speechBtn, copyBtn, twitterBtn: Enlaces a los botones para reproducir citas, copiar y publicar en Twitter, respectivamente.
synth: Utilizamos la API de síntesis de voz del navegador para dar voz a las citas.
randomQuote(): Esta función realiza una solicitud a la API para obtener una cita aleatoria y la muestra en la aplicación. Mientras se carga la cita, el botón se vuelve inactivo y el texto del botón cambia a "Loading Quote...".
Eventos para botones:
Sonido de la cita (▶️): Al hacer clic en el botón de voz de la cita, se crea el objeto
SpeechSynthesisUtterance, que expresa la cita actual mediante la síntesis de voz.Copiar cita (📋): Copia el texto de la cita actual en el portapapeles del usuario usando
navigator.clipboard.writeText().Publicación en Twitter (🔗): Abre una ventana para publicar la cita actual en Twitter, creando una URL para el tuit con el texto de la cita.
Nueva cita: Al pulsar el botón se activa la función
randomQuote()para cargar una nueva cita.
💖 Resultados
Creamos un generador de citas aleatorias sencillo utilizando HTML, CSS y JavaScript. ✨ Este proyecto nos ayudó a combinar nuestros conocimientos de diseño y programación, así como a trabajar con la API. Ahora puedes ampliarlo añadiendo más funciones, como guardar tus citas favoritas o incluso crear tu propia lista de citas. ¡Buena suerte e inspiración en tu futuro estudio del desarrollo web! 🌱
Puedes utilizar este proyecto como base para crear juegos más complejos o incluso ampliar la funcionalidad de este juego. Por ejemplo, añadir un contador de victorias, mejorar los gráficos o hacer el juego multijugador. ¡Las posibilidades son infinitas, y todo depende de tu imaginación y creatividad!
Para obtener el código fuente completo y posiblemente mejoras adicionales, echa un vistazo a nuestro GitHub.
Si tienes alguna pregunta, no dudes en preguntar. ¡Buena suerte en la programación y que tus proyectos sean siempre tan interesantes y emocionantes! 👊🌟