Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Treehouse Club - MASH MASH - JavaScript Changing Stuff in JavaScript

scot mularkey
scot mularkey
1,733 Points

How do I get the .js (JavaScript) file back in my MASH ?

I deleted the javascipt file from among the files in my MASH lesson workspace. The .html and .css files are still there but I deleted the .js file while trying to learn something...like creating a NEW file and then trying to delete that new file.

script.js
function random_number(num) {  // New function called random_choice that takes one parameter, num (or a number)
  // Get a random number between 0 and a passed-in number
  var num = num || 4  // If no number passed in, default to 4
  return Math.floor(Math.random() * num); // Round the answer down (floor) of a random number between 0 and 1 and multiply it by a number. Then return a value and exit the function.
}

function mash_choice() {  // New function called mash_choice that doesn't take any parameters 
  // Since MASH is a special case, give it its own list
  var mash = ['mansion', 'apartment', 'shack', 'house'];  // The array of choices to pick from 
  var randomNum = random_number(4);  // Use the above function to get a number between 0 and 4
  return mash[randomNum];  // Return the list item the random number function just picked and exit the function 
}

function get_answer(category) { 
  // Get a random answer from the available answers in a given category
  var choices = [];  // A blank array to hold the user provided answer  
  var selector = 'input[name="' + category + '[]"]';  // Build a CSS selector for the blanks in our passed in category 
  var inputs = document.querySelectorAll(selector);  // Get all of the inputs that match our selector 
  var answer;  

  for (var i = 0; i < inputs.length; i++) {  // Begin a for loop that will run through the code. i++ = add one to the counter which is "i"
    answer = inputs[i].value;  // Get the input with the index value of the counter and get the value ie. if they typed in dog, you get back "dog" 
    if (answer !== '') {  // If answer doesn't equal a blank... !== means doesn't equal 
      choices.push(answer); //...add it to the end of the list 
    }
  }
  return choices[random_number(choices.length)];   // Pick and return a random choice choice.length = number of answers the user provided in that category 
}

function fill_in_answers(answers) {
  // Find the spans that need filled
  var home = document.querySelector('#home');  // This says make a new variable and find the HTML tag that has the ID of "home" 
  var profession = document.querySelector('#profession');
  var pet = document.querySelector('#pet');
  var location = document.querySelector('#location');

  // Fill them with the provided answers
  home.innerText = answers['mash'];
  profession.innerText = answers['profession'];
  pet.innerText = answers['pet'];
  location.innerText = answers['location'];
  home.innerHTML = answers.mash;  // Change the content of the element in the HTML doc with the id "home" to the "mash" value in answers 
  profession.innerHTML = answers.profession;  // Change the content of the element in the HTML doc with the id "career" to the "career" value in answers 
  pet.innerHTML = answers.pet;
  location.innerHTML = answers.location;
}

function handle_submission(evt) {
  evt.preventDefault();  // Stop the form from reloading the page 
  evt.stopPropagation();  // Stop the form from reloading the page

  // Build up our answers object
  var answers = {
    'mash': mash_choice(),
    'profession': get_answer('profession'),
    'pet': get_answer('pet'),
    'location': get_answer('location')
  }
  // Fill in the answers
  fill_in_answers(answers);

  var answer_div = document.querySelector('#answers');
  answer_div.classList.add('show');
}

// Find the form on the page and attach a handler for when it's submitted
var form = document.querySelector('#mash');  
form.addEventListener('submit', handle_submission);  // Anytime the form is submitted, we want to call the function handle_submission 
index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">
  <title>MASH</title>
</head>

<body>
  <form action="" method="post" id="mash">
    <h1 class="title">MASH</h1>
    <p class="sub-title">Make sure to list five under each category.</p>

    <div class="choice-bucket">
      <h4 class="highlight">What will your profession be?</h4>
      <input name="career[]">
      <input name="career[]">
      <input name="career[]">
      <input name="career[]">
      <input name="career[]">
    </div>

    <div class="choice-bucket">
      <h4 class="highlight">What kind of animal will you have?</h4>
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
    </div>

    <div class="choice-bucket">
      <h4 class="highlight">Where will you live?</h4>
      <input name="location[]">
      <input name="location[]">
      <input name="location[]">
      <input name="location[]">
      <input name="location[]">
    </div>
    <div class="choice-bucket">
      <h4 class="highlight">What kind of car will you have?</h4>
      <input name="car[]">
      <input name="car[]">
      <input name="car[]">
      <input name="car[]">
      <input name="car[]">
    </div>

    <input type="submit" value="Tell My Future">
  </form>

  <div class="answers">
    <h3>You will live in a <span id="home"></span></h3>
    <h3>You will be a <span id="career"></span></h3>
    <h3>You will have a <span id="pet"></span></h3>
    <h3>You will live in <span id="location"></span></h3>
    <h3>You will drive a <span id="car"></span></h3>
  </div>

  <script src="script.js"></script>
  </body>
</html>

2 Answers

Steven Parker
Steven Parker
216,083 Points

You can put your workspace back the way it started.

To do that, go to the Workspaces page, find the one that goes with your course, and delete it. Then when you go back to the course and launch it again, it will have all the files just like it did when you launched it for the first time.

If you want to save changed you made to other files in the workspace, be sure to download them before you delete it, then when it has been remade you can upload your new versions again.


But before you do any of that .. what is that script.js file you have included above? Is that not it? If so, just copy-and-paste to get it back.

scot mularkey
scot mularkey
1,733 Points

Yes, that is the .js file. It appeared when I submitted my question.... How? Idk. What I ended up doing was copying that file and saving it back in my workspace. I had to replace the src at end of my html file too as well as re-reference my css files, but I figured it out! Damn I'm good lol. Thanks for the reply.