update landing page with we are Free Code Camp content including masonry for twitter embeds
This commit is contained in:
Michael Q Larson
2
app.js
2
app.js
@ -127,6 +127,8 @@ app.get(
|
||||
app.get('/learn-to-code', resourcesController.learnToCode);
|
||||
app.get('/privacy', resourcesController.privacy);
|
||||
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('/login', userController.getLogin);
|
||||
app.post('/login', userController.postLogin);
|
||||
|
||||
@ -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) {
|
||||
res.render('about', {
|
||||
title: 'Who We Are'
|
||||
|
||||
@ -137,6 +137,10 @@ ul {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.fifteen-pixel-break {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.nav-height {
|
||||
height: 50px;
|
||||
}
|
||||
@ -148,11 +152,15 @@ ul {
|
||||
.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%; }
|
||||
|
||||
.negative-10 {
|
||||
.negative-45 {
|
||||
margin-top: -45px;
|
||||
margin-bottom: -45px;
|
||||
}
|
||||
|
||||
.negative-10 {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.landing-p {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
@ -296,3 +304,32 @@ ul {
|
||||
background-image: none;
|
||||
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;
|
||||
}
|
||||
@ -7,27 +7,27 @@ block content
|
||||
.row
|
||||
.col-xs-12.col-sm-12.col-md-3
|
||||
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')
|
||||
.negative-10
|
||||
.negative-45
|
||||
p.landing-p Join a community of motivated professionals learning to code.
|
||||
.col-xs-12.col-sm-12.col-md-3
|
||||
h3 Learn JavaScript
|
||||
.negative-10
|
||||
.negative-45
|
||||
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.
|
||||
.col-xs-12.col-sm-12.col-md-3
|
||||
h3 Build your Portfolio
|
||||
.negative-10
|
||||
.negative-45
|
||||
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.
|
||||
.col-xs-12.col-sm-12.col-md-3
|
||||
h3 Help Nonprofits
|
||||
.negative-10
|
||||
.negative-45
|
||||
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.
|
||||
a.btn.btn-cta.signup-btn.btn-primary(href="/login") Start learning to code (it's free)
|
||||
br
|
||||
|
||||
@ -1,11 +1,92 @@
|
||||
.panel.panel-primary
|
||||
.panel-heading.landing-panel-heading.text-center We are Free Code Camp
|
||||
.panel-body
|
||||
.text-left.landing-panel-body
|
||||
.landing-panel-body.text-center
|
||||
.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
|
||||
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')
|
||||
p
|
||||
| Discovered
|
||||
@ -16,7 +97,69 @@
|
||||
| — Gus S (@seattlegus)
|
||||
a(href='https://twitter.com/seattlegus/status/541016560916127744') December 5, 2014
|
||||
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')
|
||||
p
|
||||
| Learn code for free! Your time, your pace! Sweet!
|
||||
@ -28,23 +171,8 @@
|
||||
| — Rebecca Wenner (@techiepusher)
|
||||
a(href='https://twitter.com/techiepusher/status/535097411619016704') November 19, 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
|
||||
| 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
|
||||
.masonry-block
|
||||
.masonry-relative
|
||||
blockquote.twitter-tweet(lang='en')
|
||||
p
|
||||
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
|
||||
@ -56,7 +184,8 @@
|
||||
| — Edeline Wrigh (@EdelineWrigh)
|
||||
a(href='https://twitter.com/EdelineWrigh/status/534850956127522816') November 18, 2014
|
||||
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
|
||||
| Started
|
||||
@ -69,7 +198,8 @@
|
||||
| — Tracie Holton (@TracieHolton)
|
||||
a(href='https://twitter.com/TracieHolton/status/533272754363957248') November 14, 2014
|
||||
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
|
||||
| I don't consider myself a teacher, but getting involved & collaborating through
|
||||
@ -78,7 +208,8 @@
|
||||
| — Alex Martin (@ADotMartin)
|
||||
a(href='https://twitter.com/ADotMartin/status/532961039181045760') November 13, 2014
|
||||
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
|
||||
| A6 -
|
||||
@ -89,7 +220,8 @@
|
||||
| — Angel Jose (@ajose01)
|
||||
a(href='https://twitter.com/ajose01/status/532729251754033152') November 13, 2014
|
||||
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
|
||||
| no school today: with
|
||||
@ -103,7 +235,8 @@
|
||||
| — brian ball (@brianball)
|
||||
a(href='https://twitter.com/brianball/status/532243325290827777') November 11, 2014
|
||||
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
|
||||
| I agree,
|
||||
|
||||
202
views/partials/programmer-interview-questions-app.jade
Normal file
202
views/partials/programmer-interview-questions-app.jade
Normal 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">×</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">×</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>
|
||||
202
views/partials/text-based-adventure-tutorial-app.jade
Normal file
202
views/partials/text-based-adventure-tutorial-app.jade
Normal 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">×</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">×</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>
|
||||
Reference in New Issue
Block a user