JSFiddle - React, Tailwind, and code Playground

by mahdiar_mansouri

HTML

<!DOCTYPE html>
<html>
<body>

<h1>Minnetonka Moccasins</h1>

<div> <label>
  <b>Choose the size: </b>
  <select
    class="shoe-color"
  >
    <option value="8us">8 us</option>
    <option value="9us">9 us</option>
    <option value="10us">10 us</option>
  </select>
</label> </div>
<div>
  <label><b>Choose the color: </b></label>
  <input type="radio" id="cinnamon" name="color" value="cinnamon" onchange="obj.handleShoeColorChange(this);" checked>
  <label for="colorChoice1">cinnamon</label>
  <input type="radio" id="charcoal" name="color" value="charcoal" onchange="obj.handleShoeColorChange(this);" >
  <label for="colorChoice2">charcoal</label>
  <input type="radio" id="brown" name="color" value="brown" onchange="obj.handleShoeColorChange(this);" >
  <label for="colorChoice3">brown</label>
</div>

<button id="add-to-cart"> Add to cart </button>

<div class="select-action"> </div>
<div class="server-request"> </div>

<script>
  // client-side state
  const  selected = document.querySelector('.select-action');
  const request = document.querySelector('.server-request');
  const shoeSelect = document.querySelector(".shoe-color");
  const  addToCart = document.querySelector("#add-to-cart");
  const state = { size: "8us", color: "cinnamon" };

shoeSelect.addEventListener("change", event => {
  state.size = event.target.value;
  selected.textContent = `You selected:  size ${state.size} color ${state.color}`;
}, true);

function handleShoeColorChange(event) {
  state.color = event.value;
  selected.textContent = `You selected:  size ${state.size} color ${state.color}`;
}

addToCart.addEventListener("click", event => {
  request.textContent = `SERVER REQUEST:  size ${state.size} color ${state.color}`;

  setTimeout(() => { alert(`SERVER RESPONSE: Shoe size ${state.size} color ${state.color} added to your cart`); }, 3000); // simulates fetch()
}, true);

</script>

</body>
</html>