diff --git a/unit_03/w08d02/homework/caesar_cipher_angular.md b/unit_03/w08d02/homework/caesar_cipher_angular.md new file mode 100644 index 0000000..fc7a433 --- /dev/null +++ b/unit_03/w08d02/homework/caesar_cipher_angular.md @@ -0,0 +1,71 @@ +# CAESAR CIPHER + +### Angular js basics + + +## APP + +Make a Caesar Cipher page that takes an input and encodes it with a Caesar Cipher and and displays the encoded input while the user is typing. (no submit button). + +Also make it so the user can decode an encoded message. + + +![page](cipherpage.png) + + +### ANGULAR DIRECTIVES + +- `ng-keyup` +- `ng-model` + + +### CAESAR CIPHER + +https://en.wikipedia.org/wiki/Caesar_cipher + +You can put this Caesar Cipher code in a separate js file (before your main `app.js`), and then reference the `caesarShift` function in your angular controller. + +In the example in the above image, the `amount` is set to `12` for encoding, and `-12` for decoding. + +``` +var caesarShift = function(str, amount) { + + // Wrap the amount + if (amount < 0) + return caesarShift(str, amount + 26); + + // Make an output variable + var output = ''; + + // Go through each character + for (var i = 0; i < str.length; i ++) { + + // Get the character we'll be appending + var c = str[i]; + + // If it's a letter... + if (c.match(/[a-z]/i)) { + + // Get its code + var code = str.charCodeAt(i); + + // Uppercase letters + if ((code >= 65) && (code <= 90)) + c = String.fromCharCode(((code - 65 + amount) % 26) + 65); + + // Lowercase letters + else if ((code >= 97) && (code <= 122)) + c = String.fromCharCode(((code - 97 + amount) % 26) + 97); + + } + + // Append + output += c; + + } + + // All done! + return output; + +}; +``` \ No newline at end of file diff --git a/unit_03/w08d02/homework/cipher_solution/app.js b/unit_03/w08d02/homework/cipher_solution/app.js new file mode 100644 index 0000000..05ecc03 --- /dev/null +++ b/unit_03/w08d02/homework/cipher_solution/app.js @@ -0,0 +1,18 @@ +console.log('app.js'); + +var app = angular.module('cipher', []); + + +app.controller('MainController', [function() { + + this.message = "hi" + + this.encrypt = function() { + this.encrypted = caesarShift(this.original, 12) + } + + this.decrypt = function() { + this.decrypted = caesarShift(this.input, -12) + } + +}]); \ No newline at end of file diff --git a/unit_03/w08d02/homework/cipher_solution/caesarcipher.js b/unit_03/w08d02/homework/cipher_solution/caesarcipher.js new file mode 100644 index 0000000..eff3fa7 --- /dev/null +++ b/unit_03/w08d02/homework/cipher_solution/caesarcipher.js @@ -0,0 +1,40 @@ +var caesarShift = function(str, amount) { + + // Wrap the amount + if (amount < 0) + return caesarShift(str, amount + 26); + + // Make an output variable + var output = ''; + + // Go through each character + for (var i = 0; i < str.length; i ++) { + + // Get the character we'll be appending + var c = str[i]; + + // If it's a letter... + if (c.match(/[a-z]/i)) { + + // Get its code + var code = str.charCodeAt(i); + + // Uppercase letters + if ((code >= 65) && (code <= 90)) + c = String.fromCharCode(((code - 65 + amount) % 26) + 65); + + // Lowercase letters + else if ((code >= 97) && (code <= 122)) + c = String.fromCharCode(((code - 97 + amount) % 26) + 97); + + } + + // Append + output += c; + + } + + // All done! + return output; + +}; \ No newline at end of file diff --git a/unit_03/w08d02/homework/cipher_solution/index.html b/unit_03/w08d02/homework/cipher_solution/index.html new file mode 100644 index 0000000..07fc759 --- /dev/null +++ b/unit_03/w08d02/homework/cipher_solution/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + +
+ +

CAESAR CIPHER

