Seeking assistance with a unique project: I am currently developing a calculator that allows users to utilize sliders to select the best option for themselves across various categories.
My experience with JavaScript is limited, so I decided to reach out here. I aim to incorporate price values into each label so that it's possible to display the total pricing once the user clicks on "See Pricing."
For instance, selecting "High end" (50€) under the Style of design category and "Protein2" (5€) under the Database integration category should result in a total pricing of 55€ upon pressing the "See Pricing" button.
Therefore, my question is how can I associate different prices with these labels for user selection? And what would be the most efficient way to do this for future code modification by others?
Visual representation of my project because describing it verbally is not my forte
Progress thus far:
HTML:
<form id="divination-form">
<h2>Project price calculator</h2>
<h4>Use the sliders below to see what your project may end up costing!</h4>
<div class="inputbox">
<label for="slider1">Style of designㅤ</label>
<input type="range" min="1" max="5" id="slider1">
<div id="slider-label1"></div>
</div>
<div class="inputbox">
<label for="slider2">Database integrationㅤ</label>
<input type="range" min="5" max="8" id="slider2">
<div id="slider-label2"></div>
</div>
<button type="submit" class="btn btn-primary" id="pricing-btn">
See Pricing
</button>
<div id="pricing-result" class="pricing-result-container"></div>
</form>
JAVASCRIPT:
// Javascript code goes here
This results in you only being able to see the sum of the prices for a split second after clicking on "See Prices" button, which I am trying to find a solution to- but at the moment I am more concerned with a feeling that the code might not be as convenient or clean looking if I am planning to add a lot more sliders (which means adding more labels, prices and so on)..... So, is there a better solution to all of this?