Hello so basically the problem is that I have a slider that has a value from 0-1000 and if it's between these values then display contracts that match them but I also have a checkbox underneath that when it is checked value changes to 10000 (basically display all contracts) and then obviously it needs to ignore value from a slider however I cannot make them work together, I am pretty sure that there needs to be else statement added to my if statement in function checkMinutes but it gives me an error whenever I try to put them together so now either I disable code for slider and checkbox works or other way round... How would I tackle this! :)
HTML:
<!DOCTYPE html> <!-- This is standard HTML code that tells the browser it is a HTML page-->
<html lang="en-GB"> <!-- This tells the browser what language html is using-->
<head> <!-- standard html tag -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
</script>
<link href='http://ift.tt/1rtVVEm' rel='stylesheet' type='text/css'>
<title>Any Phone4You</title>
</head>
<body>
<header class="header">
<h1>Any Phone4You</h1>
</header>
<div class="main">
</div>
<div class="search">
<form>
<fieldset>
<legend>Select phone brand</legend>
<label for="sony">Sony</label>
<input type="radio" name="brand" class="phone" value="Sony">
<label for="motorola">Motorola</label>
<input type="radio" name="brand" class="phone" value="Motorola">
<label for="samsung">Samsung</label>
<input type="radio" name="brand" class="phone" value="Samsung">
<label for="apple">Apple</label>
<input type="radio" name="brand" class="phone" value="Apple">
<label for="lg">LG</label>
<input type="radio" name="brand" class="phone" value="LG">
</fieldset>
<label for="phone_model">Model</label>
<input type="text" id="phone_model" />
<fieldset>
<legend>Select a network</legend>
<label for="zmobile">Z-Mobile</label>
<input type="radio" name="net" class="network" value="Z-Mobile">
<label for="o3">O3</label>
<input type="radio" name="net" class="network" value="O3">
<label for="fodavone">Fodavone</label>
<input type="radio" name="net" class="network" value="Fodavone">
<label for="nn">NN</label>
<input type="radio" name="net" class="network" value="NN">
</fieldset>
<input type="range" name="rating" min="0" max="1000" value="0" step="50" id="range.slider" />
<span id="range">0</span><br /><br />
<input type="checkbox" name="check.minutes" id="checkminutes" value="Unlimited">Unlimited Minutes<br /><br />
<input type="range" name="rat" min="0" max="5000" value="0" step="100" id="slider.range" />
<span id="rata">0</span><br /><br />
<input type="checkbox" name="check.text" id="check.text" value="Unlimited">Unlimited Text<br /><br />
<label for="internet">Data</label>
<input type="text" id="internet" />
<label for="upcost">Upfront Cost</label>
<input type="number" id="upcost" />
<label for="month_cost">Monthly Cost</label>
<input type="number" id="month_cost" />
<label for="contract_length">Contract Length</label>
<input type="number" id="contract_length" />
</form>
</div>
<footer>@Copyright Reserved by Przemyslaw Wojtas @2015-2016 !Do not copy!</footer>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
CSS:
html{
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
}
.margin{
margin-left: auto;
margin-right: auto;
}
.textalign{
text-align: left;
}
.textalign2{
text-align: center;
}
.header{
top: 2%;
height: 20%;
width: 100%;
background-color: rgb(39,133,203);
color: white;
font-size: 36px;
font-family: 'Yanone Kaffeesatz', sans-serif;
display: inline-block;
}
h1{
left: 5%;
padding-top: 1%;
padding-left: 1%;
margin: 0;
}
.main{
position: static;
overflow-y: scroll;
float: right;
width: 80%;
height: 850px;
background-color: rgb(98,204,255);
}
footer{
position: static;
clear: both;
bottom: 0%;
width: 100%;
font-family: 'Yanone Kaffeesatz', sans-serif;
}
fieldset{
display: block;
}
form{
font-size: 16px;
width:100%;
border: 1px solid;
box-shadow: 10px 10px 5px #000000;
background-color:rgba(255,255,255,0.4);
}/* this will style my form */
input, select, textarea{
display: block;
margin:2%;
}/* this style all input, select and textarea tags */
input{
border:2px solid #CCC;
width: 70%;
margin-top: 2%;
}/* further styling to input tag */
textarea{
width:50%;
border:3px solid #CCC;
}/* further styling to textarea tag */
.search{
position: static;
overflow-y: scroll;
height: 850px;
float: left;
width: 20%;
background-color: rgb(39,133,203);
opacity: 0.9;
}
td{
width:20%;
margin-top: 5px;
padding: 5px;
position: relative;
top: 0px;
font-size: 18px;
font-family: Arial;
text-align: center;
left: 0px;
border: 1px solid;
border-collapse: collapse;
}
input[type="radio"]{
margin-left: 20px;
margin-top: -12px;
margin-bottom: 20px;
}
JS:
function phoneContract(brand, model, network, minutes, texts, data, upcost, monthlycost, length, image) {
this.brand=brand;
this.model=model;
this.network=network;
this.minutes=minutes;
this.texts=texts;
this.data=data;
this.upcost=upcost;
this.monthlycost=monthlycost;
this.length=length;
this.image=image;
this.percentage_matched=0;
}
var contract=[];
contract.push(new phoneContract("Motorola", "StarTAC", "Z-Mobile", "300", "3500", "N/A", "0", "5", "24", "images/startac.jpg"));
contract.push(new phoneContract("Nokia", "3310", "O3", "100", "5000", "N/A", "0", "2", "24", "images/3310.jpg"));
contract.push(new phoneContract("Apple", "iPhone 5C", "Fodavone", "300", "10000", "250MB", "0", "22", "24", "images/iphone5c.jpg"));
contract.push(new phoneContract("Apple", "iPhone 5C", "NN", "1000", "10000", "2GB", "49", "34", "18", "images/iphone5c.jpg"));
contract.push(new phoneContract("Samsung", "Galaxy S5", "O3", "500", "10000", "500MB", "0", "24", "24", "images/galaxys5.jpg"));
contract.push(new phoneContract("Samsung", "Galaxy S5", "Fodavone", "600", "10000", "1GB", "0", "27", "24", "images/galaxys5.jpg"));
contract.push(new phoneContract("LG", "G3", "NN", "1000", "Unlimited", "1GB", "0", "31", "24", "images/g3.jpg"));
contract.push(new phoneContract("Nokia", "Lumia 925", "Fodavone", "600", "10000", "500MB", "0", "27", "18", "images/lumia925.jpg"));
contract.push(new phoneContract("LG", "Optimus L7 2", "NN", "250", "5000", "500MB", "0", "12", "24", "images/omptimusl72.jpg"));
contract.push(new phoneContract("Sony", "Xperia Z3", "O3", "10000", "Unlimited", "1GB", "79", "38", "24", "images/xperiaz3.jpg"));
contract.push(new phoneContract("Sony", "Xperia Z3", "NN", "10000", "Unlimited", "10GB", "0", "44", "24", "images/xperiaz3.jpg"));
//Making a 'change' event for radio button
phone = document.getElementsByClassName("phone");
for (var i=0;i<phone.length;i++) {
phone[i].addEventListener("change", search, false);
}
//function for checking if 'make' is right and if it is save it's value
function checkBrand(){
var phone
var brandCheck;
phone = document.getElementsByClassName("phone");
for (var i=0;i<phone.length;i++) {
console.log(phone[i].checked)
if (phone[i].checked == true) {
brandCheck = phone[i].value;
}
}
return brandCheck;
}
//Making a 'change' event for radio buttons
network = document.getElementsByClassName("network");
for (var i=0;i<network.length;i++) {
network[i].addEventListener("change", search, false);
}
//function for validating radio buttons in 'network'
function checkNetwork(){
var network
var networkCheck
network = document.getElementsByClassName("network");
for (var i=0;i<network.length;i++) {
console.log(network[i].checked)
if (network[i].checked == true) {
networkCheck = network[i].value;
}
}
return networkCheck;
}
function checkMinutes(){
var minutes;
var checkbox;
checkbox = document.getElementById("checkminutes");
if (checkbox.checked == true) {
minutes = 10000;
}else{
checkbox.checked == false;
}
checkbox.addEventListener("change", search, false);
//code that checks the slider and the checkbox and works out minutes
return minutes;
}
//function for slider that is used for 'minutes'
/*
var minutes;
function slidefunction() {
minutes = parseInt(slider.value)
document.getElementById("range").innerHTML = minutes + " Minutes";
}
var slider = document.getElementById("range.slider");
slider.addEventListener("change", slidefunction, false);
slider.addEventListener("change", search, false);
*/
//function for slider that is used for 'text'
var text
function slid() {
text = parseInt(sli.value)
document.getElementById("rata").innerHTML = text + " Text";
}
var sli = document.getElementById("slider.range");
sli.addEventListener("change", slid, false);
sli.addEventListener("change", search, false);
var model
model = document.getElementById("phone_model"); //???
model.addEventListener("change", search, false);
var f
f = document.getElementById("internet"); //checkbox
f.addEventListener("change", search, false);
var g
g = document.getElementById("upcost"); //auto
g.addEventListener("change", search, false);
var h
h = document.getElementById("month_cost"); //auto ask
h.addEventListener("change", search, false);
var i
i = document.getElementById("contract_length"); //dropdown
i.addEventListener("change", search, false);
function search() {
var brandCheck=checkBrand();
var networkCheck=checkNetwork();
var minutesCheck=checkMinutes();
// Declare your searchResult variable
var searchResult = "";
for (var p=0;p<contract.length;p++) {
var matches = 0;
var total_number_of_conditions = 10;
if (brandCheck == contract[p].brand) matches += 1;
if (model.value == contract[p].model) matches += 1;
if (networkCheck == contract[p].network) matches += 1;
if (minutesCheck >= contract[p].minutes) matches += 1;
if (text >= contract[p].texts) matches += 1;
if (f.value == contract[p].data) matches += 1;
if (g.value == contract[p].upcost) matches += 1;
if (h.value == contract[p].monthlycost) matches += 1;
if (i.value == contract[p].length) matches += 1;
if (matches > 0) {
var percentage_matched = 100 * (matches / total_number_of_conditions);
contract[p].percentage_matched = percentage_matched;
}else{
contract[p].percentage_matched = 0;
}
}
contract.sort(compare);
for (var p=0;p<contract.length;p++) {
if (contract[p].percentage_matched > 0) {
// Concatene lines of the table result
searchResult +=
"<tr><td><img src='" + contract[p].image +
"'/></td><td>" + contract[p].brand +
"</td><td>" + contract[p].model +
"</td><td>" + contract[p].network +
"</td><td>" + contract[p].minutes +
"</td><td>" + contract[p].texts +
"</td><td>" + contract[p].data +
"</td><td>" + contract[p].upcost +
"</td><td>" + contract[p].monthlycost +
"</td><td>" + contract[p].length +
"</td><td>" + contract[p].percentage_matched + "%</td></tr>";
}
}
// Check if there is result
if(searchResult != ""){
searchResult = "<table>" + searchResult + "</table>";
}
// Put the result in the main div
document.getElementsByClassName('main')[0].innerHTML = searchResult;
}
function compare(a,b) {
if (a.percentage_matched < b.percentage_matched)
return 1;
if (a.percentage_matched > b.percentage_matched)
return -1;
return 0;
}
Aucun commentaire:
Enregistrer un commentaire