Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 15, 2015 19:26
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/f1074cacc5dbe8f50a3f to your computer and use it in GitHub Desktop.
Save anonymous/f1074cacc5dbe8f50a3f to your computer and use it in GitHub Desktop.
Download ZIP
Words To Be Sorted Alex Powelson Assignment 5 // source http://jsbin.com/toyiwi
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta name="description" content="Alex Powelson Assignment 5" />
<meta charset="utf-8">
<title>Words To Be Sorted</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/form.css">
<style id="jsbin-css">
/*
dark blue: 212B40
gray-blue: 547B97
gray-green-blue: BADCDD
light-green: C2E078
*/
/*
dark blue: 1B1D26
dark green: 425955
gray-green: 778C7A
off-white: F1F2D8
tan: BFBD9F
*/
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #1b1d26;
background-color: #f1f2d8;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
form{
margin:0 auto;
width:400px;
padding:14px;
background-color: #ffffff;
border:solid 2px #425955;
}
/* ----------- stylized ----------- */
h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
h2 {
clear: both;
}
p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #BFBD9F;
padding-bottom:10px;
}
label{
display:block;
font-weight:bold;
text-align:right;
width:100px;
float:left;
}
.small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:240px;
margin:2px 0 20px 10px;
}
#submit{
clear:both;
margin-left:110px;
width:125px;
height:31px;
background:#F1F2D8;
text-align:center;
line-height:20px;
color:#000000;
font-size:12px;
font-weight:bold;
}
#output {
clear:both;
margin-bottom: 10px;
color: blue;
}
</style>
</head>
<body>
<!-- Script 7.3 - words.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Words To Be Sorted</legend>
<p>Enter some words to be sorted in the input below. Separate each word with a space. Click the button and you'll see a case-insensitive sort of those words.</p>
<div><label for="words">Words</label><input type="text" name="words" id="words" required></div>
<input type="submit" value="Sort!" id="submit">
<h2>Sorted Words</h2>
<div id="output"></div>
</fieldset>
</form>
<script src="js/words.js"></script>
<script id="jsbin-javascript">
// words.js
// This script defines a function for sorting words in a case-insenstive manner.
// Define the $() shortcut function below:
function $(id){
'use strict';
if (typeof id !== undefined){
return document.getElementById(id);
}
}
// End of $ function.
// Function for setting text of an element:
function setText(elementId, message) {
'use strict';
if ((typeof elementId =='string') &&(typeof message =='string')) {
var output = $(elementId);
if (output.textContent !== undefined){
output.textContent = message;
} else {output.innerText = message; }
} // End of main IF.
} // End of setText() function.
// This function sorts a list of words.
// The function takes one argument, a string.
function sortWords(max) {
'use strict';
// Get the words:
// One line from Step 4 on page 252 goes here DONE
var words = $('words').value;
// Convert the string to an array:
// One line from Step 5 on page 252 goes here DONE
words = words.split(' ');
// Sort the words:
// The code in Step 6 on page 252 goes here - all of it DONE
var sorted = words.map(function(value) {
return value.toLowerCase();
}).sort();
// Send the output to the page:
// One line from Step 7 on page 253 goes here DONE
setText('output', sorted.join(', '));
// Return false to prevent submission:
return false;
} // End of sortWords() function.
function init() {
'use strict';
// One line from step 9 on page 253 goes here DONE
$('theForm').onsubmit = sortWords;
} // End of init() function.
window.onload = init;
</script>
<script id="jsbin-source-css" type="text/css">/*
dark blue: 212B40
gray-blue: 547B97
gray-green-blue: BADCDD
light-green: C2E078
*/
/*
dark blue: 1B1D26
dark green: 425955
gray-green: 778C7A
off-white: F1F2D8
tan: BFBD9F
*/
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #1b1d26;
background-color: #f1f2d8;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
form{
margin:0 auto;
width:400px;
padding:14px;
background-color: #ffffff;
border:solid 2px #425955;
}
/* ----------- stylized ----------- */
h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
h2 {
clear: both;
}
p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #BFBD9F;
padding-bottom:10px;
}
label{
display:block;
font-weight:bold;
text-align:right;
width:100px;
float:left;
}
.small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:240px;
margin:2px 0 20px 10px;
}
#submit{
clear:both;
margin-left:110px;
width:125px;
height:31px;
background:#F1F2D8;
text-align:center;
line-height:20px;
color:#000000;
font-size:12px;
font-weight:bold;
}
#output {
clear:both;
margin-bottom: 10px;
color: blue;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// words.js
// This script defines a function for sorting words in a case-insenstive manner.
// Define the $() shortcut function below:
function $(id){
'use strict';
if (typeof id !== undefined){
return document.getElementById(id);
}
}
// End of $ function.
// Function for setting text of an element:
function setText(elementId, message) {
'use strict';
if ((typeof elementId =='string') &&(typeof message =='string')) {
var output = $(elementId);
if (output.textContent !== undefined){
output.textContent = message;
} else {output.innerText = message; }
} // End of main IF.
} // End of setText() function.
// This function sorts a list of words.
// The function takes one argument, a string.
function sortWords(max) {
'use strict';
// Get the words:
// One line from Step 4 on page 252 goes here DONE
var words = $('words').value;
// Convert the string to an array:
// One line from Step 5 on page 252 goes here DONE
words = words.split(' ');
// Sort the words:
// The code in Step 6 on page 252 goes here - all of it DONE
var sorted = words.map(function(value) {
return value.toLowerCase();
}).sort();
// Send the output to the page:
// One line from Step 7 on page 253 goes here DONE
setText('output', sorted.join(', '));
// Return false to prevent submission:
return false;
} // End of sortWords() function.
function init() {
'use strict';
// One line from step 9 on page 253 goes here DONE
$('theForm').onsubmit = sortWords;
} // End of init() function.
window.onload = init;</script></body>
</html>
Raw
jsbin.toyiwi.css
/*
dark blue: 212B40
gray-blue: 547B97
gray-green-blue: BADCDD
light-green: C2E078
*/
/*
dark blue: 1B1D26
dark green: 425955
gray-green: 778C7A
off-white: F1F2D8
tan: BFBD9F
*/
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #1b1d26;
background-color: #f1f2d8;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
form{
margin:0 auto;
width:400px;
padding:14px;
background-color: #ffffff;
border:solid 2px #425955;
}
/* ----------- stylized ----------- */
h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
h2 {
clear: both;
}
p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #BFBD9F;
padding-bottom:10px;
}
label{
display:block;
font-weight:bold;
text-align:right;
width:100px;
float:left;
}
.small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:240px;
margin:2px 0 20px 10px;
}
#submit{
clear:both;
margin-left:110px;
width:125px;
height:31px;
background:#F1F2D8;
text-align:center;
line-height:20px;
color:#000000;
font-size:12px;
font-weight:bold;
}
#output {
clear:both;
margin-bottom: 10px;
color: blue;
}
Raw
jsbin.toyiwi.js
// words.js
// This script defines a function for sorting words in a case-insenstive manner.
// Define the $() shortcut function below:
function $(id){
'use strict';
if (typeof id !== undefined){
return document.getElementById(id);
}
}
// End of $ function.
// Function for setting text of an element:
function setText(elementId, message) {
'use strict';
if ((typeof elementId =='string') &&(typeof message =='string')) {
var output = $(elementId);
if (output.textContent !== undefined){
output.textContent = message;
} else {output.innerText = message; }
} // End of main IF.
} // End of setText() function.
// This function sorts a list of words.
// The function takes one argument, a string.
function sortWords(max) {
'use strict';
// Get the words:
// One line from Step 4 on page 252 goes here DONE
var words = $('words').value;
// Convert the string to an array:
// One line from Step 5 on page 252 goes here DONE
words = words.split(' ');
// Sort the words:
// The code in Step 6 on page 252 goes here - all of it DONE
var sorted = words.map(function(value) {
return value.toLowerCase();
}).sort();
// Send the output to the page:
// One line from Step 7 on page 253 goes here DONE
setText('output', sorted.join(', '));
// Return false to prevent submission:
return false;
} // End of sortWords() function.
function init() {
'use strict';
// One line from step 9 on page 253 goes here DONE
$('theForm').onsubmit = sortWords;
} // End of init() function.
window.onload = init;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment