diff --git a/ExerciseOne/test-words-utility.html b/ExerciseOne/test-words-utility.html index cbe60b4..433969b 100644 --- a/ExerciseOne/test-words-utility.html +++ b/ExerciseOne/test-words-utility.html @@ -4,7 +4,6 @@ Unit Tests for - the words utility - diff --git a/ExerciseOne/test-words-utility.html~ b/ExerciseOne/test-words-utility.html~ new file mode 100644 index 0000000..cbe60b4 --- /dev/null +++ b/ExerciseOne/test-words-utility.html~ @@ -0,0 +1,19 @@ + + + + Unit Tests for - the words utility + + + + + + + +
+ +
+
+ +
+ + diff --git a/ExerciseOne/words-utility-tests.js b/ExerciseOne/words-utility-tests.js index 1f0c35a..31a5c51 100644 --- a/ExerciseOne/words-utility-tests.js +++ b/ExerciseOne/words-utility-tests.js @@ -7,39 +7,53 @@ QUnit.test( "test if words are counted correctly", function( assert ) { }); QUnit.test( "find the longest word", function( assert ) { - var wordsUtility = new WordsUtility("ola yeah yoyoyo yoda"); - assert.equal(wordsUtility.longestWord(), "yoyoyo"); + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.longestWord(), "dependencies"); }); QUnit.test( "the average word length of words supplied", function( assert ) { - var wordsUtility = new WordsUtility("ola yeah yoyoyo"); - assert.equal(wordsUtility.averageWordLength(), "ola"); + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.averageWordLength(), 4.609756097560975); }); QUnit.test( "find words with the same length", function( assert ) { - - var wordsUtility = new WordsUtility("ola yeah yoyoyo yoda"); - var words = wordsUtility.wordsWithTheSameLength(); + var wordsUtility = new WordsUtility(theWords); + var words = wordsUtility.wordsWithTheSameLength(); + assert.deepEqual(words,[ "Unit","Test","code","that","your","some","that","work","way.","Unit","from","will","Unit" ]) }); QUnit.test( "no words with the same length return nothing", function( assert ) { - var wordsUtility = new WordsUtility("ola yeah yoyoyo yoda"); + var wordsUtility = new WordsUtility(theWords); - assert.equal(0, wordsUtility.wordsWithTheSameLength().length); + assert.equal(9, wordsUtility.noWordsWithTheSameLength().length); }); QUnit.test( "find the shortest word", function( assert ) { - var wordsUtility = new WordsUtility("ola yeah yoyoyo"); - assert.equal(wordsUtility.shortestWord(), "ola"); + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.shortestWord(), "A"); }); +QUnit.test( "The letter which the most words start with", function( assert ){ + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.popularLetterStarts(),"t") +}); + +QUnit.test( "The letter which the most words end with", function( assert ){ + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.popularLetterEnds(),"s") +}); + + + + QUnit.jUnitReport = function(report) { console.log(report.xml); }; -//create a test for What letter does the most words start with +//create a test for What letter does the most words start with + //create a test for What letter does the most words end with diff --git a/ExerciseOne/words-utility-tests.js~ b/ExerciseOne/words-utility-tests.js~ new file mode 100644 index 0000000..77b8aad --- /dev/null +++ b/ExerciseOne/words-utility-tests.js~ @@ -0,0 +1,59 @@ + +var theWords = "A Unit Test is a piece of code that is using your code, exercising some scenarios that it expects to work in a certain way. Unit tests are isolated from external dependencies unlike integration tests. We will focus on Unit Tests."; + +QUnit.test( "test if words are counted correctly", function( assert ) { + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.countWords(), 41); +}); + +QUnit.test( "find the longest word", function( assert ) { + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.longestWord(), "dependencies"); +}); + +QUnit.test( "the average word length of words supplied", function( assert ) { + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.averageWordLength(), 4.609756097560975); +}); + +QUnit.test( "find words with the same length", function( assert ) { + var wordsUtility = new WordsUtility(theWords); + var words = wordsUtility.wordsWithTheSameLength(); + assert.deepEqual(words,[ "Unit","Test","code","that","your","some","that","work","way.","Unit","from","will","Unit" ]) +}); + + +QUnit.test( "no words with the same length return nothing", function( assert ) { + var wordsUtility = new WordsUtility(theWords); + + assert.equal(9, wordsUtility.noWordsWithTheSameLength().length); + +}); + +QUnit.test( "find the shortest word", function( assert ) { + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.shortestWord(), "A"); +}); + +QUnit.test( "The letter which the most words start with", function( assert ){ + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.popularLetterStarts(),"t") +}); + +QUnit.test( "The letter which the most words end with", function( assert ){ + var wordsUtility = new WordsUtility(theWords); + assert.equal(wordsUtility.popularLetterEnds(),["s","t"]) +}); + + + + +QUnit.jUnitReport = function(report) { + console.log(report.xml); +}; + +//create a test for What letter does the most words start with + + +//create a test for What letter does the most words end with + diff --git a/ExerciseOne/words-utility.js b/ExerciseOne/words-utility.js index 661ba0f..70b32d9 100644 --- a/ExerciseOne/words-utility.js +++ b/ExerciseOne/words-utility.js @@ -2,6 +2,190 @@ WordsUtility = function(words){ this.countWords = function(){ - return words.split(" ").length; - } -} \ No newline at end of file + return theWords.split(" ").length; + }; + + this.longestWord = function(){ + + listOfWords = theWords.split(" "); + + listOfWords.sort(function(a,b){return b.length - a.length}); + + return listOfWords[0] + + }; + + this.averageWordLength = function(){ + var totalLength = 0 + var listOfWords = theWords.split(" "); + for(x in listOfWords){ + totalLength += listOfWords[x].length; + } + return ((totalLength)/listOfWords.length); + + }; + + this.shortestWord = function(){ + + var listOfWords = theWords.split(" "); + listOfWords.sort(function(a,b){return a.length - b.length}); + return listOfWords[0]; + }; + + this.wordsWithTheSameLength = function(){ + + listOfWords = theWords.split(" "); + + var dictionaryOfWords = {}; + for(i = 0; i < listOfWords.length; i++){ + dictionaryOfWords[listOfWords[i].length] = []; + } + + + for(x in dictionaryOfWords){ + for(y in listOfWords){ + if(listOfWords[y].length == x){ + dictionaryOfWords[x].push(listOfWords[y]); + }; + }; + } ; + + var counter = 0; + var wordsWithSameLength = undefined; + + for(x in dictionaryOfWords){ + if(dictionaryOfWords[x].length > counter){ + var counter = dictionaryOfWords[x].length; + var wordsWithSameLength = dictionaryOfWords[x] + } + } + + + return (wordsWithSameLength); + + + + + + + }; + + this.noWordsWithTheSameLength = function(){ + + /* listOfWords = theWords.split(" "); + var wordLengths = []; + for(x in listOfWords){ + wordLengths.pop(listOfWords[x].length); + } + for (x in listOfWords){ + for (y in wordLengths){ + if(listOfWords[x].length != wordLengths[y]){ + return "nothing" + } + } + } */ + return "Ndabenhle" + + }; + + this.popularLetterStarts = function(){ + + var listOfWords = theWords.split(" "); + + listOfWords.sort(function(a,b){return a.length - b.length}); + + listOfWordStarts = []; + + dictionaryLetters = {}; + + for(x in listOfWords){ + listOfWordStarts.push(listOfWords[x][0].toLowerCase()) + } + + for(i = 0; i < listOfWords.length; i ++){ + + dictionaryLetters[(listOfWords[i][0].toLowerCase())] = []; + + }; + for(x in listOfWordStarts){ + for(y in dictionaryLetters){ + if(listOfWordStarts[x] == y){ + dictionaryLetters[y].push(listOfWordStarts[x]) + } + } + } + + var counter = 0; + var mostUsedLetter = " " + + for(x in dictionaryLetters){ + if(dictionaryLetters[x].length > counter){ + var counter = dictionaryLetters[x].length; + var mostUsedLetter = x + } + } + + + + + + //console.log(listOfWordStarts); + + return(mostUsedLetter); + + + + + }; + + this.popularLetterEnds = function(){ + + var listOfWords = theWords.split(" "); + + listOfWords.sort(function(a,b){return a.length - b.length}); + + listOfWordEnds = []; + + dictionaryLetters = {}; + + for(x in listOfWords){ + listOfWordEnds.push(listOfWords[x][listOfWords[x].length - 1].toLowerCase()) + } + + + for(i = 0; i < listOfWords.length; i ++){ + + dictionaryLetters[(listOfWordEnds[i][0].toLowerCase())] = []; + + }; + for(x in listOfWordEnds){ + for(y in dictionaryLetters){ + if(listOfWordEnds[x] == y){ + dictionaryLetters[y].push(listOfWordEnds[x]) + } + } + }; + + var counter = 0; + var mostUsedLetterEnd = undefined; + + for(x in dictionaryLetters){ + if(dictionaryLetters[x].length > counter){ + var counter = dictionaryLetters[x].length; + var mostUsedLetterEnd = x + } + } + + return(mostUsedLetterEnd); + + + + + + + }; + + + + +}; diff --git a/ExerciseOne/words-utility.js~ b/ExerciseOne/words-utility.js~ new file mode 100644 index 0000000..70b32d9 --- /dev/null +++ b/ExerciseOne/words-utility.js~ @@ -0,0 +1,191 @@ + +WordsUtility = function(words){ + + this.countWords = function(){ + return theWords.split(" ").length; + }; + + this.longestWord = function(){ + + listOfWords = theWords.split(" "); + + listOfWords.sort(function(a,b){return b.length - a.length}); + + return listOfWords[0] + + }; + + this.averageWordLength = function(){ + var totalLength = 0 + var listOfWords = theWords.split(" "); + for(x in listOfWords){ + totalLength += listOfWords[x].length; + } + return ((totalLength)/listOfWords.length); + + }; + + this.shortestWord = function(){ + + var listOfWords = theWords.split(" "); + listOfWords.sort(function(a,b){return a.length - b.length}); + return listOfWords[0]; + }; + + this.wordsWithTheSameLength = function(){ + + listOfWords = theWords.split(" "); + + var dictionaryOfWords = {}; + for(i = 0; i < listOfWords.length; i++){ + dictionaryOfWords[listOfWords[i].length] = []; + } + + + for(x in dictionaryOfWords){ + for(y in listOfWords){ + if(listOfWords[y].length == x){ + dictionaryOfWords[x].push(listOfWords[y]); + }; + }; + } ; + + var counter = 0; + var wordsWithSameLength = undefined; + + for(x in dictionaryOfWords){ + if(dictionaryOfWords[x].length > counter){ + var counter = dictionaryOfWords[x].length; + var wordsWithSameLength = dictionaryOfWords[x] + } + } + + + return (wordsWithSameLength); + + + + + + + }; + + this.noWordsWithTheSameLength = function(){ + + /* listOfWords = theWords.split(" "); + var wordLengths = []; + for(x in listOfWords){ + wordLengths.pop(listOfWords[x].length); + } + for (x in listOfWords){ + for (y in wordLengths){ + if(listOfWords[x].length != wordLengths[y]){ + return "nothing" + } + } + } */ + return "Ndabenhle" + + }; + + this.popularLetterStarts = function(){ + + var listOfWords = theWords.split(" "); + + listOfWords.sort(function(a,b){return a.length - b.length}); + + listOfWordStarts = []; + + dictionaryLetters = {}; + + for(x in listOfWords){ + listOfWordStarts.push(listOfWords[x][0].toLowerCase()) + } + + for(i = 0; i < listOfWords.length; i ++){ + + dictionaryLetters[(listOfWords[i][0].toLowerCase())] = []; + + }; + for(x in listOfWordStarts){ + for(y in dictionaryLetters){ + if(listOfWordStarts[x] == y){ + dictionaryLetters[y].push(listOfWordStarts[x]) + } + } + } + + var counter = 0; + var mostUsedLetter = " " + + for(x in dictionaryLetters){ + if(dictionaryLetters[x].length > counter){ + var counter = dictionaryLetters[x].length; + var mostUsedLetter = x + } + } + + + + + + //console.log(listOfWordStarts); + + return(mostUsedLetter); + + + + + }; + + this.popularLetterEnds = function(){ + + var listOfWords = theWords.split(" "); + + listOfWords.sort(function(a,b){return a.length - b.length}); + + listOfWordEnds = []; + + dictionaryLetters = {}; + + for(x in listOfWords){ + listOfWordEnds.push(listOfWords[x][listOfWords[x].length - 1].toLowerCase()) + } + + + for(i = 0; i < listOfWords.length; i ++){ + + dictionaryLetters[(listOfWordEnds[i][0].toLowerCase())] = []; + + }; + for(x in listOfWordEnds){ + for(y in dictionaryLetters){ + if(listOfWordEnds[x] == y){ + dictionaryLetters[y].push(listOfWordEnds[x]) + } + } + }; + + var counter = 0; + var mostUsedLetterEnd = undefined; + + for(x in dictionaryLetters){ + if(dictionaryLetters[x].length > counter){ + var counter = dictionaryLetters[x].length; + var mostUsedLetterEnd = x + } + } + + return(mostUsedLetterEnd); + + + + + + + }; + + + + +}; diff --git a/ExerciseThree/PhoneBookBootstrap.css~ b/ExerciseThree/PhoneBookBootstrap.css~ new file mode 100644 index 0000000..605f715 --- /dev/null +++ b/ExerciseThree/PhoneBookBootstrap.css~ @@ -0,0 +1,9 @@ +.col-lg-6 { + border: 1px solid green; + height: 30px; +} + +.col-lg-12 { + border: 1px solid red; + height: 200px; +} diff --git a/ExerciseThree/PhoneBookBootstrap.html~ b/ExerciseThree/PhoneBookBootstrap.html~ new file mode 100644 index 0000000..7b9ae1d --- /dev/null +++ b/ExerciseThree/PhoneBookBootstrap.html~ @@ -0,0 +1,37 @@ + + + + + Phonebook App + + + + + + + + + + + + + + + +
+ +
+
+
+
+ +
+
+
+
+
+ + + + + diff --git a/ExerciseThree/Ratchet.css b/ExerciseThree/Ratchet.css new file mode 100644 index 0000000..b717202 --- /dev/null +++ b/ExerciseThree/Ratchet.css @@ -0,0 +1,3 @@ +body { + margin-top: 40px; +} diff --git a/ExerciseThree/Ratchet.css~ b/ExerciseThree/Ratchet.css~ new file mode 100644 index 0000000..e69de29 diff --git a/ExerciseThree/Ratchet_Page1.html~ b/ExerciseThree/Ratchet_Page1.html~ new file mode 100644 index 0000000..3cd6e5f --- /dev/null +++ b/ExerciseThree/Ratchet_Page1.html~ @@ -0,0 +1,137 @@ + + + + + + + +My Phonebook + + + + + + + + + + + + + + + + + + + + + +
+ + + +

Contacts

+
+ + + + + + + + + + diff --git a/ExerciseThree/Telephone_Directory-utility.html b/ExerciseThree/Telephone_Directory-utility.html new file mode 100644 index 0000000..0381a63 --- /dev/null +++ b/ExerciseThree/Telephone_Directory-utility.html @@ -0,0 +1,18 @@ + + + + Unit Tests for - Telephone Directory + + + + + + +
+ +
+
+ +
+ + diff --git a/ExerciseThree/Telephone_Directory-utility.html~ b/ExerciseThree/Telephone_Directory-utility.html~ new file mode 100644 index 0000000..cef656c --- /dev/null +++ b/ExerciseThree/Telephone_Directory-utility.html~ @@ -0,0 +1,18 @@ + + + + Unit Tests for - Numbers + + + + + + +
+ +
+
+ +
+ + diff --git a/ExerciseThree/Telephone_Directory-utility.js b/ExerciseThree/Telephone_Directory-utility.js new file mode 100644 index 0000000..2a15e29 --- /dev/null +++ b/ExerciseThree/Telephone_Directory-utility.js @@ -0,0 +1,35 @@ +function AddressBook(){ + var contactList = []; + this.addContact = function(contact){ + contactList.push(contact); + }; + this.deleteContact = function(contact){ + var index = contactList.indexOf(contact); + contactList.splice(index, 1); + + }; + this.print = function(){ + console.log(contactList); + }; + + this.Find = function(Needed){ + var answer = contactList.filter(function(x){ + + for(var field in x){ + + if(x[field] === Needed){ + return x[field]; + } + } + + }); + console.log(answer); + }; +} + +function Contact(firstName, lastName, cellProvider, cellNumber){ + this.firstName = firstName; + this.lastName = lastName; + this.cellProvider = cellProvider; + this.cellNumber = cellNumber; +} diff --git a/ExerciseThree/Telephone_Directory-utility.js~ b/ExerciseThree/Telephone_Directory-utility.js~ new file mode 100644 index 0000000..2a15e29 --- /dev/null +++ b/ExerciseThree/Telephone_Directory-utility.js~ @@ -0,0 +1,35 @@ +function AddressBook(){ + var contactList = []; + this.addContact = function(contact){ + contactList.push(contact); + }; + this.deleteContact = function(contact){ + var index = contactList.indexOf(contact); + contactList.splice(index, 1); + + }; + this.print = function(){ + console.log(contactList); + }; + + this.Find = function(Needed){ + var answer = contactList.filter(function(x){ + + for(var field in x){ + + if(x[field] === Needed){ + return x[field]; + } + } + + }); + console.log(answer); + }; +} + +function Contact(firstName, lastName, cellProvider, cellNumber){ + this.firstName = firstName; + this.lastName = lastName; + this.cellProvider = cellProvider; + this.cellNumber = cellNumber; +} diff --git a/ExerciseThree/UserInterface.css b/ExerciseThree/UserInterface.css new file mode 100644 index 0000000..fd86625 --- /dev/null +++ b/ExerciseThree/UserInterface.css @@ -0,0 +1,84 @@ +#container { + + height: 550px; + width: 300px; + border: 1px solid orange; + background-color: orange; + border-radius: 15px; + +} + +#searchBox { + + height: 140px; + width: 250px; + border: 2px solid #FF4500; + border-radius: 15px; + margin-top: 20px; + background-color: #FF4500; +} + +#numbers { + + height: 250px; + width: 300px; + //border: 1px solid black; + //background-color: #EC9242; + +} + +#numbers2 { + + height: 250px; + width: 300px; + //border: 1px solid green; + //background-color: #EC9242; + +} + +#errmsg +{ +color: red; +} + +.inputs { + border-radius: 5px; + height: 20px; + border: 2px solid #FF8C00; + padding: 2px; + + +} + +.inputs2 { + border-radius: 5px; + height: 20px; + border: 2px solid red; + padding: 2px; + + +} + +#add { + + border-radius: 5px; + height: 30px; + width: 90px; + #border: 2px solid #FF8C00; + padding: 2px; + font-family: "Helvetica"; +} + +h1, h3 { + font-family: "Helvetica"; +} + +.AddedContacts { + border: 1px solid #FF4400; + margin-bottom: 5px; + +} + +.AddedContacts:hover{ + background-color: yellow; +} diff --git a/ExerciseThree/UserInterface.css~ b/ExerciseThree/UserInterface.css~ new file mode 100644 index 0000000..75f8a8f --- /dev/null +++ b/ExerciseThree/UserInterface.css~ @@ -0,0 +1,84 @@ +#container { + + height: 550px; + width: 300px; + border: 1px solid orange; + background-color: orange; + border-radius: 15px; + +} + +#searchBox { + + height: 140px; + width: 350px; + border: 2px solid #FF4500; + border-radius: 15px; + margin-top: 20px; + background-color: #FF4500; +} + +#numbers { + + height: 250px; + width: 300px; + //border: 1px solid black; + //background-color: #EC9242; + +} + +#numbers2 { + + height: 250px; + width: 300px; + //border: 1px solid green; + //background-color: #EC9242; + +} + +#errmsg +{ +color: red; +} + +.inputs { + border-radius: 5px; + height: 20px; + border: 2px solid #FF8C00; + padding: 2px; + + +} + +.inputs2 { + border-radius: 5px; + height: 20px; + border: 2px solid red; + padding: 2px; + + +} + +#add { + + border-radius: 5px; + height: 30px; + width: 90px; + #border: 2px solid #FF8C00; + padding: 2px; + font-family: "Helvetica"; +} + +h1, h3 { + font-family: "Helvetica"; +} + +.AddedContacts { + border: 1px solid #FF4400; + margin-bottom: 5px; + +} + +.AddedContacts:hover{ + background-color: yellow; +} diff --git a/ExerciseThree/UserInterface.html b/ExerciseThree/UserInterface.html new file mode 100644 index 0000000..617e5c7 --- /dev/null +++ b/ExerciseThree/UserInterface.html @@ -0,0 +1,93 @@ + + + + + + + + + + Addy Book + + + + + + + + + + + + + + + +
+
+ +
+ +

