JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<div id="main">
  
    <label for="which_date">Which date do you want the ticket for?</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>

JavaScript

const totalHoursInput = document.querySelector("#total_hours_input")

    const someAction = (amount) => {
      // Do something with the amount
      console.log(`The amount is: £${amount}`)
    }



    totalHoursInput.addEventListener("input", ({
      target
    }) => {

      const day = new Date().toLocaleString('en-us', {
        weekday: 'long'
      }).toLocaleLowerCase()

      const {
        value
      } = target
      let rate = 10
      if (day === "Saturday") {
        rate = 15
      } else if (day === "Sunday") {
        rate = 20
      }
      someAction(rate * value)
    })