Lab - Dom Walk

Find the flags

by Kavitha Venkataswamy

HTML

<div id="container">
  <h1>Find the flag elements.</h1>

  <p>There are three flags ("FLAG") in the content below. Find them and move their containing elements into the #bucket element.</p>

  <div class="main">
    <ul>
      <li>One</li>
      <li>FLAG #1</li>
      <li>Three</li>
    </ul>
    <div id="articles">
      <article class="new">
        <h3>Article 1</h3>

        <p>This is <a href="#">some</a> body content</p>
        <p>This is some body content <a class="flag" href="#">FLAG #2</a>
        </p>
      </article>
      <article class="new">
        <h3>Article 2</h3>

        <p>This is some body content</p>
      </article>
      <article>
        <h3>Article 3</h3>

        <p>This is some body content</p>
      </article>
      <div class="footer">
        <div>
          <div>
            <div></div>
            <div>
              <div>FLAG #3</div>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="bucket">
    <h2>Dropped Flags:</h2>

    <!-- Where are my flags? -->
  </div>
</div>

CSS

body {
  font-size: .7em;
}

#bucket {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 2px solid #ccc;
  border-radius: 2px;
  border-top: 0;
  background-color: #ececec;
  width: 20%;
  font-size: 8px;
}

#bucket::before {
  content: "Bucket";
}

#bucket a,
#bucket div,
#bucket li {
  display: block;
  color: red;
}

JavaScript

// Hunting flags in the Document
//
// Using only the built-in DOM methods
// Find the three elements that have the text "FLAG" inside them
// and move them (the element) into the div with id of #bucket
//
// Hint: You can use
//     document.getElementById
//     document.getElementsByTagName
//     document.getElementsByClassName
//     document.querySelector
//     document.querySlectorAll
// and all the parent, child and sibling selectors

// 1) get FLAG 1

var bucket = document.getElementById('bucket');

var flag1 = document.querySelectorAll('.main ul li')[1];
console.log(flag1);
bucket.appendChild(flag1);


var flag2 = document.querySelector('.flag');
bucket.appendChild(flag2);

var flag3 = document.querySelector('footer div div:nth-child(2) div');
console.log(flag3);
bucket.appendChild(flag3);












// 3) get FLAG 3

// bonus: write a function to crawl the entire document and search for the "FLAG" text, and do the job for you.