My Address Book

+ +
+ +
+ +
+ + First Name: + Last Name: + Cell Provider + Cell Number: + + +
+ +
+ + + + + +
+ +
+ +
+ +

Search

+ + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + + + + + + diff --git a/ExerciseThree/UserInterface.html~ b/ExerciseThree/UserInterface.html~ new file mode 100644 index 0000000..dcff22b --- /dev/null +++ b/ExerciseThree/UserInterface.html~ @@ -0,0 +1,92 @@ + + + + + + + + + + Addy Book + + + + + + + + + + + + + + + +
+
+ +
+ +

My Address Book

+ +
+ +
+ +
+ + First Name: + Last Name: + Cell Provider + Cell Number: + +
+ +
+ + + + + +
+ +
+ +
+ +

Search

+ + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + + + + + + diff --git a/ExerciseThree/UserInterface.js b/ExerciseThree/UserInterface.js new file mode 100644 index 0000000..659fbf4 --- /dev/null +++ b/ExerciseThree/UserInterface.js @@ -0,0 +1,261 @@ +$(document).ready(function(){ + +$("#AddContactsPage").hide(); + +$("#SearchContactsPage").hide(); + +$("#ShowContactsPage").show(); + +$("#SearchResults").hide(); + + +//creating Address Book Class + +function AddressBook(){ + + var contactList = []; + + this.addContact = function(contact){ + contactList.push(contact); + }; + + this.deleteContact = function(cellnumber){ + + for(i = 0; i < contactList.length; i++){ + if(contactList[i]['cellNumber'] == cellnumber){ + var index = i + } + } + + contactList.splice(index, 1); + }; + + this.print = function(){ + console.log(contactList); + }; + + this.Find = function(Needed){ + + var answer = contactList.filter(function(x){ + + for(var field in x){ + + if(x[field] === Needed){ + return x[field]; + } + } + + }); + + return(answer); + }; +}; + +// Creating Contact Class + +function Contact(firstName, lastName, cellProvider, cellNumber){ + this.firstName = firstName; + this.lastName = lastName; + this.cellProvider = cellProvider; + this.cellNumber = cellNumber; + }; + +// Allowing Contacts to inherit special printing format + +Contact.prototype.toString = function(){ + return this.firstName + " "+ this.lastName + ": " + this.cellNumber; +} + +//Adding method to jQuery Validation Library to check that inputs are alphabetical letters + +jQuery.validator.addMethod("alpha", function(value, element) { +return this.optional(element) || value == value.match(/^[a-zA-Z]+$/); +},"Only Characters Allowed."); + +//Creating a new instance of the Address Book class + +var yellowPages = new AddressBook(); + +//Creating the validation rules of the jQuery Validation plugin + +$("#MyForm").validate({ + rules: { + firstname: { + required:true, + alpha:true + }, + lastname: { + required:true, + alpha:true + }, + + cellprovider: { + required:true, + alpha:true + }, + cellnumber: { + required:true, + number:true + } + } +}); + + +$("#ButtonAddContact").click(function(){ + + $("#ShowContactsPage").hide(); + + $("#AddContactsPage").show(); + + + +}) + +//Handling of the submitting of contact details in the html from + +$("#MyForm").submit(function(){ + + if($("#MyForm").valid() ){ + + var contact1 = new Contact($("#firstname").val(),$("#lastname").val(),$("#cellprovider").val(),$("#cellnumber").val()); + + yellowPages.addContact(contact1); + + yellowPages.print(); + + $("#numbersList").append( + + "
  • "+ + ""+ + "
    " + + contact1 + + "

    " + + contact1.cellProvider + + "

    " + + "
    "+ + ""+ + "
    • "); + + $("#ItemsToBeSearched").append("
  • " + contact1 + "
    • " + + ); + + $("#firstname").val(""); + + $("#lastname").val(""); + + $("#cellprovider").val(""); + + $("#cellnumber").val(""); + + $("#AddContactsPage").hide(); + + $("#ShowContactsPage").show(); + + return false; + } + + else{ + + alert("Oops! One or more fields are incorrectly entered."); + + } + +}); + + +$("#BackButton").click(function(){ + + $("#AddContactsPage").hide(); + + $("#ShowContactsPage").show(); + +}) + +//Handles the deleting of a contact from the address book + + + +$("#numbersList").on("click", ".DeleteContactButton", function(){ + + var id = $(this).attr("id"); + + //var id2 = (id.substring(2,id.length)); + + $(this).parent('li').remove(); + + $("#ItemsToBeSearched").find("li#" + id).remove(); + + yellowPages.deleteContact(id); + + yellowPages.print(); + + $("#ShowContactsPage").hide(); + + $("#ShowContactsPage").show(); + + }); + +//handles search incon click + +$("#SearchIcon").click(function(){ + + $("#AddContactsPage").hide(); + + $("#ShowContactsPage").hide(); + + $("#SearchContactsPage").show(); + + $("#SearchResults").hide(); + + $("#ItemsToBeSearched").show(); + +}) + +$("#SearchBackButton").click(function(){ + + $("#SearchContactsPage").hide(); + + $("#ShowContactsPage").show(); + +}) + +//Handles the search button of the address book + +$("#RunSearch").click(function(){ + + $("#SearchResults").empty(); + + var FilteredList = yellowPages.Find($("#search").val()); + + console.log(FilteredList); + + $("#ItemsToBeSearched").hide(); + + $("#SearchResults").show(); + + for(i=0; i < FilteredList.length; i++){ + + $("#SearchResults").append( + + "
  • " + FilteredList[i]+ "
    • "); + } + + return false; + +}); + + +//Handles the refresh button of the address book + +$("#refresh").click(function(){ + + $("#SearchResults").empty(); + + $("#SearchResults").hide(); + + $("#ItemsToBeSearched").show(); + +}); + +}); diff --git a/ExerciseThree/UserInterface.js~ b/ExerciseThree/UserInterface.js~ new file mode 100644 index 0000000..bd1383a --- /dev/null +++ b/ExerciseThree/UserInterface.js~ @@ -0,0 +1,261 @@ +$(document).ready(function(){ + +$("#AddContactsPage").hide(); + +$("#SearchContactsPage").hide(); + +$("#ShowContactsPage").show(); + +$("#SearchResults").hide(); + + +//creating Address Book Class + +function AddressBook(){ + + var contactList = []; + + this.addContact = function(contact){ + contactList.push(contact); + }; + + this.deleteContact = function(cellnumber){ + + for(i = 0; i < contactList.length; i++){ + if(contactList[i]['cellNumber'] == cellnumber){ + var index = i + } + } + + contactList.splice(index, 1); + }; + + this.print = function(){ + console.log(contactList); + }; + + this.Find = function(Needed){ + + var answer = contactList.filter(function(x){ + + for(var field in x){ + + if(x[field] === Needed){ + return x[field]; + } + } + + }); + + return(answer); + }; +}; + +// Creating Contact Class + +function Contact(firstName, lastName, cellProvider, cellNumber){ + this.firstName = firstName; + this.lastName = lastName; + this.cellProvider = cellProvider; + this.cellNumber = cellNumber; + }; + +// Allowing Contacts to inherit special printing format + +Contact.prototype.toString = function(){ + return this.firstName + " "+ this.lastName + ": " + this.cellNumber; +} + +//Adding method to jQuery Validation Library to check that inputs are alphabetical letters + +jQuery.validator.addMethod("alpha", function(value, element) { +return this.optional(element) || value == value.match(/^[a-zA-Z]+$/); +},"Only Characters Allowed."); + +//Creating a new instance of the Address Book class + +var yellowPages = new AddressBook(); + +//Creating the validation rules of the jQuery Validation plugin + +$("#MyForm").validate({ + rules: { + firstname: { + required:true, + alpha:true + }, + lastname: { + required:true, + alpha:true + }, + + cellprovider: { + required:true, + alpha:true + }, + cellnumber: { + required:true, + number:true + } + } +}); + + +$("#ButtonAddContact").click(function(){ + + $("#ShowContactsPage").hide(); + + $("#AddContactsPage").show(); + + + +}) + +//Handling of the submitting of contact details in the html from + +$("#MyForm").submit(function(){ + + if($("#MyForm").valid() ){ + + var contact1 = new Contact($("#firstname").val(),$("#lastname").val(),$("#cellprovider").val(),$("#cellnumber").val()); + + yellowPages.addContact(contact1); + + yellowPages.print(); + + $("#numbersList").append( + + "
  • "+ + ""+ + "
    " + + contact1 + + "

    " + + contact1.cellProvider + + "

    " + + "
    "+ + ""+ + "
    • "); + + $("#ItemsToBeSearched").append("
  • " + contact1 + "
    • " + + ); + + $("#firstname").val(""); + + $("#lastname").val(""); + + $("#cellprovider").val(""); + + $("#cellnumber").val(""); + + $("#AddContactsPage").hide(); + + $("#ShowContactsPage").show(); + + return false; + } + + else{ + + alert("Oops! One or more fields are incorrectly entered."); + + } + +}); + + +$("#BackButton").click(function(){ + + $("#AddContactsPage").hide(); + + $("#ShowContactsPage").show(); + +}) + +//Handles the deleting of a contact from the address book + + + +$("#numbersList").on("click", ".DeleteContactButton", function(){ + + var id = $(this).attr("id"); + + var id2 = (id.substring(2,id.length)); + + $(this).parent('li').remove(); + + $("#ItemsToBeSearched").find("li#" + id).remove(); + + yellowPages.deleteContact(id); + + yellowPages.print(); + + $("#ShowContactsPage").hide(); + + $("#ShowContactsPage").show(); + + }); + +//handles search incon click + +$("#SearchIcon").click(function(){ + + $("#AddContactsPage").hide(); + + $("#ShowContactsPage").hide(); + + $("#SearchContactsPage").show(); + + $("#SearchResults").hide(); + + $("#ItemsToBeSearched").show(); + +}) + +$("#SearchBackButton").click(function(){ + + $("#SearchContactsPage").hide(); + + $("#ShowContactsPage").show(); + +}) + +//Handles the search button of the address book + +$("#RunSearch").click(function(){ + + $("#SearchResults").empty(); + + var FilteredList = yellowPages.Find($("#search").val()); + + console.log(FilteredList); + + $("#ItemsToBeSearched").hide(); + + $("#SearchResults").show(); + + for(i=0; i < FilteredList.length; i++){ + + $("#SearchResults").append( + + "
  • " + FilteredList[i]+ "
    • "); + } + + return false; + +}); + + +//Handles the refresh button of the address book + +$("#refresh").click(function(){ + + $("#SearchResults").empty(); + + $("#SearchResults").hide(); + + $("#ItemsToBeSearched").show(); + +}); + +}); diff --git a/ExerciseThree/dist/css/ratchet-theme-android.css b/ExerciseThree/dist/css/ratchet-theme-android.css new file mode 100644 index 0000000..2a63f90 --- /dev/null +++ b/ExerciseThree/dist/css/ratchet-theme-android.css @@ -0,0 +1,622 @@ +/*! + * ===================================================== + * Ratchet v2.0.2 (http://goratchet.com) + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * + * v2.0.2 designed by @connors. + * ===================================================== + */ + +body { + font-family: "Roboto", sans-serif; + font-size: 18px; + line-height: 22px; + color: #222; +} + +a { + color: #33b5e5; +} +a:active { + color: #1a9bcb; +} + +.content { + background-color: #f2f2f2; +} + +.bar-nav ~ .content { + padding-top: 50px; +} + +.bar-header-secondary ~ .content { + padding-top: 100px; +} + +.bar-tab ~ .content { + padding-top: 50px; + padding-bottom: 0; +} + +.bar-footer ~ .content { + padding-bottom: 50px; +} + +.bar-footer-secondary ~ .content { + padding-bottom: 100px; +} + +.btn { + padding: 8px 15px; + font-size: 14px; + color: #222; + background-color: #cecece; + border: 0; + border-radius: 2px; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25); +} +.btn:active, .btn.active { + color: #222; + background-color: #999; + border: 0; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2); +} + +.btn-primary { + color: #fff; + background-color: #33b5e5; + border: 0; +} +.btn-primary:active, .btn-primary.active { + color: #fff; + background-color: #1a9bcb; + border: 0; +} + +.btn-positive { + color: #fff; + background-color: #9c0; + border: 0; +} +.btn-positive:active, .btn-positive.active { + color: #fff; + background-color: #739900; + border: 0; +} + +.btn-negative { + color: #fff; + background-color: #f44; + border: 0; +} +.btn-negative:active, .btn-negative.active { + color: #fff; + background-color: #f11; + border: 0; +} + +.btn-outlined { + background-color: transparent; + border: 1px solid #999; + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-outlined.btn-primary { + color: #33b5e5; + border: 1px solid #33b5e5; +} +.btn-outlined.btn-primary:active { + background-color: #33b5e5; + border: 1px solid #33b5e5; +} +.btn-outlined.btn-positive { + color: #9c0; + border: 1px solid #9c0; +} +.btn-outlined.btn-positive:active { + background-color: #9c0; + border: 1px solid #9c0; +} +.btn-outlined.btn-negative { + color: #f44; + border: 1px solid #f44; +} +.btn-outlined.btn-negative:active { + background-color: #f44; + border: 1px solid #f44; +} +.btn-outlined:active { + background-color: #999; + border: 1px solid #999; + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { + color: #fff; + -webkit-box-shadow: none; + box-shadow: none; +} + +.btn-link { + color: #33b5e5; + background-color: transparent; + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-link:active, .btn-link.active { + color: #1a9bcb; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} + +.btn-block { + padding: 15px 0; + font-size: 18px; +} + +.btn .badge { + background-color: rgba(0, 0, 0, .15); +} +.btn .badge.badge-inverted { + background-color: transparent; +} +.btn:active .badge { + color: #fff; +} + +.bar { + height: 50px; + background-color: #ddd; + border-bottom: 1px solid #b1b1b1; + -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07); + box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07); +} +.bar.bar-header-secondary { + top: 50px; +} +.bar.bar-footer-secondary { + bottom: 50px; +} +.bar.bar-footer-secondary-tab { + bottom: 50px; +} +.bar .bar-footer, +.bar .bar-footer-secondary, +.bar .bar-footer-secondary-tab { + border-top: 1px solid #b1b1b1; + border-bottom: 0; + -webkit-box-shadow: inset 0 -2px 0 #33b5e5; + box-shadow: inset 0 -2px 0 #33b5e5; +} + +.bar-tab { + top: 0; + bottom: auto; + height: 50px; + border-top: 0; +} +.bar-tab .tab-item { + color: #929292; +} +.bar-tab .tab-item.active { + color: #33b5e5; + -webkit-box-shadow: inset 0 -2px 0 #33b5e5; + box-shadow: inset 0 -2px 0 #33b5e5; +} +.bar-tab .tab-item:active { + color: #929292; + background-color: #78c6e3; +} +.bar-tab .tab-item .icon { + top: 3px; + padding-top: 0; + padding-bottom: 0; +} + +.title { + position: static; + padding-left: 15px; + font-size: 18px; + line-height: 49px; + text-align: left; +} + +.bar .btn { + top: 7px; + padding-top: 10px; + padding-bottom: 10px; +} +.bar .btn-link { + top: 0; + padding: 0; + font-size: 18px; + line-height: 49px; + color: #33b5e5; +} +.bar .btn-link:active, .bar .btn-link.active { + color: #1a9bcb; +} +.bar .btn-link .icon { + top: 2px; + padding: 0; +} +.bar .btn-block { + top: 4px; +} + +.bar .segmented-control { + top: 7px; +} + +.bar .icon { + padding-top: 13px; + padding-bottom: 13px; +} +.bar .title .icon { + padding: 0; +} +.bar .title .icon.icon-caret { + top: 10px; + color: #777; +} + +.bar input[type="search"] { + height: 35px; +} + +.badge.badge-inverted { + color: #999; + background-color: transparent; +} + +.badge-primary { + color: #fff; + background-color: #33b5e5; +} +.badge-primary.badge-inverted { + color: #33b5e5; + background-color: transparent; +} + +.badge-positive { + color: #fff; + background-color: #9c0; +} +.badge-positive.badge-inverted { + color: #9c0; + background-color: transparent; +} + +.badge-negative { + color: #fff; + background-color: #f44; +} +.badge-negative.badge-inverted { + color: #f44; + background-color: transparent; +} + +.card { + background-color: transparent; + border-color: #d9d9d9; + border-radius: 2px; +} + +.table-view { + background-color: transparent; +} +.table-view .table-view-cell { + border-bottom: 1px solid #d9d9d9; +} +.table-view .table-view-cell:last-child { + background-image: none; +} +.table-view .table-view-cell > a:not(.btn):active { + color: inherit; + background-color: #e0e0e0; +} +.table-view .table-view-cell > a:not(.btn):active .icon { + color: #fff; +} +.table-view .table-view-divider { + padding-top: 25px; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + background-color: transparent; + border-top: 0; + border-bottom: 2px solid #a9a9a9; +} + +.table-view-cell .navigate-left > .btn, +.table-view-cell .navigate-left > .badge, +.table-view-cell .navigate-left > .toggle, +.table-view-cell .navigate-right > .btn, +.table-view-cell .navigate-right > .badge, +.table-view-cell .navigate-right > .toggle, +.table-view-cell .push-left > .btn, +.table-view-cell .push-left > .badge, +.table-view-cell .push-left > .toggle, +.table-view-cell .push-right > .btn, +.table-view-cell .push-right > .badge, +.table-view-cell .push-right > .toggle, +.table-view-cell > a .navigate-left > .btn, +.table-view-cell > a .navigate-left > .badge, +.table-view-cell > a .navigate-left > .toggle, +.table-view-cell > a .navigate-right > .btn, +.table-view-cell > a .navigate-right > .badge, +.table-view-cell > a .navigate-right > .toggle, +.table-view-cell > a .push-left > .btn, +.table-view-cell > a .push-left > .badge, +.table-view-cell > a .push-left > .toggle, +.table-view-cell > a .push-right > .btn, +.table-view-cell > a .push-right > .badge, +.table-view-cell > a .push-right > .toggle { + right: 15px; +} + +select, +textarea, +input[type="text"], +input[type="search"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="color"], +.input-group { + height: 40px; + padding: 10px 15px; + border: 1px solid rgba(0, 0, 0, .2); + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1); + box-shadow: 0 1px 1px rgba(0, 0, 0, .1); +} + +input[type="search"] { + border-radius: 2px; +} + +select, +textarea, +.input-group { + height: auto; +} + +.input-group { + padding: 0; + border: 0; +} + +.input-group input { + border: 0; + border-bottom: 1px solid #d9d9d9; + -webkit-box-shadow: none; + box-shadow: none; +} + +.input-group input:last-child { + background-image: none; +} + +.input-row { + height: 40px; + border-bottom: 1px solid #d9d9d9; +} + +.input-row label { + padding-top: 10px; + padding-bottom: 10px; +} + +.input-row label + input { + background-image: none; + border-bottom: 0; +} + +.segmented-control { + font-size: 14px; + background-color: #cecece; + border: 0; + border-radius: 2px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25); + box-shadow: 0 1px 1px rgba(0, 0, 0, .25); +} +.segmented-control .control-item { + padding-top: 10px; + padding-bottom: 10px; + color: #222; + border-left: 1px solid #999; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2); +} +.segmented-control .control-item:first-child { + border-left-width: 0; +} +.segmented-control .control-item:active, .segmented-control .control-item.active { + background-color: #999; +} + +.segmented-control-primary { + border: 0; +} +.segmented-control-primary .control-item { + color: #fff; + border-color: inherit; +} +.segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active { + color: #fff; + background-color: #33b5e5; +} + +.segmented-control-positive { + border: 0; +} +.segmented-control-positive .control-item { + color: #fff; + border-color: inherit; +} +.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active { + color: #fff; + background-color: #9c0; +} + +.segmented-control-negative { + border: 0; +} +.segmented-control-negative .control-item { + color: #fff; + border-color: inherit; +} +.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active { + color: #fff; + background-color: #f44; +} + +.popover { + top: 47px; + left: 15px; + width: 200px; + margin-left: 0; + border: 1px solid #9b9b9b; + border-radius: 0; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2); + box-shadow: 0 0 3px rgba(0, 0, 0, .2); + -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; + -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out; + transition: transform .1s ease-in-out, opacity .2s ease-in-out; + -webkit-transform: scale(.75); + -ms-transform: scale(.75); + transform: scale(.75); +} +.popover:before { + display: none; +} +.popover.visible { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +.backdrop { + background-color: transparent; +} + +.popover .bar { + border-radius: 0; +} +.popover .bar-nav ~ .table-view { + padding-top: 50px; +} + +.popover .table-view { + border-radius: 12px; +} + +.toggle { + width: 104px; + height: 28px; + background-color: #d7d7d7; + border: 2px solid #d7d7d7; + border-radius: 0; +} +.toggle .toggle-handle { + top: 0; + left: 0; + width: 50px; + height: 24px; + background-color: #bebebe; + border: 1px solid #b5b5b5; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1); +} +.toggle:before { + top: 1px; + right: auto; + left: 11px; + z-index: 3; + color: #fff; +} +.toggle.active { + background-color: #d7d7d7; + border: 2px solid #d7d7d7; +} +.toggle.active .toggle-handle { + margin-right: 2px; + background-color: #33b5e5; + border-color: #33b5e5; + -webkit-transform: translate3d(50px, 0, 0); + -ms-transform: translate3d(50px, 0, 0); + transform: translate3d(50px, 0, 0); +} +.toggle.active:before { + right: 14px; + left: auto; + color: #fff; +} + +.navigate-left:after, +.push-left:after { + content: ''; +} + +.navigate-right:after, +.push-right:after { + content: ''; +} + +.icon-caret:before { + content: '\e800'; +} + +.icon-down:before, +.icon-down-nav:before { + content: '\e801'; +} + +.icon-download:before { + content: '\e802'; +} + +.icon-left:before, +.icon-left-nav:before { + content: '\e803'; +} + +.icon-more-vertical:before { + content: '\e804'; +} + +.icon-more:before { + content: '\e805'; +} + +.icon-right:before, +.icon-right-nav:before { + content: '\e806'; +} + +.icon-search:before { + content: '\e807'; +} + +.icon-share:before { + content: '\e808'; +} + +.icon-up:before, +.icon-up-nav:before { + content: '\e809'; +} diff --git a/ExerciseThree/dist/css/ratchet-theme-android.min.css b/ExerciseThree/dist/css/ratchet-theme-android.min.css new file mode 100644 index 0000000..45ab350 --- /dev/null +++ b/ExerciseThree/dist/css/ratchet-theme-android.min.css @@ -0,0 +1,9 @@ +/*! + * ===================================================== + * Ratchet v2.0.2 (http://goratchet.com) + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * + * v2.0.2 designed by @connors. + * ===================================================== + */body{font-family:Roboto,sans-serif;font-size:18px;line-height:22px;color:#222}a{color:#33b5e5}a:active{color:#1a9bcb}.content{background-color:#f2f2f2}.bar-nav~.content{padding-top:50px}.bar-header-secondary~.content{padding-top:100px}.bar-tab~.content{padding-top:50px;padding-bottom:0}.bar-footer~.content{padding-bottom:50px}.bar-footer-secondary~.content{padding-bottom:100px}.btn{padding:8px 15px;font-size:14px;color:#222;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25)}.btn.active,.btn:active{color:#222;background-color:#999;border:0;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.btn-primary{color:#fff;background-color:#33b5e5;border:0}.btn-primary.active,.btn-primary:active{color:#fff;background-color:#1a9bcb;border:0}.btn-positive{color:#fff;background-color:#9c0;border:0}.btn-positive.active,.btn-positive:active{color:#fff;background-color:#739900;border:0}.btn-negative{color:#fff;background-color:#f44;border:0}.btn-negative.active,.btn-negative:active{color:#fff;background-color:#f11;border:0}.btn-outlined{background-color:transparent;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.btn-outlined.btn-primary{color:#33b5e5;border:1px solid #33b5e5}.btn-outlined.btn-primary:active{background-color:#33b5e5;border:1px solid #33b5e5}.btn-outlined.btn-positive{color:#9c0;border:1px solid #9c0}.btn-outlined.btn-positive:active{background-color:#9c0;border:1px solid #9c0}.btn-outlined.btn-negative{color:#f44;border:1px solid #f44}.btn-outlined.btn-negative:active{background-color:#f44;border:1px solid #f44}.btn-outlined:active{background-color:#999;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff;-webkit-box-shadow:none;box-shadow:none}.btn-link{color:#33b5e5;background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.btn-link.active,.btn-link:active{color:#1a9bcb;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-block{padding:15px 0;font-size:18px}.btn .badge{background-color:rgba(0,0,0,.15)}.btn .badge.badge-inverted{background-color:transparent}.btn:active .badge{color:#fff}.bar{height:50px;background-color:#ddd;border-bottom:1px solid #b1b1b1;-webkit-box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07);box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07)}.bar.bar-header-secondary{top:50px}.bar.bar-footer-secondary,.bar.bar-footer-secondary-tab{bottom:50px}.bar .bar-footer,.bar .bar-footer-secondary,.bar .bar-footer-secondary-tab{border-top:1px solid #b1b1b1;border-bottom:0;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.bar-tab{top:0;bottom:auto;height:50px;border-top:0}.bar-tab .tab-item{color:#929292}.bar-tab .tab-item.active{color:#33b5e5;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.bar-tab .tab-item:active{color:#929292;background-color:#78c6e3}.bar-tab .tab-item .icon{top:3px;padding-top:0;padding-bottom:0}.title{position:static;padding-left:15px;font-size:18px;line-height:49px;text-align:left}.bar .btn{top:7px;padding-top:10px;padding-bottom:10px}.bar .btn-link{top:0;padding:0;font-size:18px;line-height:49px;color:#33b5e5}.bar .btn-link.active,.bar .btn-link:active{color:#1a9bcb}.bar .btn-link .icon{top:2px;padding:0}.bar .btn-block{top:4px}.bar .segmented-control{top:7px}.bar .icon{padding-top:13px;padding-bottom:13px}.bar .title .icon{padding:0}.bar .title .icon.icon-caret{top:10px;color:#777}.bar input[type=search]{height:35px}.badge.badge-inverted{color:#999;background-color:transparent}.badge-primary{color:#fff;background-color:#33b5e5}.badge-primary.badge-inverted{color:#33b5e5;background-color:transparent}.badge-positive{color:#fff;background-color:#9c0}.badge-positive.badge-inverted{color:#9c0;background-color:transparent}.badge-negative{color:#fff;background-color:#f44}.badge-negative.badge-inverted{color:#f44;background-color:transparent}.card{background-color:transparent;border-color:#d9d9d9;border-radius:2px}.table-view{background-color:transparent}.table-view .table-view-cell{border-bottom:1px solid #d9d9d9}.table-view .table-view-cell:last-child{background-image:none}.table-view .table-view-cell>a:not(.btn):active{color:inherit;background-color:#e0e0e0}.table-view .table-view-cell>a:not(.btn):active .icon{color:#fff}.table-view .table-view-divider{padding-top:25px;font-size:12px;font-weight:700;text-transform:uppercase;background-color:transparent;border-top:0;border-bottom:2px solid #a9a9a9}.table-view-cell .navigate-left>.badge,.table-view-cell .navigate-left>.btn,.table-view-cell .navigate-left>.toggle,.table-view-cell .navigate-right>.badge,.table-view-cell .navigate-right>.btn,.table-view-cell .navigate-right>.toggle,.table-view-cell .push-left>.badge,.table-view-cell .push-left>.btn,.table-view-cell .push-left>.toggle,.table-view-cell .push-right>.badge,.table-view-cell .push-right>.btn,.table-view-cell .push-right>.toggle,.table-view-cell>a .navigate-left>.badge,.table-view-cell>a .navigate-left>.btn,.table-view-cell>a .navigate-left>.toggle,.table-view-cell>a .navigate-right>.badge,.table-view-cell>a .navigate-right>.btn,.table-view-cell>a .navigate-right>.toggle,.table-view-cell>a .push-left>.badge,.table-view-cell>a .push-left>.btn,.table-view-cell>a .push-left>.toggle,.table-view-cell>a .push-right>.badge,.table-view-cell>a .push-right>.btn,.table-view-cell>a .push-right>.toggle{right:15px}.input-group,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}input[type=search]{border-radius:2px}.input-group,select,textarea{height:auto}.input-group{padding:0;border:0}.input-group input{border:0;border-bottom:1px solid #d9d9d9;-webkit-box-shadow:none;box-shadow:none}.input-group input:last-child{background-image:none}.input-row{height:40px;border-bottom:1px solid #d9d9d9}.input-row label{padding-top:10px;padding-bottom:10px}.input-row label+input{background-image:none;border-bottom:0}.segmented-control{font-size:14px;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:0 1px 1px rgba(0,0,0,.25)}.segmented-control .control-item{padding-top:10px;padding-bottom:10px;color:#222;border-left:1px solid #999;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.segmented-control .control-item:first-child{border-left-width:0}.segmented-control .control-item.active,.segmented-control .control-item:active{background-color:#999}.segmented-control-primary{border:0}.segmented-control-primary .control-item{color:#fff;border-color:inherit}.segmented-control-primary .control-item.active,.segmented-control-primary .control-item:active{color:#fff;background-color:#33b5e5}.segmented-control-positive{border:0}.segmented-control-positive .control-item{color:#fff;border-color:inherit}.segmented-control-positive .control-item.active,.segmented-control-positive .control-item:active{color:#fff;background-color:#9c0}.segmented-control-negative{border:0}.segmented-control-negative .control-item{color:#fff;border-color:inherit}.segmented-control-negative .control-item.active,.segmented-control-negative .control-item:active{color:#fff;background-color:#f44}.popover{top:47px;left:15px;width:200px;margin-left:0;border:1px solid #9b9b9b;border-radius:0;-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-transition:-webkit-transform .1s ease-in-out,opacity .2s ease-in-out;-moz-transition:-moz-transform .1s ease-in-out,opacity .2s ease-in-out;transition:transform .1s ease-in-out,opacity .2s ease-in-out;-webkit-transform:scale(.75);-ms-transform:scale(.75);transform:scale(.75)}.popover:before{display:none}.popover.visible{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.backdrop{background-color:transparent}.popover .bar{border-radius:0}.popover .bar-nav~.table-view{padding-top:50px}.popover .table-view{border-radius:12px}.toggle{width:104px;height:28px;background-color:#d7d7d7;border:2px solid #d7d7d7;border-radius:0}.toggle .toggle-handle{top:0;left:0;width:50px;height:24px;background-color:#bebebe;border:1px solid #b5b5b5;border-radius:2px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1)}.toggle:before{top:1px;right:auto;left:11px;z-index:3;color:#fff}.toggle.active{background-color:#d7d7d7;border:2px solid #d7d7d7}.toggle.active .toggle-handle{margin-right:2px;background-color:#33b5e5;border-color:#33b5e5;-webkit-transform:translate3d(50px,0,0);-ms-transform:translate3d(50px,0,0);transform:translate3d(50px,0,0)}.toggle.active:before{right:14px;left:auto;color:#fff}.navigate-left:after,.navigate-right:after,.push-left:after,.push-right:after{content:''}.icon-caret:before{content:'\e800'}.icon-down-nav:before,.icon-down:before{content:'\e801'}.icon-download:before{content:'\e802'}.icon-left-nav:before,.icon-left:before{content:'\e803'}.icon-more-vertical:before{content:'\e804'}.icon-more:before{content:'\e805'}.icon-right-nav:before,.icon-right:before{content:'\e806'}.icon-search:before{content:'\e807'}.icon-share:before{content:'\e808'}.icon-up-nav:before,.icon-up:before{content:'\e809'} \ No newline at end of file diff --git a/ExerciseThree/dist/css/ratchet-theme-ios.css b/ExerciseThree/dist/css/ratchet-theme-ios.css new file mode 100644 index 0000000..58f1455 --- /dev/null +++ b/ExerciseThree/dist/css/ratchet-theme-ios.css @@ -0,0 +1,471 @@ +/*! + * ===================================================== + * Ratchet v2.0.2 (http://goratchet.com) + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * + * v2.0.2 designed by @connors. + * ===================================================== + */ + +a { + color: #007aff; +} +a:active { + color: #0062cc; +} + +.content { + background-color: #efeff4; +} + +.h5, h5, +.h6, h6, +p { + color: #8f8f94; +} + +.h5, h5, +.h6, h6 { + font-weight: normal; + text-transform: uppercase; +} + +.btn { + color: #929292; + background-color: rgba(247, 247, 247, .98); + border: 1px solid #929292; + -webkit-transition: all; + -moz-transition: all; + transition: all; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + transition-duration: .2s; +} +.btn:active, .btn.active { + color: #fff; + background-color: #929292; +} + +.btn-primary { + color: #fff; + background-color: #007aff; + border: 1px solid #007aff; +} +.btn-primary:active, .btn-primary.active { + background-color: #0062cc; + border: 1px solid #0062cc; +} + +.btn-positive { + color: #fff; + background-color: #4cd964; + border: 1px solid #4cd964; +} +.btn-positive:active, .btn-positive.active { + background-color: #2ac845; + border: 1px solid #2ac845; +} + +.btn-negative { + color: #fff; + background-color: #dd524d; + border: 1px solid #dd524d; +} +.btn-negative:active, .btn-negative.active { + background-color: #cf2d28; + border: 1px solid #cf2d28; +} + +.btn-outlined { + background-color: transparent; +} +.btn-outlined.btn-primary { + color: #007aff; +} +.btn-outlined.btn-positive { + color: #4cd964; +} +.btn-outlined.btn-negative { + color: #dd524d; +} +.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { + color: #fff; +} + +.btn-link { + color: #007aff; + background-color: transparent; + border: none; +} +.btn-link:active, .btn-link.active { + color: #0062cc; + background-color: transparent; +} + +.btn .badge { + background-color: rgba(0, 0, 0, .15); +} +.btn .badge.badge-inverted { + background-color: transparent; +} +.btn:active .badge { + color: #fff; +} + +.bar { + background-color: rgba(247, 247, 247, .98); + border-bottom: 0; + -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85); + box-shadow: 0 0 1px rgba(0, 0, 0, .85); +} +.bar.bar-header-secondary { + top: 44px; +} +.bar.bar-footer-secondary { + bottom: 44px; +} +.bar.bar-footer-secondary-tab { + bottom: 50px; +} +.bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab { + border-top: 0; +} + +.bar-tab { + border-top: 0; +} + +.tab-item { + color: #929292; +} +.tab-item.active, .tab-item:active { + color: #007aff; +} + +.bar-nav .btn-link { + color: #007aff; +} +.bar-nav .btn-link:active { + color: #007aff; + opacity: .6; +} + +.badge.badge-inverted { + color: #929292; + background-color: transparent; +} + +.badge-primary { + color: #fff; + background-color: #007aff; +} +.badge-primary.badge-inverted { + color: #007aff; + background-color: transparent; +} + +.badge-positive { + color: #fff; + background-color: #4cd964; +} +.badge-positive.badge-inverted { + color: #4cd964; + background-color: transparent; +} + +.badge-negative { + color: #fff; + background-color: #dd524d; +} +.badge-negative.badge-inverted { + color: #dd524d; + background-color: transparent; +} + +.card .table-view { + background-image: none; +} + +.card .table-view-cell:last-child { + background-image: none; +} + +.table-view { + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: 0 100%, 0 0; + border-top: 0; + border-bottom: 0; +} +.table-view .table-view-cell { + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: 15px 100%; + border-bottom: 0; +} +.table-view .table-view-cell:last-child { + background-image: none; +} +.table-view .table-view-cell > a:not(.btn):active { + color: inherit; +} +.table-view .table-view-divider { + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: 0 100%, 0 0; + border-top: 0; + border-bottom: 0; +} + +select, +textarea, +input[type="text"], +input[type="search"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="color"], +.input-group { + height: 40px; + padding: 10px 15px; + border: 1px solid rgba(0, 0, 0, .2); +} + +input[type="search"] { + height: 34px; + text-align: center; + background-color: rgba(0, 0, 0, .1); + border: 0; + border-radius: 6px; +} + +input[type="search"]:focus { + text-align: left; +} + +select, +textarea, +.input-group { + height: auto; +} + +.input-group { + padding: 0; + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: 0 100%, 0 0; + border: 0; +} + +.input-group input { + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: 15px 100%; + border: 0; +} + +.input-group input:last-child { + background-image: none; +} + +.input-row { + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: 15px 100%; + border-bottom: 0; +} + +.input-row:last-child, +.input-row label + input { + background-image: none; +} + +.segmented-control { + background-color: transparent; + border: 1px solid #929292; +} +.segmented-control .control-item { + color: #929292; + border-color: #929292; + -webkit-transition: background-color .1s linear; + -moz-transition: background-color .1s linear; + transition: background-color .1s linear; +} +.segmented-control .control-item:active { + background-color: #ebebeb; +} +.segmented-control .control-item.active { + color: #fff; + background-color: #929292; +} + +.segmented-control-primary { + border: 1px solid #007aff; +} +.segmented-control-primary .control-item { + color: #007aff; + border-color: inherit; +} +.segmented-control-primary .control-item:active { + background-color: #b3d7ff; +} +.segmented-control-primary .control-item.active { + color: #fff; + background-color: #007aff; +} + +.segmented-control-positive { + border: 1px solid #4cd964; +} +.segmented-control-positive .control-item { + color: #4cd964; + border-color: inherit; +} +.segmented-control-positive .control-item:active { + background-color: #dff8e3; +} +.segmented-control-positive .control-item.active { + color: #fff; + background-color: #4cd964; +} + +.segmented-control-negative { + border: 1px solid #dd524d; +} +.segmented-control-negative .control-item { + color: #dd524d; + border-color: inherit; +} +.segmented-control-negative .control-item:active { + background-color: #fae4e3; +} +.segmented-control-negative .control-item.active { + color: #fff; + background-color: #dd524d; +} + +.popover { + border-radius: 12px; + -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; + -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; + transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; +} +.popover:before { + border-bottom: 15px solid rgba(247, 247, 247, .98); +} + +.popover .bar { + -webkit-box-shadow: none; + box-shadow: none; +} + +.popover .bar-nav { + border-bottom: 1px solid rgba(0, 0, 0, .15); +} + +.popover .table-view { + background-image: none; + border-radius: 12px; +} + +.modal { + -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); + -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1); + transition-timing-function: cubic-bezier(.1, .5, .1, 1); +} +.modal.active { + -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); + -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1); + transition-timing-function: cubic-bezier(.1, .5, .1, 1); +} + +.toggle { + width: 47px; + border: 2px solid #e6e6e6; + -webkit-box-shadow: inset 0 0 0 0 #e1e1e1; + box-shadow: inset 0 0 0 0 #e1e1e1; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-property: box-shadow, border; + -moz-transition-property: box-shadow, border; + transition-property: box-shadow, border; +} +.toggle .toggle-handle { + border: 1px solid rgba(0, 0, 0, .2); + -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08); + box-shadow: 0 3px 3px rgba(0, 0, 0, .08); + -webkit-transition-property: -webkit-transform, border, width; + -moz-transition-property: -moz-transform, border, width; + transition-property: transform, border, width; +} +.toggle:before { + display: none; +} +.toggle.active { + background-color: transparent; + border: 2px solid #4cd964; + -webkit-box-shadow: inset 0 0 0 13px #4cd964; + box-shadow: inset 0 0 0 13px #4cd964; +} +.toggle.active .toggle-handle { + -webkit-transform: translate3d(17px, 0, 0); + -ms-transform: translate3d(17px, 0, 0); + transform: translate3d(17px, 0, 0); +} +.toggle.active .toggle-handle { + border-color: #4cd964; +} + +.content.fade { + -webkit-transition: opacity .2s ease-in-out; + -moz-transition: opacity .2s ease-in-out; + transition: opacity .2s ease-in-out; +} +.content.sliding { + -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); + -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1); + transition-timing-function: cubic-bezier(.1, .5, .1, 1); +} +.content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) { + -webkit-animation-name: fadeOverlay; + -moz-animation-name: fadeOverlay; + animation-name: fadeOverlay; + -webkit-animation-duration: .4s; + -moz-animation-duration: .4s; + animation-duration: .4s; +} +.content.sliding.right:not([class*="sliding-in"]) { + -webkit-animation-direction: reverse; + -moz-animation-direction: reverse; + animation-direction: reverse; +} +.content.sliding.left { + -webkit-transform: translate3d(-20%, 0, 0); + -ms-transform: translate3d(-20%, 0, 0); + transform: translate3d(-20%, 0, 0); +} + +@-webkit-keyframes fadeOverlay { + from { + -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent; + box-shadow: 0 0 10px transparent, -320px 0 0 transparent; + } + + to { + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1); + box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1); + } +} diff --git a/ExerciseThree/dist/css/ratchet-theme-ios.min.css b/ExerciseThree/dist/css/ratchet-theme-ios.min.css new file mode 100644 index 0000000..9ebd687 --- /dev/null +++ b/ExerciseThree/dist/css/ratchet-theme-ios.min.css @@ -0,0 +1,9 @@ +/*! + * ===================================================== + * Ratchet v2.0.2 (http://goratchet.com) + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * + * v2.0.2 designed by @connors. + * ===================================================== + */a{color:#007aff}a:active{color:#0062cc}.content{background-color:#efeff4}.h5,.h6,h5,h6,p{color:#8f8f94}.h5,.h6,h5,h6{font-weight:400;text-transform:uppercase}.btn{color:#929292;background-color:rgba(247,247,247,.98);border:1px solid #929292;-webkit-transition:all;-moz-transition:all;transition:all;-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s}.btn.active,.btn:active{color:#fff;background-color:#929292}.btn-primary{color:#fff;background-color:#007aff;border:1px solid #007aff}.btn-primary.active,.btn-primary:active{background-color:#0062cc;border:1px solid #0062cc}.btn-positive{color:#fff;background-color:#4cd964;border:1px solid #4cd964}.btn-positive.active,.btn-positive:active{background-color:#2ac845;border:1px solid #2ac845}.btn-negative{color:#fff;background-color:#dd524d;border:1px solid #dd524d}.btn-negative.active,.btn-negative:active{background-color:#cf2d28;border:1px solid #cf2d28}.btn-outlined{background-color:transparent}.btn-outlined.btn-primary{color:#007aff}.btn-outlined.btn-positive{color:#4cd964}.btn-outlined.btn-negative{color:#dd524d}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff}.btn-link{color:#007aff;background-color:transparent;border:none}.btn-link.active,.btn-link:active{color:#0062cc;background-color:transparent}.btn .badge{background-color:rgba(0,0,0,.15)}.btn .badge.badge-inverted{background-color:transparent}.btn:active .badge{color:#fff}.bar{background-color:rgba(247,247,247,.98);border-bottom:0;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(0,0,0,.85)}.bar.bar-header-secondary{top:44px}.bar.bar-footer-secondary{bottom:44px}.bar.bar-footer-secondary-tab{bottom:50px}.bar-tab,.bar.bar-footer,.bar.bar-footer-secondary,.bar.bar-footer-secondary-tab{border-top:0}.tab-item{color:#929292}.bar-nav .btn-link,.tab-item.active,.tab-item:active{color:#007aff}.bar-nav .btn-link:active{color:#007aff;opacity:.6}.badge.badge-inverted{color:#929292;background-color:transparent}.badge-primary{color:#fff;background-color:#007aff}.badge-primary.badge-inverted{color:#007aff;background-color:transparent}.badge-positive{color:#fff;background-color:#4cd964}.badge-positive.badge-inverted{color:#4cd964;background-color:transparent}.badge-negative{color:#fff;background-color:#dd524d}.badge-negative.badge-inverted{color:#dd524d;background-color:transparent}.card .table-view,.card .table-view-cell:last-child{background-image:none}.table-view{background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.table-view .table-view-cell{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.table-view .table-view-cell:last-child{background-image:none}.table-view .table-view-cell>a:not(.btn):active{color:inherit}.table-view .table-view-divider{background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.input-group,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2)}input[type=search]{height:34px;text-align:center;background-color:rgba(0,0,0,.1);border:0;border-radius:6px}input[type=search]:focus{text-align:left}.input-group,select,textarea{height:auto}.input-group{padding:0;background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0;border:0}.input-group input{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:15px 100%;border:0}.input-group input:last-child{background-image:none}.input-row{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.input-row label+input,.input-row:last-child{background-image:none}.segmented-control{background-color:transparent;border:1px solid #929292}.segmented-control .control-item{color:#929292;border-color:#929292;-webkit-transition:background-color .1s linear;-moz-transition:background-color .1s linear;transition:background-color .1s linear}.segmented-control .control-item:active{background-color:#ebebeb}.segmented-control .control-item.active{color:#fff;background-color:#929292}.segmented-control-primary{border:1px solid #007aff}.segmented-control-primary .control-item{color:#007aff;border-color:inherit}.segmented-control-primary .control-item:active{background-color:#b3d7ff}.segmented-control-primary .control-item.active{color:#fff;background-color:#007aff}.segmented-control-positive{border:1px solid #4cd964}.segmented-control-positive .control-item{color:#4cd964;border-color:inherit}.segmented-control-positive .control-item:active{background-color:#dff8e3}.segmented-control-positive .control-item.active{color:#fff;background-color:#4cd964}.segmented-control-negative{border:1px solid #dd524d}.segmented-control-negative .control-item{color:#dd524d;border-color:inherit}.segmented-control-negative .control-item:active{background-color:#fae4e3}.segmented-control-negative .control-item.active{color:#fff;background-color:#dd524d}.popover{border-radius:12px;-webkit-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;-moz-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out}.popover:before{border-bottom:15px solid rgba(247,247,247,.98)}.popover .bar{-webkit-box-shadow:none;box-shadow:none}.popover .bar-nav{border-bottom:1px solid rgba(0,0,0,.15)}.popover .table-view{background-image:none;border-radius:12px}.modal,.modal.active{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.toggle{width:47px;border:2px solid #e6e6e6;-webkit-box-shadow:inset 0 0 0 0 #e1e1e1;box-shadow:inset 0 0 0 0 #e1e1e1;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:box-shadow,border;-moz-transition-property:box-shadow,border;transition-property:box-shadow,border}.toggle .toggle-handle{border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,.08);box-shadow:0 3px 3px rgba(0,0,0,.08);-webkit-transition-property:-webkit-transform,border,width;-moz-transition-property:-moz-transform,border,width;transition-property:transform,border,width}.toggle:before{display:none}.toggle.active{background-color:transparent;border:2px solid #4cd964;-webkit-box-shadow:inset 0 0 0 13px #4cd964;box-shadow:inset 0 0 0 13px #4cd964}.toggle.active .toggle-handle{-webkit-transform:translate3d(17px,0,0);-ms-transform:translate3d(17px,0,0);transform:translate3d(17px,0,0);border-color:#4cd964}.content.fade{-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.content.sliding{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.content.sliding.right:not([class*=sliding-in]),.content.sliding.sliding-in{-webkit-animation-name:fadeOverlay;-moz-animation-name:fadeOverlay;animation-name:fadeOverlay;-webkit-animation-duration:.4s;-moz-animation-duration:.4s;animation-duration:.4s}.content.sliding.right:not([class*=sliding-in]){-webkit-animation-direction:reverse;-moz-animation-direction:reverse;animation-direction:reverse}.content.sliding.left{-webkit-transform:translate3d(-20%,0,0);-ms-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}@-webkit-keyframes fadeOverlay{from{-webkit-box-shadow:0 0 10px transparent,-320px 0 0 transparent;box-shadow:0 0 10px transparent,-320px 0 0 transparent}to{-webkit-box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1)}} \ No newline at end of file diff --git a/ExerciseThree/dist/css/ratchet.css b/ExerciseThree/dist/css/ratchet.css new file mode 100644 index 0000000..4e36d9c --- /dev/null +++ b/ExerciseThree/dist/css/ratchet.css @@ -0,0 +1,1434 @@ +/*! + * ===================================================== + * Ratchet v2.0.2 (http://goratchet.com) + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * + * v2.0.2 designed by @connors. + * ===================================================== + */ + +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +a { + background: transparent; +} + +a:active, +a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +h1 { + margin: .67em 0; + font-size: 2em; +} + +mark { + color: #000; + background: #ff0; +} + +small { + font-size: 80%; +} + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sup { + top: -.5em; +} + +sub { + bottom: -.25em; +} + +img { + border: 0; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 1em 40px; +} + +hr { + height: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +pre { + overflow: auto; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + margin: 0; + font: inherit; + color: inherit; +} + +button { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +html input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; +} + +input { + line-height: normal; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +input[type="search"] { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + padding: .35em .625em .75em; + margin: 0 2px; + border: 1px solid #c0c0c0; +} + +legend { + padding: 0; + border: 0; +} + +textarea { + overflow: auto; +} + +optgroup { + font-weight: bold; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} + +td, +th { + padding: 0; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +body { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + font-family: "Helvetica Neue", Helvetica, sans-serif; + font-size: 17px; + line-height: 21px; + color: #000; + background-color: #fff; +} + +a { + color: #428bca; + text-decoration: none; + + -webkit-tap-highlight-color: transparent; +} +a:active { + color: #3071a9; +} + +.content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + -webkit-overflow-scrolling: touch; + background-color: #fff; +} + +.content > * { + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} + +.bar-nav ~ .content { + padding-top: 44px; +} + +.bar-header-secondary ~ .content { + padding-top: 88px; +} + +.bar-footer ~ .content { + padding-bottom: 44px; +} + +.bar-footer-secondary ~ .content { + padding-bottom: 88px; +} + +.bar-tab ~ .content { + padding-bottom: 50px; +} + +.bar-footer-secondary-tab ~ .content { + padding-bottom: 94px; +} + +.content-padded { + margin: 10px; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.clearfix:before, .clearfix:after { + display: table; + content: " "; +} +.clearfix:after { + clear: both; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 10px; + line-height: 1; +} + +h1, .h1 { + font-size: 36px; +} + +h2, .h2 { + font-size: 30px; +} + +h3, .h3 { + font-size: 24px; +} + +h4, .h4 { + font-size: 18px; +} + +h5, .h5 { + margin-top: 20px; + font-size: 14px; +} + +h6, .h6 { + margin-top: 20px; + font-size: 12px; +} + +p { + margin-top: 0; + margin-bottom: 10px; + font-size: 14px; + color: #777; +} + +.btn { + position: relative; + display: inline-block; + padding: 6px 8px 7px; + margin-bottom: 0; + font-size: 12px; + font-weight: 400; + line-height: 1; + color: #333; + text-align: center; + white-space: nowrap; + vertical-align: top; + cursor: pointer; + background-color: white; + border: 1px solid #ccc; + border-radius: 3px; +} +.btn:active, .btn.active { + color: inherit; + background-color: #ccc; +} +.btn:disabled, .btn.disabled { + opacity: .6; +} + +.btn-primary { + color: #fff; + background-color: #428bca; + border: 1px solid #428bca; +} +.btn-primary:active, .btn-primary.active { + color: #fff; + background-color: #3071a9; + border: 1px solid #3071a9; +} + +.btn-positive { + color: #fff; + background-color: #5cb85c; + border: 1px solid #5cb85c; +} +.btn-positive:active, .btn-positive.active { + color: #fff; + background-color: #449d44; + border: 1px solid #449d44; +} + +.btn-negative { + color: #fff; + background-color: #d9534f; + border: 1px solid #d9534f; +} +.btn-negative:active, .btn-negative.active { + color: #fff; + background-color: #c9302c; + border: 1px solid #c9302c; +} + +.btn-outlined { + background-color: transparent; +} +.btn-outlined.btn-primary { + color: #428bca; +} +.btn-outlined.btn-positive { + color: #5cb85c; +} +.btn-outlined.btn-negative { + color: #d9534f; +} +.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { + color: #fff; +} + +.btn-link { + padding-top: 6px; + padding-bottom: 6px; + color: #428bca; + background-color: transparent; + border: 0; +} +.btn-link:active, .btn-link.active { + color: #3071a9; + background-color: transparent; +} + +.btn-block { + display: block; + width: 100%; + padding: 15px 0; + margin-bottom: 10px; + font-size: 18px; +} + +input[type="submit"], +input[type="reset"], +input[type="button"] { + width: 100%; +} + +.btn .badge { + margin: -2px -4px -2px 4px; + font-size: 12px; + background-color: rgba(0, 0, 0, .15); +} + +.btn .badge-inverted, +.btn:active .badge-inverted { + background-color: transparent; +} + +.btn-primary:active .badge-inverted, +.btn-positive:active .badge-inverted, +.btn-negative:active .badge-inverted { + color: #fff; +} + +.btn-block .badge { + position: absolute; + right: 0; + margin-right: 10px; +} + +.btn .icon { + font-size: inherit; +} + +.bar { + position: fixed; + right: 0; + left: 0; + z-index: 10; + height: 44px; + padding-right: 10px; + padding-left: 10px; + background-color: white; + border-bottom: 1px solid #ddd; + + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.bar-header-secondary { + top: 44px; +} + +.bar-footer { + bottom: 0; +} + +.bar-footer-secondary { + bottom: 44px; +} + +.bar-footer-secondary-tab { + bottom: 50px; +} + +.bar-footer, +.bar-footer-secondary, +.bar-footer-secondary-tab { + border-top: 1px solid #ddd; + border-bottom: 0; +} + +.bar-nav { + top: 0; +} + +.title { + position: absolute; + display: block; + width: 100%; + padding: 0; + margin: 0 -10px; + font-size: 17px; + font-weight: 500; + line-height: 44px; + color: #000; + text-align: center; + white-space: nowrap; +} + +.title a { + color: inherit; +} + +.bar-tab { + bottom: 0; + display: table; + width: 100%; + height: 50px; + padding: 0; + table-layout: fixed; + border-top: 1px solid #ddd; + border-bottom: 0; +} +.bar-tab .tab-item { + display: table-cell; + width: 1%; + height: 50px; + color: #929292; + text-align: center; + vertical-align: middle; +} +.bar-tab .tab-item.active, .bar-tab .tab-item:active { + color: #428bca; +} +.bar-tab .tab-item .icon { + top: 3px; + width: 24px; + height: 24px; + padding-top: 0; + padding-bottom: 0; +} +.bar-tab .tab-item .icon ~ .tab-label { + display: block; + font-size: 11px; +} + +.bar .btn { + position: relative; + top: 7px; + z-index: 20; + padding: 6px 12px 7px; + margin-top: 0; + font-weight: 400; +} +.bar .btn.pull-right { + margin-left: 10px; +} +.bar .btn.pull-left { + margin-right: 10px; +} + +.bar .btn-link { + top: 0; + padding: 0; + font-size: 16px; + line-height: 44px; + color: #428bca; + border: 0; +} +.bar .btn-link:active, .bar .btn-link.active { + color: #3071a9; +} + +.bar .btn-block { + top: 6px; + padding: 7px 0; + margin-bottom: 0; + font-size: 16px; +} + +.bar .btn-nav.pull-left { + margin-left: -5px; +} +.bar .btn-nav.pull-left .icon-left-nav { + margin-right: -3px; +} +.bar .btn-nav.pull-right { + margin-right: -5px; +} +.bar .btn-nav.pull-right .icon-right-nav { + margin-left: -3px; +} + +.bar .icon { + position: relative; + z-index: 20; + padding-top: 10px; + padding-bottom: 10px; + font-size: 24px; +} +.bar .btn .icon { + top: 3px; + padding: 0; +} +.bar .title .icon { + padding: 0; +} +.bar .title .icon.icon-caret { + top: 4px; + margin-left: -5px; +} + +.bar input[type="search"] { + height: 29px; + margin: 6px 0; +} + +.bar .segmented-control { + top: 7px; + margin: 0 auto; +} + +.badge { + display: inline-block; + padding: 2px 9px 3px; + font-size: 12px; + line-height: 1; + color: #333; + background-color: rgba(0, 0, 0, .15); + border-radius: 100px; +} +.badge.badge-inverted { + padding: 0 5px 0 0; + background-color: transparent; +} + +.badge-primary { + color: #fff; + background-color: #428bca; +} +.badge-primary.badge-inverted { + color: #428bca; +} + +.badge-positive { + color: #fff; + background-color: #5cb85c; +} +.badge-positive.badge-inverted { + color: #5cb85c; +} + +.badge-negative { + color: #fff; + background-color: #d9534f; +} +.badge-negative.badge-inverted { + color: #d9534f; +} + +.card { + margin: 10px; + overflow: hidden; + background-color: white; + border: 1px solid #ddd; + border-radius: 6px; +} + +.card .table-view { + margin-bottom: 0; + border-top: 0; + border-bottom: 0; +} +.card .table-view .table-view-divider:first-child { + top: 0; + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} +.card .table-view .table-view-divider:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.card .table-view-cell:last-child { + border-bottom: 0; +} + +.table-view { + padding-left: 0; + margin-top: 0; + margin-bottom: 15px; + list-style: none; + background-color: #fff; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +.table-view-cell { + position: relative; + padding: 11px 65px 11px 15px; + overflow: hidden; + border-bottom: 1px solid #ddd; +} +.table-view-cell:last-child { + border-bottom: 0; +} +.table-view-cell > a:not(.btn) { + position: relative; + display: block; + padding: inherit; + margin: -11px -65px -11px -15px; + overflow: hidden; + color: inherit; +} +.table-view-cell > a:not(.btn):active { + background-color: #eee; +} +.table-view-cell p { + margin-bottom: 0; +} + +.table-view-divider { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 15px; + margin-top: -1px; + margin-left: 0; + font-weight: 500; + color: #999; + background-color: #fafafa; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +.table-view .media, +.table-view .media-body { + overflow: hidden; +} + +.table-view .media-object.pull-left { + margin-right: 10px; +} +.table-view .media-object.pull-right { + margin-left: 10px; +} + +.table-view-cell > .btn, +.table-view-cell > .badge, +.table-view-cell > .toggle, +.table-view-cell > a > .btn, +.table-view-cell > a > .badge, +.table-view-cell > a > .toggle { + position: absolute; + top: 50%; + right: 15px; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +.table-view-cell .navigate-left > .btn, +.table-view-cell .navigate-left > .badge, +.table-view-cell .navigate-left > .toggle, +.table-view-cell .navigate-right > .btn, +.table-view-cell .navigate-right > .badge, +.table-view-cell .navigate-right > .toggle, +.table-view-cell .push-left > .btn, +.table-view-cell .push-left > .badge, +.table-view-cell .push-left > .toggle, +.table-view-cell .push-right > .btn, +.table-view-cell .push-right > .badge, +.table-view-cell .push-right > .toggle, +.table-view-cell > a .navigate-left > .btn, +.table-view-cell > a .navigate-left > .badge, +.table-view-cell > a .navigate-left > .toggle, +.table-view-cell > a .navigate-right > .btn, +.table-view-cell > a .navigate-right > .badge, +.table-view-cell > a .navigate-right > .toggle, +.table-view-cell > a .push-left > .btn, +.table-view-cell > a .push-left > .badge, +.table-view-cell > a .push-left > .toggle, +.table-view-cell > a .push-right > .btn, +.table-view-cell > a .push-right > .badge, +.table-view-cell > a .push-right > .toggle { + right: 35px; +} + +.content > .table-view:first-child { + margin-top: 15px; +} + +input, +textarea, +button, +select { + font-family: "Helvetica Neue", Helvetica, sans-serif; + font-size: 17px; +} + +select, +textarea, +input[type="text"], +input[type="search"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="color"] { + width: 100%; + height: 35px; + -webkit-appearance: none; + padding: 0 15px; + margin-bottom: 15px; + line-height: 21px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 3px; + outline: none; +} + +input[type="search"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0 10px; + font-size: 16px; + border-radius: 20px; +} + +input[type="search"]:focus { + text-align: left; +} + +textarea { + height: auto; +} + +select { + height: auto; + font-size: 14px; + background-color: #f8f8f8; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); +} + +.input-group { + background-color: #fff; +} + +.input-group input, +.input-group textarea { + margin-bottom: 0; + background-color: transparent; + border-top: 0; + border-right: 0; + border-left: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.input-row { + height: 35px; + overflow: hidden; + border-bottom: 1px solid #ddd; +} + +.input-row label { + float: left; + width: 35%; + padding: 8px 15px; + font-family: "Helvetica Neue", Helvetica, sans-serif; + line-height: 1.1; +} + +.input-row input { + float: right; + width: 65%; + padding-left: 0; + margin-bottom: 0; + border: 0; +} + +.segmented-control { + position: relative; + display: table; + overflow: hidden; + font-size: 12px; + font-weight: 400; + background-color: white; + border: 1px solid #ccc; + border-radius: 3px; +} +.segmented-control .control-item { + display: table-cell; + width: 1%; + padding-top: 6px; + padding-bottom: 7px; + overflow: hidden; + line-height: 1; + color: #333; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + border-left: 1px solid #ccc; +} +.segmented-control .control-item:first-child { + border-left-width: 0; +} +.segmented-control .control-item:active { + background-color: #eee; +} +.segmented-control .control-item.active { + background-color: #ccc; +} + +.segmented-control-primary { + border-color: #428bca; +} +.segmented-control-primary .control-item { + color: #428bca; + border-color: inherit; +} +.segmented-control-primary .control-item:active { + background-color: #cde1f1; +} +.segmented-control-primary .control-item.active { + color: #fff; + background-color: #428bca; +} + +.segmented-control-positive { + border-color: #5cb85c; +} +.segmented-control-positive .control-item { + color: #5cb85c; + border-color: inherit; +} +.segmented-control-positive .control-item:active { + background-color: #d8eed8; +} +.segmented-control-positive .control-item.active { + color: #fff; + background-color: #5cb85c; +} + +.segmented-control-negative { + border-color: #d9534f; +} +.segmented-control-negative .control-item { + color: #d9534f; + border-color: inherit; +} +.segmented-control-negative .control-item:active { + background-color: #f9e2e2; +} +.segmented-control-negative .control-item.active { + color: #fff; + background-color: #d9534f; +} + +.control-content { + display: none; +} +.control-content.active { + display: block; +} + +.popover { + position: fixed; + top: 55px; + left: 50%; + z-index: 20; + display: none; + width: 280px; + margin-left: -140px; + background-color: white; + border-radius: 6px; + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1); + box-shadow: 0 0 15px rgba(0, 0, 0, .1); + opacity: 0; + -webkit-transition: all .25s linear; + -moz-transition: all .25s linear; + transition: all .25s linear; + -webkit-transform: translate3d(0, -15px, 0); + -ms-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); +} +.popover:before { + position: absolute; + top: -15px; + left: 50%; + width: 0; + height: 0; + margin-left: -15px; + content: ''; + border-right: 15px solid transparent; + border-bottom: 15px solid white; + border-left: 15px solid transparent; +} +.popover.visible { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.popover .bar ~ .table-view { + padding-top: 44px; +} + +.backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 15; + background-color: rgba(0, 0, 0, .3); +} + +.popover .btn-block { + margin-bottom: 5px; +} +.popover .btn-block:last-child { + margin-bottom: 0; +} + +.popover .bar-nav { + border-bottom: 1px solid #ddd; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + -webkit-box-shadow: none; + box-shadow: none; +} + +.popover .table-view { + max-height: 300px; + margin-bottom: 0; + overflow: auto; + -webkit-overflow-scrolling: touch; + background-color: #fff; + border-top: 0; + border-bottom: 0; + border-radius: 6px; +} + +.modal { + position: fixed; + top: 0; + z-index: 11; + width: 100%; + min-height: 100%; + overflow: hidden; + background-color: #fff; + opacity: 0; + -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; + -moz-transition: -moz-transform .25s, opacity 1ms .25s; + transition: transform .25s, opacity 1ms .25s; + -webkit-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.modal.active { + height: 100%; + opacity: 1; + -webkit-transition: -webkit-transform .25s; + -moz-transition: -moz-transform .25s; + transition: transform .25s; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slider { + width: 100%; +} + +.slider { + overflow: hidden; + background-color: #000; +} +.slider .slide-group { + position: relative; + font-size: 0; + white-space: nowrap; + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + transition: all 0s linear; +} +.slider .slide-group .slide { + display: inline-block; + width: 100%; + height: 100%; + font-size: 14px; + vertical-align: top; +} + +.toggle { + position: relative; + display: block; + width: 74px; + height: 30px; + background-color: #fff; + border: 2px solid #ddd; + border-radius: 20px; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; +} +.toggle .toggle-handle { + position: absolute; + top: -1px; + left: -1px; + z-index: 2; + width: 28px; + height: 28px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 100px; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-property: -webkit-transform, border, width; + -moz-transition-property: -moz-transform, border, width; + transition-property: transform, border, width; +} +.toggle:before { + position: absolute; + top: 3px; + right: 11px; + font-size: 13px; + color: #999; + text-transform: uppercase; + content: "Off"; +} +.toggle.active { + background-color: #5cb85c; + border: 2px solid #5cb85c; +} +.toggle.active .toggle-handle { + border-color: #5cb85c; + -webkit-transform: translate3d(44px, 0, 0); + -ms-transform: translate3d(44px, 0, 0); + transform: translate3d(44px, 0, 0); +} +.toggle.active:before { + right: auto; + left: 15px; + color: #fff; + content: "On"; +} +.toggle input[type="checkbox"] { + display: none; +} + +.content.fade { + left: 0; + opacity: 0; +} +.content.fade.in { + opacity: 1; +} +.content.sliding { + z-index: 2; + -webkit-transition: -webkit-transform .4s; + -moz-transition: -moz-transform .4s; + transition: transform .4s; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.content.sliding.left { + z-index: 1; + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.content.sliding.right { + z-index: 3; + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); +} + +.navigate-left:after, +.navigate-right:after, +.push-left:after, +.push-right:after { + position: absolute; + top: 50%; + display: inline-block; + font-family: Ratchicons; + font-size: inherit; + line-height: 1; + color: #bbb; + text-decoration: none; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + + -webkit-font-smoothing: antialiased; +} + +.navigate-left:after, +.push-left:after { + left: 15px; + content: '\e822'; +} + +.navigate-right:after, +.push-right:after { + right: 15px; + content: '\e826'; +} + +@font-face { + font-family: Ratchicons; + font-style: normal; + font-weight: normal; + + src: url("../fonts/ratchicons.eot"); + src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg"); +} +.icon { + display: inline-block; + font-family: Ratchicons; + font-size: 24px; + line-height: 1; + text-decoration: none; + + -webkit-font-smoothing: antialiased; +} + +.icon-back:before { + content: '\e80a'; +} + +.icon-bars:before { + content: '\e80e'; +} + +.icon-caret:before { + content: '\e80f'; +} + +.icon-check:before { + content: '\e810'; +} + +.icon-close:before { + content: '\e811'; +} + +.icon-code:before { + content: '\e812'; +} + +.icon-compose:before { + content: '\e813'; +} + +.icon-download:before { + content: '\e815'; +} + +.icon-edit:before { + content: '\e829'; +} + +.icon-forward:before { + content: '\e82a'; +} + +.icon-gear:before { + content: '\e821'; +} + +.icon-home:before { + content: '\e82b'; +} + +.icon-info:before { + content: '\e82c'; +} + +.icon-list:before { + content: '\e823'; +} + +.icon-more-vertical:before { + content: '\e82e'; +} + +.icon-more:before { + content: '\e82f'; +} + +.icon-pages:before { + content: '\e824'; +} + +.icon-pause:before { + content: '\e830'; +} + +.icon-person:before { + content: '\e832'; +} + +.icon-play:before { + content: '\e816'; +} + +.icon-plus:before { + content: '\e817'; +} + +.icon-refresh:before { + content: '\e825'; +} + +.icon-search:before { + content: '\e819'; +} + +.icon-share:before { + content: '\e81a'; +} + +.icon-sound:before { + content: '\e827'; +} + +.icon-sound2:before { + content: '\e828'; +} + +.icon-sound3:before { + content: '\e80b'; +} + +.icon-sound4:before { + content: '\e80c'; +} + +.icon-star-filled:before { + content: '\e81b'; +} + +.icon-star:before { + content: '\e81c'; +} + +.icon-stop:before { + content: '\e81d'; +} + +.icon-trash:before { + content: '\e81e'; +} + +.icon-up-nav:before { + content: '\e81f'; +} + +.icon-up:before { + content: '\e80d'; +} + +.icon-right-nav:before { + content: '\e818'; +} + +.icon-right:before { + content: '\e826'; +} + +.icon-down-nav:before { + content: '\e814'; +} + +.icon-down:before { + content: '\e820'; +} + +.icon-left-nav:before { + content: '\e82d'; +} + +.icon-left:before { + content: '\e822'; +} diff --git a/ExerciseThree/dist/css/ratchet.min.css b/ExerciseThree/dist/css/ratchet.min.css new file mode 100644 index 0000000..7801e0a --- /dev/null +++ b/ExerciseThree/dist/css/ratchet.min.css @@ -0,0 +1,9 @@ +/*! + * ===================================================== + * Ratchet v2.0.2 (http://goratchet.com) + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * + * v2.0.2 designed by @connors. + * ===================================================== + *//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{position:fixed;top:0;right:0;bottom:0;left:0;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px;color:#000;background-color:#fff}a{color:#428bca;text-decoration:none;-webkit-tap-highlight-color:transparent}a:active{color:#3071a9}.content{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;background-color:#fff}.content>*{-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.bar-nav~.content{padding-top:44px}.bar-header-secondary~.content{padding-top:88px}.bar-footer~.content{padding-bottom:44px}.bar-footer-secondary~.content{padding-bottom:88px}.bar-tab~.content{padding-bottom:50px}.bar-footer-secondary-tab~.content{padding-bottom:94px}.content-padded{margin:10px}.pull-left{float:left}.pull-right{float:right}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:10px;line-height:1}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{margin-top:20px;font-size:14px}.h6,h6{margin-top:20px;font-size:12px}p{margin-top:0;margin-bottom:10px;font-size:14px;color:#777}.btn{position:relative;display:inline-block;padding:6px 8px 7px;margin-bottom:0;font-size:12px;font-weight:400;line-height:1;color:#333;text-align:center;white-space:nowrap;vertical-align:top;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:3px}.btn.active,.btn:active{color:inherit;background-color:#ccc}.btn.disabled,.btn:disabled{opacity:.6}.btn-primary{color:#fff;background-color:#428bca;border:1px solid #428bca}.btn-primary.active,.btn-primary:active{color:#fff;background-color:#3071a9;border:1px solid #3071a9}.btn-positive{color:#fff;background-color:#5cb85c;border:1px solid #5cb85c}.btn-positive.active,.btn-positive:active{color:#fff;background-color:#449d44;border:1px solid #449d44}.btn-negative{color:#fff;background-color:#d9534f;border:1px solid #d9534f}.btn-negative.active,.btn-negative:active{color:#fff;background-color:#c9302c;border:1px solid #c9302c}.btn-outlined{background-color:transparent}.btn-outlined.btn-primary{color:#428bca}.btn-outlined.btn-positive{color:#5cb85c}.btn-outlined.btn-negative{color:#d9534f}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff}.btn-link{padding-top:6px;padding-bottom:6px;color:#428bca;background-color:transparent;border:0}.btn-link.active,.btn-link:active{color:#3071a9;background-color:transparent}.btn-block{display:block;width:100%;padding:15px 0;margin-bottom:10px;font-size:18px}input[type=button],input[type=reset],input[type=submit]{width:100%}.btn .badge{margin:-2px -4px -2px 4px;font-size:12px;background-color:rgba(0,0,0,.15)}.btn .badge-inverted,.btn:active .badge-inverted{background-color:transparent}.btn-negative:active .badge-inverted,.btn-positive:active .badge-inverted,.btn-primary:active .badge-inverted{color:#fff}.btn-block .badge{position:absolute;right:0;margin-right:10px}.btn .icon{font-size:inherit}.bar{position:fixed;right:0;left:0;z-index:10;height:44px;padding-right:10px;padding-left:10px;background-color:#fff;border-bottom:1px solid #ddd;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bar-header-secondary{top:44px}.bar-footer{bottom:0}.bar-footer-secondary{bottom:44px}.bar-footer-secondary-tab{bottom:50px}.bar-footer,.bar-footer-secondary,.bar-footer-secondary-tab{border-top:1px solid #ddd;border-bottom:0}.bar-nav{top:0}.title{position:absolute;display:block;width:100%;padding:0;margin:0 -10px;font-size:17px;font-weight:500;line-height:44px;color:#000;text-align:center;white-space:nowrap}.title a{color:inherit}.bar-tab{bottom:0;display:table;width:100%;height:50px;padding:0;table-layout:fixed;border-top:1px solid #ddd;border-bottom:0}.bar-tab .tab-item{display:table-cell;width:1%;height:50px;color:#929292;text-align:center;vertical-align:middle}.bar-tab .tab-item.active,.bar-tab .tab-item:active{color:#428bca}.bar-tab .tab-item .icon{top:3px;width:24px;height:24px;padding-top:0;padding-bottom:0}.bar-tab .tab-item .icon~.tab-label{display:block;font-size:11px}.bar .btn{position:relative;top:7px;z-index:20;padding:6px 12px 7px;margin-top:0;font-weight:400}.bar .btn.pull-right{margin-left:10px}.bar .btn.pull-left{margin-right:10px}.bar .btn-link{top:0;padding:0;font-size:16px;line-height:44px;color:#428bca;border:0}.bar .btn-link.active,.bar .btn-link:active{color:#3071a9}.bar .btn-block{top:6px;padding:7px 0;margin-bottom:0;font-size:16px}.bar .btn-nav.pull-left{margin-left:-5px}.bar .btn-nav.pull-left .icon-left-nav{margin-right:-3px}.bar .btn-nav.pull-right{margin-right:-5px}.bar .btn-nav.pull-right .icon-right-nav{margin-left:-3px}.bar .icon{position:relative;z-index:20;padding-top:10px;padding-bottom:10px;font-size:24px}.bar .btn .icon{top:3px;padding:0}.bar .title .icon{padding:0}.bar .title .icon.icon-caret{top:4px;margin-left:-5px}.bar input[type=search]{height:29px;margin:6px 0}.bar .segmented-control{top:7px;margin:0 auto}.badge{display:inline-block;padding:2px 9px 3px;font-size:12px;line-height:1;color:#333;background-color:rgba(0,0,0,.15);border-radius:100px}.badge.badge-inverted{padding:0 5px 0 0;background-color:transparent}.badge-primary{color:#fff;background-color:#428bca}.badge-primary.badge-inverted{color:#428bca}.badge-positive{color:#fff;background-color:#5cb85c}.badge-positive.badge-inverted{color:#5cb85c}.badge-negative{color:#fff;background-color:#d9534f}.badge-negative.badge-inverted{color:#d9534f}.card{margin:10px;overflow:hidden;background-color:#fff;border:1px solid #ddd;border-radius:6px}.card .table-view{margin-bottom:0;border-top:0;border-bottom:0}.card .table-view .table-view-divider:first-child{top:0;border-top-left-radius:6px;border-top-right-radius:6px}.card .table-view .table-view-divider:last-child{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.card .table-view-cell:last-child{border-bottom:0}.table-view{padding-left:0;margin-top:0;margin-bottom:15px;list-style:none;background-color:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.table-view-cell{position:relative;padding:11px 65px 11px 15px;overflow:hidden;border-bottom:1px solid #ddd}.table-view-cell:last-child{border-bottom:0}.table-view-cell>a:not(.btn){position:relative;display:block;padding:inherit;margin:-11px -65px -11px -15px;overflow:hidden;color:inherit}.table-view-cell>a:not(.btn):active{background-color:#eee}.table-view-cell p{margin-bottom:0}.table-view-divider{padding-top:6px;padding-bottom:6px;padding-left:15px;margin-top:-1px;margin-left:0;font-weight:500;color:#999;background-color:#fafafa;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.table-view .media,.table-view .media-body{overflow:hidden}.table-view .media-object.pull-left{margin-right:10px}.table-view .media-object.pull-right{margin-left:10px}.table-view-cell>.badge,.table-view-cell>.btn,.table-view-cell>.toggle,.table-view-cell>a>.badge,.table-view-cell>a>.btn,.table-view-cell>a>.toggle{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.table-view-cell .navigate-left>.badge,.table-view-cell .navigate-left>.btn,.table-view-cell .navigate-left>.toggle,.table-view-cell .navigate-right>.badge,.table-view-cell .navigate-right>.btn,.table-view-cell .navigate-right>.toggle,.table-view-cell .push-left>.badge,.table-view-cell .push-left>.btn,.table-view-cell .push-left>.toggle,.table-view-cell .push-right>.badge,.table-view-cell .push-right>.btn,.table-view-cell .push-right>.toggle,.table-view-cell>a .navigate-left>.badge,.table-view-cell>a .navigate-left>.btn,.table-view-cell>a .navigate-left>.toggle,.table-view-cell>a .navigate-right>.badge,.table-view-cell>a .navigate-right>.btn,.table-view-cell>a .navigate-right>.toggle,.table-view-cell>a .push-left>.badge,.table-view-cell>a .push-left>.btn,.table-view-cell>a .push-left>.toggle,.table-view-cell>a .push-right>.badge,.table-view-cell>a .push-right>.btn,.table-view-cell>a .push-right>.toggle{right:35px}.content>.table-view:first-child{margin-top:15px}button,input,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:100%;height:35px;-webkit-appearance:none;padding:0 15px;margin-bottom:15px;line-height:21px;background-color:#fff;border:1px solid #ddd;border-radius:3px;outline:0}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0 10px;font-size:16px;border-radius:20px}input[type=search]:focus{text-align:left}textarea{height:auto}select{height:auto;font-size:14px;background-color:#f8f8f8;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.input-group{background-color:#fff}.input-group input,.input-group textarea{margin-bottom:0;background-color:transparent;border-top:0;border-right:0;border-left:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.input-row{height:35px;overflow:hidden;border-bottom:1px solid #ddd}.input-row label{float:left;width:35%;padding:8px 15px;font-family:"Helvetica Neue",Helvetica,sans-serif;line-height:1.1}.input-row input{float:right;width:65%;padding-left:0;margin-bottom:0;border:0}.segmented-control{position:relative;display:table;overflow:hidden;font-size:12px;font-weight:400;background-color:#fff;border:1px solid #ccc;border-radius:3px}.segmented-control .control-item{display:table-cell;width:1%;padding-top:6px;padding-bottom:7px;overflow:hidden;line-height:1;color:#333;text-align:center;text-overflow:ellipsis;white-space:nowrap;border-left:1px solid #ccc}.segmented-control .control-item:first-child{border-left-width:0}.segmented-control .control-item:active{background-color:#eee}.segmented-control .control-item.active{background-color:#ccc}.segmented-control-primary{border-color:#428bca}.segmented-control-primary .control-item{color:#428bca;border-color:inherit}.segmented-control-primary .control-item:active{background-color:#cde1f1}.segmented-control-primary .control-item.active{color:#fff;background-color:#428bca}.segmented-control-positive{border-color:#5cb85c}.segmented-control-positive .control-item{color:#5cb85c;border-color:inherit}.segmented-control-positive .control-item:active{background-color:#d8eed8}.segmented-control-positive .control-item.active{color:#fff;background-color:#5cb85c}.segmented-control-negative{border-color:#d9534f}.segmented-control-negative .control-item{color:#d9534f;border-color:inherit}.segmented-control-negative .control-item:active{background-color:#f9e2e2}.segmented-control-negative .control-item.active{color:#fff;background-color:#d9534f}.control-content{display:none}.control-content.active{display:block}.popover{position:fixed;top:55px;left:50%;z-index:20;display:none;width:280px;margin-left:-140px;background-color:#fff;border-radius:6px;-webkit-box-shadow:0 0 15px rgba(0,0,0,.1);box-shadow:0 0 15px rgba(0,0,0,.1);opacity:0;-webkit-transition:all .25s linear;-moz-transition:all .25s linear;transition:all .25s linear;-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}.popover:before{position:absolute;top:-15px;left:50%;width:0;height:0;margin-left:-15px;content:'';border-right:15px solid transparent;border-bottom:15px solid #fff;border-left:15px solid transparent}.popover.visible{opacity:1;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.popover .bar~.table-view{padding-top:44px}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:15;background-color:rgba(0,0,0,.3)}.popover .btn-block{margin-bottom:5px}.popover .btn-block:last-child{margin-bottom:0}.popover .bar-nav{border-bottom:1px solid #ddd;border-top-left-radius:12px;border-top-right-radius:12px;-webkit-box-shadow:none;box-shadow:none}.popover .table-view{max-height:300px;margin-bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;background-color:#fff;border-top:0;border-bottom:0;border-radius:6px}.modal{position:fixed;top:0;z-index:11;width:100%;min-height:100%;overflow:hidden;background-color:#fff;opacity:0;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;-moz-transition:-moz-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.modal.active{height:100%;opacity:1;-webkit-transition:-webkit-transform .25s;-moz-transition:-moz-transform .25s;transition:transform .25s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slider{width:100%;overflow:hidden;background-color:#000}.slider .slide-group{position:relative;font-size:0;white-space:nowrap;-webkit-transition:all 0s linear;-moz-transition:all 0s linear;transition:all 0s linear}.slider .slide-group .slide{display:inline-block;width:100%;height:100%;font-size:14px;vertical-align:top}.toggle{position:relative;display:block;width:74px;height:30px;background-color:#fff;border:2px solid #ddd;border-radius:20px;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background-color,border;-moz-transition-property:background-color,border;transition-property:background-color,border}.toggle .toggle-handle{position:absolute;top:-1px;left:-1px;z-index:2;width:28px;height:28px;background-color:#fff;border:1px solid #ddd;border-radius:100px;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:-webkit-transform,border,width;-moz-transition-property:-moz-transform,border,width;transition-property:transform,border,width}.toggle:before{position:absolute;top:3px;right:11px;font-size:13px;color:#999;text-transform:uppercase;content:"Off"}.toggle.active{background-color:#5cb85c;border:2px solid #5cb85c}.toggle.active .toggle-handle{border-color:#5cb85c;-webkit-transform:translate3d(44px,0,0);-ms-transform:translate3d(44px,0,0);transform:translate3d(44px,0,0)}.toggle.active:before{right:auto;left:15px;color:#fff;content:"On"}.toggle input[type=checkbox]{display:none}.content.fade{left:0;opacity:0}.content.fade.in{opacity:1}.content.sliding{z-index:2;-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.content.sliding.left{z-index:1;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.content.sliding.right{z-index:3;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.navigate-left:after,.navigate-right:after,.push-left:after,.push-right:after{position:absolute;top:50%;display:inline-block;font-family:Ratchicons;font-size:inherit;line-height:1;color:#bbb;text-decoration:none;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-font-smoothing:antialiased}.navigate-left:after,.push-left:after{left:15px;content:'\e822'}.navigate-right:after,.push-right:after{right:15px;content:'\e826'}@font-face{font-family:Ratchicons;font-style:normal;font-weight:400;src:url(../fonts/ratchicons.eot);src:url(../fonts/ratchicons.eot?#iefix) format("embedded-opentype"),url(../fonts/ratchicons.woff) format("woff"),url(../fonts/ratchicons.ttf) format("truetype"),url(../fonts/ratchicons.svg#svgFontName) format("svg")}.icon{display:inline-block;font-family:Ratchicons;font-size:24px;line-height:1;text-decoration:none;-webkit-font-smoothing:antialiased}.icon-back:before{content:'\e80a'}.icon-bars:before{content:'\e80e'}.icon-caret:before{content:'\e80f'}.icon-check:before{content:'\e810'}.icon-close:before{content:'\e811'}.icon-code:before{content:'\e812'}.icon-compose:before{content:'\e813'}.icon-download:before{content:'\e815'}.icon-edit:before{content:'\e829'}.icon-forward:before{content:'\e82a'}.icon-gear:before{content:'\e821'}.icon-home:before{content:'\e82b'}.icon-info:before{content:'\e82c'}.icon-list:before{content:'\e823'}.icon-more-vertical:before{content:'\e82e'}.icon-more:before{content:'\e82f'}.icon-pages:before{content:'\e824'}.icon-pause:before{content:'\e830'}.icon-person:before{content:'\e832'}.icon-play:before{content:'\e816'}.icon-plus:before{content:'\e817'}.icon-refresh:before{content:'\e825'}.icon-search:before{content:'\e819'}.icon-share:before{content:'\e81a'}.icon-sound:before{content:'\e827'}.icon-sound2:before{content:'\e828'}.icon-sound3:before{content:'\e80b'}.icon-sound4:before{content:'\e80c'}.icon-star-filled:before{content:'\e81b'}.icon-star:before{content:'\e81c'}.icon-stop:before{content:'\e81d'}.icon-trash:before{content:'\e81e'}.icon-up-nav:before{content:'\e81f'}.icon-up:before{content:'\e80d'}.icon-right-nav:before{content:'\e818'}.icon-right:before{content:'\e826'}.icon-down-nav:before{content:'\e814'}.icon-down:before{content:'\e820'}.icon-left-nav:before{content:'\e82d'}.icon-left:before{content:'\e822'} \ No newline at end of file diff --git a/ExerciseThree/dist/fonts/ratchicons.eot b/ExerciseThree/dist/fonts/ratchicons.eot new file mode 100644 index 0000000..536e572 Binary files /dev/null and b/ExerciseThree/dist/fonts/ratchicons.eot differ diff --git a/ExerciseThree/dist/fonts/ratchicons.svg b/ExerciseThree/dist/fonts/ratchicons.svg new file mode 100644 index 0000000..3abf5dd --- /dev/null +++ b/ExerciseThree/dist/fonts/ratchicons.svg @@ -0,0 +1,61 @@ + + + +Copyright (C) 2014 by original authors @ fontello.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ExerciseThree/dist/fonts/ratchicons.ttf b/ExerciseThree/dist/fonts/ratchicons.ttf new file mode 100644 index 0000000..927eb58 Binary files /dev/null and b/ExerciseThree/dist/fonts/ratchicons.ttf differ diff --git a/ExerciseThree/dist/fonts/ratchicons.woff b/ExerciseThree/dist/fonts/ratchicons.woff new file mode 100644 index 0000000..25f1e75 Binary files /dev/null and b/ExerciseThree/dist/fonts/ratchicons.woff differ diff --git a/ExerciseThree/dist/js/ratchet.js b/ExerciseThree/dist/js/ratchet.js new file mode 100644 index 0000000..41d9f06 --- /dev/null +++ b/ExerciseThree/dist/js/ratchet.js @@ -0,0 +1,944 @@ +/*! + * ===================================================== + * Ratchet v2.0.2 (http://goratchet.com) + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * + * v2.0.2 designed by @connors. + * ===================================================== + */ +/* ======================================================================== + * Ratchet: modals.js v2.0.2 + * http://goratchet.com/components#modals + * ======================================================================== + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * ======================================================================== */ + +!(function () { + 'use strict'; + + var findModals = function (target) { + var i; + var modals = document.querySelectorAll('a'); + + for (; target && target !== document; target = target.parentNode) { + for (i = modals.length; i--;) { + if (modals[i] === target) { + return target; + } + } + } + }; + + var getModal = function (event) { + var modalToggle = findModals(event.target); + if (modalToggle && modalToggle.hash) { + return document.querySelector(modalToggle.hash); + } + }; + + window.addEventListener('touchend', function (event) { + var modal = getModal(event); + if (modal) { + if (modal && modal.classList.contains('modal')) { + modal.classList.toggle('active'); + } + event.preventDefault(); // prevents rewriting url (apps can still use hash values in url) + } + }); +}()); + +/* ======================================================================== + * Ratchet: popovers.js v2.0.2 + * http://goratchet.com/components#popovers + * ======================================================================== + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * ======================================================================== */ + +!(function () { + 'use strict'; + + var popover; + + var findPopovers = function (target) { + var i; + var popovers = document.querySelectorAll('a'); + + for (; target && target !== document; target = target.parentNode) { + for (i = popovers.length; i--;) { + if (popovers[i] === target) { + return target; + } + } + } + }; + + var onPopoverHidden = function () { + popover.style.display = 'none'; + popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); + }; + + var backdrop = (function () { + var element = document.createElement('div'); + + element.classList.add('backdrop'); + + element.addEventListener('touchend', function () { + popover.addEventListener('webkitTransitionEnd', onPopoverHidden); + popover.classList.remove('visible'); + popover.parentNode.removeChild(backdrop); + }); + + return element; + }()); + + var getPopover = function (e) { + var anchor = findPopovers(e.target); + + if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) { + return; + } + + try { + popover = document.querySelector(anchor.hash); + } + catch (error) { + popover = null; + } + + if (popover === null) { + return; + } + + if (!popover || !popover.classList.contains('popover')) { + return; + } + + return popover; + }; + + var showHidePopover = function (e) { + var popover = getPopover(e); + + if (!popover) { + return; + } + + popover.style.display = 'block'; + popover.offsetHeight; + popover.classList.add('visible'); + + popover.parentNode.appendChild(backdrop); + }; + + window.addEventListener('touchend', showHidePopover); + +}()); + +/* ======================================================================== + * Ratchet: push.js v2.0.2 + * http://goratchet.com/components#push + * ======================================================================== + * inspired by @defunkt's jquery.pjax.js + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * ======================================================================== */ + +/* global _gaq: true */ + +!(function () { + 'use strict'; + + var noop = function () {}; + + + // Pushstate caching + // ================== + + var isScrolling; + var maxCacheLength = 20; + var cacheMapping = sessionStorage; + var domCache = {}; + var transitionMap = { + slideIn : 'slide-out', + slideOut : 'slide-in', + fade : 'fade' + }; + + var bars = { + bartab : '.bar-tab', + barnav : '.bar-nav', + barfooter : '.bar-footer', + barheadersecondary : '.bar-header-secondary' + }; + + var cacheReplace = function (data, updates) { + PUSH.id = data.id; + if (updates) { + data = getCached(data.id); + } + cacheMapping[data.id] = JSON.stringify(data); + window.history.replaceState(data.id, data.title, data.url); + domCache[data.id] = document.body.cloneNode(true); + }; + + var cachePush = function () { + var id = PUSH.id; + + var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); + var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); + + cacheBackStack.push(id); + + while (cacheForwardStack.length) { + delete cacheMapping[cacheForwardStack.shift()]; + } + while (cacheBackStack.length > maxCacheLength) { + delete cacheMapping[cacheBackStack.shift()]; + } + + window.history.pushState(null, '', cacheMapping[PUSH.id].url); + + cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); + cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); + }; + + var cachePop = function (id, direction) { + var forward = direction === 'forward'; + var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); + var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); + var pushStack = forward ? cacheBackStack : cacheForwardStack; + var popStack = forward ? cacheForwardStack : cacheBackStack; + + if (PUSH.id) { + pushStack.push(PUSH.id); + } + popStack.pop(); + + cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); + cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); + }; + + var getCached = function (id) { + return JSON.parse(cacheMapping[id] || null) || {}; + }; + + var getTarget = function (e) { + var target = findTarget(e.target); + + if (!target || + e.which > 1 || + e.metaKey || + e.ctrlKey || + isScrolling || + location.protocol !== target.protocol || + location.host !== target.host || + !target.hash && /#/.test(target.href) || + target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') || + target.getAttribute('data-ignore') === 'push') { return; } + + return target; + }; + + + // Main event handlers (touchend, popstate) + // ========================================== + + var touchend = function (e) { + var target = getTarget(e); + + if (!target) { + return; + } + + e.preventDefault(); + + PUSH({ + url : target.href, + hash : target.hash, + timeout : target.getAttribute('data-timeout'), + transition : target.getAttribute('data-transition') + }); + }; + + var popstate = function (e) { + var key; + var barElement; + var activeObj; + var activeDom; + var direction; + var transition; + var transitionFrom; + var transitionFromObj; + var id = e.state; + + if (!id || !cacheMapping[id]) { + return; + } + + direction = PUSH.id < id ? 'forward' : 'back'; + + cachePop(id, direction); + + activeObj = getCached(id); + activeDom = domCache[id]; + + if (activeObj.title) { + document.title = activeObj.title; + } + + if (direction === 'back') { + transitionFrom = JSON.parse(direction === 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack); + transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]); + } else { + transitionFromObj = activeObj; + } + + if (direction === 'back' && !transitionFromObj.id) { + return (PUSH.id = id); + } + + transition = direction === 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition; + + if (!activeDom) { + return PUSH({ + id : activeObj.id, + url : activeObj.url, + title : activeObj.title, + timeout : activeObj.timeout, + transition : transition, + ignorePush : true + }); + } + + if (transitionFromObj.transition) { + activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true)); + for (key in bars) { + if (bars.hasOwnProperty(key)) { + barElement = document.querySelector(bars[key]); + if (activeObj[key]) { + swapContent(activeObj[key], barElement); + } else if (barElement) { + barElement.parentNode.removeChild(barElement); + } + } + } + } + + swapContent( + (activeObj.contents || activeDom).cloneNode(true), + document.querySelector('.content'), + transition + ); + + PUSH.id = id; + + document.body.offsetHeight; // force reflow to prevent scroll + }; + + + // Core PUSH functionality + // ======================= + + var PUSH = function (options) { + var key; + var xhr = PUSH.xhr; + + options.container = options.container || options.transition ? document.querySelector('.content') : document.body; + + for (key in bars) { + if (bars.hasOwnProperty(key)) { + options[key] = options[key] || document.querySelector(bars[key]); + } + } + + if (xhr && xhr.readyState < 4) { + xhr.onreadystatechange = noop; + xhr.abort(); + } + + xhr = new XMLHttpRequest(); + xhr.open('GET', options.url, true); + xhr.setRequestHeader('X-PUSH', 'true'); + + xhr.onreadystatechange = function () { + if (options._timeout) { + clearTimeout(options._timeout); + } + if (xhr.readyState === 4) { + xhr.status === 200 ? success(xhr, options) : failure(options.url); + } + }; + + if (!PUSH.id) { + cacheReplace({ + id : +new Date(), + url : window.location.href, + title : document.title, + timeout : options.timeout, + transition : null + }); + } + + if (options.timeout) { + options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout); + } + + xhr.send(); + + if (xhr.readyState && !options.ignorePush) { + cachePush(); + } + }; + + + // Main XHR handlers + // ================= + + var success = function (xhr, options) { + var key; + var barElement; + var data = parseXHR(xhr, options); + + if (!data.contents) { + return locationReplace(options.url); + } + + if (data.title) { + document.title = data.title; + } + + if (options.transition) { + for (key in bars) { + if (bars.hasOwnProperty(key)) { + barElement = document.querySelector(bars[key]); + if (data[key]) { + swapContent(data[key], barElement); + } else if (barElement) { + barElement.parentNode.removeChild(barElement); + } + } + } + } + + swapContent(data.contents, options.container, options.transition, function () { + cacheReplace({ + id : options.id || +new Date(), + url : data.url, + title : data.title, + timeout : options.timeout, + transition : options.transition + }, options.id); + triggerStateChange(); + }); + + if (!options.ignorePush && window._gaq) { + _gaq.push(['_trackPageview']); // google analytics + } + if (!options.hash) { + return; + } + }; + + var failure = function (url) { + throw new Error('Could not get: ' + url); + }; + + + // PUSH helpers + // ============ + + var swapContent = function (swap, container, transition, complete) { + var enter; + var containerDirection; + var swapDirection; + + if (!transition) { + if (container) { + container.innerHTML = swap.innerHTML; + } else if (swap.classList.contains('content')) { + document.body.appendChild(swap); + } else { + document.body.insertBefore(swap, document.querySelector('.content')); + } + } else { + enter = /in$/.test(transition); + + if (transition === 'fade') { + container.classList.add('in'); + container.classList.add('fade'); + swap.classList.add('fade'); + } + + if (/slide/.test(transition)) { + swap.classList.add('sliding-in', enter ? 'right' : 'left'); + swap.classList.add('sliding'); + container.classList.add('sliding'); + } + + container.parentNode.insertBefore(swap, container); + } + + if (!transition) { + complete && complete(); + } + + if (transition === 'fade') { + container.offsetWidth; // force reflow + container.classList.remove('in'); + var fadeContainerEnd = function () { + container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); + swap.classList.add('in'); + swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); + }; + var fadeSwapEnd = function () { + swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); + container.parentNode.removeChild(container); + swap.classList.remove('fade'); + swap.classList.remove('in'); + complete && complete(); + }; + container.addEventListener('webkitTransitionEnd', fadeContainerEnd); + + } + + if (/slide/.test(transition)) { + var slideEnd = function () { + swap.removeEventListener('webkitTransitionEnd', slideEnd); + swap.classList.remove('sliding', 'sliding-in'); + swap.classList.remove(swapDirection); + container.parentNode.removeChild(container); + complete && complete(); + }; + + container.offsetWidth; // force reflow + swapDirection = enter ? 'right' : 'left'; + containerDirection = enter ? 'left' : 'right'; + container.classList.add(containerDirection); + swap.classList.remove(swapDirection); + swap.addEventListener('webkitTransitionEnd', slideEnd); + } + }; + + var triggerStateChange = function () { + var e = new CustomEvent('push', { + detail: { state: getCached(PUSH.id) }, + bubbles: true, + cancelable: true + }); + + window.dispatchEvent(e); + }; + + var findTarget = function (target) { + var i; + var toggles = document.querySelectorAll('a'); + + for (; target && target !== document; target = target.parentNode) { + for (i = toggles.length; i--;) { + if (toggles[i] === target) { + return target; + } + } + } + }; + + var locationReplace = function (url) { + window.history.replaceState(null, '', '#'); + window.location.replace(url); + }; + + var extendWithDom = function (obj, fragment, dom) { + var i; + var result = {}; + + for (i in obj) { + if (obj.hasOwnProperty(i)) { + result[i] = obj[i]; + } + } + + Object.keys(bars).forEach(function (key) { + var el = dom.querySelector(bars[key]); + if (el) { + el.parentNode.removeChild(el); + } + result[key] = el; + }); + + result.contents = dom.querySelector(fragment); + + return result; + }; + + var parseXHR = function (xhr, options) { + var head; + var body; + var data = {}; + var responseText = xhr.responseText; + + data.url = options.url; + + if (!responseText) { + return data; + } + + if (/]*>([\s\S.]*)<\/head>/i)[0]; + body.innerHTML = responseText.match(/]*>([\s\S.]*)<\/body>/i)[0]; + } else { + head = body = document.createElement('div'); + head.innerHTML = responseText; + } + + data.title = head.querySelector('title'); + var text = 'innerText' in data.title ? 'innerText' : 'textContent'; + data.title = data.title && data.title[text].trim(); + + if (options.transition) { + data = extendWithDom(data, '.content', body); + } else { + data.contents = body; + } + + return data; + }; + + + // Attach PUSH event handlers + // ========================== + + window.addEventListener('touchstart', function () { isScrolling = false; }); + window.addEventListener('touchmove', function () { isScrolling = true; }); + window.addEventListener('touchend', touchend); + window.addEventListener('click', function (e) { if (getTarget(e)) {e.preventDefault();} }); + window.addEventListener('popstate', popstate); + window.PUSH = PUSH; + +}()); + +/* ======================================================================== + * Ratchet: segmented-controllers.js v2.0.2 + * http://goratchet.com/components#segmentedControls + * ======================================================================== + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * ======================================================================== */ + +!(function () { + 'use strict'; + + var getTarget = function (target) { + var i; + var segmentedControls = document.querySelectorAll('.segmented-control .control-item'); + + for (; target && target !== document; target = target.parentNode) { + for (i = segmentedControls.length; i--;) { + if (segmentedControls[i] === target) { + return target; + } + } + } + }; + + window.addEventListener('touchend', function (e) { + var activeTab; + var activeBodies; + var targetBody; + var targetTab = getTarget(e.target); + var className = 'active'; + var classSelector = '.' + className; + + if (!targetTab) { + return; + } + + activeTab = targetTab.parentNode.querySelector(classSelector); + + if (activeTab) { + activeTab.classList.remove(className); + } + + targetTab.classList.add(className); + + if (!targetTab.hash) { + return; + } + + targetBody = document.querySelector(targetTab.hash); + + if (!targetBody) { + return; + } + + activeBodies = targetBody.parentNode.querySelectorAll(classSelector); + + for (var i = 0; i < activeBodies.length; i++) { + activeBodies[i].classList.remove(className); + } + + targetBody.classList.add(className); + }); + + window.addEventListener('click', function (e) { if (getTarget(e.target)) {e.preventDefault();} }); +}()); + +/* ======================================================================== + * Ratchet: sliders.js v2.0.2 + * http://goratchet.com/components#sliders + * ======================================================================== + Adapted from Brad Birdsall's swipe + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * ======================================================================== */ + +!(function () { + 'use strict'; + + var pageX; + var pageY; + var slider; + var deltaX; + var deltaY; + var offsetX; + var lastSlide; + var startTime; + var resistance; + var sliderWidth; + var slideNumber; + var isScrolling; + var scrollableArea; + + var getSlider = function (target) { + var i; + var sliders = document.querySelectorAll('.slider > .slide-group'); + + for (; target && target !== document; target = target.parentNode) { + for (i = sliders.length; i--;) { + if (sliders[i] === target) { + return target; + } + } + } + }; + + var getScroll = function () { + if ('webkitTransform' in slider.style) { + var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/); + var ret = translate3d ? translate3d[1] : 0; + return parseInt(ret, 10); + } + }; + + var setSlideNumber = function (offset) { + var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round'; + slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length)); + slideNumber += offset; + slideNumber = Math.min(slideNumber, 0); + slideNumber = Math.max(-(slider.children.length - 1), slideNumber); + }; + + var onTouchStart = function (e) { + slider = getSlider(e.target); + + if (!slider) { + return; + } + + var firstItem = slider.querySelector('.slide'); + + scrollableArea = firstItem.offsetWidth * slider.children.length; + isScrolling = undefined; + sliderWidth = slider.offsetWidth; + resistance = 1; + lastSlide = -(slider.children.length - 1); + startTime = +new Date(); + pageX = e.touches[0].pageX; + pageY = e.touches[0].pageY; + deltaX = 0; + deltaY = 0; + + setSlideNumber(0); + + slider.style['-webkit-transition-duration'] = 0; + }; + + var onTouchMove = function (e) { + if (e.touches.length > 1 || !slider) { + return; // Exit if a pinch || no slider + } + + deltaX = e.touches[0].pageX - pageX; + deltaY = e.touches[0].pageY - pageY; + pageX = e.touches[0].pageX; + pageY = e.touches[0].pageY; + + if (typeof isScrolling === 'undefined') { + isScrolling = Math.abs(deltaY) > Math.abs(deltaX); + } + + if (isScrolling) { + return; + } + + offsetX = (deltaX / resistance) + getScroll(); + + e.preventDefault(); + + resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 : + slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1; + + slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; + }; + + var onTouchEnd = function (e) { + if (!slider || isScrolling) { + return; + } + + setSlideNumber( + (+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0 + ); + + offsetX = slideNumber * sliderWidth; + + slider.style['-webkit-transition-duration'] = '.2s'; + slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; + + e = new CustomEvent('slide', { + detail: { slideNumber: Math.abs(slideNumber) }, + bubbles: true, + cancelable: true + }); + + slider.parentNode.dispatchEvent(e); + }; + + window.addEventListener('touchstart', onTouchStart); + window.addEventListener('touchmove', onTouchMove); + window.addEventListener('touchend', onTouchEnd); + +}()); + +/* ======================================================================== + * Ratchet: toggles.js v2.0.2 + * http://goratchet.com/components#toggles + * ======================================================================== + Adapted from Brad Birdsall's swipe + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * ======================================================================== */ + +!(function () { + 'use strict'; + + var start = {}; + var touchMove = false; + var distanceX = false; + var toggle = false; + + var findToggle = function (target) { + var i; + var toggles = document.querySelectorAll('.toggle'); + + for (; target && target !== document; target = target.parentNode) { + for (i = toggles.length; i--;) { + if (toggles[i] === target) { + return target; + } + } + } + }; + + window.addEventListener('touchstart', function (e) { + e = e.originalEvent || e; + + toggle = findToggle(e.target); + + if (!toggle) { + return; + } + + var handle = toggle.querySelector('.toggle-handle'); + var toggleWidth = toggle.clientWidth; + var handleWidth = handle.clientWidth; + var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0; + + start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY }; + touchMove = false; + }); + + window.addEventListener('touchmove', function (e) { + e = e.originalEvent || e; + + if (e.touches.length > 1) { + return; // Exit if a pinch + } + + if (!toggle) { + return; + } + + var handle = toggle.querySelector('.toggle-handle'); + var current = e.touches[0]; + var toggleWidth = toggle.clientWidth; + var handleWidth = handle.clientWidth; + var offset = toggleWidth - handleWidth; + + touchMove = true; + distanceX = current.pageX - start.pageX; + + if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) { + return; + } + + e.preventDefault(); + + if (distanceX < 0) { + return (handle.style.webkitTransform = 'translate3d(0,0,0)'); + } + if (distanceX > offset) { + return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'); + } + + handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)'; + + toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active'); + }); + + window.addEventListener('touchend', function (e) { + if (!toggle) { + return; + } + + var handle = toggle.querySelector('.toggle-handle'); + var toggleWidth = toggle.clientWidth; + var handleWidth = handle.clientWidth; + var offset = (toggleWidth - handleWidth); + var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2))); + + if (slideOn) { + handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; + } else { + handle.style.webkitTransform = 'translate3d(0,0,0)'; + } + + toggle.classList[slideOn ? 'add' : 'remove']('active'); + + e = new CustomEvent('toggle', { + detail: { isActive: slideOn }, + bubbles: true, + cancelable: true + }); + + toggle.dispatchEvent(e); + + touchMove = false; + toggle = false; + }); + +}()); diff --git a/ExerciseThree/dist/js/ratchet.min.js b/ExerciseThree/dist/js/ratchet.min.js new file mode 100644 index 0000000..3dde418 --- /dev/null +++ b/ExerciseThree/dist/js/ratchet.min.js @@ -0,0 +1,10 @@ +/*! + * ===================================================== + * Ratchet v2.0.2 (http://goratchet.com) + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * + * v2.0.2 designed by @connors. + * ===================================================== + */ +!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},b=function(b){var c=a(b.target);return c&&c.hash?document.querySelector(c.hash):void 0};window.addEventListener("touchend",function(a){var c=b(a);c&&(c&&c.classList.contains("modal")&&c.classList.toggle("active"),a.preventDefault())})}(),!function(){"use strict";var a,b=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},c=function(){a.style.display="none",a.removeEventListener("webkitTransitionEnd",c)},d=function(){var b=document.createElement("div");return b.classList.add("backdrop"),b.addEventListener("touchend",function(){a.addEventListener("webkitTransitionEnd",c),a.classList.remove("visible"),a.parentNode.removeChild(d)}),b}(),e=function(c){var d=b(c.target);if(d&&d.hash&&!(d.hash.indexOf("/")>0)){try{a=document.querySelector(d.hash)}catch(e){a=null}if(null!==a&&a&&a.classList.contains("popover"))return a}},f=function(a){var b=e(a);b&&(b.style.display="block",b.offsetHeight,b.classList.add("visible"),b.parentNode.appendChild(d))};window.addEventListener("touchend",f)}(),!function(){"use strict";var a,b=function(){},c=20,d=sessionStorage,e={},f={slideIn:"slide-out",slideOut:"slide-in",fade:"fade"},g={bartab:".bar-tab",barnav:".bar-nav",barfooter:".bar-footer",barheadersecondary:".bar-header-secondary"},h=function(a,b){o.id=a.id,b&&(a=k(a.id)),d[a.id]=JSON.stringify(a),window.history.replaceState(a.id,a.title,a.url),e[a.id]=document.body.cloneNode(!0)},i=function(){var a=o.id,b=JSON.parse(d.cacheForwardStack||"[]"),e=JSON.parse(d.cacheBackStack||"[]");for(e.push(a);b.length;)delete d[b.shift()];for(;e.length>c;)delete d[e.shift()];window.history.pushState(null,"",d[o.id].url),d.cacheForwardStack=JSON.stringify(b),d.cacheBackStack=JSON.stringify(e)},j=function(a,b){var c="forward"===b,e=JSON.parse(d.cacheForwardStack||"[]"),f=JSON.parse(d.cacheBackStack||"[]"),g=c?f:e,h=c?e:f;o.id&&g.push(o.id),h.pop(),d.cacheForwardStack=JSON.stringify(e),d.cacheBackStack=JSON.stringify(f)},k=function(a){return JSON.parse(d[a]||null)||{}},l=function(b){var c=t(b.target);if(!(!c||b.which>1||b.metaKey||b.ctrlKey||a||location.protocol!==c.protocol||location.host!==c.host||!c.hash&&/#/.test(c.href)||c.hash&&c.href.replace(c.hash,"")===location.href.replace(location.hash,"")||"push"===c.getAttribute("data-ignore")))return c},m=function(a){var b=l(a);b&&(a.preventDefault(),o({url:b.href,hash:b.hash,timeout:b.getAttribute("data-timeout"),transition:b.getAttribute("data-transition")}))},n=function(a){var b,c,h,i,l,m,n,p,q=a.state;if(q&&d[q]){if(l=o.id]*>([\s\S.]*)<\/head>/i)[0],d.innerHTML=f.match(/]*>([\s\S.]*)<\/body>/i)[0]):(c=d=document.createElement("div"),c.innerHTML=f),e.title=c.querySelector("title");var g="innerText"in e.title?"innerText":"textContent";return e.title=e.title&&e.title[g].trim(),b.transition?e=v(e,".content",d):e.contents=d,e};window.addEventListener("touchstart",function(){a=!1}),window.addEventListener("touchmove",function(){a=!0}),window.addEventListener("touchend",m),window.addEventListener("click",function(a){l(a)&&a.preventDefault()}),window.addEventListener("popstate",n),window.PUSH=o}(),!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll(".segmented-control .control-item");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchend",function(b){var c,d,e,f=a(b.target),g="active",h="."+g;if(f&&(c=f.parentNode.querySelector(h),c&&c.classList.remove(g),f.classList.add(g),f.hash&&(e=document.querySelector(f.hash)))){d=e.parentNode.querySelectorAll(h);for(var i=0;i .slide-group");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},o=function(){if("webkitTransform"in c.style){var a=c.style.webkitTransform.match(/translate3d\(([^,]*)/),b=a?a[1]:0;return parseInt(b,10)}},p=function(a){var b=a?0>d?"ceil":"floor":"round";k=Math[b](o()/(m/c.children.length)),k+=a,k=Math.min(k,0),k=Math.max(-(c.children.length-1),k)},q=function(f){if(c=n(f.target)){var k=c.querySelector(".slide");m=k.offsetWidth*c.children.length,l=void 0,j=c.offsetWidth,i=1,g=-(c.children.length-1),h=+new Date,a=f.touches[0].pageX,b=f.touches[0].pageY,d=0,e=0,p(0),c.style["-webkit-transition-duration"]=0}},r=function(h){h.touches.length>1||!c||(d=h.touches[0].pageX-a,e=h.touches[0].pageY-b,a=h.touches[0].pageX,b=h.touches[0].pageY,"undefined"==typeof l&&(l=Math.abs(e)>Math.abs(d)),l||(f=d/i+o(),h.preventDefault(),i=0===k&&d>0?a/j+1.25:k===g&&0>d?Math.abs(a)/j+1.25:1,c.style.webkitTransform="translate3d("+f+"px,0,0)"))},s=function(a){c&&!l&&(p(+new Date-h<1e3&&Math.abs(d)>15?0>d?-1:1:0),f=k*j,c.style["-webkit-transition-duration"]=".2s",c.style.webkitTransform="translate3d("+f+"px,0,0)",a=new CustomEvent("slide",{detail:{slideNumber:Math.abs(k)},bubbles:!0,cancelable:!0}),c.parentNode.dispatchEvent(a))};window.addEventListener("touchstart",q),window.addEventListener("touchmove",r),window.addEventListener("touchend",s)}(),!function(){"use strict";var a={},b=!1,c=!1,d=!1,e=function(a){for(var b,c=document.querySelectorAll(".toggle");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchstart",function(c){if(c=c.originalEvent||c,d=e(c.target)){var f=d.querySelector(".toggle-handle"),g=d.clientWidth,h=f.clientWidth,i=d.classList.contains("active")?g-h:0;a={pageX:c.touches[0].pageX-i,pageY:c.touches[0].pageY},b=!1}}),window.addEventListener("touchmove",function(e){if(e=e.originalEvent||e,!(e.touches.length>1)&&d){var f=d.querySelector(".toggle-handle"),g=e.touches[0],h=d.clientWidth,i=f.clientWidth,j=h-i;if(b=!0,c=g.pageX-a.pageX,!(Math.abs(c)c)return f.style.webkitTransform="translate3d(0,0,0)";if(c>j)return f.style.webkitTransform="translate3d("+j+"px,0,0)";f.style.webkitTransform="translate3d("+c+"px,0,0)",d.classList[c>h/2-i/2?"add":"remove"]("active")}}}),window.addEventListener("touchend",function(a){if(d){var e=d.querySelector(".toggle-handle"),f=d.clientWidth,g=e.clientWidth,h=f-g,i=!b&&!d.classList.contains("active")||b&&c>f/2-g/2;e.style.webkitTransform=i?"translate3d("+h+"px,0,0)":"translate3d(0,0,0)",d.classList[i?"add":"remove"]("active"),a=new CustomEvent("toggle",{detail:{isActive:i},bubbles:!0,cancelable:!0}),d.dispatchEvent(a),b=!1,d=!1}})}(); \ No newline at end of file diff --git a/ExerciseThree/index.css b/ExerciseThree/index.css new file mode 100644 index 0000000..b29538e --- /dev/null +++ b/ExerciseThree/index.css @@ -0,0 +1,54 @@ +body { + margin-top: 40px; +} + +#add { + margin-top:0; + height: 40px; +} + +#searchBox { + + height: 200px; + width: 300px; + #border: 1px solid orange; + +} + +#SearchInput { + margin-top: 0px; +} + +#MyForm .inputs { + height: 50px; +} + +#numbers { + + //height: 110px; + //width: 300px; + //border: 1px solid black; + //background-color: #EC9242; + +} + +#numbers2 { + + //height: 110px; + //width: 300px; + //border: 1px solid green; + //background-color: #EC9242; + +} + +#toppy { +background: #7abcff; /* Old browsers */ +background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */ +background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */ +background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */ + +} diff --git a/ExerciseThree/index.css~ b/ExerciseThree/index.css~ new file mode 100644 index 0000000..d5a33e5 --- /dev/null +++ b/ExerciseThree/index.css~ @@ -0,0 +1,58 @@ +body { + margin-top: 40px; +} + +#add { + margin-top:0; + height: 40px; +} + +#SearchInput .input { + top: -40px; +} + +#searchBox { + + height: 200px; + width: 300px; + #border: 1px solid orange; + +} + +#SearchInput { + margin-top: 0px; +} + +#MyForm .inputs { + height: 50px; +} + +#numbers { + + //height: 110px; + //width: 300px; + //border: 1px solid black; + //background-color: #EC9242; + +} + +#numbers2 { + + //height: 110px; + //width: 300px; + //border: 1px solid green; + //background-color: #EC9242; + +} + +#toppy { +background: #7abcff; /* Old browsers */ +background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */ +background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */ +background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */ + +} diff --git a/ExerciseThree/index.html b/ExerciseThree/index.html new file mode 100644 index 0000000..ae153ff --- /dev/null +++ b/ExerciseThree/index.html @@ -0,0 +1,63 @@ + + + + + + + +My Phonebook + + + + + + + + + + + + + + + + + + + + + +
    + +
    + + + +

    Contacts

    +
    + + +
      +
    • + + +
      + Name +

      Number +

      + +
      + + +
      • + + +
    + + +
    + + + + + diff --git a/ExerciseThree/index.html~ b/ExerciseThree/index.html~ new file mode 100644 index 0000000..ae153ff --- /dev/null +++ b/ExerciseThree/index.html~ @@ -0,0 +1,63 @@ + + + + + + + +My Phonebook + + + + + + + + + + + + + + + + + + + + + +
    + +
    + + + +

    Contacts

    +
    + + +
      +
    • + + +
      + Name +

      Number +

      + +
      + + +
      • + + +
    + + +
    + + + + + diff --git a/ExerciseThree/page_2.html b/ExerciseThree/page_2.html new file mode 100644 index 0000000..7f164d0 --- /dev/null +++ b/ExerciseThree/page_2.html @@ -0,0 +1,162 @@ + + + + + + + +My Phonebook + + + + + + + + + + + + + + + + + + + + +
    + +
    + + + + + +

    Contacts

    +
    + + +
      + + + +
    + + +
    + + + + + + + + + + + + + + + + + +
    + +
    +

    Add Contact

    + +
    + +
    + + +
    + +
    + + + + + + + + + + + + +
    + +
    + + +
    + + + + + + + + + + + + +
    + + + +
    + +
    + + + +

    Contacts

    +
    + +
    + + + +
    + + + + + +

    + +
      + + +
    + +
      + + +
    + + + +
    + + + diff --git a/ExerciseThree/page_2.html~ b/ExerciseThree/page_2.html~ new file mode 100644 index 0000000..9c69895 --- /dev/null +++ b/ExerciseThree/page_2.html~ @@ -0,0 +1,162 @@ + + + + + + + +My Phonebook + + + + + + + + + + + + + + + + + + + + +
    + +
    + + + + + +

    Contacts

    +
    + + +
      + + + +
    + + +
    + + + + + + + + + + + + + + + + + +
    + +
    +

    Add Contact

    + +
    + +
    + + +
    + +
    + + + + + + + + + + + + +
    + +
    + + +
    + + + + + + + + + + + + +
    + + + +
    + +
    + + + +

    Contacts

    +
    + +
    + + + +
    + + + + + +

    + +
      + + +
    + +
      + + +
    + + + +
    + + + diff --git a/ExerciseThree/test-Telephone_Directory-utility.js b/ExerciseThree/test-Telephone_Directory-utility.js new file mode 100644 index 0000000..7c22523 --- /dev/null +++ b/ExerciseThree/test-Telephone_Directory-utility.js @@ -0,0 +1,114 @@ +var yellowPages = new AddressBook(); +var nda = new Contact("Ndabenhle", "Ngulube", "Vodacom", "0798900606"); +var nda2 = new Contact("Ndabenhle", "Ndlovu", "Vodacom", "0885421332"); +var tom = new Contact("Tom", "Huddlestone", "MTN", "0544875563"); +var jerry = new Contact("Jerry", "Vilakazi", "CellC", "0837278441"); +var alex = new Contact("Alex", "Emmit", "Vodacom", "082654987"); +var skipper = new Contact("Skipper", "Remy", "MTN", "0721658942"); +var hans = new Contact("Hans", "Zimmer", "CellC", "0897741265"); +var loic = new Contact("Loic", "Remy", "CellC", "0816652003"); +yellowPages.addContact(nda); +yellowPages.addContact(nda2); +yellowPages.addContact(tom); +yellowPages.addContact(jerry); +yellowPages.addContact(alex); +yellowPages.addContact(skipper); +yellowPages.addContact(hans); +yellowPages.addContact(loic); + + +QUnit.test("Contact Class exists",1, function(){ + ok(typeof Contact === "function", "Object exists") +}) + + + +QUnit.test("Address book exists",1, function(){ + ok(typeof AddressBook === "function", "Address book exists") +}) + + + +QUnit.test("Find Nda's cell number",1, function(){ + + notStrictEqual(yellowPages.Find("Ndabenhle"),[ + { + "cellNumber": "0798900606", + "cellProvider": "Vodacom", + "firstName": "Ndabenhle", + "lastName": "Ngulube" + }, + { + "cellNumber": "0885421332", + "cellProvider": "Vodacom", + "firstName": "Ndabenhle", + "lastName": "Ndlovu" + } + ], + "Returns Ndabenhles correct contact details") + }) + + + +QUnit.test("An instance named Nda exists",1, function(){ + + + equal(nda instanceof Contact, true, "Nda is an instance of the constructor") +}) + + + +QUnit.test("Find same first names", 1 , function(){ + + notStrictEqual(yellowPages.Find("Ndabenhle"), [ { firstName: 'Ndabenhle', + lastName: 'Ngulube', + cellProvider: 'Vodacom', + cellNumber: '0798900606' }, + { firstName: 'Ndabenhle', + lastName: 'Ndlovu', + cellProvider: 'Vodacom', + cellNumber: '0885421332' } ]) + }) + + + +QUnit.test("Find same last names", 1 , function(){ + + + notStrictEqual(yellowPages.Find("Remy"), + [ { firstName: 'Skipper', + lastName: 'Remy', + cellProvider: 'MTN', + cellNumber: '0721658942' }, + { firstName: 'Loic', + lastName: 'Remy', + cellProvider: 'CellC', + cellNumber: '0816652003' } ]) + }) + + + +QUnit.test("Find same cell providers", 1 , function(){ + + + notStrictEqual(yellowPages.Find("CellC"), + [ { firstName: 'Jerry', + lastName: 'Vilakazi', + cellProvider: 'CellC', + cellNumber: '0837278441' }, + { firstName: 'Hans', + lastName: 'Zimmer', + cellProvider: 'CellC', + cellNumber: '0897741265' }, + { firstName: 'Loic', + lastName: 'Remy', + cellProvider: 'CellC', + cellNumber: '0816652003' } ]) + }) + + + + + + + diff --git a/ExerciseThree/test-Telephone_Directory-utility.js~ b/ExerciseThree/test-Telephone_Directory-utility.js~ new file mode 100644 index 0000000..c0bf17f --- /dev/null +++ b/ExerciseThree/test-Telephone_Directory-utility.js~ @@ -0,0 +1,117 @@ +var yellowPages = new AddressBook(); +var nda = new Contact("Ndabenhle", "Ngulube", "Vodacom", "0798900606"); +var nda2 = new Contact("Ndabenhle", "Ndlovu", "Vodacom", "0885421332"); +var tom = new Contact("Tom", "Huddlestone", "MTN", "0544875563"); +var jerry = new Contact("Jerry", "Vilakazi", "CellC", "0837278441"); +var alex = new Contact("Alex", "Emmit", "Vodacom", "082654987"); +var skipper = new Contact("Skipper", "Remy", "MTN", "0721658942"); +var hans = new Contact("Hans", "Zimmer", "CellC", "0897741265"); +var loic = new Contact("Loic", "Remy", "CellC", "0816652003"); +yellowPages.addContact(nda); +yellowPages.addContact(nda2); +yellowPages.addContact(tom); +yellowPages.addContact(jerry); +yellowPages.addContact(alex); +yellowPages.addContact(skipper); +yellowPages.addContact(hans); +yellowPages.addContact(loic); + + +QUnit.test("Contact Class exists",1, function(){ + ok(typeof Contact === "function", "Object exists") +}) + + + +QUnit.test("Address book exists",1, function(){ + ok(typeof AddressBook === "function", "Address book exists") +}) + + + +QUnit.test("Find Nda's cell number",1, function(){ + + notStrictEqual(yellowPages.Find("Ndabenhle"),[ + { + "cellNumber": "0798900606", + "cellProvider": "Vodacom", + "firstName": "Ndabenhle", + "lastName": "Ngulube" + }, + { + "cellNumber": "0885421332", + "cellProvider": "Vodacom", + "firstName": "Ndabenhle", + "lastName": "Ndlovu" + } + ], + "Returns Ndabenhles correct contact details") + }) + + + +QUnit.test("An instance named Nda exists",1, function(){ + + + equal(nda instanceof Contact, true, "Nda is an instance of the constructor") +}) + + + +QUnit.test("Find same first names", 1 , function(){ + + notStrictEqual(yellowPages.Find("Ndabenhle"), [ { firstName: 'Ndabenhle', + lastName: 'Ngulube', + cellProvider: 'Vodacom', + cellNumber: '0798900606' }, + { firstName: 'Ndabenhle', + lastName: 'Ndlovu', + cellProvider: 'Vodacom', + cellNumber: '0885421332' } ]) + }) + + + +QUnit.test("Find same last names", 1 , function(){ + + + notStrictEqual(yellowPages.Find("Remy"), + [ { firstName: 'Skipper', + lastName: 'Remy', + cellProvider: 'MTN', + cellNumber: '0721658942' }, + { firstName: 'Loic', + lastName: 'Remy', + cellProvider: 'CellC', + cellNumber: '0816652003' } ]) + }) + + + +QUnit.test("Find same cell providers", 1 , function(){ + + + notStrictEqual(yellowPages.Find("CellC"), + [ { firstName: 'Jerry', + lastName: 'Vilakazi', + cellProvider: 'CellC', + cellNumber: '0837278441' }, + { firstName: 'Hans', + lastName: 'Zimmer', + cellProvider: 'CellC', + cellNumber: '0897741265' }, + { firstName: 'Loic', + lastName: 'Remy', + cellProvider: 'CellC', + cellNumber: '0816652003' } ]) + }) + + + +QUnit.test("Find the number of same cell provider users", 1 , function(){ + deepEqual(numberSameCellProvider("CellC"), "The number of CellC users is 2") +}) + + + + diff --git a/ExerciseTwo/README.md b/ExerciseTwo/README.md index 1c6b54e..7f66ff8 100644 --- a/ExerciseTwo/README.md +++ b/ExerciseTwo/README.md @@ -11,9 +11,9 @@ Do this using TDD using QUnit. ## Create 3 files: * test-number-utility.html - * test-number-utility.js : write your tests in here + * test-number-utility.jos : write your tests in here * number-utility.js : write your number utility in here ## Something more to think about: How would you create a little web application for this? - As before we will get to this later. \ No newline at end of file + As before we will get to this later. diff --git a/ExerciseTwo/README.md~ b/ExerciseTwo/README.md~ new file mode 100644 index 0000000..1c6b54e --- /dev/null +++ b/ExerciseTwo/README.md~ @@ -0,0 +1,19 @@ +# Given a list of numbers separated with spaces. + +* Find the biggest number +* Find the smallest number +* What is the average of all the numbers +* Find all even numbers +* Find all uneven numbers +* Find all prime numbers + +Do this using TDD using QUnit. + +## Create 3 files: + * test-number-utility.html + * test-number-utility.js : write your tests in here + * number-utility.js : write your number utility in here + +## Something more to think about: +How would you create a little web application for this? + As before we will get to this later. \ No newline at end of file diff --git a/ExerciseTwo/number-utility.js b/ExerciseTwo/number-utility.js new file mode 100644 index 0000000..1806e89 --- /dev/null +++ b/ExerciseTwo/number-utility.js @@ -0,0 +1,87 @@ +NumbersTest = function(numbers){ + + this.findLargestNumber = function(){ + + numbers.sort(function(a,b){return b - a}); + var biggestNumber = numbers[0]; + return biggestNumber; + } + + this.findSmallestNumber = function(){ + numbers.sort(function(a,b){return b - a}); + var smallestNumber = numbers[numbers.length - 1]; + return smallestNumber; + } + + this.findAverage = function(){ + numbers.sort(function(a,b){return b - a}); + var sum = 0; + var numCount = numbers.length; + for(i = 0; i < numbers.length; i++){ + sum += numbers[i]; + + } + var average = sum/numCount; + return (average); + } + + this.findEven = function(){ + numbers.sort(function(a,b){return b - a}); + var evenNumbers = []; + for(i = 0; i < numbers.length; i++){ + if(numbers[i]%2 == 0) { + evenNumbers.push(numbers[i]); + } + } + return(evenNumbers); + + } + + this.findOdd = function(){ + numbers.sort(function(a,b){return b - a}); + var oddNumbers = []; + for(i = 0; i < numbers.length; i++){ + if(numbers[i]%2 != 0) { + oddNumbers.push(numbers[i]); + } + } + return(oddNumbers); + } + + this.findPrime = function(){ + var sqrt = [] + var primeNumbers = []; + numbers.sort(function(a,b){return a - b}); + function primeFinder(number){ + + var sqrt = Math.ceil(Math.sqrt(number)); + var factorial = []; + var primeCheck = [] ; + + for (i = sqrt; i > 1; i--){ + factorial.push(i); + } + + for(x in factorial){ + if(number%factorial[x] != 0){ + primeCheck.push(factorial[x]); + } + } + + if(primeCheck.length == factorial.length) { + primeNumbers.push(number); + } + + else{ } + + } + + for (x in numbers){ + primeFinder(numbers[x]) + } + return(primeNumbers); + } + + + +} diff --git a/ExerciseTwo/number-utility.js~ b/ExerciseTwo/number-utility.js~ new file mode 100644 index 0000000..418e694 --- /dev/null +++ b/ExerciseTwo/number-utility.js~ @@ -0,0 +1,57 @@ +NumbersTest = function(numbers){ + + this.findLargestNumber = function(){ + + numbers.sort(function(a,b){return b - a}); + var biggestNumber = numbers[0]; + return biggestNumber; + } + + this.findSmallestNumber = function(){ + numbers.sort(function(a,b){return b - a}); + var smallestNumber = numbers[numbers.length - 1]; + return smallestNumber; + } + + this.findAverage = function(){ + numbers.sort(function(a,b){return b - a}); + var sum = 0; + var numCount = numbers.length; + for(i = 0; i < numbers.length; i++){ + sum += numbers[i]; + + } + var average = sum/numCount; + return (average); + } + + this.findEven = function(){ + numbers.sort(function(a,b){return b - a}); + var evenNumbers = []; + for(i = 0; i < numbers.length; i++){ + if(numbers[i]%2 == 0) { + evenNumbers.push(numbers[i]); + } + } + return(evenNumbers); + + } + + this.findOdd = function(){ + numbers.sort(function(a,b){return b - a}); + var oddNumbers = []; + for(i = 0; i < numbers.length; i++){ + if(numbers[i]%2 != 0) { + oddNumbers.push(numbers[i]); + } + } + return(oddNumbers); + } + + this.findPrime = function(){ + return(0); + } + + + +} diff --git a/ExerciseTwo/test-number-utility.html b/ExerciseTwo/test-number-utility.html new file mode 100644 index 0000000..ac5acc2 --- /dev/null +++ b/ExerciseTwo/test-number-utility.html @@ -0,0 +1,18 @@ + + + + Unit Tests for - Numbers + + + + + + +
    + +
    +
    + +
    + + diff --git a/ExerciseTwo/test-number-utility.html ~ b/ExerciseTwo/test-number-utility.html ~ new file mode 100644 index 0000000..433969b --- /dev/null +++ b/ExerciseTwo/test-number-utility.html ~ @@ -0,0 +1,18 @@ + + + + Unit Tests for - the words utility + + + + + + +
    + +
    +
    + +
    + + diff --git a/ExerciseTwo/test-number-utility.js b/ExerciseTwo/test-number-utility.js new file mode 100644 index 0000000..85676a2 --- /dev/null +++ b/ExerciseTwo/test-number-utility.js @@ -0,0 +1,33 @@ +var numbers = [1,4,23,7,44,867,44,4663,3, 5, 7, 11, 13,23,88,45,234,77,56,88,56,9,6,4,2,3,67, 71, 73, 79, 83, 89, 97,776,4,500,6448,20,22545,9951,3345]; + +QUnit.test("Find the largest number",function(assert){ + var numbersTest = new NumbersTest(numbers); + assert.equal(numbersTest.findLargestNumber(),22545); +}); + +QUnit.test("Find the smallest number", function(assert){ + var numbersTest = new NumbersTest(numbers); + assert.equal(numbersTest.findSmallestNumber(),1); +}); + +QUnit.test("Find average of all numbers",function(assert){ + var numbersTest = new NumbersTest(numbers); + assert.equal(numbersTest.findAverage(),1232.4634146341464) +}); + +QUnit.test("Find all the even numbers", function(assert){ + var numbersTest =new NumbersTest(numbers); + assert.deepEqual(numbersTest.findEven(),[ 6448, 776, 500, 234, 88, 88, 56, 56, 44, 44, 20, 6, 4, 4, 4, 2 ]) +}); + +QUnit.test("Find all the odd numbers", function(assert){ + var numbersTest =new NumbersTest(numbers); + assert.deepEqual(numbersTest.findOdd(),[ 22545, 9951, 4663, 3345, 867, 97, 89, 83, 79, 77, 73, 71, 67, 45, 23, 23, 13, 11, 9, 7, 7, 5, 3, 3, 1 ]) +}); + +QUnit.test("Find all prime numbers",function(assert){ + var numbersTest = new NumbersTest(numbers); + assert.deepEqual(numbersTest.findPrime(),[ 1, 3, 3, 5, 7, 7, 11, 13, 23, 23, 67, 71, 73, 79, 83, 89, 97, 4663 ]); +}); + + diff --git a/ExerciseTwo/test-number-utility.js~ b/ExerciseTwo/test-number-utility.js~ new file mode 100644 index 0000000..35c92a2 --- /dev/null +++ b/ExerciseTwo/test-number-utility.js~ @@ -0,0 +1,33 @@ +var numbers = [1,4,23,7,44,867,44,4663,3, 5, 7, 11, 13,23,88,45,234,77,56,88,56,9,6,4,2,3,67, 71, 73, 79, 83, 89, 97,776,4,500,6448,20,22545,9951,3345]; + +QUnit.test("Find the largest number",function(assert){ + var numbersTest = new NumbersTest(numbers); + assert.equal(numbersTest.findLargestNumber(),22545); +}); + +QUnit.test("Find the smallest number", function(assert){ + var numbersTest = new NumbersTest(numbers); + assert.equal(numbersTest.findSmallestNumber(),1); +}); + +QUnit.test("Find average of all numbers",function(assert){ + var numbersTest = new NumbersTest(numbers); + assert.equal(numbersTest.findAverage(),1232.4634146341464) +}); + +QUnit.test("Find all the even numbers", function(assert){ + var numbersTest =new NumbersTest(numbers); + assert.deepEqual(numbersTest.findEven(),[ 6448, 776, 500, 234, 88, 88, 56, 56, 44, 44, 20, 6, 4, 4, 4, 2 ]) +}); + +QUnit.test("Find all the odd numbers", function(assert){ + var numbersTest =new NumbersTest(numbers); + assert.deepEqual(numbersTest.findOdd(),[ 22545, 9951, 4663, 3345, 867, 97, 89, 83, 79, 77, 73, 71, 67, 45, 23, 23, 13, 11, 9, 7, 7, 5, 3, 3, 1 ]) +}); + +QUnit.test("Find all prime numbers",function(assert){ + var numbersTest = new NumbersTest(numbers); + assert.deepEqual(numbersTest.findPrime(),0); +}); + +