Kristyn Bryan
10 years ago
parent
82bf8f7e68
commit
0898388055
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 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;
|
||||
|
||||
};
|
||||
```
|
||||
@ -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)
|
||||
}
|
||||
|
||||
}]);
|
||||
@ -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;
|
||||
|
||||
};
|
||||
@ -0,0 +1,45 @@
|
||||
<html ng-app="cipher">
|
||||
<head>
|
||||
<title></title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
|
||||
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js'></script>
|
||||
<script type="text/javascript" src="caesarcipher.js"></script>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainController as ctrl">
|
||||
|
||||
<div id="container">
|
||||
|
||||
<h1> CAESAR CIPHER </h1>
|
||||
<div>
|
||||
<h2>ENCODE</h2>
|
||||
<div class="box">
|
||||
Original
|
||||
<textarea rows="10" cols="45" ng-keyup="ctrl.encrypt()" ng-model="ctrl.original" ></textarea>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
Encrypted </br></br>
|
||||
{{ ctrl.encrypted }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>DECODE</h2>
|
||||
<div class="box">
|
||||
Encrypted
|
||||
<textarea rows="10" cols="45" ng-keyup="ctrl.decrypt()" ng-model="ctrl.input" ></textarea>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
Original </br><br/>
|
||||
{{ ctrl.decrypted }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 76 KiB |
@ -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:
|
||||
|
||||
|
||||
#### 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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}]);
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app='myApp'>
|
||||
<head>
|
||||
<title>Mangular1</title>
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
|
||||
<script type="text/javascript" src="app2.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body ng-controller='myController as ctrl'>
|
||||
|
||||
<h1>SHUFFLER</h1>
|
||||
<div class="full-song" ng-repeat="song in ctrl.songs track by $index">
|
||||
<h2 class="song-title" ng-click="ctrl.toggle($index)">{{ song.title }} ({{ song.year }})</h2>
|
||||
<div ng-hide="song.hidden">
|
||||
<h3 class="song-author">{{ song.author }}</h3>
|
||||
<p ng-repeat="lyric in song.lyrics track by $index">
|
||||
{{ lyric }}
|
||||
</p>
|
||||
<button ng-click="ctrl.shuffler($index)">shuffle lyrics</button></br></br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</br>
|
||||
|
||||
<h2>ADD A SONG</h2>
|
||||
<form ng-submit="ctrl.addSong()">
|
||||
<input class="field" type="text" ng-model="ctrl.data.author" placeholder="author"></br>
|
||||
<input class="field" type="text" ng-model="ctrl.data.title" placeholder="title"></br>
|
||||
<input class="field" type="text" ng-model="ctrl.data.year" placeholder="year"></br>
|
||||
<input class="field" type="text" ng-model="ctrl.data.lyrics" placeholder="lyrics separated by comma"></br>
|
||||
<button type="submit">SUBMIT</button>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in new issue