Skip to content

abalsh / Garlix

Go to a project
Commit 559e575e by Florian Shllaku
Options

functionallity added to the swap button

parent 72187432
Inline Side-by-side
Showing with 68 additions and 25 deletions
public/css/crypto.css
...@@ -14,3 +14,10 @@ input{ ...@@ -14,3 +14,10 @@ input{
margin: 0 auto; margin: 0 auto;
} }
.card{
background-color: #f8f4ff;
}
.border{
border: solid 1px #cccccc;
}
public/js/main.js
$.ajax({
$.ajax({
url: "/api/fiat", url: "/api/fiat",
dataType: 'json', dataType: 'json',
success: function(data){ success: function(data){
...@@ -8,21 +9,48 @@ ...@@ -8,21 +9,48 @@
var From_iso_value; var From_iso_value;
var To_iso_value; var To_iso_value;
var rez; var rez;
$('#Form').on("change",function(){ $('#Form').on("keyup change",function(){
Amount = document.getElementById("Amount").value; Amount = document.getElementById("Amount").value;
From_iso_value = $("#From option:selected").attr('value'); From_iso_value = $("#From option:selected").attr('value');
From = data[From_iso_value]; From = data[From_iso_value];
To_iso_value = $("#To option:selected").attr('value'); To_iso_value = $("#To option:selected").attr('value');
To = data[To_iso_value]; To = data[To_iso_value];
rez = ((Amount/From) * To); rez = ((Amount/From) * To);
document.getElementById("from").innerHTML = $("#From option:selected").attr('value'); document.getElementById("from").innerHTML = From_iso_value;
document.getElementById("to").innerHTML = $("#To option:selected").attr('value'); document.getElementById("to").innerHTML = To_iso_value;
document.getElementById("rezult").innerHTML = rez.toFixed(2); document.getElementById("rezult").innerHTML = rez.toFixed(2);
document.getElementById("amount").innerHTML = Amount; document.getElementById("amount").innerHTML = Amount;
});
}
}); });
$.noConflict();
function swapValues() {
var dropfrom = $("#From option:selected").attr('value');
var dropto = $("#To option:selected").attr('value');
if (dropfrom != dropto){
$('#From option:selected').val(dropto).trigger('change');
$('#To option:selected').val(dropfrom).trigger('change');
} }
});
var tmp = $('#From option:selected').text();
var tmpe = $('#To option:selected').text()
$('#From option:selected').html(tmpe)[0].innerHTML;
$('#To option:selected').html(tmp)[0].innerHTML;
$('#From select').selectpicker();
$('#To select').selectpicker();
// $('select[name=selValue1]').val(dropto);
// $('select[name=selValue2]').val(dropfrom);
$('.selectpicker').selectpicker('refresh');
console.log($('#From option:selected').html(tmpe)[0].innerHTML);
}
resources/views/crypto.blade.php
...@@ -16,8 +16,7 @@ ...@@ -16,8 +16,7 @@
<br> <br>
<div class="row" > <div class="row" >
<div class="col"> <div class="col">
<blockquote class="blockquote"> <select class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="From">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" data-size="5" id="From">
@foreach ($cryptos as $item) @foreach ($cryptos as $item)
<option class="form-control" value="{{ $item->symbol }}">{{ $item->name }} - {{ $item->symbol }}</option> <option class="form-control" value="{{ $item->symbol }}">{{ $item->name }} - {{ $item->symbol }}</option>
@endforeach @endforeach
...@@ -30,7 +29,7 @@ ...@@ -30,7 +29,7 @@
<br> <br>
<div class="col"> <div class="col">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" data-size="5" id="To"> <select class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="To">
@foreach ($cryptos as $item) @foreach ($cryptos as $item)
<option class="form-control" value="{{ $item->symbol }}" selected>{{ $item->name }} - {{ $item->symbol }}</option> <option class="form-control" value="{{ $item->symbol }}" selected>{{ $item->name }} - {{ $item->symbol }}</option>
@endforeach @endforeach
...@@ -48,7 +47,7 @@ ...@@ -48,7 +47,7 @@
<span class="blockquote" id="color mb-0" > = </span> <span class="blockquote" id="color mb-0" > = </span>
<div class="col"> <div class="col">
<blockquote class="blockquote"> <blockquote class="blockquote">
<h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult">0.89</span> <span id="to">EUR</span></h2> <h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult">11738.483</span> <span id="to">LINK</span></h2>
</blockquote> </blockquote>
</div> </div>
</div> </div>
......
resources/views/currency.blade.php
@extends('header') @extends('header')
@section('content') @section('content')
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h3> <h3>
<small class="text-muted"><span id="color">Currency converter</span></small> <small class="text-muted"><span id="color">Fiat Currency converter</span></small>
</h3> </h3>
<div class="input-group"> <div class="input-group">
<br> <br>
<form id="Form"> <form id="Form">
<br> <br>
<input style="width: 250px;" type="number" placeholder="Enter Amount to Convert" step="0.01" min="0" id="Amount" class="form-control" value="1"> <input style="width: 250px;" type="number" placeholder="Enter Amount to Convert" step="0.01" min="0" id="Amount" class="form-control" value="1">
<br> <br>
<div class="row" > <div class="row from" >
<div class="col"> <div class="col">
<blockquote class="blockquote"> <div id="select-from-container">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" data-size="5" id="From"> <select name="selValue1" class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="From">
@foreach ($currencies as $item) @foreach ($currencies as $item)
<option class="form-control" value="{{ $item->iso }}">{{ $item->name }} - {{ $item->iso }}</option> <option class="form-control" value="{{ $item->iso }}">{{ $item->name }} - {{ $item->iso }}</option>
@endforeach @endforeach
</select> </select>
</blockquote>
</div> </div>
</div>
<button type="button" id="swap-button" style="background:none; border:none;"><i class="fa fa-exchange" style="font-size:36px; color: #3C1C78;"></i></button> <button onclick="swapValues();" type="button" id="swap" style="background:none; border:none;"><i class="fa fa-exchange" style="font-size:36px; color: #3C1C78;"></i></button>
<br> <br>
<div class="col"> <div class="col to">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" data-size="5" id="To"> <div id="select-from-container">
<select name="selValue2" class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="To">
@foreach ($currencies as $item) @foreach ($currencies as $item)
<option class="form-control" value="{{ $item->iso }}" selected>{{ $item->name }} - {{ $item->iso }}</option> <option class="form-control" value="{{ $item->iso }}" selected>{{ $item->name }} - {{ $item->iso }}</option>
@endforeach @endforeach
</select> </select>
</div> </div>
</div> </div>
</div>
<br> <br> <br> <br>
</form> </form>
<div class="row" style="padding-top: 10px;"> <div class="row" style="padding-top: 10px;">
<div class="col"> <div class="col">
<blockquote class="blockquote"> <blockquote class="blockquote">
<h2 class="mb-0" id="color"><span id="amount">1</span> <span id="from">USD</span></h2> <h2 class="mb-0" id="color"><span id="amount">1</span> <span id="from">USD</span></h2>
</blockquote> </blockquote>
</div> </div>
<span class="blockquote" id="color mb-0" > = </span> <span class="blockquote" id="mb-0" style="color: black;"> = </span>
<div class="col"> <div class="col">
<blockquote class="blockquote"> <blockquote class="blockquote">
<h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult">0.89</span> <span id="to">EUR</span></h2> <h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult">0.89</span> <span id="to">EUR</span></h2>
...@@ -76,9 +78,7 @@ ...@@ -76,9 +78,7 @@
</div> </div>
</div> </div>
<script>
</script>
{{-- <script> {{-- <script>
function swapValues(){ function swapValues(){
...@@ -125,5 +125,6 @@ ...@@ -125,5 +125,6 @@
@include('footer') @include('footer')
@endsection @endsection
\ No newline at end of file
resources/views/header.blade.php
...@@ -19,11 +19,14 @@ ...@@ -19,11 +19,14 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap select --> <!-- Bootstrap select -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Main Custom styles for the website --> <!-- Main Custom styles for the website -->
<link href="css\main.css" rel="stylesheet"> <link href="css\main.css" rel="stylesheet">
...@@ -33,13 +36,17 @@ ...@@ -33,13 +36,17 @@
@if(\Request::is('currency'))<link href="css\crypto.css" rel="stylesheet"> @endif @if(\Request::is('currency'))<link href="css\crypto.css" rel="stylesheet"> @endif
@if(\Request::is('subscribe')) <link href="css\subscribe.css" rel="stylesheet"> @endif @if(\Request::is('subscribe')) <link href="css\subscribe.css" rel="stylesheet"> @endif
@if(\Request::is('crypto')) <script src="{{ URL::to('js/crypto.js') }}"></script> @endif @if(\Request::is('crypto')) <script src="{{ URL::to('js/crypto.js') }}"></script> @endif
</head> </head>
<body class="text-center" background="img\background.jpg"> <body class="text-center" background="img\background.jpg">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column"> <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto"> <header class="masthead mb-auto">
<div class="inner"> <div class="inner">
<a href="/" >
<i class="material-icons masthead-brand img-fluid">autorenew</i> <i class="material-icons masthead-brand img-fluid">autorenew</i>
<h3 class="masthead-brand">XCHANGE</h3> <h3 class="masthead-brand">XCHANGE</h3>
</a>
<nav class="nav nav-masthead justify-content-center"> <nav class="nav nav-masthead justify-content-center">
<a class="nav-link @if(\Request::is('/')) active @endif" href="/">Home</a> <a class="nav-link @if(\Request::is('/')) active @endif" href="/">Home</a>
<a class="nav-link @if(\Request::is('currency')) active @endif" href='/currency'>Currency</a> <a class="nav-link @if(\Request::is('currency')) active @endif" href='/currency'>Currency</a>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment