Assignment 7 - JavaScript

A starter file for students to fork

by cperezbrito

HTML

<p id="narration"></p>

<p>Choose one:</p>
<ul>
  <li>
    <label for="climb"><input type="radio" name="mountain" id="climb" value="climb"> Climb</label>
  </li>
  <li>
    <label for="eat"><input type="radio" name="mountain" id="eat" value="eat"> Eat</label>
  </li>
  <li>
    <label for="rest"><input type="radio" name="mountain" id="rest" value="rest"> Rest</label>
  </li>
</ul>
<button id="go">Go</button>

<!-- text will be written into the spans -->
<ul>
  <li>Position: <span id="position"></span></li>
  <li>Health: <span id="health"></span></li>
  <li>Food: <span id="food"></span></li>
  <li>Remaining: <span id="distance"></span> feet</li>
</ul>

CSS

html {
  font-size: 100%;
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}
body {
  background: #f5eda6;
  color: #333;
  font-family: sans-serif;
  margin: 1rem;
  padding-bottom: 1rem;
}
li {
  list-style: none;
  line-height: 1.4;
}
p {
  line-height: 1.4;
}
#narration {
  padding: 1rem 2rem;
  background: #b4e3ea;
}

JavaScript

//Claudia Perez Brito

// global variables
const height = 6000;
let position = 0;
let health = 100;
let food = 50;
let goat = 0;
let distance = height;
let restCounter = 10;		//Can't rest more than 10 times.
let goatCounter = 2;    // Goat can't attack more than 2 times.

// messages
let m1 = "You're at the base of a mountain that is " + height + " feet high. Your goal is to climb it. Watch out for mountain goats.";
let m2 = "A large mountain goat with gigantic horns blocks your path.";
let m3 = "Oh, no! A mountain goat has knocked you down!";
let m4 = "Oh, snap! You are too exhausted to continue.";
let m5 = "Congratulations! You've reached the summit!";
let m6 = "You must select an option before you click Go.";
let m7 = "You are climbing the mountain!";
let m8 = "It's good you're refueling, but be sure to ration your food!";
let m9 = "You're full!";
let m10 = "You've run out of food.";
let m11 = "You're at full health! Don't eat up all your food!";
let m12 = "You've rested enough. Get to climbing!";
let m13 = "It's good you're resting that way you'll be charged up for your climb!";
let m14 = "Oh no! You've experienced a goat attack.You're health and position have been compromised.";
let m15 = "You're good. Just climb!";
// the value of message will be changed depending on player actions
// m1 is the starting message value
let message = m1;

// this function executes immediately when the page loads
writeResults();

// two lines of code make the Go button work:
// first we identify the button and assign it to a variable
const goButton = document.querySelector('#go');
// then we "listen" for any click on it; when a click happens,
// the function climberResult() will run.
// Note, no parentheses after the function name in this case
goButton.addEventListener('click', climberResult);

// the main function - runs each time the Go button is clicked
// it calls the other functions
function climberResult() {
  if (health <= 0) {
    message = m4;
    climb.checked =...