Skip to content

Commit cc17bc7

Browse files
despodespo
committed
5th javascript tutorial
1 parent daef11a commit cc17bc7

File tree

5 files changed

+370
-0
lines changed

5 files changed

+370
-0
lines changed

‎examples/hangman/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="style.css">
4+
<title>codebar.io - Hangman</title>
5+
<script type="text/javascript" src="jquery.js"></script>
6+
<script type="text/javascript" src="script.js"></script>
7+
</head>
8+
<body>
9+
<header>
10+
<img id="logo" src='https://raw.github.com/codebar/planner/master/app/assets/images/logo.png' width='200' />
11+
</header>
12+
<div id="container">
13+
<div class="board">
14+
<div class="hangman-word"> </div>
15+
<div class="remaining-guesses">
16+
<span class="remaining">7</span> guesses left
17+
</div>
18+
19+
<div class="console">
20+
<input type="hidden" class="token"> </input>
21+
<input type="text" maxlength=1 class="letter"> </input>
22+
<button id="guess">Guess</button>
23+
</div>
24+
<div class="attempts"></div>
25+
<button id="new-game">Start a new game</button>
26+
</div>
27+
<br/>
28+
29+
</div>
30+
<footer>
31+
<div id="content"> by <a href="http://codebar.io">codebar</a> </div>
32+
</footer>
33+
</body>
34+
</html>
35+

‎examples/hangman/jquery.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/hangman/script.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
function newGame() {
2+
$.ajax({
3+
type: "POST",
4+
url: "http://hangman-api.herokuapp.com/hangman",
5+
}).done(function(data) {
6+
$('.hangman-word').text(data.hangman);
7+
$('.token').text(data.token);
8+
}).fail(function(data) {
9+
console.log(data)
10+
});
11+
}
12+
13+
function guess(token, letter) {
14+
$.ajax({
15+
type: "PUT",
16+
dataType: 'json',
17+
url: "http://hangman-api.herokuapp.com/hangman",
18+
data: { "token": token, "letter": letter},
19+
beforeSend: function() {
20+
$(".letter").prop('disabled', true);
21+
}
22+
}).done(function(data) {
23+
$('.hangman-word').text(data.hangman);
24+
$('.token').text(data.token);
25+
if (!data.correct) {
26+
failures = $('.wrong').length+1;
27+
handleFailure(failures);
28+
} else {
29+
if (data.hangman.indexOf("_") == -1) {
30+
$('.console').hide();
31+
}
32+
}
33+
cssClass = data.correct ? 'correct' : 'wrong';
34+
$('.attempts').append("<span class=" + cssClass +">"+letter+"</span>");
35+
$(".letter").prop('disabled', false);
36+
}).fail(function(data) {
37+
console.log(data)
38+
});
39+
}
40+
41+
function getSolution(token) {
42+
$.ajax({
43+
type: "GET",
44+
dataType: 'json',
45+
url: "http://hangman-api.herokuapp.com/hangman",
46+
data: { "token": token },
47+
}).done(function(data) {
48+
var hangman_word = $('.hangman-word').text();
49+
var solution = data.solution;
50+
51+
for (var i = solution.length-1; i >= 0; i--) {
52+
if (hangman_word.charAt(i) != solution.charAt(i)) {
53+
error_string = "<span class='error'>"+ solution.charAt(i) + "</span>";
54+
updated_word = hangman_word
55+
hangman_word = updated_word.substr(0, i) + error_string + updated_word.substr(i+1);
56+
} else {
57+
if (hangman_word.indexOf("_") == -1) {
58+
$('.console').hide();
59+
}
60+
}
61+
}
62+
$('.hangman-word').html(hangman_word);
63+
}).fail(function(data) {
64+
console.log(data)
65+
});
66+
}
67+
68+
function handleFailure(failures){
69+
if (failures == 7) {
70+
var token = $('.token').text();
71+
getSolution(token);
72+
endGame();
73+
} else {
74+
wrongAnswer(failures);
75+
}
76+
}
77+
78+
function endGame() {
79+
$('.remaining-guesses').hide();
80+
$('.console').slideToggle(1200);
81+
$("#new-game").show();
82+
}
83+
84+
function wrongAnswer(failures) {
85+
$('.remaining').html(7-failures);
86+
}
87+
88+
$(document).ready(function(){
89+
$('.console').hide();
90+
$('.remaining-guesses').hide();
91+
92+
$(document).on('click', '#new-game', function(e){
93+
$(this).hide();
94+
$('.attempts').empty();
95+
$('#hangman-game').empty();
96+
$('.remaining-guesses').html('<span class="remaining">7</span> guesses left');
97+
$('.remaining-guesses').show();
98+
99+
newGame();
100+
$('.console').slideToggle(1200);
101+
$('.letter').focus();
102+
})
103+
104+
$(document).on('click', '#guess', function(e){
105+
token = $('.token').text();
106+
letter = $('.letter').val();
107+
attempts = $('.attempts').text().toLowerCase();
108+
109+
$('.letter').focus();
110+
111+
if ($.isNumeric(letter) || letter.trim().length < 1 || attempts.indexOf(letter.toLowerCase()) != -1) {
112+
$('.letter').addClass("error");
113+
return;
114+
}
115+
$('.letter').removeClass("error");
116+
$('.letter').val('');
117+
118+
guess(token, letter);
119+
})
120+
});

