Skip to content
Submitted 2 months ago

Advice Generator APP made with HTML, CSS y JS

Benjamin Juarez•390
@ImBenja
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Frontend Mentor - Advice generator app solution

Esta es mi solución al desafío Advice generator app solution de Frontend Mentor. Los desafíos de Frontend Mentor te ayudan a mejorar tus habilidades de codificación mediante la construcción de proyectos realistas.

📖 DESCRIPCION GENERAL

EL DESAFIO

Los usuarios deben poder:

  1. Ver el diseño óptimo según el tamaño de pantalla de su dispositivo.

  2. Ver los diseños.

  3. Ver todos los consejos disponibles.

  4. Ver el numero del consejo.

  5. Ver cada Red Social.

LINKS

🛠️ MI PROCESO

TECNOLOGIAS UTILIZADAS

  • HTML: Estructura semántica de todo la APP.

  • CSS: Estilos avanzados.

  • JavaScript: Funcionalidad para mostrar el consejo y uso de Fetch para obtener los consejos.

  • Google Fonts: Fuente Manrope para un diseño moderno.

LO QUE APRENDI

  1. Manejo de Fetch: Uso de Fetch para obtener los consejos de la api.adviceslip.com, con el uso de Fetch se puede obtener los datos de la api y mostrarlos en la APP.

  2. Mostrar el consejo: Aprendí a mostrar el consejo utilizando JavaScript.

const adviceId = document.querySelector(".advice__id");
const adviveText = document.querySelector(".text__advice");
const btn = document.querySelector(".btn__advice");

function getAdvice() {
  fetch("https://api.adviceslip.com/advice")
    .then((res) => {
      if (!res.ok) {
        throw new Error("Something went wrong");
      }
      return res.json();
    })
    .then((data) => {
      adviceId.textContent = ` #${data.slip.id}`;
      adviveText.textContent = `"${data.slip.advice}"`;
      adviveText.style.color = "hsl(193, 38%, 86%)";
    })
    .catch((err) => {
      adviveText.textContent = err.message;
    });
}

btn.addEventListener("click", getAdvice);

👨‍💻 AUTOR

🙏 AGRADECIMIENTOS

Agradezco a Frontend Mentor por proporcionar este desafío y a la comunidad por su apoyo y feedback.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•9,350
    @MarziaJalili

    Awesome! 🎉

    🌟 A tiny suggestion?

    ✅ The most moder way to fetch data is using the async/await method. This version is generally better for readability, man.

    ✅ Here's how you can change the function to this version:

    async function getAdvice() {
  try {
    const res = await fetch("https://api.adviceslip.com/advice");
    if (!res.ok) {
      throw new Error("Something went wrong");
    }
    const data = await res.json();
    adviceId.textContent = ` #${data.slip.id}`;
    adviveText.textContent = `"${data.slip.advice}"`;
    adviveText.style.color = "hsl(193, 38%, 86%)";
  } catch (err) {
    adviveText.textContent = err.message;
  }
}

    ✅ When we set await, it basically says: "Wait for this line to finish it's job completely and then go for the next one."

    😎😎😎

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord