Skip to content

Commit

Permalink
Upgraded libs, cleaned up files, added events labs, updated tweets to…
Browse files Browse the repository at this point in the history 
… be more relevant.
  • Loading branch information
@RedWolves
RedWolves committed Aug 24, 2014
1 parent 3c272a4 commit faf1404
Show file tree
Hide file tree
Showing 450 changed files with 3,932 additions and 75,707 deletions.
104 changes: 45 additions & 59 deletions index.html
View file
Expand Up @@ -19,13 +19,25 @@ <h1>Twitter</h1>
<section id="user-profile">
<img src="" width="73" height="73" />
<h2>@Username</h2>
<p class="user-tweets">Tweets: <span>0</span></p>
<p class="followers">Followers: <span>0</span></p>
<p class="following">Following: <span>0</span></p>
<p class="user-tweets">Tweets: <span>1,136</span></p>
<p class="followers">Followers: <span>5,356</span></p>
<p class="following">Following: <span>2,708</span></p>
</section>

<section id="feed">

<div id="compose">
<textarea></textarea>
<button class="send">Send</button>
<button class="refresh">Refresh</button>
<select class="refreshCount">
<option>05</option>
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div id="notification">This is a notification.</div>
<ul id="tweets" class="normal-tweet show-promoted-tweets">
<li class="tweet promoted-tweet" data-user-name="appendTo">
<div class="image">
Expand All @@ -36,21 +48,21 @@ <h2>@Username</h2>
<a class="user-name" href="http://twitter.com/appendTo" title="appendTo">appendTo</a>
<div class="full-name">appendTo</div>
</div>
<div class="text">A tweet here, a tweet there, a tweet everyewhere...</div>
<div class="text">Our new website has officially launched! Check it out! http://appendto.com/ #ResponsiveDesign</div>
<div class="time-stamp" data-time="1322631934000">3 minutes ago</div>
</div>
</li>

<li class="tweet promoted-tweet" data-user-name="dougneiner">
<li class="tweet promoted-tweet" data-user-name="jcreamer898">
<div class="image">
<img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=dougneiner" alt="" />
<img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=jcreamer898" alt="" />
</div>
<div class="content">
<div class="user">
<a class="user-name" href="http://twitter.com/dougneiner" title="dougneiner">dougneiner</a>
<div class="full-name">Doug Neiner</div>
<a class="user-name" href="http://twitter.com/jcreamer898" title="jcreamer898">jcreamer898</a>
<div class="full-name">Jonathan Creamer</div>
</div>
<div class="text">I live where beauty meets design...</div>
<div class="text">Debugging AngularJS Apps from the Console http://modernweb.com/2014/08/21/debugging-angularjs-apps-console … #angular #modernweb @modernwebhq</div>
<div class="time-stamp" data-time="1322631934000">17 minutes ago</div>
</div>
</li>
Expand All @@ -64,24 +76,12 @@ <h2>@Username</h2>
<a class="user-name" href="http://twitter.com/redwolves" title="redwolves">redwolves</a>
<div class="full-name">Ralph Whitbeck</div>
</div>
<div class="text">Now sit right back and you'll hear a tale...</div>
<div class="text">So @burkeholland's #mwconf talk is by far the funniest talk I have seen in a long time. I am literally in tears.</div>
<div class="time-stamp" data-time="1322631934000">32 minutes ago</div>
</div>
</li>
</ul>
<div id="compose">
<textarea></textarea>
<button class="send">Send</button>
<button class="refresh">Refresh</button>
<select class="refreshCount">
<option>05</option>
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div id="notification">This is a notification.</div>

</section>
<footer>
<div>A progressive demo for training labs</div>
Expand All @@ -90,54 +90,40 @@ <h2>@Username</h2>
</div>
<!-- /QUNIT FIXTURE -->

<script src="./libs/jquery-1.7.1.min.js"></script>
<script src="./libs/jquery-ui-1.8.16/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="./libs/amplify.min.js"></script>
<script src="./libs/jquery.mockjax.js"></script>
<script src="./libs/jquery-1.11.1.min.js"></script>
<script src="./libs/jquery.mockjax-1.5.3.js"></script>
<script src="./labs/common/common.js"></script>
<script src="./labs/01-find-something/lab.js"></script>
<script src="./labs/02-jquery-methods/lab.js"></script>
<script src="./labs/04-manipulation/lab.js"></script>
<script src="./labs/05-selector-and-dom-performance/lab.js"></script>
<script src="./labs/06-events/lab.js"></script>
<script src="./labs/07-ajax/lab.js"></script>
<script src="./labs/08-animation/lab.js"></script>
<script src="./labs/09-advanced-events/lab.js"></script>
<script src="./labs/10-plugins/lab.js"></script>
<script src="./labs/13-contextual-jquery-selectors/lab.js"></script>
<script src="./labs/15-ui-widget-factory/lab.js"></script>