‎examples/hangman/style.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
body {
2+
font-family: Helvetica, Arial, sans-serif;
3+
border-top: 5px solid #4c4066;
4+
margin: 0px auto;
5+
font-size: 14px;
6+
color: #666666;
7+
font-size: 16px;
8+
}
9+
10+
header {
11+
text-align: center;
12+
background-color: #fdfdfd;
13+
border-bottom: 1px solid #e5e2e0;
14+
}
15+
16+
#logo {
17+
position: relative;
18+
top: -2px;
19+
}
20+
21+
input.error {
22+
border: 2px solid #da5754;
23+
}
24+
25+
span.error {
26+
color: #da5754;
27+
}
28+
29+
.remaining-guesses {
30+
padding-top: 30px;
31+
font-size: 1.5em;
32+
}
33+
34+
#container {
35+
width: 1040px;
36+
margin: 0px auto;
37+
margin-top: 100px;
38+
min-height: 750px;
39+
}
40+
41+
input[type='text'] {
42+
height: 2.2em;
43+
font-size: 2em;
44+
width: 80px;
45+
text-align: center;
46+
padding: 5px;
47+
}
48+
49+
button {
50+
padding: 10px;
51+
margin: 10px;
52+
border: none;
53+
font-size: 1.4em;
54+
}
55+
56+
.correct {
57+
color: '#08a932';
58+
}
59+
60+
.wrong {
61+
color: #da5754;
62+
}
63+
64+
.attempts {
65+
font-size: 2em;
66+
margin-top: 50px;
67+
min-height: 50px;
68+
}
69+
70+
#new-game {
71+
padding: 20px;
72+
margin-top: 10px;
73+
text-decoration: none;
74+
}
75+
76+
.attempts span:not(:last-child):after {
77+
color: black;
78+
content: ", ";
79+
}
80+
81+
.console {
82+
width: 200px;
83+
margin: 100px auto 50px;
84+
}
85+
86+
.hangman-word {
87+
text-align: center;
88+
font-size: 2.5em;
89+
letter-spacing: 0.1em;
90+
font-family: "Lucida Console", Monaco, monospace;
91+
font-weight: bold;
92+
color: #b5b5b5;
93+
}
94+
95+
.board {
96+
margin: 20px;
97+
text-align: center;
98+
}
99+
100+
footer {
101+
padding-bottom: 10px;
102+
border-bottom: 5px solid #4c4066;
103+
position: absolute;
104+
width: 100%;
105+
}
106+
107+
footer #content {
108+
width: 1040px;
109+
margin: 0px auto;
110+
}

