Advice Generator using HTML | CSS | JS | Fetch API

byAltafAlam Shaikh •
0

 Advice Generator using HTML | CSS | JS | Fetch API

preview

Advice generator is a web app built using Html, Css and Js. It is a simple project to demonstrate the use of Fetch API so that we can fetch different advice on a single click. 

Please follow the below code and get started. <>

Folder structure:

Advice-Generator
  1. index.html
  2. style.css
  3. app.js
  4. images
    • pattern-divider.svg
    • icon-dice.svg

HTML Code 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <title>Advice generator app</title>

  <!-- link to google font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap" rel="stylesheet">

  <!-- link to external css file -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="advide-sequence">
      <!-- show advice id -->
      <h3>ADVICE #<span id="advice-id"></span></h3>
    </div>
    <div class="advice-body">
      <!-- show advice here -->
      <p id="advice-text"></p>
    </div>
    <div class="divider">
      <img src="./images/pattern-divider.svg" alt="divider">
    </div>
    <button id="btn" class="btn">
      <img src="./images/icon-dice.svg" alt="Get">
    </button>
  </div>

  <!-- link to external javaScript file -->
  <script src="./app.js"></script>
</body>

</html>

CSS Code 

:root {
  --Light-Cyan: hsl(193, 38%, 86%);
  --Neon-Green: hsl(150, 100%, 66%);
  --Grayish-Blue: hsl(217,19%,23%);
  --Dark-Grayish-Blue: hsl(219,21%,16%)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--Dark-Grayish-Blue);
  font-family: 'Manrope', sans-serif;
}

.container {
  position: relative;
  background: var(--Grayish-Blue);
  padding: 2.5rem 1rem 3.5rem 1rem;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 500px;
  max-width: 98%;
}

h3 {
  font-size: 0.85rem;
  color: var(--Neon-Green);
  letter-spacing: .2rem;
}

.advice-body {
  color: var(--Light-Cyan);
  font-size: 1.75rem;
  text-align: center;
  padding: 2rem 0;
}

.btn {
  position: absolute;
  bottom: -10%;
  border: none;
  outline: none;
  cursor: pointer;
  background: var(--Neon-Green);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn:active {
  transform: scale(0.95);
}

JS Code 

const btn = document.getElementById('btn');

// get advice on click
btn.addEventListener('click', getAdvice)

// get advice function
async function getAdvice() {
  // fetching advices from below API
  const data = await fetch('https://api.adviceslip.com/advice');
  const res = await data.json();

  // populate advice in html elements
  document.getElementById('advice-id').innerText = res.slip.id;
  document.getElementById('advice-text').innerText = res.slip.advice;
}

// get advice at start
getAdvice()

That is all, Thank you for visiting my blog :)
Code by - AltafAlam Shaikh


Links and resources:

Tags:
Post a Comment (0)
Previous Post Next Post