gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

minor refactor of jquery exercises. Still not working in firefox

Browse Source
This commit is contained in:
Michael Q Larson
2015-01-22 13:32:00 -08:00
parent 20cc2aa1b7
commit 129000a986
2 changed files with 111 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/css/main.less
View File

@ -551,6 +551,24 @@ div.CodeMirror-scroll {
padding-bottom: 117%; padding-bottom: 117%;
} }
#directions {
text-align: left;
font-size: 15px;
}
.well {
text-align: left;
height: 200px;
}
#exercise-directory {
font-size: 20px;
}
#current-exercise {
text-size: 250px;
}
//uncomment this to see the dimensions of all elements outlined in red //uncomment this to see the dimensions of all elements outlined in red
//* { //* {
// border-color: red; // border-color: red;

205
views/resources/jquery-exercises.jade
View File

@ -90,115 +90,96 @@ block content
var currentExercise = 0; var currentExercise = 0;
refreshEverything(currentExercise); refreshEverything(currentExercise);
}); });
style. .container
#directions { .row
text-align: left; .col-xs-12.col-sm-8
font-size: 15px; .jumbotron
} .row
.col-xs-12.text-center
.well { img.img-responsive(src='https://s3.amazonaws.com/freecodecamp/logo4.0LG.png', alt='learn to code free at freecodecamp.com')
text-align: left; h1 jQuery Exercises
height: 200px; br
} #directions.text-primary
br
#exercise-directory { .row
font-size: 20px; .col-xs-6 #location1
} .col-xs-6 #location2
.row
#current-exercise { #location1.col-xs-6.well
text-size: 250px; #location2.col-xs-6.well
} #next-exercise.btn.btn-primary.btn-lg.btn-block
| #next-exercise
html. br
<div class="container"> button#solution-button.btn.btn-block.btn-lg.btn-info
<div class="row"> | #solution-button
<div class=" col-xs-12 col-sm-8"> br
<div class="jumbotron"> .text-center
<div class="row"> | Created for
<div class="col-xs-12 text-center"> a(href='http://www.FreeCodeCamp.com') Free Code Camp
<img src="https://s3.amazonaws.com/freecodecamp/logo4.0LG.png" alt="learn to code free at freecodecamp.com" class="img-responsive"> br
| by
<h1>jQuery Exercises</h1> a(href='https://twitter.com/ossia') Quincy Larson
</div> | ,
</div> a(href='https://www.twitter.com/terakilobyte') Nathan Leniz
<br> | ,
<div class="text-primary" id="directions"> a(href='https://twitter.com/iheartkode') Mark Howard
| and
</div> a(href='https://twitter.com/ryanmalm') Ryan Malm
<br> | . Please
<div class="row"> a(href='http://codepen.io/ossia/pen/raVEgN') fork this.
<div class="col-xs-6">#location1</div> #exercise-directory.col-xs-12.col-sm-4
<div class="col-xs-6">#location2</div> .panel.panel-primary
</div> .panel.panel-heading List of Exercises
<div class="row"> .panel-body
<div class="col-xs-6 well" id="location1"></div> ol(start='0')
<div class="col-xs-6 well" id="location2"></div> li
</div> a(href='#') Re-enable an element
<div class="btn btn-primary btn-lg btn-block" id="next-exercise"> li
#next-exercise a(href='#') Change an element&apos;s parent
</div> li
<br> a(href='#') Change an element&apos;s CSS
<button class="btn btn-block btn-lg btn-info" id="solution-button"> li
#solution-button a(href='#') Use jQuery filters to modify even elements
</button> li
</br> a(href='#') Change nth child
<div class="text-center"> li
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='#') Clone an element
<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> li
</div> a(href='#') Remove an element
</div> li
</div> a(href='#') Check checkboxes
<div class="col-xs-12 col-sm-4" id="exercise-directory"> li
<div class="panel panel-primary"> a(href='#') Make text read-only
<div class="panel panel-heading">List of Exercises</div> li
<div class="panel-body"> a(href='#') Select an option in a select box
<ol start="0"> li
<li> <a href='#'>Re-enable an element</a></li> a(href='#') Add a CSS class to an element
<li> <a href='#'>Change an element's parent</a></li> li
<li> <a href='#'>Change an element's CSS</a></li> a(href='#') Lookup an element&apos;s data attribute
<li> <a href='#'>Use jQuery filters to modify even elements</a></li> li
<li> <a href='#'>Change nth child</a></li> a(href='#') Count child elements
<li> <a href='#'>Clone an element</a></li> li
<li> <a href='#'>Remove an element</a></li> a(href='#') Show an element and click on it
<li> <a href='#'>Check checkboxes</a></li> #hint-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
<li> <a href='#'>Make text read-only</a></li> .modal-dialog
<li> <a href='#'>Select an option in a select box</a></li> .modal-content
<li> <a href='#'>Add a CSS class to an element</a></li> .modal-header
<li> <a href='#'>Lookup an element's data attribute</a></li> button.close(type='button', data-dismiss='modal')
<li> <a href='#'>Count child elements</a></li> span(aria-hidden='true') &times;
<li> <a href='#'>Show an element and click on it</a></li> span.sr-only Close
</ol> h4#myModalLabel.modal-title Your hint
</div> .modal-body
</div> #hint
</div> #finished-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
</div> .modal-dialog
</div> .modal-content
.modal-header
<div class="modal fade" id="hint-modal" tabindex="-1" role="dialog" aria-hidden="true"> button.close(type='button', data-dismiss='modal')
<div class="modal-dialog"> span(aria-hidden='true') &times;
<div class="modal-content"> span.sr-only Close
<div class="modal-header"> h4#myModalLabel.modal-title
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> | Congratulations! You&apos;ve finished our jQuery exercises!
<h4 class="modal-title" id="myModalLabel">Your hint</h4> a(href='http://www.freecodecamp.com/') Go back to Free Code Camp
</div> | and mark this challenge complete.
<div class="modal-body"> .modal-body
<div id="hint"> #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>