Skip to content

Commit

Permalink
Merge pull request #60 from alissatroiano/nick-car-suggestions
Browse files Browse the repository at this point in the history 
refactor: uncommented questions cards and refactored storing variable…
  • Loading branch information
@Darlyn-Lurikah
Darlyn-Lurikah authored Apr 24, 2022
2 parents 425f4e4 + e0bd151 commit 784579e
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 86 deletions.
36 changes: 13 additions & 23 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,36 +16,26 @@ function selectedCardCSS (value) {
}
}

// Car size question
let carSize = ""; // define variables to store data

function selectCarSize(value) {
let carSize = value;
console.log(carSize);
// Car questions
var carSizeInput = null;
var budgetInput = null;

// functions to set local variables on click
function setOptionVariable(value) {
if (value.substring(0,2) == "Q1") {
carSizeInput = value;
} else if (value.substring(0,2) == "Q2") {
budgetInput = value;
}
selectedCardCSS(value);
}

// Budget question
let budgetSize = ""; // define variables to store data

function selectBudgetSize(value) {
let budgetSize = value;
console.log(budgetSize);
selectedCardCSS(value);
}

// Mileage question
let mileageSize = ""; // define variables to store data

function selectMileageSize(value) {
let mileageSize = value;
console.log(mileageSize);
selectedCardCSS(value);
}

// Search Button Click Function
}

function searchButtonClick () {
// add car search function here
calculateFuelSavings();

}
129 changes: 66 additions & 63 deletions questions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,79 +94,82 @@ <h1 class="display-4 mb-3 my-3 md-md-4">Evaluator</h1>
</section>

<!--The original card selection section is here (css select still works)-->
<!-- <section class="container questions-container p-3">
<div class="row mt-3 mt-md-4 car-size-question px-5">
<div class="col-12">
<h5 class="question-header mb-3 mb-md-4">Which size of car would you like?</h5>
<section class="container questions-container p-3">
<div class="row mt-3 mt-md-4 car-size-question px-5">
<div class="col-12">
<h5 class="question-header mb-3 mb-md-4">Which size of car would you like?</h5>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card" id="Q1-compact" onclick="setOptionVariable(this.id)">
<div class="card-header">
<h5 class="card-title text-center"> Compact </h5>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card" id="Compact" onclick="selectCarSize(this.id)">
<div class="card-header">
<h5 class="card-title text-center"> Compact </h5>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x text-center"></i>
</div>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x text-center"></i>
</div>
<div class="col-xs-8 col-sm-4 my-3 my-3">
<div class="card" id="Med" onclick="selectCarSize(this.id)">
<div class="card-header">
<h5 class="card-title text-center">Mid-Size</h5>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
</div>
</div>
</div>
<div class="col-xs-8 col-sm-4 my-3 my-3">
<div class="card" id="Q1-med" onclick="setOptionVariable(this.id)">
<div class="card-header">
<h5 class="card-title text-center">Mid-Size</h5>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card" id="SUV" onclick="selectCarSize(this.id)">
<div class="card-header">
<h5 class="card-title">SUV</h5>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
</div>
<div class="row budget-question mb-5 px-5 mt-3">
<div class="col-12">
<h5 class="question-header mb-3 mb-md-4">What is your budget?</h5>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card" id="Q1-suv" onclick="setOptionVariable(this.id)">
<div class="card-header">
<h5 class="card-title">SUV</h5>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card " id="Under30" onclick="selectBudgetSize(this.id)">
<div class="card-header">
<h5 class="card-title">Under $30,000</h5>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card " id="30To50" onclick="selectBudgetSize(this.id)">
<div class="card-header">
<h5 class="card-title">$30,000 - $50,000</h5>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row budget-question mb-5 px-5 mt-3">
<div class="col-12">
<h5 class="question-header mb-3 mb-md-4">What is your budget?</h5>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card " id="Q2-Under30" onclick="setOptionVariable(this.id)">
<div class="card-header">
<h5 class="card-title">Under $30,000</h5>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card " id="Over50" onclick="selectBudgetSize(this.id)">
<div class="card-header">
<h5 class="card-title">Over $50,000</h5>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
</div>
</section> -->
</main>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card " id="Q2-30To50" onclick="setOptionVariable(this.id)">
<div class="card-header">
<h5 class="card-title">$30,000 - $50,000</h5>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
</div>
</div>
<div class="col-xs-8 col-sm-4 my-3">
<div class="card " id="Q2-Over50" onclick="setOptionVariable(this.id)">
<div class="card-header">
<h5 class="card-title">Over $50,000</h5>
</div>
<div class="card-body py-5">
<i class="fas fa-car fa-3x"></i>
</div>
</div>
</div>
</div>
<div class="row mb-5 px-5 mt-3">

</div>
</section>
</main>


<!--footer-->
Expand Down

0 comments on commit 784579e

Please sign in to comment.