Week 12 - Debug Quiz - Part 1

Question 1

Find 5 errors in the HTML below

<main>
    <section class="section">
        Lorem ipsum odor amet, consectetuer adipiscing elit.
    </section>
    <section class="section">
        <ul>
            <li>Dui</li>
            <li>primis</li>
            <li>cra</li>
            <li>suscipit</li>
        </ul>>
    </section>
    <section class=section>
        <div>
            Nullam augue nec placerat lacinia est vel.
        </div>
        <div>
            Metus ullamcorper porta tempor neque rutrum leo, varius interdum.
        </div>
        <div>
            Nullam inceptos pulvinar senectus duis nunc praesent aenean aenean.
        <div>
    </section>
    <footer>
        <a src="https://duckduckgo.com/">Click here for the best search engine</a>
    </footer>
    </section>
</main>

Question 2

Find 5 errors in the CSS below

.container {
    display: flux;
    justify-items: center;
    width: 500px;
    height: 500px;
    font-size: 24px;
    padding: 20px;
    margin: 10;
    color: #a674c3;
    background-color: e23dc5;
}
.item {
    text-size: 16px;
    font-weight: bold;
    color: #46f35f;
}

Question 3

We're writing a program that shows the content of an input field when pressing a button. But something doesn't work!

<input id="input" type="text" />
<button id="button">Press me</button>
<div id="display"></div>

Find 5 errors in the JavaScript code below

let $input = document.getElementById('$input');
let $button = document.getElementById('button');
let $display = document.getElementById('output');

$button.onclick = function() {
    $display.value = input.innerHTML;
}

Question 4

We're writing a program that makes a x/y grid. But something doesn't work!

Find 5 errors in the JavaScript code below

let size = 8;
let html = ''
for (let y = 0; y < size; y++) {
    html += '<div>';
    for (let x = 0; y < size; x--) {
        html = 'x,y = ${x},${y}';
    }
    html += '</div>';
}
body.innerHTML = html;