JSFiddle - React, Tailwind, and code Playground
by Esther Mun
HTML
<section id="quiz-number-one">
<p>Get my text!</p>
<p>Show everything, including this <span>span</span> tag!</p>
<p>Tell me if my child element equals 9633 + 1. <b>9634</b>
</p>
<article>You're almost there, just show what kind of node this is (the node's "name", if you will.)</article> <i>Super-bonus marks: open the url in the contents of the next element in a new window</i>
<h5>http://coned.georgebrown.ca/owa_prod/cewskcrss.P_CrseGet?subj_code=COMP&crse_numb=9634</h5>
</section>
CSS
section {
margin:25px 5px 0 5px;
padding:20px;
background-color:#efefef;
box-shadow: 0 0 25px #000;
border-radius:4px;
font-family:Calibri, sans-serif;
}
p {
padding:15px;
margin: 25px 0;
border:2px dashed #fff;
border-radius:3px;
font-size:19px;
}
p > b {
display:none;
}
span {
font-weight:100;
font-family:"Courier", serif;
font-size:1.5em;
}
span:after {
content:">";
}
span:before {
content:"<";
}
article {
line-height:1.6;
width:200px;
border:14px solid #dedede;
padding:10px;
display:inline-block;
vertical-align:top;
}
i {
font-size: 9px;
}
i:before {
content:">>>> ";
}
h5 {
text-transform:uppercase;
width:10em;
height:1em;
overflow: hidden;
text-overflow: ellipsis;
display:inline-block;
}
JavaScript
//Quiz 1 - done by Esther So Eun Mun
//document.nextElementSibling, document.previousElementSibling, document.body.firstElementChild, document.body.lastElementChild, .innerHTML, .nodeName, .textContent, window.open
alert(document.body.firstElementChild.firstElementChild.textContent);
alert(document.body.firstElementChild.firstElementChild.nextElementSibling.innerHTML);
if (document.body.firstElementChild.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.textContent == 9634) {
alert("Yes! My child element equals to 9634.");
} else {
alert("False. My child element is not equal to 9634.");
}
alert("This node's name is " + document.body.firstElementChild.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.nodeName + ".");
var georgeBrown = window.open("http://coned.georgebrown.ca/owa_prod/cewskcrss.P_CrseGet?subj_code=COMP&crse_numb=9634");