css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- NOTE:
added abbreviations
added "amount" and calculations for it
added default selections
--->


<div class="container" id="the-container">
    <h2>CRYPTO to USD</h2>

    <form class="form-inline" id="search-form">
     <div class ="row" id="the-row">
       <div class ="col col-md-2">
        <input type="text" class="form-control" id="amountQuery" placeholder="Enter amount">
       </div>
       <div class ="col col-md-9">
      <select class="select2 float-left" name="coin" id="query">
        <option></option>
      </select>
       </div>
       </div>
  
      <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>


<div class="container" id="results-container">
  <p></p>
</div>
            
          
!
            
              #the-container {
  padding: 5% 0 0 5%;
}

#the-row {
  width: 100%
}

#amountQuery {
  height: 93%;
  width: 100%;
  border: solid 1px #A9A9A9;
  margin-top: -1px;
}

.form-inline {
  width: 100%;
}
#query {
  border: solid lightgrey;
}

.btn {
  margin: 3vh 0 3vh 0;
}

#results-container {
  padding-left: 5%;
}
            
          
!
            
              /**
 * Exercise:
 *
 * Please choose any open API and create a search form to look for
 * dogs, news, cars, whatever.
 *
 * Here's a list of open APIs that return JSON data:
 * https://github.com/toddmotto/public-apis
 *
 * If you want to do yourself a favour, please choose an API
 * where the "Auth" column says "apiKey" or "No".
 *
 * Steps to achieve:
 *  - Create a Bootstrap form to search for a query string
 *  - Create a class to get the data from the API (remember what callbacks are?)
 *  - Create a second class to handle the form and use the first class to get the data
 */

/***** PUT THIS SOMEWHERE BETTER ***********/

const allCurrencies = [{"id":"bitcoin","text":"Bitcoin BTC"},{"id":"ethereum","text":"Ethereum ETH"},{"id":"bitcoin-cash","text":"Bitcoin Cash BCH"},{"id":"iota","text":"IOTA MIOTA"},{"id":"ripple","text":"Ripple XRP"},{"id":"dash","text":"Dash DASH"},{"id":"litecoin","text":"Litecoin LTC"},{"id":"bitcoin-gold","text":"Bitcoin Gold BTG"},{"id":"monero","text":"Monero XMR"},{"id":"cardano","text":"Cardano ADA"},{"id":"ethereum-classic","text":"Ethereum Classic ETC"},{"id":"stellar","text":"Stellar Lumens XLM"},{"id":"nem","text":"NEM XEM"},{"id":"eos","text":"EOS EOS"},{"id":"neo","text":"NEO NEO"},{"id":"bitconnect","text":"BitConnect BCC"},{"id":"monacoin","text":"MonaCoin MONA"},{"id":"lisk","text":"Lisk LSK"},{"id":"zcash","text":"Zcash ZEC"},{"id":"omisego","text":"OmiseGO OMG"},{"id":"qtum","text":"Qtum QTUM"},{"id":"tether","text":"Tether USDT"},{"id":"waves","text":"Waves WAVES"},{"id":"stratis","text":"Stratis STRAT"},{"id":"populous","text":"Populous PPT"},{"id":"hshare","text":"Hshare HSR"},{"id":"ardor","text":"Ardor ARDR"},{"id":"bitshares","text":"BitShares BTS"},{"id":"einsteinium","text":"Einsteinium EMC2"},{"id":"bytecoin-bcn","text":"Bytecoin BCN"},{"id":"ark","text":"Ark ARK"},{"id":"nxt","text":"Nxt NXT"},{"id":"augur","text":"Augur REP"},{"id":"vertcoin","text":"Vertcoin VTC"},{"id":"steem","text":"Steem STEEM"},{"id":"decred","text":"Decred DCR"},{"id":"qash","text":"QASH QASH"},{"id":"komodo","text":"Komodo KMD"},{"id":"salt","text":"SALT SALT"},{"id":"dogecoin","text":"Dogecoin DOGE"},{"id":"golem-network-tokens","text":"Golem GNT"},{"id":"veritaseum","text":"Veritaseum VERI"},{"id":"maidsafecoin","text":"MaidSafeCoin MAID"},{"id":"pivx","text":"PIVX PIVX"},{"id":"siacoin","text":"Siacoin SC"},{"id":"binance-coin","text":"Binance Coin BNB"},{"id":"tenx","text":"TenX PAY"},{"id":"status","text":"Status SNT"},{"id":"factom","text":"Factom FCT"},{"id":"power-ledger","text":"Power Ledger POWR"},{"id":"walton","text":"Walton WTC"},{"id":"digixdao","text":"DigixDAO DGD"},{"id":"syscoin","text":"Syscoin SYS"},{"id":"basic-attention-token","text":"Basic Attention Token BAT"},{"id":"bitcoindark","text":"BitcoinDark BTCD"},{"id":"exchange-union","text":"Exchange Union XUC"},{"id":"kyber-network","text":"Kyber Network KNC"},{"id":"santiment","text":"Santiment Network Token SAN"},{"id":"zcoin","text":"ZCoin XZC"},{"id":"byteball","text":"Byteball Bytes GBYTE"},{"id":"cryptonex","text":"Cryptonex CNX"},{"id":"bytom","text":"Bytom BTM"},{"id":"vechain","text":"VeChain VEN"},{"id":"gas","text":"Gas GAS"},{"id":"tron","text":"TRON TRX"},{"id":"iconomi","text":"Iconomi ICN"},{"id":"gnosis-gno","text":"Gnosis GNO"},{"id":"raiden-network-token","text":"Raiden Network Token RDN"},{"id":"digibyte","text":"DigiByte DGB"},{"id":"gamecredits","text":"GameCredits GAME"},{"id":"aeternity","text":"Aeternity AE"},{"id":"pura","text":"Pura PURA"},{"id":"funfair","text":"FunFair FUN"},{"id":"civic","text":"Civic CVC"},{"id":"blocknet","text":"Blocknet BLOCK"},{"id":"minexcoin","text":"MinexCoin MNX"},{"id":"0x","text":"0x ZRX"},{"id":"monaco","text":"Monaco MCO"},{"id":"nav-coin","text":"NAV Coin NAV"},{"id":"metal","text":"Metal MTL"},{"id":"bancor","text":"Bancor BNT"},{"id":"chainlink","text":"ChainLink LINK"},{"id":"potcoin","text":"PotCoin POT"},{"id":"ethos","text":"Ethos ETHOS"},{"id":"streamr-datacoin","text":"Streamr DATAcoin DATA"},{"id":"verge","text":"Verge XVG"},{"id":"storj","text":"Storj STORJ"},{"id":"gxshares","text":"GXShares GXS"},{"id":"edgeless","text":"Edgeless EDG"},{"id":"nexus","text":"Nexus NXS"},{"id":"metaverse","text":"Metaverse ETP ETP"},{"id":"skycoin","text":"Skycoin SKY"},{"id":"singulardtv","text":"SingularDTV SNGLS"},{"id":"yoyow","text":"YOYOW YOYOW"},{"id":"rchain","text":"RChain RHOC"},{"id":"zencash","text":"ZenCash ZEN"},{"id":"ubiq","text":"Ubiq UBQ"},{"id":"counterparty","text":"Counterparty XCP"},{"id":"substratum","text":"Substratum SUB"},{"id":"adx-net","text":"AdEx ADX"}];

