Skip to content

Instantly share code, notes, and snippets.

@martypdx

martypdx/step0.html

Last active August 29, 2015 14:17
Show Gist options
  • Save martypdx/6c3265be4f96ebe52bc6 to your computer and use it in GitHub Desktop.
Save martypdx/6c3265be4f96ebe52bc6 to your computer and use it in GitHub Desktop.
Download ZIP
codefellows F1 jQuery Lab Reference Implementations
Raw
step0.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic jQuery Pattern</title>
<!-- <link rel="stylesheet" href="css/main.css"> -->
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id='target'></div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- <script src="js/main.js"></script> -->
<script>
// find the target element
// get data
// loop through the data and append to target element
</script>
</body>
</html>
Raw
step1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic jQuery Pattern</title>
<!-- <link rel="stylesheet" href="css/main.css"> -->
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Colors</h1>
<ul id='list'></ul>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- <script src="js/main.js"></script> -->
<script>
// find the target element
var $list = $('#list');
// out data
var colors = ['red', 'blue', 'green', 'purple', 'orange', 'goldenrod'];
// loop through the data and append to target element
colors.forEach(function(color) {
var $color = $('<li></li>');
$color.text(color);
$list.append($color);
});
</script>
</body>
</html>
Raw
step2.js
colors.forEach(function(color, index) {
var $color = $('<li></li>');
$color.text(color);
$color.css('color', color);
$color.attr('id', 'color' + index);
$list.append($color);
});
Raw
step3.js
colors.forEach(function(color, index) {
var $color = $('<li></li>')
.text(color)
.css({
color: color,
fontSize: (12+index)+'pt'
});
.attr('id', 'color' + index);
$list.append($color).css('text-decoration', 'underline');
});
Raw
step4.js
// in style:
// .even { background: pink; }
colors.forEach(function(color, index) {
var $color = $('<li></li>').text(color);
if(index % 2 === 0){
$color.addClass('even');
}
$list.append($color).css('text-decoration', 'underline');
});
Raw
step5.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
}
ul {
list-style: none;
}
li {
padding: 5px;
cursor: pointer;
}
li.selected {
font-weight: bold;
background: steelblue;
color: white;
}
li:hover {
background: lightsteelblue;
}
</style>
</head>
<body>
<h1>Colors</h1>
<ul id='list'></ul>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
// find the target element
var $list = $('#list');
var colors = ['red', 'blue', 'green', 'purple', 'orange', 'goldenrod'];
// loop through the data and append to target element
colors.forEach(function(color, index) {
var $color = $('<li></li>').text(color);
$list.append($color);
});
$('li').click(function(){
$(this).toggleClass('selected');
});
</script>
</body>
</html>
Raw
step6.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>jQuery Pattern 1</title>
<style>
body {
font-family: sans-serif;
}
ul {
list-style: none;
}
li {
padding: 5px;
cursor: pointer;
}
li.selected {
font-weight: bold;
background: steelblue;
color: white;
}
li:hover {
background: lightsteelblue;
}
button {
color: white;
background: green;
border: 0;
padding: 10px;
}
</style>
</head>
<body>
<h1>Colors</h1>
<ul id='list1'></ul>
<button id='move'>move selected items</button>
<ul id='list2'></ul>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
var $list = $('#list1');
var colors = ['red', 'blue', 'green', 'purple', 'orange', 'goldenrod'];
colors.forEach(function(color, index) {
var $color = $('<li></li>').text(color);
$list.append($color);
});
$('li').click(function(){
$(this).toggleClass('selected');
});
var $list2 = $('#list2');
$('#move').click(function(){
var selected = $list.find('.selected').removeClass('selected');
$list2.append(selected);
});
</script>
</body>
</html>
Raw
step7.js
var $list = $('#list1');
var colors = ['red', 'blue', 'green', 'purple', 'orange', 'goldenrod'];
colors.forEach(function(color, index) {
var $color = $('<li></li>').text(color).hide();
$list.append($color.fadeIn(2000));
});
$('li').click(function(){
$(this).toggleClass('selected');
});
var $list2 = $('#list2');
$('#move').click(function(){
var selected = $list.find('.selected').slideUp(function(){
$(this).removeClass('selected').appendTo($list2).slideDown();
});
});
Raw
step7b.js
$('#move').click(function(){
var selected = $list.find('.selected').removeClass('selected');
var copy = selected.clone();
selected.slideUp(function(){ $(this).remove() });
copy.appendTo($list2).slideDown();
});
Raw
step8a.js
function move(from, to){
var selected = from.find('.selected').removeClass('selected');
to.append(selected);
}
$('#move-down').click(function(){
move($list1, $list2);
});
$('#move-up').click(function(){
move($list2, $list1);
});
Raw
step8b.js
var $list2 = $('#list2');
var $moveDown = $('#move-down').data({ from: $list1, to: $list2 });
var $moveUp = $('#move-up').data({ from: $list2, to: $list1 });
$moveDown.add($moveUp).click(function move(){
var $this = $(this);
var selected = $this.data('from').find('.selected').removeClass('selected');
$this.data('to').append(selected);
});
Raw
step999calendar.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>jQuery Calendar</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.css">
</head>
<body>
<div id='calendar'></div>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>
<script>
$('#calendar').fullCalendar({
// put your options and callbacks here
});
</script>
</body>
</html>
Raw
z-animate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Animate</title>
<!-- <link rel="stylesheet" href="css/main.css"> -->
<style>
body {
font-family: sans-serif;
}
ul {
position: relative;
}
</style>
</head>
<body>
<h1>Colors</h1>
<ul id='list'></ul>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- <script src="js/main.js"></script> -->
<script>
var $list = $('#list');
var colors = ['red', 'blue', 'green', 'purple', 'orange', 'goldenrod'];
// loop through the data and append to target element
colors.forEach(function(color) {
var $color = $('<li></li>').text(color);
$list.append($color);
});
$list.animate({
fontSize: '30pt',
left: '250px'
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment