Skip to content

short-response.md

Latest commit

 

History

History
93 lines (67 loc) · 2.79 KB

short-response.md

File metadata and controls

93 lines (67 loc) · 2.79 KB

Unit 5 Assessment: The Document Object Model

Short Response Section

  1. In your own words, answer the following questions: what is the Document Object Model? Why is it useful?

  2. Given some HTML that looks like this:

    <div id="content">
  <h1>Listings</h1>
  <a id="about" class="primary" href="/about">About Our Listings</a>
</div>

What are three different document methods that you could use to select the a element and store it into a variable?

  1. When developing web applications, what are some examples of events that a user might initiate? Describe at least five.

  2. The following HTML and JavaScript creates a button that logs a message to the console each time it is clicked. What line or lines of code could you remove from the JavaScript file and keep the same behavior? Assume that the JavaScript file is being loaded into the HTML via a script tag.

    <button id="log">Click to Log to Console</button>
    const button = document.getElementById('log')

button.addEventListener('click', function(e){
  e.preventDefault();
  e.stopPropagation();
  console.log("Logging...")
})

  3. Given the following HTML file, describe what would happen when a user clicks the "Alert" button? What change would you need to make to make our "handleClick" function fire?

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <button id='alert'>Click to Alert!</button>
  </body>
</html>
    const button = document.getElementById('alert')

function handleClick(){
  alert("I was clicked!")
}

button.addEventListener('click', handleClick)

  4. Assuming we have the following code in an HTML file. Describe what the JavaScript code is doing. What would happen when we submit the form?

    <form id="new-cat" action="/" method="POST">
  <label for="cat-name">Name</label>
  <input type="text" name="cat-name" value="">
  <input type="submit" name="" value="Create Cat">
</form>

<ul id="cat-list">
</ul>


<script src="index.js" charset="utf-8"></script>
    const catForm = document.getElementById('new-cat');

catForm.addEventListener('submit', function(){
  const input = catForm[0];
  const name = input.value;
  const catList = document.getElementById('cat-list');

  const catListItem = document.createElement('li');
  catListItem.innerText = name;
  catList.append(catListItem);
})