Spaces:
No application file
No application file
| <html lang="en"> | |
| <head> | |
| <!-- Required meta tags --> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="static/css/style.css"> | |
| <!-- Bootstrap CSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> | |
| <title>Car Price Predictor</title> | |
| </head> | |
| <body class="bg-dark"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="card mt-50" style="width: 100%; height: 100%;"> | |
| <div class="card-header"> | |
| <div class="col-12" style="text-align: center;"> | |
| <h1>Welcome to Car Price Predictor</h1> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <form method="post" accept-charset="utf-8"> | |
| <div class="col-18 form-group" style="text-align: center;"> | |
| <label for=""><b>Select Company</b></label> | |
| <select class="selectpicker form-control" name="company" id="company" required="1" onchange="load_car_models(this,'car_model')"> | |
| {% for company in companies %} | |
| <option value="{{ company }}">{{ company }}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <div class="col-18 form-group" style="text-align: center;"> | |
| <label for=""><b>Select Model</b></label> | |
| <select class="selectpicker form-control" name="car_model" id="car_model" required="1"> | |
| </select> | |
| </div> | |
| <div class="col-18 form-group" style="text-align: center;"> | |
| <label for=""><b>Select Year of Purchase</b></label> | |
| <select class="selectpicker form-control" name="year" id="year" required="1"> | |
| {% for year in years %} | |
| <option value="{{ year }}">{{ year }}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <div class="col-18 form-group" style="text-align: center;"> | |
| <label for=""><b>Select Fuel Type</b></label> | |
| <select class="selectpicker form-control" name="fuel_type" id="fuel_type" required="1"> | |
| {% for fuel_type in fuel_types %} | |
| <option value="{{ fuel_type }}">{{ fuel_type }}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <div class="col-18 form-group" style="text-align: center;"> | |
| <label for=""><b>Enter Number of Kilomete Traval</b></label> | |
| <input class="form-control" type="text" id="kili_driven" name="kilo_driven" placeholder="Enter Number of Kilomete Traval"> | |
| </div> | |
| <button class="btn btn-primary form-control" onclick="send_data()">Predict Price</button> | |
| </form> | |
| <br> | |
| <div class="row"> | |
| <div class="col-12" style="text-align: center;"> | |
| <h3><span id="prediction"></span></h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function load_car_models(cam,car_model_id) | |
| { | |
| var company = document.getElementById(cam.id); | |
| var car_model = document.getElementById(car_model_id); | |
| car_model.value=""; | |
| car_model.innerHTML=""; | |
| {% for company in companies %} | |
| if(company.value == "{{company}}") | |
| { | |
| {% for model in car_models %} | |
| {% if company in model %} | |
| var newOption = document.createElement("option"); | |
| newOption.value="{{ model }}"; | |
| newOption.innerHTML="{{ model }}"; | |
| car_model.options.add(newOption); | |
| {% endif %} | |
| {% endfor %} | |
| } | |
| {% endfor %} | |
| } | |
| function form_handler(event) | |
| { | |
| event.preventDefault(); | |
| } | |
| function send_data() | |
| { | |
| //suppress form default behabier | |
| document.querySelector('form').addEventListener('submit',form_handler); | |
| //send and recieve data to predict | |
| var fd = new FormData(document.querySelector('form')); | |
| var xhr= new XMLHttpRequest(); | |
| xhr.open('POST','/predict',true); | |
| document.getElementById('prediction').innerHTML="Wait! Predicting Price ...."; | |
| xhr.onreadystatechange= function() | |
| { | |
| if(xhr.readyState == XMLHttpRequest.DONE) | |
| { | |
| document.getElementById('prediction').innerHTML="Prediction: Rs. "+xhr.responseText; | |
| } | |
| } | |
| xhr.onload=function(){}; | |
| xhr.send(fd); | |
| } | |
| </script> | |
| <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> | |
| <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> | |
| <!-- Option 2: Separate Popper and Bootstrap JS --> | |
| <!-- | |
| <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script> | |
| --> | |
| </body> | |
| </html> |