Bootstrap Snippet Flex Pricing using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
        <!-- Website CSS style -->
        <link rel="stylesheet" type="text/css" href="assets/css/main.css">
        <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
        
        <!-- Website Font style -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
        
        <!-- Google Fonts -->
        <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
      
      <body>
<div class="container">
    <div class="row main">
        <div class="col-xs-12 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
      <div class="text-center">
            <h1 class="animated flipInY text-center">Calculate fees</h1>
            
            <div class="input-group" id="cfee">
              <span class="input-group-addon">₦</span>
              <input type="number" class="form-control" placeholder="ENTER TRANSACTION VALUE" id="tcost">
              <span class="input-group-addon">.00</span>
            </div></p>
            
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@charset "UTF-8";
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type="text/javascript" src="assets/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script>
$(document).ready(function(e) {
    $('#tcost').keyup(function(e) {
        var charge=0;
        var transcost=$(this).val();
        if(transcost==0 || transcost==''){
            $('#ccharges').html('0');
        }
        else if(transcost<=10000){
            charge=0.065*transcost;
            if(charge>500){
                    
                        $('#ccharges').html('500');
                    }
                    else if(charge<200){
                        $('#ccharges').html('150');
                    }
                    else{
                        $('#ccharges').html(parseInt(charge));
                    }
        }
        else if(transcost>10001 && transcost<=50000 ){
                    charge=0.053*transcost;
                    if(charge>2000){
                        $('#ccharges').html('2000');
                    }
                    else{
                        $('#ccharges').html(parseInt(charge));
                    }
        }
        else if(transcost>50001 && transcost<=200000 ){
                    charge=0.041*transcost;
                    if(charge>6500){
                        $('#ccharges').html('6500');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Flex Pricing"
Bootstrap 3.3.0 Snippet by ayotwice

Related: See More

Questions / Comments:

"Flex Pricing" Bootstrap 3.3.0 Snippet by ayotwice

Related: See More

Questions / Comments:

"Flex Pricing"
Bootstrap 3.3.0 Snippet by ayotwice