viniciusshenri96 / advice-generator-app

I used async/awai, and fetch() to be able to generate advice through the adviceslip API and generated an error message if the promise is not resolved with cath()

Advice generator app

 

🚧 Advice generator app 🟢 Completed 🚀 🚧

 

Project description 📚

This is a solution to the challenge Advice generator app.

This is a challenge on the Mentor frontend site, where I was able to put my knowledge of async/await into practice.

 

What I learned

I used async/awai, and fetch() to be able to generate advice through the adviceslip API and generated an error message if the promise is not resolved with cath()

API: https://api.adviceslip.com/advice

try {
  const res = await fetch("https://api.adviceslip.com/advice");
  const data = await res.json();
  adviceText.innerText = `“${data.slip.advice}”`;
  adviceID.innerText = data.slip.id;
} catch (err) {
  console.error(new Error("It is not an internet connection"));
}

Animated blackground with Vanta.js:

HTML:

...
<div id="vanta"></div>
...

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>

JS:

window.addEventListener("DOMContentLoaded", () => {
  VANTA.GLOBE({
    el: "#vanta",
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    scaleMobile: 1.0,
    color: 0x3fff8e,
  });
});

Links

• Preview Site

My process

Built with

• HTML
• CSS
• JS
• API
• Vanta.JS

👨‍💻 Author

• Frontend Mentor
• Linkedin