‎js/lesson5/tutorial.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
layout: page
3+
title: HTTP Requests, AJAX and APIs (part 2)
4+
---
5+
6+
This is the second tutorial on HTTP Requests, AJAX and APIs. You can find the [first part](../lesson4/tutorial.html) of the tutorial.
7+
8+
## Todays lesson
9+
10+
In the last lesson we've explained an HTTP Requests is when we ask the server some information.
11+
12+
In the two exercises we used the **GET** request. Today we will be building a Hangman game using an existing API that will handle the game logic for us.
13+
14+
We will be using the **POST**, **PUT** and **GET** requests, and other things we've learned in the last couple of lessons.
15+
16+
17+
| Verb | Description |
18+
| ---- | ----------- |
19+
| **GET** | fetching a resource (e.g. /index.html will return the HTML of the page) |
20+
| **PUT** | updating an existing resource. |
21+
| **POST** | Create a new resource. |
22+
23+
24+
##Request using JQuery
25+
26+
To use **POST** and **PUT** requests we must specify the `type` in the `ajax()` call that we introduced in the previous lesson.
27+
28+
You can also specify any `data` as a JSON object.
29+
30+
```js
31+
$.ajax({
32+
type: request_type,
33+
date: { field: 'value', other_field: 'other value' }
34+
...
35+
});
36+
```
37+
38+
##Exercise - Hangman!
39+
40+
[Download](https://gist.github.com/despo/c76a7bd0bef66713a9ac/download) the exercise files or clone them directly from github `git clone https://gist.github.com/c76a7bd0bef66713a9ac.git`
41+
42+
###API
43+
| type | resource | parameters | description |
44+
| ---- | -------- | ---------- | ----------- |
45+
| **POST** | `http://hangman-api.herokuapp.com/hangman` | - | Create a new game |
46+
| **PUT** | `http://hangman-api.herokuapp.com/hangman` | `{ token: game token, letter: guess }` | Guess a letter |
47+
| **GET** | `http://hangman-api.herokuapp.com/hangman` | `{ token: game token }` | Get solution |
48+
49+
###What we will be doing:
50+
51+
1. Create a new game
52+
53+
1. Issue **POST** request
54+
55+
2. Update the displayed string on the page and store the token
56+
57+
- Use the hidden field with the class `token`
58+
59+
3. Don't allow the user to start a new game, hide the **New game** bubtton
60+
61+
2. Interact with the API to try out different guesses
62+
63+
1. Issue **PUT** request
64+
65+
- Use `data.correct` to check if the response was successful or not
66+
67+
2. Update the displayed word
68+
69+
3. Update the stored token
70+
71+
4. Update remaining attempts and display all guesses
72+
73+
- If an attempt is not succesful, appent it to the `$('.attempts')` using a span with the class `wrong`
74+
75+
- You can then find out how many wrong attempts there wer using `$('.wrong').length+1;`
76+
77+
3. On the 7th failure, retrieve the solution using the **GET** request
78+
79+
1. Display the solution, hide the input field and allow a user to start a new game
80+
81+
4. **Bonus** don't process letters, guesses that have already been attempted or empty space
82+
83+
1. You can use JQuery's `$.isNumeric(character))` to check if a letter is a number
84+
85+
2. `trim()` removes all space around a string. You can apply `trim()` and check for the length to make sure the guess is one character long
86+
87+
3. All the attempted guesses are already in `.attempts`. You can use `indexOf(character)` to check if it's contained in a string.
88+
89+
4. Add the class `error` to the letter field when the character is not allowed.
90+
91+
### Other help
92+
93+
- Use `toLowerCase()` for comparing strings as `a` is not the same as `A`
94+
95+
Here is our version of [Hangman](../../examples/hangman/index.html).
96+
97+
---
98+
This ends our **HTTP Requests, AJAX and APIs** tutorial. Is there something you don't understand? Try and go through the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:feedback@codebar.io) and let us know.

0 commit comments

Comments
 (0)