-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17 from danijanos/dev
Dev to dev_Dropdown
- Loading branch information
Showing
5 changed files
with
192 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| theme: jekyll-theme-minimal |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,160 +1,192 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <title>CsCs-CryptoTrader</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
|
|
||
| <!-- Bootstrap CSS --> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | ||
|
|
||
| <!-- Optional JavaScript --> | ||
|
|
||
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | ||
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | ||
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | ||
|
|
||
| <style> | ||
| @import url('https://fonts.googleapis.com/css?family=Work+Sans:300&subset=latin-ext'); | ||
| body { | ||
| font-family: 'Work sans'; | ||
| height: 100vh; | ||
| min-height: 100vh; | ||
| margin: 10px; | ||
| padding: 20px; | ||
| } | ||
| .f-grow-0 { | ||
| flex-grow: 0; | ||
| } | ||
| .f-grow-1 { | ||
| flex-grow: 1; | ||
| } | ||
| .column-spacer { | ||
| margin: 0 0 10px 0; | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | ||
|
|
||
| <a class="navbar-brand" onclick="" href="index.html">Home</a> | ||
|
|
||
| <!-- Responsive navbar --> | ||
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto"> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" onclick="" href="#">Balance<span class="sr-only">(current)</span></a> | ||
| </li> | ||
|
|
||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Buy</a> | ||
| </li> | ||
|
|
||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Sell</a> | ||
| </li> | ||
|
|
||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Chart</a> | ||
| </li> | ||
|
|
||
| </ul> | ||
|
|
||
| <!-- not necessary --> | ||
| <form class="form-inline my-2 my-lg-0"> | ||
| <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> | ||
| <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> | ||
| </form> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <div class="jumbotron jumbotron-fluid"> | ||
| <div class="container"> | ||
| <h1 class="display-4">Welcome to CsCs's Crypto Trader!</h1> | ||
| <p class="lead">You can manage and exchange your currencies, follow the price of each, chart them and trade.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="main-content"> | ||
|
|
||
| <div class="container"> | ||
|
|
||
| <div class="row"> | ||
|
|
||
| <div class="col column-spacer"> | ||
|
|
||
| <div class="input-group mb-3"> | ||
| <input id="currency_type" name="CurrencyType" type="text" class="form-control" placeholder="Type the name of the currency here" aria-label="Type the name of the currency here" aria-describedby="basic-addon2"> | ||
| <div class="input-group-append"> | ||
| <button class="btn btn-outline-secondary" type="button" onclick="GetCurrency()">Get currency</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="row"> | ||
|
|
||
| <div class="col"> | ||
|
|
||
| <table class="table table-bordered thead-dark table-hover"> | ||
| <thead> | ||
| <tr> | ||
| <th>Currency Name</th> | ||
| <th>Value</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td id="currency_name"></td> | ||
| <td id="currency_value"></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <script> | ||
| const url = "https://obudai-api.azurewebsites.net/api/exchange/"; | ||
| const CsCs_APIKEY = "F98143CD-1DAF-4D4A-A929-E6588AD72C8B"; | ||
|
|
||
| function GetCurrency() { | ||
| var currency = document.getElementById('currency_type').value; | ||
| var resource = url + currency; | ||
|
|
||
| var oReq = new XMLHttpRequest(); | ||
| oReq.addEventListener("load", reqListener); | ||
| oReq.open("GET", resource, true); | ||
| oReq.setRequestHeader("X-Access-Token", CsCs_APIKEY) | ||
| oReq.send(); | ||
| } | ||
|
|
||
| function reqListener() { | ||
| var currency = JSON.parse(this.responseText); | ||
| // if error? | ||
| document.getElementById("currency_name").innerHTML = currency.symbol; | ||
| document.getElementById("currency_value").innerHTML = currency.currentRate; | ||
| } | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
|
|
||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <title>CsCs-CryptoTrader</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
|
|
||
| <!-- Bootstrap CSS --> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | ||
|
|
||
| <!-- Optional JavaScript --> | ||
|
|
||
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | ||
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | ||
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | ||
|
|
||
| <style> | ||
| @import url('https://fonts.googleapis.com/css?family=Work+Sans:300&subset=latin-ext'); | ||
| body { | ||
| font-family: 'Work sans'; | ||
| height: 100vh; | ||
| min-height: 100vh; | ||
| margin: 10px; | ||
| padding: 20px; | ||
| } | ||
| .f-grow-0 { | ||
| flex-grow: 0; | ||
| } | ||
| .f-grow-1 { | ||
| flex-grow: 1; | ||
| } | ||
| .column-spacer { | ||
| margin: 0 0 10px 0; | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | ||
|
|
||
| <a class="navbar-brand" onclick="" href="index.html">Home</a> | ||
|
|
||
| <!-- Responsive navbar --> | ||
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto"> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" onclick="" href="#">Balance<span class="sr-only">(current)</span></a> | ||
| </li> | ||
|
|
||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Buy</a> | ||
| </li> | ||
|
|
||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Sell</a> | ||
| </li> | ||
|
|
||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Chart</a> | ||
| </li> | ||
|
|
||
| </ul> | ||
|
|
||
| <!-- not necessary --> | ||
| <form class="form-inline my-2 my-lg-0"> | ||
| <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> | ||
| <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> | ||
| </form> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <!-- Carousel................................................. --> | ||
| <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> | ||
| <ol class="carousel-indicators"> | ||
| <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> | ||
| <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> | ||
| <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> | ||
| </ol> | ||
| <div class="carousel-inner"> | ||
| <div class="carousel-item active"> | ||
| <img class="d-block w-100" src="header1.png" alt="First slide"> | ||
| <div class="carousel-caption"> | ||
| <h3>BTC</h3> | ||
| <p>6441 USD</p> | ||
| </div> | ||
| </div> | ||
| <div class="carousel-item"> | ||
| <img class="d-block w-100" src="header2.png" alt="Second slide"> | ||
| <div class="carousel-caption"> | ||
| <h3>ETH</h3> | ||
| <p>217 USD</p> | ||
| </div> | ||
| </div> | ||
| <div class="carousel-item"> | ||
| <img class="d-block w-100" src="header3.png" alt="Third slide"> | ||
| <div class="carousel-caption"> | ||
| <h3>ETX</h3> | ||
| <p>125 USD</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> | ||
| <span class="carousel-control-prev-icon" aria-hidden="true"></span> | ||
| <span class="sr-only">Previous</span> | ||
| </a> | ||
| <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> | ||
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | ||
| <span class="sr-only">Next</span> | ||
| </a> | ||
| </div> | ||
|
|
||
| <div id="main-content"> | ||
|
|
||
| <div class="container"> | ||
|
|
||
| <div class="row"> | ||
|
|
||
| <div class="col column-spacer"> | ||
|
|
||
| <div class="input-group mb-3"> | ||
| <input id="currency_type" name="CurrencyType" type="text" class="form-control" placeholder="Type the name of the currency here" aria-label="Type the name of the currency here" aria-describedby="basic-addon2"> | ||
| <div class="input-group-append"> | ||
| <button class="btn btn-outline-secondary" type="button" onclick="GetCurrency()">Get currency</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="row"> | ||
|
|
||
| <div class="col"> | ||
|
|
||
| <table class="table table-bordered thead-dark table-hover"> | ||
| <thead> | ||
| <tr> | ||
| <th>Currency Name</th> | ||
| <th>Value</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td id="currency_name"></td> | ||
| <td id="currency_value"></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <script> | ||
| const url = "https://obudai-api.azurewebsites.net/api/exchange/"; | ||
| const CsCs_APIKEY = "F98143CD-1DAF-4D4A-A929-E6588AD72C8B"; | ||
|
|
||
| function GetCurrency(){ | ||
| var currency = document.getElementById('currency_type').value; | ||
| var resource = url + currency; | ||
| var oReq = new XMLHttpRequest(); | ||
| oReq.addEventListener("load", reqListener); | ||
| oReq.open("GET", resource, true); | ||
| oReq.setRequestHeader("X-Access-Token", CsCs_APIKEY) | ||
| oReq.send(); | ||
| } | ||
|
|
||
| function reqListener() { | ||
| var currency = JSON.parse(this.responseText); | ||
| // if error? | ||
| document.getElementById("currency_name").innerHTML = currency.symbol; | ||
| document.getElementById("currency_value").innerHTML = currency.currentRate; | ||
| } | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |