Skip to content

Instantly share code, notes, and snippets.

@harre096

harre096/Lab3.html

Created February 2, 2014 03:37
Show Gist options
  • Save harre096/8762701 to your computer and use it in GitHub Desktop.
Save harre096/8762701 to your computer and use it in GitHub Desktop.
Download ZIP
Lab3files
Raw
functions.js
/**
* Created by harre096 on 1/28/14.
*/
function countChars(string) {
return string.length;
}
function putIn(content) {
return content;
}
/*Note: Our undo-redo is set up with no limit on undos or redos*/
function storage() {
var saves = [];
var redos = [];
return{
view: function() {return saves[saves.length - 1]},
store: function(content) {
if (saves.length >= 5) {saves.shift()}
saves.push(content)
},
undo: function() {if(saves.length !== 0) {
redos.push(saves.pop())
}},
redo: function() {if(redos.length !== 0){
saves.push(redos.pop())
}}
}
}
function search(want, entire) {
var n = entire.search(want);
var done = "";
while (n > -1) {
done += entire.substring(0, n) + "<b>" + entire.substring(n, n + want.length) + "</b>";
entire = entire.substring(n + want.length);
n = entire.search(want);
}
done += entire.substring(n);
return done;
}
module.exports.search = search;
module.exports.putIn = putIn;
module.exports.countChars = countChars;
module.exports.storage = storage;
Raw
Lab3.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>
Lab 3
</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<link href="styles.css" type="text/css" rel="stylesheet"/>
<script src="functions.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--<script src=http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js></script>-->
</head>
<script>
/*Button 1*/
$(document).ready(function () {
/*the closure that holds the saved states*/
var storageBox = storage();
/*as of now, this is a little broken, but it's hard to explain w/out examples.*/
$("#button1").click(function () {
storageBox.undo();
$("#textArea1").val(storageBox.view());
});
$("#button2").click(function () {
storageBox.store($('#textArea1').val());
});
$("#button3").click(function () {
storageBox.redo();
$("#textArea1").val(storageBox.view());
});
/*$("#button2").click(function(){
$("p").text($('#textBlock').val());
*/
/* $("body p").highlight("highlight");*/
/*
});*/
$("#find").click(function () {
$("findDisplay").text($('#textBlock').val());
});
});
/* Useful debugging tool - shows the width of any element -
* put this with the other on-click stuff when you want to use it.*/
/*$("button1").click(function () {
showWidth("TextArea", $("#textArea1").width() );
});*/
/* function for said debugging tool*/
/*function showWidth( ele, w ) {
$("#changeMe").text( "The width for the " + ele + " is " + w + "px." )
}*/
</script>
<body>
<h1>Lab 3</h1>
<div id="mainDiv">
<div id="buttonArea">
<p id="changeMe"> as of now, this is a little broken, but it's hard to explain w/out examples. <br/>
the way we store things in storage is a bit different on how we want it to work <br/>
also, git ate my css, so it will have to wait a bit.
</p>
<nav>
<!-- java script method -->
<input type="button" id="button4" value="Count"
onClick="document.getElementById('counter').innerHTML = countChars(document.getElementById('textArea1').value)"/>
</nav>
<nav>
<!-- jQuery method-->
<input type="button" id="button1" value="Undo"/>
<!-- jQuery method-->
<input type="button" id="button2" value="Save"/>
<!-- jQuery method-->
<input type="button" id="button3" value="Redo"/>
</nav>
</div>
<div id="textInput">
<p id="counter">0</p>
<textarea rows="8" cols="50" id="textArea1">Welcome! Type Here!</textarea>
</div>
<div id="searchArea">
<input type="text" id="findThis">
<intput type="button" id="find" value="Search"/>
<p id="findDisplay"> if you use the search function, it will appear here!</p>
</div>
</div>
</body>
</html>
Raw
styles.css
body {
background-color: cornsilk;
color: dimgrey;
font-family: Arial, Helvetica, sans-serif;
}
.highlight {
background-color: green;
}
Raw
tests.js
/**
* Created by harre096 on 1/28/14.
*/
var assert = require("assert");
var putIn = require('./functions').putIn;
var storage = require('./functions').storage;
var countChars = require('./functions').countChars;
var search = require('./functions').search;
describe('test 1', function () {
it('should create a paragraph with given text', function () {
assert.equal(putIn(true), true);
})
});
/*Note: Our undo-redo is set up with no limit on undos or redos*/
describe('test 2', function () {
it('stores saves and undos/redos by storing in pair of stacks', function () {
var animals = storage();
animals.store('cat');
animals.store('dog');
animals.store('fish');
animals.undo();
assert.equal(animals.view(), 'dog');
animals.undo();
assert.equal(animals.view(), 'cat');
animals.redo();
assert.equal(animals.view(), 'dog');
})
});
describe('test 3', function () {
it('should count characters in given text', function () {
assert.equal(countChars('12345'), 5);
})
});
describe('test 4', function () {
it('find and bold', function () {
assert.equal(search("ox","Find the fox, ox."), "Find the f<b>ox</b>, <b>ox</b>.");
})
});
describe('test 5', function () {
it('find nothing and bold nothing', function () {
assert.equal(search("z","Find the fox, ox."), "Find the fox, ox.");
})
});
//describe('test 2', function () {
// it('should count chars', function () {
// assert.equal(countChars("Hello"), 5);
// })
//});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment