Lab - Dom Walk

Find the flags

by Jagadeesh Vallabhaneni

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
// getting Bucket
var bucket = document.getElementById("bucket");
var bucketList = document.createElement("ul");
bucket.appendChild(bucketList);

// 1) get FLAG 1
/*var flag1 = document.querySelector(".main li:nth-child(2)");
bucketList.appendChild(flag1);*/
var main = document.getElementsByClassName("main");
//console.log(main[0]);
var l = main[0].getElementsByTagName("ul");
var second = l[0].querySelector("li:nth-child(2)");
bucketList.appendChild(second.cloneNode(true));
// 2) get FLAG 2
var fl2 = document.querySelector(".flag");
/*var flag2 = document.querySelector(".flag").textContent;
var f2 = document.createTextNode(flag2);
var fl2 = document.createElement("li");
//console.log(fl2);
fl2.appendChild(f2);*/
bucketList.appendChild(fl2.cloneNode(true));
// 3) get FLAG 3
var footer = document.querySelector(".footer");
var fl3 = footer.getElementsByTagName("div")[4];
/*var flag3 = footer.getElementsByTagName("div")[4].textContent;
//console.log(flag3[4].textContent);
var f3 = document.createTextNode(flag3);
var fl3 = document.createElement("li");
fl3.appendChild(f3);*/
bucketList.appendChild(fl3.cloneNode(true));

embolden(fl3);
function embolden(elem) {
 var content = elem.innerHTML;
 content = "<strong>" + content + "</strong>";
 elem.innerHTML = content;
};

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