Skip to content

Instantly share code, notes, and snippets.

@hvent90

hvent90/gist:fef7ec6705aa98aa2691

Created November 4, 2014 00:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hvent90/fef7ec6705aa98aa2691 to your computer and use it in GitHub Desktop.
Save hvent90/fef7ec6705aa98aa2691 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<html>
<head>
<!-- CSS & jQuery for Bootstrap and jQuery -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- <link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
-->
<style>
.left-module, .form-content-box {
border-radius: 4px;
border: 1px solid black;
padding: 5px;
margin: 10px;
color: #333;
}
#fade-in, #fade-out {
background-color: #efefef;
}
#switch {
background-color: #BECCFF;
}
.green {
background-color: #6CFA6D !important;
}
.form-content-box {
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="col-sm-12">
<h1>Midterm</h1>
</div>
<div class="col-sm-3">
<div id="fade-in" class="row left-module">
<p>Make this DIV fade in upon page-load</p>
</div>
<div id="fade-out" class="row left-module">
<p>Make this DIV fade out upon clicking this DIV</p>
</div>
<div id="switch" class="row left-module">
<p>Make this DIV turn green upon clicking this DIV</p>
</div>
<div id="indicator" class="row left-module">
<p>If the above DIV is green, make this DIV say "green" upon clicking this DIV. If the above green is not green, then make this DIV say "not green" upon clicking this DIV.</p>
</div>
</div>
<div style="margin-top: 10px" class="col-sm-4">
<div class="row">
<form>
<div class="form-group">
<input name="first-input" type="text" placeholder="Enter text here..." class="form-control">
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-success">Submit</button>
</div>
<div class="col-sm-9">
<div class="form-content-box"><p>Display the contents of the above form in this DIV upon clicking the submit button.</p></div>
</div>
</form>
</div>
<div class="row">
<form>
<div class="form-group">
<input name="second-text-input" type="text" placeholder="Enter text here..." class="form-control">
</div>
<div class="form-group">
<input name="second-number-input" type="text" placeholder="Enter a number here..." class="form-control">
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-success">Submit</button>
</div>
<div class="col-sm-9">
<div class="form-content-box"><p>Enter text in first input field. Enter a number in the second input field. Upon clicking submit, display the text for the amount of times as designated by the number, and display it in this DIV.</p></div>
</div>
</form>
</div>
</div>
<div class="col-sm-3">
<h3>Extra Credit</h3>
<div class="row">
<form>
<div class="form-group">
<input name="first-input" type="text" placeholder="Enter text here..." class="form-control">
</div>
<div class="left-module">
Make the text from the above input field go in this DIV...
</div>
<div class="left-module">
and/or this DIV...
</div>
<div class="left-module">
and/or this DIV...depending on which DIV you click.
</div>
<div class="left-module">
So, if you click a DIV, then the text in the above input field should be appended to each DIV that has been clicked.
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment