Skip to content

Instantly share code, notes, and snippets.

View jongrover's full-sized avatar

Jonathan Grover jongrover

159 followers · 46 following
View GitHub Profile
@jongrover
jongrover / js-part-01.md
Last active December 19, 2015 01:49
Instructable content for JavaScript part 1

JavaScript Part 1

Topics:

  • Variables & Data types
  • Conditional Statements
  • Functions & Scope
  • setting up a document to use jQuery
  • jQuery Selectors & Methods
  • Retrieving Form Values
  • Arrays
@jongrover
jongrover / js-lab-search-box.md
Last active December 19, 2015 01:49
Student Sinata App: JS - Search Box lab instructions

Student Sinata App: JS - Search Box

Objective

Add JavaScript Behavior to your existing Sinatra App. You will be adding the functionality to allow users to type search term into an input field and click a button to search the students page and highlight content.

Steps

  1. First use git to create a new feature branch called search-box. Checkout this branch and use it to build the serach box feature.
@jongrover
jongrover / js-lab-sort.md
Last active December 19, 2015 05:09
This is a lab for demonstrating knowledge of ajax requesting json data for sorting content in a page.

Student Sinata App: JS - AJAX Sorting

Objective

Create a select drop down menu with options to sort by: alphabetical ordering by full names, longest quote (most characters), shortest quote (least characters).

@jongrover
jongrover / citibike-plotting-closest-station.html
Created July 22, 2013 18:10
This Gist shows an example where you can hard code starting address and ending address locations and the script will tell you the closest stations to your starting and ending trip points. Included as dependencies are jQuery and Google Maps API.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"></script>
<script>
// Set starting addresses
var start_address = 'Union square NYC',
end_address = 'Times Square NYC',
start_station = '',
end_station = '';
@jongrover
jongrover / media-query-example.html
Created August 16, 2013 19:30
CSS3 Media Queries Example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper {
width: 600px;
margin: 0 auto;
}
@jongrover
jongrover / js-learning-resource-links.md
Created August 18, 2013 20:13
JavaScript Learning Resource Links
@jongrover
jongrover / js-atm-lab.html
Last active December 21, 2015 07:19
JavaScript Procedural ATM Lab number 1
<script>
/* ATM lab Directions
1. set initial balance.
2. prompt the user for their choice.
3. run a particular function based on the users choice of withdrawal or deposit.
4. tell the user their new balance.
@jongrover
jongrover / js-atm-lab-solution.html
Created August 19, 2013 19:03
JavaScript ATM (part 1) Lab Solution
<script>
var balance = 100.0; //set initial balance.
function get_balance() {
alert('Your current balance is: '+balance);
atm();
}
function make_deposit() {
var deposit = parseFloat(prompt('How much would you like to deposit?'));
@jongrover
jongrover / js-atm-lab-2.html
Created August 20, 2013 17:23
JavaScript Procedural ATM Lab part 2 - Starting Code
<h1>ATM</h1>
<form id="atm" action="#" method="post">
<select name="choice" id="choice">
<option selected>-- select choice --</option>
<option value="deposit">deposit</option>
<option value="withdrawal">withdrawal</option>
</select>
<input type="text" id="amount" name="amount" placeholder="amount">
<input id="submit" type="submit" value="submit">
</form>
@jongrover
jongrover / js-stm-lab-2-solution.html
Created August 20, 2013 17:25
JavaScript Procedural ATM part 2 - solution code
<h1>ATM</h1>
<form id="atm" action="#" method="post">
<select name="choice" id="choice">
<option selected>-- select choice --</option>
<option value="deposit">deposit</option>
<option value="withdrawal">withdrawal</option>
</select>
<input type="text" id="amount" name="amount" placeholder="amount">
<input id="submit" type="submit" value="submit">
</form>