So basically I want the price of "renting a boat" to change when a specific requirement is met. If the user selects a date that is on a weekday it will grab the value from the input field and the price will be 10$ per hour. If its a Saturday the price will be 15$ per hour, and if its a Sunday the price will be 20$ per hour. The user can rent it up to 10 hours and they will get a total price at the bottom.
All I have at the moment is the HTML code for the input fields, and I don't even know how to begin the JavaScript part. So if anyone can teach how to start that would be greatly appreciated!
<div id="main">
<label for="which_date">Which date do you want to rent?</label>
<input type="date" id="which_date_input" min="2022-05-02">
<button id="submit">Submit</button>
<label for="total_hours">How many hours do you want to rent? (Max 10 hours)</label>
<input type="number" id="total_hours_input" placeholder="0" min="1" max="10">
<p id="result"></p>
I'm sorry if the explanation of what I want is hard to understand, I'm a beginner when it comes to JavaScript.
Thanks
This should give somewhat of a good indication of what you're trying to do.
You can use the input event along with target.value to get the value.
I'm getting value by destructuring: const {value} = target it's similar to target.value.
If you don't want to work with real-time results you can use something like submitButton.addEventListener('submit', ... instead where you set the submitButton via querySelector. but you will still need to read the same target.value from the "hours" input element if you decide to go that way.
// Do something with the results
const someAction = (amount) => {
console.log(`The amount is: £${amount}`)
}
// Get the input element
const totalHoursInput = document.querySelector("#total_hours_input")
// Listen to the input event
totalHoursInput.addEventListener("input", ({
target
}) => {
// Get the day name
const day = new Date().toLocaleString('en-us', {
weekday: 'long'
}).toLocaleLowerCase()
const { value } = target // The input value
// Determine the correct rate
let rate = 10 // Weekday default
if (day === "saturday") {
rate = 15
} else if (day === "sunday") {
rate = 20
}
// do something with the rate x value
someAction(rate * value)
})
<label for="which_date">Which date do you want the ticket for?</label>
<input type="date" id="which_date_input" value="" min="2022-05-02">
<button id="submit" onclick="getDate()">Submit</button>
<p id="result"></p>
<script>
function getDate() {
var x = document.getElementById("which_date_input").value;
document.getElementById("result").innerHTML = x;
}
</script>now use what condition you want to apply on var X. the pick up date will store in x you can use for your conditions.
You can try something like this...
function getPrice() {
const whichDate = new Date(document.getElementById("which_date_input").value);
const totalHours = document.getElementById("total_hours_input").value;
let perHour = 10;
if (whichDate.getDay() === 6) {
perHour = 15;
}
if (whichDate.getDay() === 0) {
perHour = 20;
}
document.getElementById("result").innerText = "Total price: $" + totalHours * perHour;
}<div id="main">
<label for="which_date">Which date do you want the ticket for?</label><br>
<input type="date" id="which_date_input" min="2022-05-02"><br>
<label for="total_hours">How many hours do you want to rent? (Max 10 hours)</label><br>
<input type="number" id="total_hours_input" placeholder="0" min="1" max="10">
<button id="submit" onclick="getPrice()">Submit</button><br>
<p id="result"></p>
</div>