harunpehlivan
3/7/2018 - 12:29 AM

Javascript Calculator Zipline

Javascript Calculator Zipline

<link href="https://fonts.googleapis.com/css?family=Aldrich" rel="stylesheet" />
html {
  background-image: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/purty_wood.png');
  font-family: sans-serif;
  color: white;
  width: 100%;
  height: 100%;
}

body {
  background-color: rgba(0, 0, 0, 0) !important;
  font-size: 20px;
}

.container {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 450px;
  height: 800px;
  margin: 10px auto;
}

.title {
  font-size: 30px;
  font-family: cursive;
  text-align: center;
  width: 450px;
}

.calc {
  position: absolute;
  top: 20px;
  width: 450px;
  height: 650px;
  background-color: #111;
  border-radius: 20px / 10px;
}

.logo {
  color: rgb(113, 113, 113);
  position: absolute;
  top: 178px;
  left: 40px;
  font-size: 85%;
}

.model {
  position: absolute;
  top: 178px;
  right: 42px;
  font-size: 90%;
  font-weight: bold;
  color: rgba(0, 58, 0, 1);
}

.calc-edge {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-right-color: LightGray;
  border-right-width: 5px;
  border-right-style: solid;
  border-left-color: DarkGray;
  border-left-width: 5px;
  border-left-style: solid;
  border-radius: 20px/10px;
  -webkit-box-shadow: -15px 20px 10px 10px rgba(0, 0, 0, 0.5);
  box-shadow: -15px 20px 10px 10px rgba(0, 0, 0, 0.5);
}

.screen-edge {
  position: absolute;
  top: 25px;
  left: 15px;
  width: 420px;
  height: 150px;
  margin: 0;
  padding: 0;
  border-top: 6px solid;
  border-right: 5px solid rgba(0, 84, 37, 1);
  border-bottom: 0 solid;
  border-left: 5px solid rgba(0, 58, 0, 1);
  -webkit-border-radius: 0 0 15px 15px / 0 0 10px 15px;
  border-radius: 0 0 15px 15px / 0 0 10px 15px;
  color: rgba(0, 0, 0, 0.9);
  background: #222A21;
}

.calc-face {
  background-image: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/dark_leather.png');
  background-repeat: repeat;
  position: absolute;
  top: 200px;
  left: 5px;
  width: 440px;
  height: 430px;
  -webkit-box-shadow: 10px 0 10px 10px rgba(0, 0, 0, 0.5) inset, -10px 0 10px 0 rgba(255, 255, 255, 0.05) inset, -20px 0 20px 10px rgba(255, 255, 255, 0.05) inset;
  box-shadow: 10px 0 10px 10px rgba(0, 0, 0, 0.5) inset, -10px 0 10px 0 rgba(255, 255, 255, 0.05) inset, -20px 0 20px 10px rgba(255, 255, 255, 0.05) inset;
}

.calc-face:after {
  position: absolute;
  width: 436px;
  content: " ";
  top: 425px;
  height: 0px;
  border-top: 15px solid rgb(0, 0, 0);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.credits {
  font-family: sans-serif;
  font-size: 12px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  margin: 10px;
  color: #4A4A4A;
  text-align: right;
}

.credits a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.credits a:hover {
  color: blue;
  text-decoration: underline;
}

.button {
  display: inline-block;
  width: 45px;
  height: 45px;
  position: absolute;
  cursor: pointer;
  margin: 0;
  padding: 0px;
  border: none;
  -webkit-border-radius: 6px / 10px;
  border-radius: 6px / 10px;
  font: normal 40px/1 "Aldrich", Helvetica, sans-serif;
  text-align: center;
  /* -webkit-box-shadow: -2px 2px 1px 2px rgba(255,255,255,0.1) inset, 4px -4px 1px 0 rgba(0,0,0,0.5) inset;
			box-shadow: -2px 2px 1px 2px rgba(255,255,255,0.1) inset, 4px -4px 1px 0 rgba(0,0,0,0.5) inset; */
  
  -webkit-box-shadow: -2px 2px 3px 3px rgba(0, 0, 0, 0.79), -2px 2px 1px 2px rgba(255, 255, 255, 0.1) inset, 4px -4px 1px 0 rgba(0, 0, 0, 0.5) inset;
  box-shadow: -2px 2px 3px 3px rgba(0, 0, 0, 0.79), -2px 2px 1px 2px rgba(255, 255, 255, 0.1) inset, 4px -4px 1px 0 rgba(0, 0, 0, 0.5) inset;
}

.button:active {
  display: inline-block;
  width: 45px;
  height: 43px;
  position: absolute;
  cursor: pointer;
  margin: 2px 0 0;
  padding: 0px;
  border: none;
  -webkit-border-radius: 6px / 10px;
  border-radius: 6px / 10px;
  text-align: center;
}
/* Button Colors */

.number {
  color: LightGray;
  background-image: -webkit-linear-gradient(-45deg, #262626 0, #7a7a7a 50%, #262626 100%);
  background-image: -moz-linear-gradient(135deg, #262626 0, #7a7a7a 50%, #262626 100%);
  background-image: linear-gradient(135deg, #262626 0, #7a7a7a 50%, #262626 100%);
}

.operator {
  color: rgba(255, 217, 102, 1);
  ;
  font-size: 30px;
  background-image: -webkit-linear-gradient(-45deg, #262626 0, #7a7a7a 50%, #262626 100%);
  background-image: -moz-linear-gradient(135deg, #262626 0, #7a7a7a 50%, #262626 100%);
  background-image: linear-gradient(135deg, #262626 0, #7a7a7a 50%, #262626 100%);
}

.memory {
  color: LightGray;
  background-image: -webkit-linear-gradient(-45deg, #2b73ad 0, #3795dd 50%, #2b73ad 100%);
  background-image: -moz-linear-gradient(135deg, #2b73ad 0, #3795dd 50%, #2b73ad 100%);
  background-image: linear-gradient(135deg, #2b73ad 0, #3795dd 50%, #2b73ad 100%);
  font-size: 20px;
}

.clear {
  color: LightGray;
  font-size: 20px;
  background-image: -webkit-linear-gradient(-45deg, rgba(117, 0, 0, 1) 0, rgba(255, 91, 91, 1) 50%, rgba(96, 0, 0, 1) 100%);
  background-image: -moz-linear-gradient(135deg, rgba(117, 0, 0, 1) 0, rgba(255, 91, 91, 1) 50%, rgba(96, 0, 0, 1) 100%);
  background-image: linear-gradient(135deg, rgba(117, 0, 0, 1) 0, rgba(255, 91, 91, 1) 50%, rgba(96, 0, 0, 1) 100%);
}

.moveup {
  position: relative;
  font-size: 15px;
  display: block;
}

.mr {
  position: absolute;
  right: 47px;
  top: 52px;
  font-size: 10px;
  font-weight: bold;
  color: #2F4139;
}

.active {
  color: #aeffec !important;
}
/* Button Left Positioning */

.num1,
.num4,
.num7,
.num0 {
  left: 50px;
}

.num8,
.num5,
.num2,
.sign {
  left: 125px;
}

.num9,
.num6,
.num3,
.dec {
  left: 200px;
}

.sqrt,
.div,
.mul,
.sub,
.plus {
  left: 275px;
}

.cce,
.percent,
.mrc,
.mplus,
.equal {
  left: 350px;
}
/* Button Top Positioning */

.sqrt,
.cce {
  top: 25px;
}

.num7,
.num8,
.num9,
.div,
.percent {
  top: 100px;
}

.num4,
.num5,
.num6,
.mul,
.mrc {
  top: 175px;
}

.num1,
.num2,
.num3,
.sub,
.mplus {
  top: 250px;
}

.num0,
.sign,
.dec,
.plus,
.equal {
  top: 325px;
}
/* 7Segment Display */

.display {
  position: absolute;
  padding: 5px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 50px;
  width: 290px;
}

.seven-segment {
  display: inline-block;
  position: relative;
  top: 2px;
  float: right;
  width: 28px;
  height: 38px;
  border: 1px solid black;
  padding: 0px 2px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

sub {
  bottom: -.25em;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

.seven-segment .a {
  position: absolute;
  left: 5px;
  height: 0;
  width: 18px;
  border-top: 3px solid #2F4139;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.seven-segment .b {
  position: absolute;
  left: 20px;
  top: 2px;
  height: 15px;
  width: 0;
  border-right: 3px solid #2F4139;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(6deg);
}

.seven-segment .c {
  position: absolute;
  left: 18px;
  top: 18px;
  height: 15px;
  width: 0;
  border-right: 3px solid #2F4139;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(6deg);
}

.seven-segment .d {
  position: absolute;
  top: 32px;
  left: 1px;
  height: 0;
  width: 18px;
  border-bottom: 3px solid #2F4139;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.seven-segment .e {
  position: absolute;
  left: 2px;
  top: 18px;
  height: 15px;
  width: 0;
  border-left: 3px solid #2F4139;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(6deg);
}

.seven-segment .f {
  position: absolute;
  left: 4px;
  top: 2px;
  height: 15px;
  width: 0;
  border-left: 3px solid #2F4139;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(6deg);
}

.seven-segment .dot {
  position: absolute;
  left: 22px;
  top: 32px;
  width: 3px;
  height: 3px;
  background: #2F4139;
}

.seven-segment .g .top {
  position: absolute;
  height: 0;
  left: 4px;
  top: 16px;
  width: 18px;
  border-bottom: 2px solid #2F4139;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.seven-segment .g .bottom {
  position: absolute;
  left: 4px;
  top: 17px;
  height: 0;
  width: 18px;
  border-top: 2px solid #2F4139;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.digit0 .a,
.digit2 .a,
.digit3 .a,
.digit5 .a,
.digit6 .a,
.digit7 .a,
.digit8 .a,
.digit9 .a,
.ltrE .a {
  border-top-color: #aeffec;
}

.digit0 .b,
.digit1 .b,
.digit2 .b,
.digit3 .b,
.digit4 .b,
.digit7 .b,
.digit8 .b,
.digit9 .b {
  border-right-color: #aeffec;
}

.digit0 .c,
.digit1 .c,
.digit3 .c,
.digit4 .c,
.digit5 .c,
.digit6 .c,
.digit7 .c,
.digit8 .c,
.digit9 .c,
.ltrO .c {
  border-right-color: #aeffec;
}

.digit0 .d,
.digit2 .d,
.digit3 .d,
.digit5 .d,
.digit6 .d,
.digit8 .d,
.digit9 .d,
.ltrE .d,
.ltrO .d {
  border-bottom-color: #aeffec;
}

.digit0 .e,
.digit2 .e,
.digit6 .e,
.digit8 .e,
.ltrE .e,
.ltrR .e,
.ltrO .e {
  border-left-color: #aeffec;
}

.digit0 .f,
.digit4 .f,
.digit5 .f,
.digit6 .f,
.digit8 .f,
.digit9 .f,
.ltrE .f {
  border-left-color: #aeffec;
}

.digit2 .g .top,
.digit3 .g .top,
.digit4 .g .top,
.digit5 .g .top,
.digit6 .g .top,
.digit8 .g .top,
.digit9 .g .top,
.neg .g .top,
.ltrE .g .top,
.ltrR .g .top,
.ltrO .g .top {
  border-bottom-color: #aeffec;
}

.digit2 .g .bottom,
.digit3 .g .bottom,
.digit4 .g .bottom,
.digit5 .g .bottom,
.digit6 .g .bottom,
.digit8 .g .bottom,
.digit9 .g .bottom,
.neg .g .bottom,
.ltrE .g .bottom,
.ltrR .g .bottom,
.ltrO .g .bottom {
  border-top-color: #aeffec;
}

.dp .dot {
  background-color: #aeffec;
}

:focus {
  outline: none;
}

::-moz-focus-inner {
  border: 0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
var lookup = {
		'0': 'digit0',
		'1': 'digit1',
		'2': 'digit2',
		'3': 'digit3',
		'4': 'digit4',
		'5': 'digit5',
		'6': 'digit6',
		'7': 'digit7',
		'8': 'digit8',
		'9': 'digit9',
		'E': 'ltrE',
		'e': 'ltrE',
		'r': 'ltrR',
		'o': 'ltrO',
		'.': 'dp',
		'-': 'neg',
		'+': ''
	};

	var currentDisplay = [];
	var currentLength = 1;
	var displayStr = '0.';
	var value_prior = 0;
	var value_current = 0;
	var memory = 0;
	var current_op = '';
	var flag_err = false;
	var flag_decimal = false;
	var flag_found_decimal = false;
	var flag_new_op = false;

	function leadingZeroes(str) {
	    var result;
		if(result = /^-*(0+)\.(0*)/.exec(str)) {
	        return result[1].length + result[2].length;
		} else {
			return 0;
		}
	}

	function str2Display(str) {
		var flag_exp = false;
		var val = parseFloat(str);
     
		// Append a decimal if it's not in the middle
		if(!/\./.test(str)) {
			str += '.';
		}

		// Check positive Overflow
		if(val > 9999999999) {
			str = val.toExponential(6);
			flag_exp = true;
		}
		// Check negative Overflow
		if(val < -999999999) {
			str = val.toExponential(5);
			flag_exp = true;
		}

		if(!flag_exp) {
			// Check too many digits, positive
			if(val > 0 && str.length > 11) {

				str = val.toPrecision(10 - leadingZeroes(str)).toString();
			}
			// Check too many digits, negative
			if(val < 0 && str.length > 10 && !/\.$/.test(str)) {
				str = val.toPrecision(9 - leadingZeroes(str)).toString();
			}
		}

		var segment = 0;
		var output = str.split('').reverse();
		// Remove current characters
		currentDisplay.forEach(function(char) {
			var outClass = lookup[char];
			$('#seg' + segment).removeClass(outClass);
			if(char != '.' && char != '+') {
				segment++;
			}
		});
		currentDisplay = [];
		segment = 0;

		// Display characters
		output.forEach(function(char) {
			var outClass = lookup[char];
			$('#seg' + segment).addClass(outClass);
			currentDisplay.push(char);
			if(char != '.' && char != '+') {
				segment++;
			}
		});
		currentLength = segment;
	}

	// Math!
	function operation(op) {
		console.log("op:", op, "value_current:", value_current, "value_prior:", value_prior);
		if(op === 'equal') {
			switch(current_op) {
				case "plus":
					value_current +=  value_prior;
					displayStr = value_current.toString();
					break;
				case "sub":
					value_current = value_prior - value_current;
					displayStr = value_current.toString();
					break;
				case "mul":
					value_current *= value_prior;
					displayStr = value_current.toString();
					break;
				case "div":
					if(value_current === 0) {
						displayStr = "Error";
						flag_err = true;
					} else {
						value_current = value_prior / value_current;
						displayStr = value_current.toString();
					}
					break;
				case "equal":
					// Take no action
					break;
			}
			flag_new_op = true;
			current_op = "equal";
			str2Display(displayStr);
			value_prior = parseFloat(displayStr);
			console.log("update prior", value_prior);
		} else {
			// Handle single operator event,
			switch(op) {
				case "sqrt":
					if(value_current < 0) {
						displayStr = "Error";
						value_current = 0;
					} else {
						value_current = Math.sqrt(value_current);
						displayStr = value_current.toString();
					}
					break;
				case "percent":
					value_current /= 100;
					displayStr = value_current.toString();
					break;
				case "sign":
					value_current *= -1;
					displayStr = value_current.toString();
					break;
				default:
					// For any infix operator
					current_op = op;
					flag_new_op = true;
					value_prior = value_current;
					console.log("update prior", value_prior);
			}
			str2Display(displayStr);
		}
		console.log("op:", op, "value_current:", value_current, "value_prior:", value_prior);
	}


	$(document).ready(function() {
		// Initialize the display:
		str2Display(displayStr);

		// Button Press Sound
		$('.button').mousedown(function() {
			$('#myaudio')[0].play();
		});

		// Handle Numbers
		$('.number').click(function() {
			var val = $(this).val();

			if(!flag_err && (currentLength < 10 || flag_new_op)) {
				// New operator means any numeric key starts new input
				if(flag_new_op) {
					displayStr = '0.';
					flag_new_op = false;
				}

				// Decimal point just sets decimal flag
				if(val === '.') {
					flag_decimal = true;
					flag_found_decimal = true;
					str2Display(displayStr);
					value_current = parseFloat(displayStr);
					return;
				}

				// Convert new input into string
				val = val.toString();

				if(parseFloat(displayStr) === 0 && displayStr.length < 3 && !flag_found_decimal) {
					// Non-Decimal first input
					displayStr = val;
				} else {
					if(flag_decimal && flag_found_decimal) {
						// First Number after a decimal point
						displayStr = parseFloat(displayStr).toString()+ '.' + val;
						flag_found_decimal = false;
					} else {
						// Additional numbers after decimal point
						if(parseFloat(displayStr) === 0 && displayStr.length > 2) {
							displayStr += val;
						} else {
							displayStr = parseFloat(displayStr).toString() + val;
						}

					}
				}

				// Display New Value
				str2Display(displayStr);

				// Update the current value register
				value_current = parseFloat(displayStr);
			}
		});


		// Handle Operators
		$('.operator').click(function() {
			var op = $(this).val();
			operation(op);
		});

		// Handle Memory buttons
		$('.memory').click(function(){
			var op = $(this).val();
			switch(op){
				case "mrc":
					value_current = memory;
					displayStr = value_current.toString()
					str2Display(displayStr);
					console.log("Mrc: ", memory);
					$('.mr').removeClass('active');
					memory = 0;
					flag_new_op = true;
					break;
				case "mplus":
					operation('equal');
					memory += value_current;
					console.log("M+: ", memory);
					$('.mr').addClass('active');
					break;
			}

		});

		// Handle Clear Error
		$('.cce').click(function() {
		 	currentLength = 1;
		 	flag_err = false;
		 	flag_decimal = false;
		 	value_current = 0;
			displayStr = '0.';
			str2Display(displayStr);
		});

	});

Javascript Calculator Zipline

Javascript Calculator for Free Code Camp

A Pen by HARUN PEHLİVAN on CodePen.

License.

<div class="container">
  <div class="calc">
    <div class="calc-edge">
      <div class="logo">FreeCodeCamp</div>
      <div class="model">EL-8100</div>
    </div>
    <div class="screen-edge">
      <div class="mr">MR</div>
      <div class="display">
        <div class="seven-segment" id="seg0">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
        <div class="seven-segment" id="seg1">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
        <div class="seven-segment" id="seg2">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
        <div class="seven-segment" id="seg3">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
        <div class="seven-segment" id="seg4">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
        <div class="seven-segment" id="seg5">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
        <div class="seven-segment" id="seg6">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
        <div class="seven-segment" id="seg7">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
        <div class="seven-segment" id="seg8">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
        <div class="seven-segment" id="seg9">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
          <div class="d"></div>
          <div class="e"></div>
          <div class="f"></div>
          <div class="g">
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="dot"></div>
        </div>
      </div>
    </div>
    <div class="calc-face">
      <button class="button operator sqrt" value="sqrt">&radic;</button>
      <button class="button clear cce" value="cce">C<span class="moveup">CE</span></button>
      <button class="button number num7" value="7">7</button>
      <button class="button number num8" value="8">8</button>
      <button class="button number num9" value="9">9</button>
      <button class="button operator div" value="div">&div;</button>
      <button class="button operator percent" value="percent">&percnt;</button>
      <button class="button number num4" value="4">4</button>
      <button class="button number num5" value="5">5</button>
      <button class="button number num6" value="6">6</button>
      <button class="button operator mul" value="mul">x</button>
      <button class="button memory mrc" value="mrc">M<span class="moveup">RC</span></button>
      <button class="button number num1" value="1">1</button>
      <button class="button number num2" value="2">2</button>
      <button class="button number num3" value="3">3</button>
      <button class="button operator sub" value="sub">-</button>
      <button class="button memory mplus" value="mplus">M+</button>
      <button class="button number num0" value="0">0</button>
      <button class="button operator sign" value="sign">&plusmn;</button>
      <button class="button number dec" value=".">.</button>
      <button class="button operator plus" value="plus">+</button>
      <button class="button operator equal" value="equal">=</button>
    </div>
  </div>
</div>
<div class="credits">
  <strong>By Rex "SaintPeter" Schrader</strong>
  <br /> For <a href="https://www.freecodecamp.com">Free Code Camp</a>
  <br /> Keypress Sound Effect from <a href="https://www.freesfx.co.uk">FreeSFX</a>
  <br />
</div>
<audio id='myaudio'>
  <source src="https://www.freesfx.co.uk/rx2/mp3s/8/9810_1358861910.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>