v/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Do Now - Manipulating HTML</title>
    </head>
    <body>


        <!-- exercise 1 -->
        <div id="ex1" class="exercise">
            <button id="run-ex1">Run Exercise 1</button>
            <!-- when the button is clicked, add the text "Today is Wednesday" in the div below. -->
            <div id="ex1-results"></div>
        </div>


        <!-- exercise 2 -->
        <div id="ex2" class="exercise">
            <button id="run-ex2">Run Exercise 2</button>
            <!-- when the button is clicked, remove the text from the div below. -->
            <div id="ex2-results">
                This text should not show up on the page.
            </div>
        </div>


        <!-- exercise 3 -->
        <div id="ex3" class="exercise">
            <form>
                Search Term:
                <input name="query" value="confetti"/><br>
                <button>Run Exercise 3</button>
            </form>

            <!-- when the form is submitted, add the text "There are 25 results for confetti" in the div below. -->
            <div id="ex3-results"></div>
        </div>


        <!-- exercise 4 -->
        <div id="ex4" class="exercise">
            <form>
                Size of image:
                <input name="size" value="400" /><br>
                <button>Run Exercise 4</button>
            </form>

            <!-- when the form is submitted, place an image inside this div of size 400x400.
            URL: https://placehold.it/400x400 -->
            <div id="ex4-results"></div>
        </div>


        <!-- exercise 5 -->
        <div id="ex5" class="exercise">
            <form>
                Length of image:
                <input name="length" value="400" />

                Width of image:
                <input name="width" value="200" />

                <button>Run Exercise 5</button>
            </form>

            <!--
            when the form is submitted, place two images inside this div.
            first is of size 400x200. https://placehold.it/400x200
            second is of size 200x400. https://placehold.it/200x400
            -->
            <div id="ex5-results"></div>
        </div>


        <!-- exercise 6 -->
        <div id="ex6" class="exercise">
            <button id="run-ex6">Run Exercise 6</button>

            <!-- when the run ex6 button is clicked, disable the button below -->
            <div id="ex6-results">
                <button> Disabled button </button>
            </div>
        </div>


        <!-- exercise 7 -->
        <div id="ex7" class="exercise">
            <button id="run-ex7">Run Exercise 7</button>

            <!-- when the run ex7 button is clicked, modify the button below to look like a primary bootstrap button -->
            <div id="ex7-results">
                <button> Primary Bootstrap Button </button>
            </div>
        </div>


        <!-- exercise 8 -->
        <div id="ex8" class="exercise">
            <button id="run-ex8">Run Exercise 8</button>
            <!-- when the run ex8 button is clicked,
            define an array with V, Corey, Jason, Lauren, Joliz
            loop through the array and add an entry to the ordered list below.-->
            <div id="ex8-results">
                The teachers in my ScriptEd class
                <ol></ol>
            </div>
        </div>

    </body>
</html>

## popcode.json
{"enabledLibraries":["bootstrap"]}

## script.js
//no javascript is required for this exercise.
//simply edit the HTML.

## styles.css
/* no CSS is required for this exercise */

.exercise {
    margin: 20px 10px;
    border: 1px solid black;
    padding: 10px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Do Now - Manipulating HTML</title>
	</head>
	<body>


	<!-- exercise 1 -->
	<div id="ex1" class="exercise">
	<button id="run-ex1">Run Exercise 1</button>
	<!-- when the button is clicked, add the text "Today is Wednesday" in the div below. -->
	<div id="ex1-results"></div>
	</div>


	<!-- exercise 2 -->
	<div id="ex2" class="exercise">
	<button id="run-ex2">Run Exercise 2</button>
	<!-- when the button is clicked, remove the text from the div below. -->
	<div id="ex2-results">
	This text should not show up on the page.
	</div>
	</div>


	<!-- exercise 3 -->
	<div id="ex3" class="exercise">
	<form>
	Search Term:
	<input name="query" value="confetti"/><br>
	<button>Run Exercise 3</button>
	</form>

	<!-- when the form is submitted, add the text "There are 25 results for confetti" in the div below. -->
	<div id="ex3-results"></div>
	</div>


	<!-- exercise 4 -->
	<div id="ex4" class="exercise">
	<form>
	Size of image:
	<input name="size" value="400" /><br>
	<button>Run Exercise 4</button>
	</form>

	<!-- when the form is submitted, place an image inside this div of size 400x400.
	URL: https://placehold.it/400x400 -->
	<div id="ex4-results"></div>
	</div>


	<!-- exercise 5 -->
	<div id="ex5" class="exercise">
	<form>
	Length of image:
	<input name="length" value="400" />

	Width of image:
	<input name="width" value="200" />

	<button>Run Exercise 5</button>
	</form>

	<!--
	when the form is submitted, place two images inside this div.
	first is of size 400x200. https://placehold.it/400x200
	second is of size 200x400. https://placehold.it/200x400
	-->
	<div id="ex5-results"></div>
	</div>


	<!-- exercise 6 -->
	<div id="ex6" class="exercise">
	<button id="run-ex6">Run Exercise 6</button>

	<!-- when the run ex6 button is clicked, disable the button below -->
	<div id="ex6-results">
	<button> Disabled button </button>
	</div>
	</div>


	<!-- exercise 7 -->
	<div id="ex7" class="exercise">
	<button id="run-ex7">Run Exercise 7</button>

	<!-- when the run ex7 button is clicked, modify the button below to look like a primary bootstrap button -->
	<div id="ex7-results">
	<button> Primary Bootstrap Button </button>
	</div>
	</div>


	<!-- exercise 8 -->
	<div id="ex8" class="exercise">
	<button id="run-ex8">Run Exercise 8</button>
	<!-- when the run ex8 button is clicked,
	define an array with V, Corey, Jason, Lauren, Joliz
	loop through the array and add an entry to the ordered list below.-->
	<div id="ex8-results">
	The teachers in my ScriptEd class
	<ol></ol>
	</div>
	</div>

	</body>
	</html>
	//no javascript is required for this exercise.
	//simply edit the HTML.
	/* no CSS is required for this exercise */

	.exercise {
	margin: 20px 10px;
	border: 1px solid black;
	padding: 10px;
	}