+
+

ENCODE

+
+ Original + +
+ +
+ Encrypted

+ {{ ctrl.encrypted }} +
+
+ +
+

DECODE

+
+ Encrypted + +
+ +
+ Original

+ {{ ctrl.decrypted }} +
+
+
+ + + + \ No newline at end of file diff --git a/unit_03/w08d02/homework/cipher_solution/style.css b/unit_03/w08d02/homework/cipher_solution/style.css new file mode 100644 index 0000000..9cccf18 --- /dev/null +++ b/unit_03/w08d02/homework/cipher_solution/style.css @@ -0,0 +1,32 @@ +body { + background-color: cornflowerblue; + font-family: 'Lato', sans-serif;; +} + +#container { + margin: 0 auto; + width: 900px; + height: 500px; +} + +.box { + text-align: center; + background-color: ivory; + display: inline-block; + height: 200px; width: 400px; + overflow: hidden; + margin-left: 10px; + font-size: 20px; +} + +textarea { + margin: 20 30; +} + +h2 { + color: white; +} + +h1 { + text-align: center; +} \ No newline at end of file diff --git a/unit_03/w08d02/homework/cipherpage.png b/unit_03/w08d02/homework/cipherpage.png new file mode 100644 index 0000000..ba8ee69 Binary files /dev/null and b/unit_03/w08d02/homework/cipherpage.png differ diff --git a/unit_03/w08d02/homework/screenshot.png b/unit_03/w08d02/homework/screenshot.png new file mode 100644 index 0000000..ae255ba Binary files /dev/null and b/unit_03/w08d02/homework/screenshot.png differ diff --git a/unit_03/w08d02/homework/songs_shuffler_angular.md b/unit_03/w08d02/homework/songs_shuffler_angular.md new file mode 100644 index 0000000..aa5f8eb --- /dev/null +++ b/unit_03/w08d02/homework/songs_shuffler_angular.md @@ -0,0 +1,111 @@ +#SONG LYRICS SHUFFLER + +### INTRO TO ANGULARJS BASICS + +#### App + +You will make a static page that displays songs with the song title, author, year, and lyrics. For no really good reason other than to practise `ng-click` and execute controller functions, you will be able to shuffle the order of the lyrics by clicking a shuffle button, as well as hide/show the song by clicking on the title. + +Ultimately, you can add new songs to the page. + +Sample screenshot: + +![](screenshot.png) +#### The app should: +- Display song titles, authors, years, and lyrics line by line +- Hide / show the song by clicking on the title (the title does not get hidden 'cos you still have to click on it to show the song again) +- Shuffle the lyrics by pressing a shuffle button +- Add a new song + - When entering lyrics, the user should separate the lines of lyrics with a comma. **HINT FOR LATER** when the form is submitted, the app could `split` the lines by comma for use in an array + +#### Set up - you will need: +- `index.html` +- `app.js` +- `style.css` if you want to add some style + +Server and database will be introduced tomorrow + + +#### Angular stuff you will probably want: + +#####Display songs +- A link to Angular 1.5 from https://angularjs.org/ +- module / `ng-app` +- controller / `ng-controller` +- `ng-repeat` ( you might want to include a `track by $index` in the directive params, but if you don't need to, then don't) +- `ng-click` (hint: you can pass in $index as a param) +- `ng-if` or alternatively, `ng-hide` and/or `ng-show` +- curlies `{{ }}` + +#####Add a song +- a form with an `ng-submit` +- inputs that rout to `ng-model`s which could be inside a formdata object in the controller maybe. + + +Overall, you will need data and functions in your controller. + +#####Sample data + +``` +this.songs = [ + { + author: "De La Soul", + title: "Ring Ring Ring", + lyrics: [ + "Hey how ya doin'", + "Sorry ya can't get through", + "Why don't you leave your name", + "And your number", + "And I'll get back to you" + ], + year: 1991, + hidden: false + }, { + author: "Ini Kamoze", + title: "Here Comes the Hotstepper", + lyrics: [ + "Here comes the hot stepper", + "I'm the lyrical gangster", + "Pick up the crew in-a de area", + "Still love you like that" + ], + year: 1995, + hidden: false + }, { + author: "Snow", + title: "Informer", + lyrics: [ + "Informer", + "You no say daddy me Snow me-a gon' blame", + "I lick he boom boom down", + "'tective man they say, say daddy me Snow me stab someone down the lane", + "I lick he boom boom down." + ], + year: 1993, + hidden: false + } +]; +``` + +#####Shuffle function +Pass in an array and the shuffle function will randomize the order of the elements + +``` + function shuffle(a) { + var j, x, i; + for (i = a.length; i; i -= 1) { + j = Math.floor(Math.random() * i); + x = a[i - 1]; + a[i - 1] = a[j]; + a[j] = x; + } + return a; + } +``` + + + + + + + diff --git a/unit_03/w08d02/homework/songs_solution/app2.js b/unit_03/w08d02/homework/songs_solution/app2.js new file mode 100644 index 0000000..6ae975a --- /dev/null +++ b/unit_03/w08d02/homework/songs_solution/app2.js @@ -0,0 +1,70 @@ +console.log('y'); + +var app = angular.module('myApp', []); + +app.controller('myController', [function() { + + this.songs = [ + { + author: "De La Soul", + title: "Ring Ring Ring", + lyrics: [ + "Hey how ya doin'", + "Sorry ya can't get through", + "Why don't you leave your name", + "And your number", + "And I'll get back to you" + ], + year: 1991, + hidden: false + }, { + author: "Ini Kamoze", + title: "Here Comes the Hotstepper", + lyrics: [ + "Here comes the hot stepper", + "I'm the lyrical gangster", + "Pick up the crew in-a de area", + "Still love you like that" + ], + year: 1995, + hidden: false + }, { + author: "Snow", + title: "Informer", + lyrics: [ + "Informer", + "You no say daddy me Snow me-a gon' blame", + "I lick he boom boom down", + "'tective man they say, say daddy me Snow me stab someone down the lane", + "I lick he boom boom down." + ], + year: 1993, + hidden: false + } + ]; + + this.toggle = function(index) { + this.songs[index].hidden = !this.songs[index].hidden + } + + this.shuffler = function(index) { + this.songs[index].lyrics = shuffle(this.songs[index].lyrics); + }; + + this.addSong = function() { + this.data.lyrics = this.data.lyrics.split(', ') + this.songs.push(this.data); + } + + function shuffle(a) { + var j, x, i; + for (i = a.length; i; i -= 1) { + j = Math.floor(Math.random() * i); + x = a[i - 1]; + a[i - 1] = a[j]; + a[j] = x; + } + return a; + } + +}]); \ No newline at end of file diff --git a/unit_03/w08d02/homework/songs_solution/index2.html b/unit_03/w08d02/homework/songs_solution/index2.html new file mode 100644 index 0000000..7420f8d --- /dev/null +++ b/unit_03/w08d02/homework/songs_solution/index2.html @@ -0,0 +1,37 @@ + + + + Mangular1 + + + + + + +

SHUFFLER

+
+

{{ song.title }} ({{ song.year }})

+
+

{{ song.author }}

+

+ {{ lyric }} +

+

+
+
+ +
+ +

ADD A SONG

+
+
+
+
+
+ +
+ + + + + diff --git a/unit_03/w08d02/homework/songs_solution/style.css b/unit_03/w08d02/homework/songs_solution/style.css new file mode 100644 index 0000000..7fe6e30 --- /dev/null +++ b/unit_03/w08d02/homework/songs_solution/style.css @@ -0,0 +1,26 @@ +body { + text-align: center; + font-family: monospace; +} + +.song-author { + color: firebrick; +} + +.song-title { + cursor: pointer; +} + +.full-song { + background-color: azure; + width: 400px; + display: inline-block; + vertical-align: top; + margin-right: 10px; + text-align: center; +} + +.field { + width: 300px; + height: 30px; +} \ No newline at end of file