Skip to content

Instantly share code, notes, and snippets.

@ipreencekmr

ipreencekmr/PredictHouseSalePrice.html

Created August 26, 2019 13:37
Show Gist options
  • Save ipreencekmr/b16314c276ec5b49c1825cd66503a957 to your computer and use it in GitHub Desktop.
Save ipreencekmr/b16314c276ec5b49c1825cd66503a957 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
PredictHouseSalePrice.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<style type="text/css">
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 30px;
}
#predictedPriceId {
color: #f8f9f9;
background-color: #49e2c4;
display: inline-block;
padding: 0px 40px;
border-radius:5px;
color:yellow;
font-size:60px;
}
.note-class{
color: #cfdc4c;
line-height: 2;
font-size: 18px;
margin-bottom: -45px;
}
.server-class {
margin-top: 5px;
line-height: 1;
font-size: 15px;
}
#server_port {
width:45px;
}
#server_url {
width:300px;
}
</style>
<script type="text/javascript">
function predictPrice() {
var host = document.getElementById("server_url").value;
//var port = document.getElementById("server_port").value;
const base_url = host;
const dayhours = document.getElementById("dayhoursId").value;
const roomBed = document.getElementById("roomBedId").value;
const roomBath = document.getElementById("roomBathId").value;
const livingMeasure = document.getElementById("livingMeasureId").value;
const lotMeasure = document.getElementById("lotMeasureId").value;
const ceil = document.getElementById("ceilId").value;
const coast = document.getElementById("coastId").value;
const sight = document.getElementById("sightId").value;
const condition = document.getElementById("conditionId").value;
const quality = document.getElementById("qualityId").value;
const ceilMeasure = document.getElementById("ceilMeasureId").value;
const basement = document.getElementById("basementId").value;
const yrBuilt = document.getElementById("yrBuiltId").value;
const yrRenovated = document.getElementById("yrRenovatedId").value
const zipcode = document.getElementById("zipcodeId").value;
const lat = document.getElementById("latId").value;
const long = document.getElementById("longId").value;
const livingMeasure15 = document.getElementById("livingMeasure15Id").value;
const lotMeasure15 = document.getElementById("lotMeasure15Id").value;
const furnished = document.getElementById("furnishedId").value;
//day hours
var dayHours = moment(dayhours).format('YYYYMMDD');
const finalDaysHours = dayHours + "T000000";
//Year of built
const finalYrBuilt = moment(yrBuilt).format('YYYY');
//Year of Renovation
const finalYrRenovated = (yrRenovated!="")?moment(yrRenovated).format('YYYY'):0;
console.log("dayhours==>" + dayhours);
console.log("roomBed==>" + roomBed);
console.log("roombath==>" + roomBath);
console.log("livingmeasure==>" + livingMeasure);
console.log("logMeasure==>" + lotMeasure);
console.log("ceil==>" + ceil);
console.log("coast==>" + coast);
console.log("sight==>" + sight);
console.log("condition==>" + condition);
console.log("quality==>" + quality);
console.log("ceilMeasure==>" + ceilMeasure);
console.log("basement==>" + basement);
console.log("yrbuilt==>" + yrBuilt);
console.log("yrrenovated==>" + yrRenovated);
console.log("zipcode==>" + zipcode);
console.log("lat==>" + lat);
console.log("long==>" + long);
console.log("livingmeasure15==>" + livingMeasure15);
console.log("lotmeasure15==>" + lotMeasure15);
console.log("furnished==>" + furnished);
console.log("dayhoursyyyymmdd" + finalDaysHours);
console.log("get buit years" + finalYrBuilt);
console.log("get renovated years" + finalYrRenovated);
var postData = {
"dayhours":finalDaysHours,
"room_bed":parseFloat(roomBed),
"room_bath":parseFloat(roomBath),
"living_measure":parseFloat(livingMeasure),
"lot_measure":parseFloat(lotMeasure),
"ceil":parseFloat(ceil),
"coast":parseInt(coast),
"sight":parseInt(sight),
"condition":parseInt(condition),
"quality":parseInt(quality),
"ceil_measure":parseFloat(ceilMeasure),
"basement":parseFloat(basement),
"yr_built":parseInt(finalYrBuilt),
"yr_renovated":parseInt(finalYrRenovated),
"zipcode":parseInt(zipcode),
"lat":parseFloat(lat),
"long":parseFloat(long),
"living_measure15":parseFloat(livingMeasure15),
"lot_measure15":parseFloat(lotMeasure15),
"furnished":parseInt(furnished),
"total_area":16477
}
/*
postData = {
"dayhours":"20141107T000000",
"room_bed": 4,
"room_bath": 3.25,
"living_measure": 3020,
"lot_measure": 13457,
"ceil": 1,
"coast": 0,
"sight": 0,
"condition": 5,
"quality": 9,
"ceil_measure": 3020,
"basement": 0,
"yr_built": 1956,
"yr_renovated": 0,
"zipcode": 98133,
"lat": 47.7174,
"long": -122.336,
"living_measure15": 2120,
"lot_measure15": 7553,
"furnished": 1,
"total_area": 16477
}
*/
var url = base_url+'/api/v1/predictHouseSalePrice';
console.log('POST: '+JSON.stringify(postData));
fetch(url, {
headers: {
'Accept':'application/json, text/plain, */*',
"Content-Type":"application/json;"
},
method: "POST",
body:JSON.stringify(postData)
}).then(function(response) {
return response.json();
}).then(responseJson => {
//{"estimated_price":933430,"message":"success","status":1}
console.log("Request complete! Response:", JSON.stringify(responseJson));
var predicted_price = responseJson["estimated_price"];
console.log('Predicted Price is => '+predicted_price);
predicted_price = Number(predicted_price).toFixed(2);
document.getElementById('predictedPriceId').innerHTML = "Estimated Price: $"+predicted_price;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
}
</script>
<body>
<div class="header">
<h1>ML Jan 19 - Group 3</h1>
<p>Sale Price Prediction of Houses at Kings Country</p>
<div id="predictedPriceId">Estimated Price:</div>
<div class="server-class "><strong>Running On: </strong><input type="text" id="server_url" value="http://ipreencekmr.pythonanywhere.com" placeholder="Server Url"/></div>
<div class="note-class"><strong>Note:&nbsp;&nbsp;&nbsp;</strong>Please fill all the fields given and click on predict button to see estimated price.</div>
</div>
<div class="container mt-5">
<form class="was-validated">
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">House Selling Date</label>
<div class="col-sm-8">
<input type="date" id="dayhoursId" class="form-control" placeholder="yyyyMMdd" required>
<div class="invalid-feedback">
Please enter valid Date of selling
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Number of Bedrooms</label>
<div class="col-sm-8">
<input type="number" id="roomBedId" class="form-control" placeholder="qty" required>
<div class="invalid-feedback">
Please fill number of bedrooms it has
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Number of Bathrooms</label>
<div class="col-sm-8">
<input type="number" id="roomBathId" step="any" class="form-control" placeholder="qty" required>
<div class="invalid-feedback">
Please fill number of bathrooms it has
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Living Measure</label>
<div class="col-sm-8">
<input type="number" id="livingMeasureId" class="form-control" placeholder="In sqft" required>
</div>
<div class="invalid-feedback">
please provide living measurement
</div>
</div>
</div>
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Lot Measure</label>
<div class="col-sm-8">
<input type="number" class="form-control" id="lotMeasureId" placeholder="In sqft" required>
<div class="invalid-feedback">
please provide lot measurement
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Number of Floors</label>
<div class="col-sm-8">
<input type="number" class="form-control" id="ceilId" placeholder="qty" required>
<div class="invalid-feedback">
please provide number of floors
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Water Front View</label>
<div class="col-sm-8">
<select id="coastId" class="form-control" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div class="invalid-feedback">
Is it water fronted
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Sight Visited</label>
<div class="col-sm-8">
<input type="number" id="sightId" class="form-control" placeholder="qty" required>
<div class="invalid-feedback">
Please provide number of times you visited the sight
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Rate Condition</label>
<div class="col-sm-8">
<select id="conditionId" class="form-control" required>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="invalid-feedback">
Please select condition of house
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Rate Quality</label>
<div class="col-sm-8">
<select id="qualityId" class="form-control" required>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
<div class="invalid-feedback">
Please select quality of house
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Ceil Measurement</label>
<div class="col-sm-8">
<input type="number" id="ceilMeasureId" class="form-control" placeholder="In sqft" required>
<div class="invalid-feedback">
Please provide ceil measurement
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Basement Measurement</label>
<div class="col-sm-8">
<input type="number" id="basementId" class="form-control" placeholder="In sqft" required>
<div class="invalid-feedback">
Please provide basement measurement
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Year of Built</label>
<div class="col-sm-8">
<input type="date" id="yrBuiltId" class="form-control" required>
<div class="invalid-feedback">
Please provide year in which house was built
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Year of Renovation</label>
<div class="col-sm-8">
<input type="date" id="yrRenovatedId" class="form-control">
</div>
</div>
</div>
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Zipcode</label>
<div class="col-sm-8">
<input type="number" id="zipcodeId" class="form-control" required>
<div class="invalid-feedback">
Please provide zipcode of house location
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Latitude</label>
<div class="col-sm-8">
<input type="number" id="latId" step="any" class="form-control" required>
<div class="invalid-feedback">
Please provide latitude of location
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Longitude</label>
<div class="col-sm-8">
<input type="number" id="longId" step="any" class="form-control" required>
<div class="invalid-feedback">
Please provide longitude of location
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Living Measure 2015</label>
<div class="col-sm-8">
<input type="number" id="livingMeasure15Id" class="form-control" placeholder="In sqft" required>
<div class="invalid-feedback">
Please provide living measurement in 2015
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Lot Measure 2015</label>
<div class="col-sm-8">
<input type="number" id="lotMeasure15Id" class="form-control" placeholder="In sqft" required>
<div class="invalid-feedback">
Please provide lot measurement in 2015
</div>
</div>
</div>
<div class="col form-group row">
<label class="col-sm-4 col-form-label">Furnished</label>
<div class="col-sm-8">
<select id="furnishedId" id="furnishedId" class="form-control" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div class="invalid-feedback">
Please select furnished status of house
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" onClick="predictPrice();">Predict</button>
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment