<div class="container">
  <h1>Status:&nbsp;<span id="hunger-status">Full</span></h1>
  <div class="hunger-bar-container">
    <div class="hunger-bar" id="hunger-bar">
    </div>
  </div>
  <div class="buttons">
     <button onclick="eatFood(trout)">Eat Fish</button>
   <button onclick="eatFood(beans)">Eat Beans</button>
   <button onclick="eatFood(deer)">Eat Deer</button>
    <button onclick="eatFood(granola_bar)">Eat Granola Bar</button>
  </div>

</div>

.hunger-bar-container {
  height: 20px;
  width: 500px;
  border: 1px solid black;
  margin: 0 auto;
}
.hunger-bar {
  background-color: green;
  height: 20px;
}

button {
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  font-size: 16px;
}

.buttons {
  margin: 0 auto;
  text-align: center;
  margin-top: 20px;
}

h1 {
   text-align: center;
}

const maxCalories = 2500; // maximum calories you can eat
let currentCalories = 2500; //calories you need to eat per day
let dead = false;
const trout = 150;
const deer = 800;
const granola_bar = 200;
const beans = 450;
let fullness = 70; // still keeping percentage for display purposes
let hungerBar = document.getElementById("hunger-bar");
let hungerStatus = document.getElementById("hunger-status");
hungerBar.style.width = fullness + "%";
 
setInterval(function() { 
    currentCalories = currentCalories- 60; //subtract fullness by 60 because we burn 60 calories per hour while sitting
   updateFullness();
}, 30000); // 1000 is 1 second (in milliseconds) so we are running this code every 30 seconds


function updateFullness() {
    if((currentCalories/maxCalories) * 100 <= 100 ) {
     fullness = (currentCalories/maxCalories) * 100 //calculate fullness percentage
    } else {
    fullness = 100;
    }
    
    if (fullness < 70) {
     hungerBar.style.backgroundColor = "#ccaa2b";
     hungerStatus.innerHTML = "Hungry";
    }
    
   if (fullness < 30) {
    hungerStatus.innerHTML = "Starving";
    hungerBar.style.backgroundColor = "red";
   }
  
  
  if (fullness <= 0) {
     dead = true;
     hungerStatus.innerHTML = "Dead";
  }
    hungerBar.style.width = fullness + "%";
}

function eatFood(food) {
  if (!dead) {
     currentCalories = currentCalories + food;
     updateFullness();
  }
}