Skip to content

Instantly share code, notes, and snippets.

@v
Created January 18, 2017 19:10
Show Gist options
  • Save v/5100680d0c69ca6fd4f3096b4f5e88db to your computer and use it in GitHub Desktop.
Save v/5100680d0c69ca6fd4f3096b4f5e88db to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=5100680d0c69ca6fd4f3096b4f5e88db
<!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>
{"enabledLibraries":["bootstrap"]}
//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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment