update landing page with we are Free Code Camp content including masonry for twitter embeds

This commit is contained in:
Michael Q Larson
2014-12-09 22:30:18 -08:00
parent 3cde84bc19
commit 6b7ca4fe70
7 changed files with 710 additions and 122 deletions

2
app.js
View File

@ -127,6 +127,8 @@ app.get(
app.get('/learn-to-code', resourcesController.learnToCode); app.get('/learn-to-code', resourcesController.learnToCode);
app.get('/privacy', resourcesController.privacy); app.get('/privacy', resourcesController.privacy);
app.get('/jquery-exercises', resourcesController.jqueryExercises); app.get('/jquery-exercises', resourcesController.jqueryExercises);
app.get('/text-based-adventure-tutorial-app', resourcesController.textBasedAdventureTutorial);
app.get('/programmer-interview-questions-app', resourcesController.programmerInterviewQuestionsApp);
app.get('/about', resourcesController.about); app.get('/about', resourcesController.about);
app.get('/login', userController.getLogin); app.get('/login', userController.getLogin);
app.post('/login', userController.postLogin); app.post('/login', userController.postLogin);

View File

@ -21,6 +21,18 @@ exports.jqueryExercises = function(req, res) {
}); });
} }
exports.programmerInterviewQuestionsApp = function(req, res) {
res.render('programmer-interview-questions-app', {
title: 'programmer-interview-questions-app'
});
}
exports.textBasedAdventureTutorial = function(req, res) {
res.render('text-based-adventure-tutorial-app', {
title: 'text-based-adventure-tutorial-app'
});
}
exports.about = function(req, res) { exports.about = function(req, res) {
res.render('about', { res.render('about', {
title: 'Who We Are' title: 'Who We Are'

View File

@ -137,6 +137,10 @@ ul {
height: 10px; height: 10px;
} }
.fifteen-pixel-break {
height: 15px;
}
.nav-height { .nav-height {
height: 50px; height: 50px;
} }
@ -148,11 +152,15 @@ ul {
.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.negative-10 { .negative-45 {
margin-top: -45px; margin-top: -45px;
margin-bottom: -45px; margin-bottom: -45px;
} }
.negative-10 {
margin-top: -10px;
}
.landing-p { .landing-p {
font-size: 18px !important; font-size: 18px !important;
} }
@ -296,3 +304,32 @@ ul {
background-image: none; background-image: none;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
} }
.profile-image {
width: 200px;
height: 200px;
border-radius: 10px;
}
.team-member {
height: 420px;
}
*, *:before, *:after {box-sizing: border-box !important;}
.masonry-row {
-moz-column-width: 18em;
-webkit-column-width: 18em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
}
.masonry-block {
display: inline-block;
padding: .25rem;
width: 100%;
}
.masonry-relative {
position:relative;
display: block;
}

View File

@ -7,27 +7,27 @@ block content
.row .row
.col-xs-12.col-sm-12.col-md-3 .col-xs-12.col-sm-12.col-md-3
h3 Get Connected h3 Get Connected
.negative-10 .negative-45
span.landing-icon.ion-network.text-primary(title='Get great references and connections to help you get a job') span.landing-icon.ion-network.text-primary(title='Get great references and connections to help you get a job')
.negative-10 .negative-45
p.landing-p Join a community of motivated professionals learning to code. p.landing-p Join a community of motivated professionals learning to code.
.col-xs-12.col-sm-12.col-md-3 .col-xs-12.col-sm-12.col-md-3
h3 Learn JavaScript h3 Learn JavaScript
.negative-10 .negative-45
span.landing-icon.ion-settings.text-primary(title='Learn to code') span.landing-icon.ion-settings.text-primary(title='Learn to code')
.negative-10 .negative-45
p.landing-p Work together on Full Stack JavaScript coding challenges. p.landing-p Work together on Full Stack JavaScript coding challenges.
.col-xs-12.col-sm-12.col-md-3 .col-xs-12.col-sm-12.col-md-3
h3 Build your Portfolio h3 Build your Portfolio
.negative-10 .negative-45
span.landing-icon.ion-social-github.text-primary(title='Build a portfolio of apps for nonprofits') span.landing-icon.ion-social-github.text-primary(title='Build a portfolio of apps for nonprofits')
.negative-10 .negative-45
p.landing-p Build apps that solve real problems for real people. p.landing-p Build apps that solve real problems for real people.
.col-xs-12.col-sm-12.col-md-3 .col-xs-12.col-sm-12.col-md-3
h3 Help Nonprofits h3 Help Nonprofits
.negative-10 .negative-45
span.landing-icon.ion-ios7-people.text-primary(title='Help nonprofits') span.landing-icon.ion-ios7-people.text-primary(title='Help nonprofits')
.negative-10 .negative-45
p.landing-p Give nonprofits a boost by empowering them with code. p.landing-p Give nonprofits a boost by empowering them with code.
a.btn.btn-cta.signup-btn.btn-primary(href="/login") Start learning to code (it's free) a.btn.btn-cta.signup-btn.btn-primary(href="/login") Start learning to code (it's free)
br br

View File

@ -1,11 +1,92 @@
.panel.panel-primary .panel.panel-primary
.panel-heading.landing-panel-heading.text-center We are Free Code Camp .panel-heading.landing-panel-heading.text-center We are Free Code Camp
.panel-body .panel-body
.text-left.landing-panel-body .landing-panel-body.text-center
.col-xs-12 .col-xs-12
h2.text-center Our team
.fifteen-pixel-break
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Nique Devereaux
h4.negative-10.text-nowrap Alliance Builder
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/nique-devereaux.jpg' alt="Nique Devereaux's picture")
h4.text-nowrap Tempe, Arizona
p.negative-10 "Gamer ever since Pong. Coder ever since I discovered how much I enjoy telling machines what to do."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Berkeley Martinez
h4.negative-10.text-nowrap JavaScript Engineer
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/berkeley-martinez.jpg' alt="Berkeley Martinez's picture")
h4.text-nowrap San Francisco, California
p.negative-10 "Former mechanical engineer. Coding is pure creation. I can fly, but only once."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Mychael Zuniga
h4.negative-10.text-nowrap JavaScript Engineer
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/mychael-zuniga.jpg' alt="Mychael Zuniga's picture")
h4.text-nowrap San Diego, California
p.negative-10 "I'm a college student who turned to code as an avenue for creative expression. I love political science and economics."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Brian Ball
h4.negative-10.text-nowrap Product Manager
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/brian-ball.jpg' alt="Brian Ball's picture")
h4.text-nowrap San Francisco, California
p.negative-10 "I build products people use. I'm fascinated by how fast the internet is changing the world."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Darryl Dixon
h4.negative-10.text-nowrap Community Builder
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/darryl-dixon.png' alt="Darryl Dixon's picture")
h4.text-nowrap Newport News, Virginia
p.negative-10 "I'm a self-taught graphic designer. I'm learning web development here and want you to learn with me."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Kathy O'Driscoll
h4.negative-10.text-nowrap Community Builder
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/kathy-odriscoll.jpg' alt="Kathy O'Driscoll's picture")
h4.text-nowrap Los Angeles, California
p.negative-10 "Mother and grandmother. All my life I've dabbled in getting machines to do my bidding. Now it's becoming my career."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Ryan Malm
h4.negative-10.text-nowrap Visual Designer
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/ryan-malm.jpg' alt="Ryan Malm's picture")
h4.text-nowrap Omaha, Nebraska
p.negative-10 "I love origami, piano, and playing minecraft with my kids. My JavaScript grows stronger every day."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Charles Watson
h4.negative-10.text-nowrap iOS Engineer
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/charles-watson.jpg' alt="Charles Watson's picture")
h4.text-nowrap Minneapolis, Minnesota
p.negative-10 "I skipped college. I build iOS apps. I love the obstacles and puzzles that coding presents me."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Quincy Larson
h4.negative-10.text-nowrap Instructional Designer
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/quincy-larson.jpg' alt="Quincy Larson's picture")
h4.text-nowrap San Francisco, California
p.negative-10 "I worked as a school director in China before learning to code. It's clear that everyone can - and should - learn to code."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Mark Howard
h4.negative-10.text-nowrap Digital Marketer
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/mark-howard.jpg' alt="Mark Howard's picture")
h4.text-nowrap San Diego, California
p.negative-10 "I enjoy helping people, at scale. Code is the best way to do that."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Nathan Leniz
h4.negative-10.text-nowrap Community Builder
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/nathan-leniz.jpg' alt="Nathan Leniz's picture")
h4.text-nowrap Seoul, South Korea
p.negative-10 "Active duty US Army. I'm on the bomb squad. No joke. I learned to code for the games, and stayed for the algorithms."
.col-xs-12.col-sm-4.col-md-3.team-member
h3.negative-10.text-nowrap Jason Rueckert
h4.negative-10.text-nowrap Product Manager
img.profile-image(src='https://s3.amazonaws.com/freecodecamp/jason-rueckert.jpg' alt="Jason Rueckert's picture")
h4.text-nowrap Seattle, Washington
p.negative-10 "My high school job was testing basketball shoes for Nike. I learned code to work smarter, not harder. I have no thyroid."
.col-xs-12
h2.text-center Our chat room
.embed-responsive.embed-responsive-4by3 .embed-responsive.embed-responsive-4by3
iframe(style="display: none;" onload="this.style.display='block';" src="https://gitter.im/FreeCodeCamp/FreeCodeCamp") iframe(style="display: none;" onload="this.style.display='block';" src="https://gitter.im/FreeCodeCamp/FreeCodeCamp")
.col-xs-12.col-md-6 .col-xs-12
h2.text-center What our students are saying
.col-xs-12
.masonry-row
.masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en') blockquote.twitter-tweet(lang='en')
p p
| Discovered | Discovered
@ -16,7 +97,69 @@
| — Gus S (@seattlegus) | — Gus S (@seattlegus)
a(href='https://twitter.com/seattlegus/status/541016560916127744') December 5, 2014 a(href='https://twitter.com/seattlegus/status/541016560916127744') December 5, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8') script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6 .masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en')
p
| For my friends who are learning to code,
a(href='https://twitter.com/ossia') @ossia
| has created a pretty remarkable resource
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| -
a(href='http://t.co/LtO1Kmk6lL') http://t.co/LtO1Kmk6lL
| .
| — mark_hayward (@mark_hayward)
a(href='https://twitter.com/mark_hayward/status/541968385480097792') December 8, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en')
p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| is such a fantastic program! I love the idea of it. Perfect for someone like me
| — Konner Robison (@konnerrobison)
a(href='https://twitter.com/konnerrobison/status/541330055368949761') December 6, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en')
p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| is such a fantastic program! I love the idea of it. Perfect for someone like me
| — Konner Robison (@konnerrobison)
a(href='https://twitter.com/konnerrobison/status/541330055368949761') December 6, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en')
p
| Just built my companies website
a(href='http://t.co/AUkS27oTm5') http://t.co/AUkS27oTm5
| with skills I've learned from
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| — tate (@TateThurston)
a(href='https://twitter.com/TateThurston/status/540269941815910401') December 3, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en')
p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| I'll make time to be part of this!!!!
| — Guy (@codenorris)
a(href='https://twitter.com/codenorris/status/536585762083733505') November 23, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en')
p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| Great idea. Great vision.
| — Dennis Ahaus (@DennisAhaus)
a(href='https://twitter.com/DennisAhaus/status/535528750977654784') November 20, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en') blockquote.twitter-tweet(lang='en')
p p
| Learn code for free! Your time, your pace! Sweet! | Learn code for free! Your time, your pace! Sweet!
@ -28,23 +171,8 @@
| — Rebecca Wenner (@techiepusher) | — Rebecca Wenner (@techiepusher)
a(href='https://twitter.com/techiepusher/status/535097411619016704') November 19, 2014 a(href='https://twitter.com/techiepusher/status/535097411619016704') November 19, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8') script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6 .masonry-block
blockquote.twitter-tweet(lang='en') .masonry-relative
p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| I'll make time to be part of this!!!!
| — Guy (@codenorris)
a(href='https://twitter.com/codenorris/status/536585762083733505') November 23, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| Great idea. Great vision.
| — Dennis Ahaus (@DennisAhaus)
a(href='https://twitter.com/DennisAhaus/status/535528750977654784') November 20, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en') blockquote.twitter-tweet(lang='en')
p p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
@ -56,7 +184,8 @@
| — Edeline Wrigh (@EdelineWrigh) | — Edeline Wrigh (@EdelineWrigh)
a(href='https://twitter.com/EdelineWrigh/status/534850956127522816') November 18, 2014 a(href='https://twitter.com/EdelineWrigh/status/534850956127522816') November 18, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8') script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6 .masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en') blockquote.twitter-tweet(lang='en')
p p
| Started | Started
@ -69,7 +198,8 @@
| — Tracie Holton (@TracieHolton) | — Tracie Holton (@TracieHolton)
a(href='https://twitter.com/TracieHolton/status/533272754363957248') November 14, 2014 a(href='https://twitter.com/TracieHolton/status/533272754363957248') November 14, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8') script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6 .masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en') blockquote.twitter-tweet(lang='en')
p p
| I don't consider myself a teacher, but getting involved & collaborating through | I don't consider myself a teacher, but getting involved & collaborating through
@ -78,7 +208,8 @@
| — Alex Martin (@ADotMartin) | — Alex Martin (@ADotMartin)
a(href='https://twitter.com/ADotMartin/status/532961039181045760') November 13, 2014 a(href='https://twitter.com/ADotMartin/status/532961039181045760') November 13, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8') script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6 .masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en') blockquote.twitter-tweet(lang='en')
p p
| A6 - | A6 -
@ -89,7 +220,8 @@
| — Angel Jose (@ajose01) | — Angel Jose (@ajose01)
a(href='https://twitter.com/ajose01/status/532729251754033152') November 13, 2014 a(href='https://twitter.com/ajose01/status/532729251754033152') November 13, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8') script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6 .masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en') blockquote.twitter-tweet(lang='en')
p p
| no school today: with | no school today: with
@ -103,7 +235,8 @@
| — brian ball (@brianball) | — brian ball (@brianball)
a(href='https://twitter.com/brianball/status/532243325290827777') November 11, 2014 a(href='https://twitter.com/brianball/status/532243325290827777') November 11, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8') script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6 .masonry-block
.masonry-relative
blockquote.twitter-tweet(lang='en') blockquote.twitter-tweet(lang='en')
p p
| I agree, | I agree,

View File

@ -0,0 +1,202 @@
extends layout
block content
script.
$(document).ready(function () {
var directions = {
0: "To get started, open your Chrome DevTools. The #next-exercise button is disabled below. Try using jQuery's .attr() method to turn the disabled attribute to false.",
1: "Move the .target element from #location1 to #location2.",
2: "Change the background color of .target to red.",
3: "Change the background color of the even-numbered targets to red.",
4: "Change the background color of the target4 to red.",
5: "Clone the target2 in #location1 so that it also exists in #location2.",
6: "Remove the target3 from element from #location1.",
7: "Check the following checkboxes using jQuery.",
8: "Make the text input field read-only.",
9: "Select the target2 option in the select box.",
10: "Add the following css classes to .target: 'animated' and 'hinge'.",
11: "Use jQuery to read the data of .target.",
12: "Use 'length' to count the number of child elements in #location1, then display that value in #location2.",
13: "There's an element hidden in #location1. Show it using jQuery, and then click on it."
};
var hint = {
0: "$('#next-exercise').attr('disabled', false);",
1: "$('.target').appendTo('#location2');",
2: "$('.target').css('background', 'red');",
3: "$('.target:even').css('background', 'red');",
4: "$('.target:nth-child(4)').css('background', 'red');",
5: "$('.target:nth-child(2)').clone().appendTo($('#location2'));",
6: "$('.target:nth-child(3)').remove();",
7: "$('#location1 input').attr('checked', 'true')",
8: "$('#location1 input').attr('readonly', 'true')",
9: "$('#location1 select').val('target2');",
10: "$('.target').addClass('animated hinge');",
11: "$('.target').data();",
12: "$('#location2').text($('#location1').children().length)",
13: "$('#finished-button').show().click();"
};
var elements = {
0: "",
1: "<div class='btn btn-default target'>.target</div>",
2: "<div class='btn btn-default target'>.target</div>",
3: "<div class='btn btn-default target'>target0</div><div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div>",
4: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
5: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
6: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
7: "<input type='checkbox'>checkbox1</input><br><input type='checkbox'>checkbox2</input>",
8: "<input type='text' value='target'>",
9: "<select><option value='target0'>target0</option><option value='target1'>target1</option><option value='target2'>target2</option><option value='target3'>target3</option></select>",
10: "<div class='btn btn-default target'>.target</div>",
11: "<div class='btn btn-default target' data-lookAtMe='This is some super secret data hidden in the DOM!'>.target</div>",
12: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
13: "<div class='btn btn-default target' id='finished-button'>Finish!</div>"
};
function refreshEverything() {
$('#directions').text("Exercise " + currentExercise + ": " + directions[currentExercise]);
$('#location1').html(elements[currentExercise]);
$('#hint').text(hint[currentExercise]);
handleExerciseTransition();
}
$('#exercise-directory').on('click', 'li', event, function () {
currentExercise = $(this).index();
event.preventDefault();
refreshEverything(event);
});
$('#next-exercise').on('click', event, function () {
++currentExercise;
event.preventDefault();
refreshEverything(event);
});
$('#solution-button').on('click', function () {
$('#hint-modal').modal({backdrop: "static"});
});
$('#location1').on('click', '#finished-button', function () {
$('#finished-modal').modal({backdrop: "static"});
});
function handleExerciseTransition() {
if (currentExercise === 0) {
$('#next-exercise').attr('disabled', true);
} else {
$('#next-exercise').attr('disabled', false);
}
if (currentExercise === 2 || currentExercise === 6) {
$('#location2 .target').remove();
}
if (currentExercise === 13) {
$('#location2').text('');
$('#finished-button').hide();
$('#next-exercise').attr('disabled', true);
}
}
var currentExercise = 0;
refreshEverything(currentExercise);
});
style.
#directions {
text-align: left;
font-size: 15px;
}
.well {
text-align: left;
height: 200px;
}
#exercise-directory {
font-size: 20px;
}
#current-exercise {
text-size: 250px;
}
html.
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-8">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12 text-center">
<img src="http://3.bp.blogspot.com/-vgd3mMqeBzk/VGzEmodGqmI/AAAAAAAAAZY/OCcbFvYKzF0/s780/logo4.0LG.png" alt="free code learning at freecodecamp.com" class="img-responsive">
<h1>jQuery Exercises</h1>
</div>
</div>
<br>
<div class="text-primary" id="directions">
</div>
<br>
<div class="row">
<div class="col-xs-6">#location1</div>
<div class="col-xs-6">#location2</div>
</div>
<div class="row">
<div class="col-xs-6 well" id="location1"></div>
<div class="col-xs-6 well" id="location2"></div>
</div>
<div class="btn btn-primary btn-lg btn-block" id="next-exercise">
#next-exercise
</div>
<br>
<button class="btn btn-block btn-lg btn-info" id="solution-button">
#solution-button
</button>
</br>
<div class="text-center">
Created for <a href="http://www.FreeCodeCamp.com">Free Code Camp</a><br/>by <a href="https://twitter.com/ossia">Quincy Larson</a>,
<a href="https://www.twitter.com/terakilobyte">Nathan Leniz</a>, <a href="https://twitter.com/iheartkode"> Mark Howard</a> and <a href="https://twitter.com/ryanmalm">Ryan Malm</a>. Please <a href="http://codepen.io/ossia/pen/raVEgN">fork this.</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4" id="exercise-directory">
<div class="panel panel-primary">
<div class="panel panel-heading">List of Exercises</div>
<div class="panel-body">
<ol start="0">
<li> <a href='#'>Re-enable an element</a></li>
<li> <a href='#'>Change an element's parent</a></li>
<li> <a href='#'>Change an element's CSS</a></li>
<li> <a href='#'>Use jQuery filters to modify even elements</a></li>
<li> <a href='#'>Change nth child</a></li>
<li> <a href='#'>Clone an element</a></li>
<li> <a href='#'>Remove an element</a></li>
<li> <a href='#'>Check checkboxes</a></li>
<li> <a href='#'>Make text read-only</a></li>
<li> <a href='#'>Select an option in a select box</a></li>
<li> <a href='#'>Add a CSS class to an element</a></li>
<li> <a href='#'>Lookup an element's data attribute</a></li>
<li> <a href='#'>Count child elements</a></li>
<li> <a href='#'>Show an element and click on it</a></li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hint-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Your hint</h4>
</div>
<div class="modal-body">
<div id="hint">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="finished-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Congratulations! You've finished our jQuery exercises! <a href="http://www.freecodecamp.com/">Go back to Free Code Camp </a> and mark this challenge complete.</h4>
</div>
<div class="modal-body">
<div id="hint"></div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,202 @@
extends layout
block content
script.
$(document).ready(function () {
var directions = {
0: "To get started, open your Chrome DevTools. The #next-exercise button is disabled below. Try using jQuery's .attr() method to turn the disabled attribute to false.",
1: "Move the .target element from #location1 to #location2.",
2: "Change the background color of .target to red.",
3: "Change the background color of the even-numbered targets to red.",
4: "Change the background color of the target4 to red.",
5: "Clone the target2 in #location1 so that it also exists in #location2.",
6: "Remove the target3 from element from #location1.",
7: "Check the following checkboxes using jQuery.",
8: "Make the text input field read-only.",
9: "Select the target2 option in the select box.",
10: "Add the following css classes to .target: 'animated' and 'hinge'.",
11: "Use jQuery to read the data of .target.",
12: "Use 'length' to count the number of child elements in #location1, then display that value in #location2.",
13: "There's an element hidden in #location1. Show it using jQuery, and then click on it."
};
var hint = {
0: "$('#next-exercise').attr('disabled', false);",
1: "$('.target').appendTo('#location2');",
2: "$('.target').css('background', 'red');",
3: "$('.target:even').css('background', 'red');",
4: "$('.target:nth-child(4)').css('background', 'red');",
5: "$('.target:nth-child(2)').clone().appendTo($('#location2'));",
6: "$('.target:nth-child(3)').remove();",
7: "$('#location1 input').attr('checked', 'true')",
8: "$('#location1 input').attr('readonly', 'true')",
9: "$('#location1 select').val('target2');",
10: "$('.target').addClass('animated hinge');",
11: "$('.target').data();",
12: "$('#location2').text($('#location1').children().length)",
13: "$('#finished-button').show().click();"
};
var elements = {
0: "",
1: "<div class='btn btn-default target'>.target</div>",
2: "<div class='btn btn-default target'>.target</div>",
3: "<div class='btn btn-default target'>target0</div><div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div>",
4: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
5: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
6: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
7: "<input type='checkbox'>checkbox1</input><br><input type='checkbox'>checkbox2</input>",
8: "<input type='text' value='target'>",
9: "<select><option value='target0'>target0</option><option value='target1'>target1</option><option value='target2'>target2</option><option value='target3'>target3</option></select>",
10: "<div class='btn btn-default target'>.target</div>",
11: "<div class='btn btn-default target' data-lookAtMe='This is some super secret data hidden in the DOM!'>.target</div>",
12: "<div class='btn btn-default target'>target1</div><div class='btn btn-default target'>target2</div><div class='btn btn-default target'>target3</div><div class='btn btn-default target'>target4</div><div class='btn btn-default target'>target5</div>",
13: "<div class='btn btn-default target' id='finished-button'>Finish!</div>"
};
function refreshEverything() {
$('#directions').text("Exercise " + currentExercise + ": " + directions[currentExercise]);
$('#location1').html(elements[currentExercise]);
$('#hint').text(hint[currentExercise]);
handleExerciseTransition();
}
$('#exercise-directory').on('click', 'li', event, function () {
currentExercise = $(this).index();
event.preventDefault();
refreshEverything(event);
});
$('#next-exercise').on('click', event, function () {
++currentExercise;
event.preventDefault();
refreshEverything(event);
});
$('#solution-button').on('click', function () {
$('#hint-modal').modal({backdrop: "static"});
});
$('#location1').on('click', '#finished-button', function () {
$('#finished-modal').modal({backdrop: "static"});
});
function handleExerciseTransition() {
if (currentExercise === 0) {
$('#next-exercise').attr('disabled', true);
} else {
$('#next-exercise').attr('disabled', false);
}
if (currentExercise === 2 || currentExercise === 6) {
$('#location2 .target').remove();
}
if (currentExercise === 13) {
$('#location2').text('');
$('#finished-button').hide();
$('#next-exercise').attr('disabled', true);
}
}
var currentExercise = 0;
refreshEverything(currentExercise);
});
style.
#directions {
text-align: left;
font-size: 15px;
}
.well {
text-align: left;
height: 200px;
}
#exercise-directory {
font-size: 20px;
}
#current-exercise {
text-size: 250px;
}
html.
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-8">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12 text-center">
<img src="http://3.bp.blogspot.com/-vgd3mMqeBzk/VGzEmodGqmI/AAAAAAAAAZY/OCcbFvYKzF0/s780/logo4.0LG.png" alt="free code learning at freecodecamp.com" class="img-responsive">
<h1>jQuery Exercises</h1>
</div>
</div>
<br>
<div class="text-primary" id="directions">
</div>
<br>
<div class="row">
<div class="col-xs-6">#location1</div>
<div class="col-xs-6">#location2</div>
</div>
<div class="row">
<div class="col-xs-6 well" id="location1"></div>
<div class="col-xs-6 well" id="location2"></div>
</div>
<div class="btn btn-primary btn-lg btn-block" id="next-exercise">
#next-exercise
</div>
<br>
<button class="btn btn-block btn-lg btn-info" id="solution-button">
#solution-button
</button>
</br>
<div class="text-center">
Created for <a href="http://www.FreeCodeCamp.com">Free Code Camp</a><br/>by <a href="https://twitter.com/ossia">Quincy Larson</a>,
<a href="https://www.twitter.com/terakilobyte">Nathan Leniz</a>, <a href="https://twitter.com/iheartkode"> Mark Howard</a> and <a href="https://twitter.com/ryanmalm">Ryan Malm</a>. Please <a href="http://codepen.io/ossia/pen/raVEgN">fork this.</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4" id="exercise-directory">
<div class="panel panel-primary">
<div class="panel panel-heading">List of Exercises</div>
<div class="panel-body">
<ol start="0">
<li> <a href='#'>Re-enable an element</a></li>
<li> <a href='#'>Change an element's parent</a></li>
<li> <a href='#'>Change an element's CSS</a></li>
<li> <a href='#'>Use jQuery filters to modify even elements</a></li>
<li> <a href='#'>Change nth child</a></li>
<li> <a href='#'>Clone an element</a></li>
<li> <a href='#'>Remove an element</a></li>
<li> <a href='#'>Check checkboxes</a></li>
<li> <a href='#'>Make text read-only</a></li>
<li> <a href='#'>Select an option in a select box</a></li>
<li> <a href='#'>Add a CSS class to an element</a></li>
<li> <a href='#'>Lookup an element's data attribute</a></li>
<li> <a href='#'>Count child elements</a></li>
<li> <a href='#'>Show an element and click on it</a></li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hint-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Your hint</h4>
</div>
<div class="modal-body">
<div id="hint">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="finished-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Congratulations! You've finished our jQuery exercises! <a href="http://www.freecodecamp.com/">Go back to Free Code Camp </a> and mark this challenge complete.</h4>
</div>
<div class="modal-body">
<div id="hint"></div>
</div>
</div>
</div>
</div>