amarvashi12
8 years ago
12 changed files with 472 additions and 0 deletions
@ -0,0 +1,8 @@ |
|||||
|
.flag-icon,.flag-icon-background{ background-size:contain;background-position:50%;background-repeat:no-repeat } |
||||
|
.flag-icon{ position:relative;display:inline-block;width:1.8em;line-height:1.9em } |
||||
|
.flag-icon:before{ content:"\00a0" } |
||||
|
.flag-icon.flag-icon-squared{ width:1em } |
||||
|
.flag-icon-eu{ background-image:url(../flags/4x3/eu.svg) } |
||||
|
.flag-icon-eu.flag-icon-squared{ background-image:url(../flags/1x1/eu.svg) } |
||||
|
.flag-icon-us{ background-image:url(../flags/4x3/us.svg) } |
||||
|
.flag-icon-us.flag-icon-squared{ background-image:url(../flags/1x1/us.svg) } |
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 6.1 KiB |
After Width: | Height: | Size: 6.1 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 6.8 KiB |
After Width: | Height: | Size: 6.8 KiB |
@ -0,0 +1,5 @@ |
|||||
|
var currency_arr = [ { "id": 1, "shortName": "USD", "fullName": "United States Dollar","flagid":"us","selected":1}, |
||||
|
{ "id": 2, "shortName": "EUR", "fullName": " Euro" ,"flagid":"eu","selected":0}, |
||||
|
// Here you can add as much as currency list and pass selected 1 which you want to defaul selected
|
||||
|
]; |
||||
|
|
@ -0,0 +1,26 @@ |
|||||
|
$(document).ready(function(e) { |
||||
|
var json_Obj =currency_arr; |
||||
|
var outPut=""; |
||||
|
var defaultActive=""; |
||||
|
|
||||
|
for (var i in json_Obj) |
||||
|
{ |
||||
|
defaultActive=""; |
||||
|
if(json_Obj[i].selected==1) |
||||
|
defaultActive=" selected"; |
||||
|
|
||||
|
outPut+="<li class='country-li "+defaultActive+"' data-id='" |
||||
|
+json_Obj[i].id |
||||
|
+"'><h1 class='flag-head'><span class='label label-default'><span class='flag-icon flag-icon-" |
||||
|
+json_Obj[i].flagid+"'></span></span></h1><strong class='short-name'>" |
||||
|
+ json_Obj[i].shortName + "</strong><span class='full-name'> " |
||||
|
+json_Obj[i].fullName+"</span></li>"; |
||||
|
} |
||||
|
$('.currency-loop').html(outPut); |
||||
|
$('.country-li').on("click",function(){ |
||||
|
console.clear() |
||||
|
$('.country-li').removeClass("selected"); |
||||
|
$(this).addClass("selected"); |
||||
|
var id=$(this).attr("data-id"); |
||||
|
console.log(currency_arr[id-1]); }); |
||||
|
}); |
File diff suppressed because one or more lines are too long
@ -0,0 +1,41 @@ |
|||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
||||
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
|
<head> |
||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
<title> |
||||
|
Index |
||||
|
</title> |
||||
|
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> |
||||
|
<link href="css/reference-currency.css" type="text/css" rel="stylesheet"/> |
||||
|
<link href="css/flag-icon.min.css" rel="stylesheet"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="row"> |
||||
|
<div class="container"> |
||||
|
<div class="currency-content"> |
||||
|
<div class="col-xs-12 col-md-5 col-sm-5 container-left"> |
||||
|
<h3 class="choose-currency"> |
||||
|
Reference Currency: |
||||
|
</h3> |
||||
|
<h4 class="transaction-amount"> |
||||
|
Choose your currency to see equivalent |
||||
|
</h4> |
||||
|
<h4 class="transaction-amount"> |
||||
|
amount of transaction |
||||
|
</h4> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-sm-6 col-md-7 currency-parent"> |
||||
|
<ul class="currency-loop"></ul> |
||||
|
</div> |
||||
|
</div><!--end of div currency-content--> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<script src="js/jquery.min.js" type="text/javascript"></script> |
||||
|
<script src="js/bootstrap.min.js"></script> |
||||
|
<script src="js/currency-array.js" type="text/javascript"></script> |
||||
|
<script src="js/custom.js" type="text/javascript"></script> |
||||
|
</body> |
||||
|
</html> |
Loading…
Reference in new issue