<script>
$( function() {

var userName = amplify.store( "userName" ),
template = lesson.helpers.template;

if ( !userName ) {
userName = prompt( "What is your Twitter username?", "appendTo" );
amplify.store( "userName", userName );
}

$( "#user-profile" )
.find( "img" )
.attr( "src", template( lesson.data.profileImageTemplate, { userName: userName } ) )
.end()
.find( "h2" )
.html( template( lesson.data.profileLinkTemplate, { userName: userName } ) );

$.each( lesson, function ( lesson, exercises ) {
$.each( exercises, function ( exercise, method ) {
if ( /^exercise_/.test( exercise ) ) {
method( $.noop );
}
<script>
$( function() {
var userName = "appendTo",
template = lesson.helpers.template;

$( "#user-profile" )
.find( "img" )
.attr( "src", template( lesson.data.profileImageTemplate, { userName: userName } ) )
.end()
.find( "h2" )
.html( template( lesson.data.profileLinkTemplate, { userName: userName } ) );

$.each( lesson, function ( lesson, exercises ) {
$.each( exercises, function ( exercise, method ) {
if ( /^exercise_/.test( exercise ) ) {
method( $.noop );
}
});
});
});

});
});

</script>

</script>

</body>
</html>
4 changes: 2 additions & 2 deletions labs/01-find-something/lab.js
View file
Expand Up @@ -36,13 +36,13 @@ lesson.selectors = {
},

exercise_5: function() {
// Select all of the tweets with the data-user-name of dougneiner
// Select all of the tweets with the data-user-name of jcreamer898

return ;
},

exercise_6: function() {
// Select all of the tweets that data-user-name ends with the letter r
// Select all of the tweets that data-user-name ends with the letter s

return ;
}
Expand Down
8 changes: 4 additions & 4 deletions labs/01-find-something/lab.reference.js
View file
Expand Up @@ -50,15 +50,15 @@ lesson.selectors = {
},

exercise_5: function() {
// Select all of the tweets with the data-user-name of dougneiner
// Select all of the tweets with the data-user-name of jcreamer898

return $( ".tweet[data-user-name='dougneiner']" );
return $( ".tweet[data-user-name='jcreamer898']" );
},

exercise_6: function() {
// Select all of the tweets that data-user-name ends with the letter r
// Select all of the tweets that data-user-name ends with the letter s

return $( ".tweet[data-user-name$='r']" );
return $( ".tweet[data-user-name$='s']" );
}

};
Expand Down
48 changes: 24 additions & 24 deletions labs/01-find-something/lab.tests.html
View file
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<title>QUnit Core Test Suite</title>
<link rel="stylesheet" href="../../libs/jquery-qunit/qunit/qunit.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../libs/jquery-qunit/qunit/qunit-1.15.0.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../css/default.css" type="text/css" media="screen">
</head>
<body>
Expand All @@ -30,6 +30,19 @@ <h2>@Username</h2>

<section id="feed">

<div id="compose">
<textarea></textarea>
<button class="send">Send</button>
<button class="refresh">Refresh</button>
<select class="refreshCount">
<option>05</option>
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div id="notification">This is a notification.</div>
<ul id="tweets" class="normal-tweet show-promoted-tweets">
<li class="tweet promoted-tweet" data-user-name="appendTo">
<div class="image">
Expand All @@ -40,21 +53,21 @@ <h2>@Username</h2>
<a class="user-name" href="http://twitter.com/appendTo" title="appendTo">appendTo</a>
<div class="full-name">appendTo</div>
</div>
<div class="text">A tweet here, a tweet there, a tweet everyewhere...</div>
<div class="text">Our new website has officially launched! Check it out! http://appendto.com/ #ResponsiveDesign</div>
<div class="time-stamp" data-time="1322631934000">3 minutes ago</div>
</div>
</li>

<li class="tweet promoted-tweet" data-user-name="dougneiner">
<li class="tweet promoted-tweet" data-user-name="jcreamer898">
<div class="image">
<img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=dougneiner" alt="" />
<img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=jcreamer898" alt="" />
</div>
<div class="content">
<div class="user">
<a class="user-name" href="http://twitter.com/dougneiner" title="dougneiner">dougneiner</a>
<div class="full-name">Doug Neiner</div>
<a class="user-name" href="http://twitter.com/jcreamer898" title="jcreamer898">jcreamer898</a>
<div class="full-name">Jonathan Creamer</div>
</div>
<div class="text">I live where beauty meets design...</div>
<div class="text">Debugging AngularJS Apps from the Console http://modernweb.com/2014/08/21/debugging-angularjs-apps-console … #angular #modernweb @modernwebhq</div>
<div class="time-stamp" data-time="1322631934000">17 minutes ago</div>
</div>
</li>
Expand All @@ -68,24 +81,11 @@ <h2>@Username</h2>
<a class="user-name" href="http://twitter.com/redwolves" title="redwolves">redwolves</a>
<div class="full-name">Ralph Whitbeck</div>
</div>
<div class="text">Now sit right back and you'll hear a tale...</div>
<div class="text">So @burkeholland's #mwconf talk is by far the funniest talk I have seen in a long time. I am literally in tears.</div>
<div class="time-stamp" data-time="1322631934000">32 minutes ago</div>
</div>
</li>
</ul>
<div id="compose">
<textarea></textarea>
<button class="send">Send</button>
<button class="refresh">Refresh</button>
<select class="refreshCount">
<option>05</option>
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div id="notification">This is a notification.</div>
</section>
<footer>
<div>A progressive demo for training labs</div>
Expand All @@ -95,10 +95,10 @@ <h2>@Username</h2>
<!-- /QUNIT FIXTURE -->
</div>

<script src="../../libs/jquery-1.7.1.min.js"></script>
<script src="../../libs/jquery-qunit/qunit/qunit.js"></script>
<script src="../../libs/jquery-1.11.1.min.js"></script>
<script src="../../libs/jquery-qunit/qunit/qunit-1.15.0.js"></script>
<script src="../../libs/jquery-qunit/addons/composite/qunit-composite.js"></script>
<script src="../../libs/jquery.mockjax.js"></script>
<script src="../../libs/jquery.mockjax-1.5.3.js"></script>
<script src="../common/common.js"></script>
<script src="./lab.js"></script>
<script src="./lab.tests.js"></script>
Expand Down
28 changes: 14 additions & 14 deletions labs/01-find-something/lab.tests.js
View file
Expand Up @@ -12,8 +12,8 @@ test( "Exercise 1", function() {
expected = $( "header" );

expect( 3 );
equals( actual.length, 1, "Only one element was returned in the selection" );
equals( actual.length, expected.length, "Length of selections are the same" );
equal( actual.length, 1, "Only one element was returned in the selection" );
equal( actual.length, expected.length, "Length of selections are the same" );
deepEqual( actual[ 0 ], expected[ 0 ], "Deep comparions of selections are the same" );
});

Expand All @@ -22,8 +22,8 @@ test( "Exercise 2", function() {
expected = $( "#tweets .tweet:first" );

expect( 3 );
equals( actual.length, 1, "Only one element was returned in the selection" );
equals( actual.length, expected.length, "Length of selections are the same" );
equal( actual.length, 1, "Only one element was returned in the selection" );
equal( actual.length, expected.length, "Length of selections are the same" );
deepEqual( actual[ 0 ], expected[ 0 ], "Deep comparions of selections are the same" );
});

Expand All @@ -32,8 +32,8 @@ test( "Exercise 3", function() {
expected = $( "#tweets .tweet:last" );

expect( 3 );
equals( actual.length, 1, "Only one element was returned in the selection" );
equals( actual.length, expected.length, "Length of selections are the same" );
equal( actual.length, 1, "Only one element was returned in the selection" );
equal( actual.length, expected.length, "Length of selections are the same" );
deepEqual( actual[ 0 ], expected[ 0 ], "Deep comparions of selections are the same" );
});

Expand All @@ -42,27 +42,27 @@ test( "Exercise 4", function() {
expected = $( "#tweets" ).find( ".tweet:first, .tweet:last" );

expect( 3 );
equals( actual.length, 2, "Only two elements were returned in the selection" );
equals( actual.length, expected.length, "Length of selections are the same" );
equal( actual.length, 2, "Only two elements were returned in the selection" );
equal( actual.length, expected.length, "Length of selections are the same" );
deepEqual( actual.get(), expected.get(), "Deep comparions of selections are the same" );
});

test( "Exercise 5", function() {
var actual = lesson.selectors.exercise_5(),
expected = $( ".tweet[data-user-name='dougneiner']" );
expected = $( ".tweet[data-user-name='jcreamer898']" );

expect( 3 );
equals( actual.length, 1, "Only one element was returned in the selection" );
equals( actual.length, expected.length, "Length of selections are the same" );
equal( actual.length, 1, "Only one element was returned in the selection" );
equal( actual.length, expected.length, "Length of selections are the same" );
deepEqual( actual[ 0 ], expected[ 0 ], "Deep comparions of selections are the same" );
});

test( "Exercise 6", function() {
var actual = lesson.selectors.exercise_6(),
expected = $( ".tweet[data-user-name$='r']" );
expected = $( ".tweet[data-user-name$='s']" );

expect( 3 );
equals( actual.length, 1, "Only one element was returned in the selection" );
equals( actual.length, expected.length, "Length of selections are the same" );
equal( actual.length, 1, "Only one element was returned in the selection" );
equal( actual.length, expected.length, "Length of selections are the same" );
deepEqual( actual.get(), expected.get(), "Deep comparions of selections are the same" );
});

0 comments on commit faf1404

Please sign in to comment.