Company Rating Free API integration with JAVASCRIPT.

Company Rating Free API integration with JAVASCRIPT.

by Financial Modeling Prep

HTML

<h1>Agilent Rating</h1>
<form>
  <fieldset>
    <span class="star-cb-group">
      <input type="radio" id="rating-5" name="rating" value="5" /><label for="rating-5">5</label>
      <input type="radio" id="rating-4" name="rating" value="4" /><label for="rating-4">4</label>
      <input type="radio" id="rating-3" name="rating" value="3" /><label for="rating-3">3</label>
      <input type="radio" id="rating-2" name="rating" value="2" /><label for="rating-2">2</label>
      <input type="radio" id="rating-1" name="rating" value="1" /><label for="rating-1">1</label>
      <input type="radio" id="rating-0" name="rating" value="0" class="star-cb-clear"/><label for="rating-0">0</label>
    </span>
  </fieldset>
</form>

SCSS

form {
  min-height: 200px;
}

@charset "UTF-8";
.star-cb-group {
  /* remove inline-block whitespace */
  font-size: 0;
  /* flip the order so we can use the + and ~ combinators */
  unicode-bidi: bidi-override;
  direction: rtl;
  /* the hidden clearer */
}
.star-cb-group * {
  font-size: 1rem;
}
.star-cb-group > input {
  display: none;
}
.star-cb-group > input + label {
  /* only enough room for the star */
  display: inline-block;
  overflow: hidden;
  text-indent: 9999px;
  width: 1em;
  white-space: nowrap;
  cursor: pointer;
}
.star-cb-group > input + label:before {
  display: inline-block;
  text-indent: -9999px;
  content: "☆";
  color: #888;
}
.star-cb-group > input:checked ~ label:before, .star-cb-group > input + label:hover ~ label:before, .star-cb-group > input + label:hover:before {
  content: "★";
  color: #e52;
  text-shadow: 0 0 1px #333;
}
.star-cb-group > .star-cb-clear + label {
  text-indent: -9999px;
  width: .5em;
  margin-left: -.5em;
}
.star-cb-group > .star-cb-clear + label:before {
  width: .5em;
}
.star-cb-group:hover > input + label:before {
  content: "☆";
  color: #888;
  text-shadow: none;
}
.star-cb-group:hover > input + label:hover ~ label:before, .star-cb-group:hover > input + label:hover:before {
  content: "★";
  color: #e52;
  text-shadow: 0 0 1px #333;
}

:root {
  font-size: 2em;
  font-family: Helvetica, arial, sans-serif;
}

body {
  color: #888;
}

fieldset {
  border: 0;
  width: 5em;
  border-radius: 1px;
  margin: 1em auto;
}

#log {
  margin: 1em auto;
  width: 5em;
  text-align: center;
  background: transparent;
}

h1 {
  text-align: center;
}

JavaScript

var symbolName = 'Agilent Technol';
 var symbol = 'AAPL';
 document.addEventListener('DOMContentLoaded', () => {
   // https://financialmodelingprep.com/developer/docs
   getRequest(
     'https://financialmodelingprep.com/api/v3/company/rating/' + symbol + "?apikey=demo",
     drawOutput
   );

   function drawOutput(responseText) {
  
     let resp = JSON.parse(responseText)
     .rating.score;
     
     console.log(resp)
     
     radiobtn = document.getElementById("rating-"+resp);
		 radiobtn.checked = true;

   }

   function getRequest(url, success) {
     var req = false;
     try {
       req = new XMLHttpRequest();
     } catch (e) {
       try {
         req = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
         try {
           req = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
           return false;
         }
       }
     }
     if (!req) return false;
     if (typeof success != 'function') success = function() {};
     req.onreadystatechange = function() {
       if (req.readyState == 4) {
         if (req.status === 200) {
           success(req.responseText)
         }
       }
     }
     req.open("GET", url, true);
     req.send(null);
     return req;
   }
 })