class PriceCheck {
  constructor () {
    this.baseApiURL = 'https://api.coinmarketcap.com/v1/ticker/';
    this.elements = {
      "form": $('#search-form'),
      "queryInput": $('#query'),
      "queryInputAmount": $('#amountQuery'),
      "results": $('#results-container')
    }
      this.addCorsHeader();
      this.registerFormHandler();
    
    }; /*end of constructor*/
  
  addCorsHeader() {
    jQuery.ajaxPrefilter(function(options) {
      if (options.crossDomain && jQuery.support.cors) {
          options.url = 'https://cors-anywhere.herokuapp.com/' + options.url;
      }
    });
  } /* end of cors header thing */
  
  registerFormHandler() {
    this.elements.form.on('submit', (e) => {
      e.preventDefault();
      let info = this.elements.queryInput.val().trim();
      let amount = this.elements.queryInputAmount.val().trim();
      
      $.getJSON(`${this.baseApiURL}${info}`)
        .done((data) => {
          let price = parseInt(data[0].price_usd);
          let currency = data[0].name;
          this.elements.results.text(`${amount} ${currency} = ${price * amount} USD`);
         /*delete later */
console.log(data);
      /* delete later */
      })    
    });
    
    $('.select2').select2({
      placeholder: 'Select coin',
      width: "50%",
      data: allCurrencies
    });
    
    $('#query').on('select2:close', (e) => {
      this.query = $(e.target).val();
      this.elements.form.submit();
    });
    
  }
  /*
  registerEvents() {
    this.elements.form.on('submit', (e) => {
      e.preventDefault();
      console.log('blah');
      
      this.query = this.elements.queryInput.val().trim();
      const isValid = this.validate();
      
      if (true === isValid) {
        getResultsByQuery();
      }
    });
  } */ /* end of register events*/
  
  
  validate() {
    if (this.query.length === 0) {
      this.error = 'invalid coin';
    } else if (this.query.length < 2) {
      this.error = 'invalid coin';
    } 
    
    if (this.error !== null) {
      this.showError(); /* NEED TO MAKE THIS */
      return false;
    }
    
    return true;
  } /* end of validate */
  
  
  getResultsByQuery(callback) {        
    const apiUrl = `${ this.apiBaseUrl }/${ this.query }`;
    
    $.getJSON(apiUrl)
    .done((data) => {
      this.result = data;
      this.showResult();
      
      if (typeof callback !== 'undefined') {
        callback(this.result);
      }
    })
    .fail((response) => {
      throw new HttpResponseException(
        response.status,
        response.statusText,
        response
      );
    })
    .always((response) => {
      this.toggleLoading();
    });
  } /* end of get result by query */
  
   showResult() {
    /* $("#results-container").html(`${this.result}`);*/
      $("#results-container").html(`blahblahalhalh`);


  } /* end of show result */
  
 }/*end of class*/

new PriceCheck();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console