-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (127 loc) · 5.56 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Honda Suggestions</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://pyscript.net/alpha/pyscript.css" />
<script defer
src="https://pyscript.net/alpha/pyscript.js">
</script>
<py-env>
- pandas
- numpy
- paths:
- ./data/clean_honda_sell_data.csv
- ./data_manipulation.py
</py-env>
<py-script>
import pandas as pd
import numpy as np
import js
from pyodide.http import open_url
from data_manipulation import get_filtered_cars
clean_df = pd.read_csv(open_url("./data/clean_honda_sell_data.csv"))
</py-script>
</head>
<body>
<div id="Title"><p>YOUR RELIABLE HONDA</p></div>
<div id="Question_Wrapper">
<div class="questions" id="question1">
<p>What is your budget?</p>
<!-- Code For Input values only being numbers: -->
<!-- https://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in -->
<input type="number" class="budget_amount" step=100 min="0" value="70000" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'"/>
</div>
<div class="questions" id="question2">
<p>Fuel Type?</p>
<div class="checkbox_wrapper">
<div>
<input type="checkbox" class="checkboxes" id="gasoline" value="Gasoline" checked="True">
<label for="gasoline">Gasoline</label>
</div>
<div>
<input type="checkbox" class="checkboxes" id="hybrid" value="Hybrid">
<label for="hybrid">Hybrid</label>
</div>
</div>
</div>
<div class="questions" id="question3">
<p>Transmission Preference?</p>
<div class="checkbox_wrapper">
<div>
<input type="checkbox" class="checkboxes" id="automatic" value="automatic" checked="True">
<label for="automatic">Automatic</label>
</div>
<div>
<input type="checkbox" class="checkboxes" id="manual" value="manual">
<label for="manual">Manual</label>
</div>
<div>
<input type="checkbox" class="checkboxes" id="cvt" value="cvt">
<label for="cvt">CVT</label>
</div>
</div>
</div>
<div class="questions" id="question4">
<p>Drivetrain Preference?</p>
<div class="checkbox_wrapper">
<div>
<input type="checkbox" class="checkboxes" id="fwd" value="fwd" checked="True">
<label for="fwd">FWD</label>
</div>
<div>
<input type="checkbox" class="checkboxes" id="awd" value="awd">
<label for="awd">AWD</label>
</div>
<div>
<input type="checkbox" class="checkboxes" id="rwd" value="rwd">
<label for="rwd">RWD</label>
</div>
</div>
</div>
<div class="questions" id="question5">
<p>Minimum Prefered MPG?</p>
<input type="number" class="budget_amount" step=5 min="0" max="50" value="0" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'">
</div>
<div class="questions" id="submit_page">
<p>Done, Now Submit</p>
<div>
</div>
</div>
<div id="Button_Wrapper">
<button class="buttons" id="leftButton" onclick="leftClick()"><</button>
<button class="buttons" id="rightButton" onclick="rightClick()">></button>
<button class="buttons" id="submit">Submit</button>
</div>
</div>
<div id="description">
Description: Get Your Recommended Honda Models Based on Your Selection of Car Preferances.
All Data is Retrieved From cars.com. For More Information on The Data Itself Click Below.
<a href="https://public.tableau.com/views/HondaPresentation/Dashboard2?:language=en-US&publish=yes&:display_count=n&:origin=viz_share_link" target="_blank">Link: Tableau</a>
<a href="https://www.kaggle.com/datasets/omartorres25/honda-data" target="_blank">Link: Kaggle</a>
</div>
<script type="text/javascript" src="header.js"></script>
<py-script>
from js import document
from pyodide import create_proxy
from js import getInfo, placeHondaModels
try:
import simplejson as json
except (ImportError,):
import json
def getVariableData(*args, **kwargs):
variable_info = getInfo()
variable_list = json.loads(variable_info)
variable_list[0] = int(variable_list[0])
variable_list[-1] = int(variable_list[-1])
model_list = get_filtered_cars(clean_df, variable_list[0], variable_list[1], variable_list[2], variable_list[3], variable_list[4])
placeHondaModels(json.dumps(model_list))
function_proxy = create_proxy(getVariableData)
document.getElementById("submit").addEventListener("click", function_proxy)
</py-script>
</body>
</html>