Is there any way I can re-write this into smaller code?

Question

Hey guys, I cant think of a way I can re-write all this if statements I have in my JS into a smaller code. Is it possible?

heres my complete HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Restaurant Counter</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
  <div class="jumbotron jumbotron-fluid text-center">
  <div class="container">
    <h1 class="display-3">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

<div class="statusArea container text-center">
  <h1>Current Status:</h1>
  <p class="currentStatus"></p>
</div>

<div class="reserveArea text-center container-fluid">
  <h2>Reserve a spot:</h2>
  <ul class="reserveList list-inline">
    <li class="list-inline-item"> <input type="checkbox" id="couple">Couple</li>
    <li class="list-inline-item"> <input type="checkbox" id="group3">Group of 3</li>
    <li class="list-inline-item"> <input type="checkbox" id="group4">Group of 4</li>
    <li class="list-inline-item"> <input type="checkbox" id="group5">Group of 5</li>
    <li class="list-inline-item"> <input type="checkbox" id="group6">Group of 6</li>
  </ul>
</div>




  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script src="app.js">></script>
</body>
</html>

Here's my JS

let totalChoco = 50;
const currentStatus = document.querySelector('p.currentStatus');
const ul = document.querySelector('ul.reserveList');

document.addEventListener('DOMContentLoaded', () => {
  currentStatus.innerHTML = "There are currently " + totalChoco + " available chocolates.";
});

ul.addEventListener('click', (e) => {
if (event.target.id == 'couple'){
  totalChoco -= 2;
  currentStatus.innerHTML = "There are currently " + totalChoco + " available chocolates.";
}

if (event.target.id == 'group3'){
  totalChoco -= 3;
  currentStatus.innerHTML = "There are currently " + totalChoco + " available chocolates.";
}

if (event.target.id == 'group4'){
  totalChoco -= 4;
  currentStatus.innerHTML = "There are currently " + totalChoco + " available chocolates.";
}

if (event.target.id == 'group5'){
  totalChoco -= 5;
  currentStatus.innerHTML = "There are currently " + totalChoco + " available chocolates.";
}

if (event.target.id == 'group6'){
  totalChoco -= 6;
  currentStatus.innerHTML = "There are currently " + totalChoco + " available chocolates.";
}

if (totalChoco < 0){
 currentStatus.innerHTML = "There are no available chocolates."
 currentStatus.style.color = "red";
}


});

Answer 1 · 2017-06-24T21:35:51Z

June 24, 2017 9:35pm

Hi there, Mark! I reworked your code a bit into something I feel is a little less verbose and it functions like yours does. However, I'd like to point out that with your code (and with the refactor) that chocolates are subtracted every time you check or uncheck a box. I feel fairly certain this wasn't intentional. But here's my rework of your code. Hope it helps!

let totalChoco = 50;
const currentStatus = document.querySelector('p.currentStatus');
const ul = document.querySelector('ul.reserveList');

document.addEventListener('DOMContentLoaded', () => {
  printChocolates();
});

ul.addEventListener('click', (e) => {

  switch(event.target.id) {
    case 'couple':
      totalChoco -= 2;
      break;
    case 'group3':
      totalChoco -= 3;
      break;
    case 'group4':
      totalChoco -=4;
      break;
    case 'group5':
      totalChoco -= 5;
      break;
    case 'group6':
      totalChoco -= 6;
      break;
    default:
      totalChoco -= 0;
  }
    printChocolates();
})

function printChocolates() {
  if (totalChoco > 0) {
    currentStatus.innerHTML = "There are currently " + totalChoco + " available chocolates."
  } else {
    currentStatus.innerHTML = "There are no available chocolates.";
  }
}

Welcome to the Treehouse Community

Looking to learn something new?

Mark Libario

Mark Libario

Is there any way I can re-write this into smaller code?

1 Answer

Jennifer Nordell

Jennifer Nordell

Mark Libario

Mark Libario