Company Rating Free API integration with VueJS

Company Rating Free API integration with VueJS

by Financial Modeling Prep

HTML

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/v-data-table/dist/v-data-table.js"></script>
<div id="app">
     <h1>{{stockName}} 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>

</div>

CSS

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: #41b883;
  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: #41b883;
  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

// https://financialmodelingprep.com/developer/docs
var app = new Vue({
  el: "#app",
  data: {
    url: 'https://financialmodelingprep.com/api/v3/company/rating/AAPL?apikey=demo',
    financials: [],
    loaded: false,
    searchQuery: '',
    stockName: 'Facebook Inc.',
    stock: 'FB',
    checked:true,
  },
  created: function() {
     var self = this
    axios
      .get(this.url)
      .then((response) => {
               this.loaded = true;

        this.financials = response.data.rating.score;
     	    
          console.log(this.financials)
      let radiobtn = document.getElementById("rating-"+ this.financials);
     radiobtn.checked = true;
        
     
      })
      .catch((error) => {
        alert('error');
      })
  }
});