API Request - JS

api-request-js.markdown

API Request - JS

A Pen by Devshades on CodePen.

License.

index.html

<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">HIBP Fetch Kitty</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <input id="name" type="text" class="form-control" placeholder="Adobe">
    </div>
    <button onclick="getBreaches()" class="btn btn-primary">Request</button>
    </ul>
  </div>
  </div>

</nav>
<!-- Page content-->
<div class="container">
  <div class="text-center mt-5">
    <svg class="cat" viewBox="0 0 512 512" width="50" title="cat">
      <path d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z" />
    </svg>
    <h1>HIBP Fetch Kitty</h1>

    <p class="lead">HaveIBeenPwned API Requests</p>
     <div class="content">
       
       <div class="response">
     <div>
  <pre id="resultOut" class="section"> </pre>
    </div>  
       </div>
       
      

   
    </div>
  </div>
  
  <footer class="bg-light text-center text-lg-start">
  <!-- Copyright -->
  <div class="text-center p-3" style="background-color: black; color: white;">
      Made by <a href="https://codepen.io/devshades-au">@Devshades</a> | Hosted by <a href="https://codepen.io">@CodePen</a> | Requests from <a href="haveibeenpwned.com">HaveIBeenPwned</a>
  </div>
  <!-- Copyright -->
</footer>

script.js

function getBreaches() {
  document.getElementById("resultOut").innetHTML = "";
  var company = document.getElementById("name").value;
  (async () => {
    
    const res = await fetch("https://haveibeenpwned.com/api/v2/breach/"+company, {
      headers: { Accept: "application/json" }
    });
    const json = await res.json();
    Object.entries(json).forEach(([key, value]) => {
      console.log(`${key}: ${value}`);
document.getElementById("resultOut").innerHTML =   document.getElementById("resultOut").innerHTML+"\n"+(`${key}: ${value}`);
    });
  })();
}

style.scss

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital@1&display=swap');
body {
 background-color: black;
 font-family: 'Titillium Web';
 color: white;
 line-height: 1.4;
  padding: 1rem;
  min-height: 1200px;
 
}

button {
  padding: 10px !important;
}
input {
  padding: 10px !important;
}

pre {
  width: auto;
  justify-content: left;
  text-align: left;
  color: limegreen;
}
.cat {
  color: white !important;
  background-color: white;
  border-radius: 10px;
  padding: 6px;
  margin: 10px;
}
.section {
  max-height: 400px;
  padding: 1rem;
  overflow-y: auto;
  direction: ltr;
  scrollbar-color: #d4aa70 #e4e4e4;
  scrollbar-width: thin;

  h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  p + p {
    margin-top: 1rem;
  }
}

.section::-webkit-scrollbar {
  width: 20px;
}

.section::-webkit-scrollbar-track {
  background-color: darkgray;
  border-radius: 100px;
}

.section::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 6px solid rgba(0, 0, 0, 0.18);
  border-left: 0;
  border-right: 0;
  background-color: limegreen;
}

::-webkit-scrollbar-corner {
/*
background-image: url(resources/corner.png);
background-repeat: no-repeat;
*/
background-color: black;
}

* {
  box-sizing: border-box;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />