Vue

by helloworld

HTML

<!DOCTYPE html>
<html>
	<head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel='stylesheet' type='text/css'>
 </head>

	<body>
<section id="results" class="results-section">
<script id="airSearchRS_json" type="application/json">{"airFrom": "LHR", "airTo": "BKK", "airDepart": "01/04/2021", "airReturn": "21/04/2021", "paxadult": 1, "paxyouth": 0, "paxchild": 0, "paxinfant": 0, "airClass": "all", "airTrip": "Return", "airBag": null, "airFlex": null, "airFlightType": null, "lowestFare": 521.46, "highestFare": 5277.61, "numberSegments": "[1, 2]", "minEFT": "0200", "maxEFT": "2845", "created": "07/11/2020 15:38:46", "expires": "07/11/2020 16:38:46", "is_expired": false, "fares": [{"fareID": "1", "totalPrice": 521.46, "taxes": 428.46, "ODI1": {"bagAmount": 0, "bagType": "N", "bagUnit": null, "solutions": [{"seg_1": {"depDate": "010421", "depTime": "1020", "depAirp": "LHR", "depTerm": "3", "arrDate": "010421", "arrTime": "1515", "arrAirp": "HEL", "arrTerm": "2", "markCar": "AY", "operCar": "AY", "fliNum": "1332", "equip": "359"}, "seg_2": {"depDate": "010421", "depTime": "1730", "depAirp": "HEL", "depTerm": "2", "arrDate": "020421", "arrTime": "0715", "arrAirp": "BKK", "arrTerm": null, "markCar": "AY", "operCar": "AY", "fliNum": "141", "equip": "359"}, "ODI_ID": 1, "eft": "1455", "segments": 2}, {"seg_1": {"depDate": "010421", "depTime": "0730", "depAirp": "LHR", "depTerm": "3", "arrDate": "010421", "arrTime": "1220", "arrAirp": "HEL", "arrTerm": "2", "markCar": "AY", "operCar": "AY", "fliNum": "1340",...

CSS

html {
	height: 100%;
}
body {
	height: 100%;
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	line-height: 1.50;
	color: #333333;
	background-color: #ffffff;
	position: relative;
}
h1 {
	font-size: 38px;
	font-weight: 700;
}
h2 {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 0rem;
	margin-top: 0rem;
}
h3 {
	font-size: 28px;
	margin-bottom: 15px;
}
h4 {
	font-size: 1.2rem;
	font-weight: 700;
}

.resPrice {
	font-weight: 500;
	font-size: 1.3rem;
}
.resTime {
	font-weight: 500;
	font-size: 1.2rem;
}
.resDept {
	
	font-weight: 400;
	font-size: 1rem;
	color: #656781;
}
.resODI {
	font-weight: 700;
	font-size: 1rem;
	color: #2a476b;
}

.results-section {
    background-color: #e5e5e5; /* was f5f7fa*/
}

.fareResult, .filterResult {
    background-color: #ffffff !important;
	padding: 30px 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 1px solid #ffffff;
	box-shadow: 0 1px 3px 0 rgba(37, 32 , 31, 0.3);
}

.fareResult:hover {
	border: 1px solid #cccccc;
	/* box-shadow: 0 2px 4px 0 rgba(0, 71, 171, 0.2), 0 3px 5px 0 rgba(0, 71, 171, 0.2); */
}

.rightResult {
    background-color: #ffffff !important;
    padding: 30px 10px;
}

/* Tooltip Pop-Up
----------------------------------------------------------------------------- */
.tiphover {
	cursor: help;
}
.tipshow {
	display: none;
	background-color: rgba(255, 255, 255, 0.9);
	color: #000;
	text-align: center;
	border-radius: 6px;
	padding: 3px 3px;
	width: 200px;
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 100%;
	margin-left: -100px;
}
  
.tiphover:hover + .tipshow {
	display: inline-block;
}


/* ODI Journey Properties
----------------------------------------------------------------------------- */
.ODI_journeyContainer {
	flex-grow: 1;
}

.ODI_journey {
    position: relative;
    display: block;
    width: 100%;
    height: .125rem;
    margin: .375rem auto;
   ...

JavaScript

// Range Sliders
//--------------------------------------------------
// zeropad function ensuring hhmm always has 4 digits to allow substring
const zeroPad = (num, places) => String(num).padStart(places, '0');

var sliderPrice = document.getElementById("priceRange");
var outputPrice = document.getElementById("sliderPrice");
outputPrice.innerHTML = ("£") + Math.ceil(sliderPrice.value); // Display the default slider value

var sliderEFT = document.getElementById("EFTRange");
var outputEFT = document.getElementById("sliderEFT");
outputEFT.innerHTML = zeroPad(sliderEFT.value,4).substring(0,2)%100 + ("h ") + zeroPad(sliderEFT.value,4).substring(2,4)%60 + ("m"); // Display the default slider value

// Update the Price slider value (each time you drag the slider handle)
sliderPrice.oninput = function() {
  outputPrice.innerHTML = ("£") + Math.ceil(this.value);
  // Re-initialise Tooltip after slider re-load
  $('[data-toggle="tooltip"]').tooltip();
}

// Update the EFT slider value (each time you drag the slider handle)
sliderEFT.oninput = function() {
  var hours = zeroPad(this.value, 4).substring(0,2)%100;
  var minutes = zeroPad(this.value, 4).substring(2,4);
  if (minutes > 59) {
    hours = hours+1;
    minutes = 0;
  }
  outputEFT.innerHTML = hours + ("h ") + minutes + ("m");
  // Re-initialise Tooltip after slider re-load
  $('[data-toggle="tooltip"]').tooltip();
}