Skip to content

Commit 603e082

Browse files
nathanallennathanallen
committed
inital commit of json to html challenge
0 parents  commit 603e082

File tree

6 files changed

+343
-0
lines changed

6 files changed

+343
-0
lines changed

‎README.md

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Meet Mr. Fox -- JSON to HTML Challenge
2+
3+
<img src="https://media.giphy.com/media/10ZhR5rwzcSnyU/giphy.gif" placeholder="mr fox">
4+
5+
Your goal is to fill in the blanks in Mr. Fox's profile using jQuery, and data from a JSON object.
6+
7+
## Setup
8+
Please clone this repo.
9+
10+
Open `index.html` in your browser, and launch your Chrome Javascript Console.
11+
12+
You will be coding in the files `scripts/app.js` and `index.html`.
13+
14+
Please note that the JSON object is accessible by typing `data`. Each time you refresh it will change a little bit (just to keep you on your toes!).
15+
16+
#### Pre-Requisite Skills
17+
* Getting Values from Objects and Arrays
18+
- Using Bracket Notation
19+
- Using Dot Notation
20+
* Looping over Arrays/Lists
21+
- Using the current index of the loop
22+
* Combining Strings using Concatination
23+
- Creating HTML strings
24+
25+
## Looping Lists
26+
Often we want to do this same thing multiple times, but with values at different indexes.
27+
28+
```
29+
var list = ["a", "b", "c"];
30+
for(var i=0; i<list.length; i++){
31+
console.log(i, list[i]);
32+
}
33+
// 0 a
34+
// 1 b
35+
// 2 c
36+
```
37+
38+
We can do the same thing with the powerful `forEach` Array method:
39+
```
40+
var list = ["a", "b", "c"];
41+
list.forEach(function(value, i){
42+
console.log(i, value);
43+
})
44+
// 0 a
45+
// 1 b
46+
// 2 c
47+
```
48+
49+
## What is JSON?
50+
JSON is a convenient format for transferring data. It is supported in many languages, not just Javascript!
51+
52+
Although Javascript Objects and JSON have a lot in common, JSON follows a slightly more strict format.
53+
54+
Here is an example of a JSON object:
55+
56+
``` json
57+
{
58+
"key": "value"
59+
}
60+
```
61+
62+
We can assign the object to a variable `o`.
63+
64+
```js
65+
var o = {
66+
"key": "value",
67+
list: ["a", "b", "c"]
68+
}
69+
```
70+
71+
To access values, we need to know the name of the key. We can use either **dot notation** or **bracket notation**:
72+
``` js
73+
// dot notation
74+
o.key; //=> "value"
75+
76+
// bracket notation
77+
o["key"]; //=> "value"
78+
o['key']; //=> "value"
79+
```
80+
81+
Sometimes you'll need to "drill" down into an object to get the value you want.
82+
83+
<details>
84+
<summary>**How would you get the value `"c"`?** (Click Here)</summary>
85+
<br>
86+
```js
87+
o.list[2]; // "c"
88+
o.["list"][2]; // "c"
89+
o.['list'][2]; // "c"
90+
o.['list']['2']; // "c"
91+
o.['list']["2"]; // "c"
92+
```
93+
94+
But note that `o.list.2` will *never* work. Why is that?
95+
</details>
96+
97+
## What is Concatination?
98+
When we combine strings together, it's known as "concatination". Here's an example:
99+
100+
```
101+
"1" + "1"; //=> "11"
102+
"what's" + "up?"; //=> "what'sup?"
103+
"hello" + " " + "world"; //=> "hello world"
104+
```
105+
106+
<details>
107+
<summary>**""What'll happen when you "quote" a quote?", he asked, helplessly"** (Click Here)</summary>
108+
<br>
109+
```js
110+
'this "works"'
111+
"and this'll work"
112+
'but don't do this!' // SyntaxError
113+
"He said \"don't\" do this, but I'm clever" // escape inner quotes with forward slash
114+
```
115+
</details>
116+
117+
We can create *HTML strings* by simpling creating a string containing HTML:
118+
119+
```
120+
var p = "<p>simple paragraph</p>";
121+
122+
var words = "words words words";
123+
var dynamic_paragraph = (
124+
"<p>" +
125+
words + "!" +
126+
"</p>"
127+
);
128+
129+
dynamic_paragraph //=> "<p>words words words!</p>"
130+
```

‎index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>JSON & Html Strings</title>
8+
9+
<!-- STYLESHEETS -->
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
11+
<link rel="stylesheet" href="styles/style.css">
12+
13+
<!-- VENDOR SCRIPTS -->
14+
<script src="http://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
15+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
16+
17+
<!-- APPLICATION SCRIPTS -->
18+
<script src="scripts/ignore-setup.js"></script>
19+
<script src="scripts/app.js"></script>
20+
<script src="scripts/ignore-evaluation.js"></script>
21+
</head>
22+
<body>
23+
<div class="container">
24+
<h1>Something Broke!</h1>
25+
26+
<div class="row">
27+
<div class="col-sm-6">
28+
<div class="well">
29+
<h4>var data =</h4>
30+
<pre></pre>
31+
</div>
32+
</div>
33+
34+
<div class="col-sm-6">
35+
<div class="well profile">
36+
<h4>Can you fill in my profile?</h4>
37+
<p>
38+
My name is <span class="first_name">[first name]</span>
39+
and I am a <span class="occupation">[occupation]</span>
40+
from <span class="location">[location]</span>.
41+
</p>
42+
<p>
43+
My friends describe me as <span class="qualities">[quality] [quality]</span>.
44+
</p>
45+
<p>
46+
I have <span class="sibling_count">[#]</span> siblings. Their names and ages are:
47+
<ul class="sibling_list">
48+
<li>[Name] - [Age]</li> <!-- REMOVE EXAMPLE -->
49+
<li>[Name] - [Age]</li> <!-- REMOVE EXAMPLE -->
50+
</ul>
51+
</p>
52+
<p>
53+
My hobbies are:
54+
<span class="hobby_links">
55+
[<a href="https://en.wikipedia.org/wiki/asdf">Hobby</a>] <!-- REMOVE EXAMPLE -->
56+
[<a href="https://en.wikipedia.org/wiki/zfwer">Hobby</a>] <!-- REMOVE EXAMPLE -->
57+
</span>
58+
</p>
59+
<p>
60+
Here is a photo of me:
61+
<br>
62+
<img class="img-responsive center-block" src="http://placehold.it/350x150?text=[profile+image]" title="[profile image]">
63+
</p>
64+
</div>
65+
</div>
66+
</div>
67+
68+
</div>
69+
</body>
70+
</html>

‎scripts/app.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
console.log("Sanity Check: JS is working!");
2+
3+
$(document).on('ready', function(){
4+
5+
$('h1').text("Meet Mr. Fox"); // KEEP
6+
7+
});

‎scripts/ignore-evaluation.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// DO NOT MODIFY
2+
3+
$(document).on('ready', function(){
4+
5+
window.answer_key = [
6+
{expected: data.first_name, selector: ".first_name"},
7+
{expected: data.occupation, selector: ".occupation"},
8+
{expected: data.location, selector: ".location"},
9+
{expected: data.qualities.join(".*"), selector: ".qualities"},
10+
{expected: data.siblings.length, selector: ".sibling_count"},
11+
{expected: data.siblings.map(function(v){ return v.first_name + ".*" + v.age; }).join(".*"), selector: ".sibling_list"},
12+
{expected: data.hobbies.map(function(v){ return v.name; }).join(".*"), selector: '.hobby_links a[href^="https://en.wikipedia.org/wiki/"]'} // hardcoded wiki url
13+
];
14+
15+
16+
var $checkmark = $("<span>", {html: "&checkmark;", class:"bg-success"});
17+
var great_success = true;
18+
19+
// evaluate answers
20+
answer_key.forEach(function(q){
21+
if (!q.expected){ return; } // array is empty, so move on
22+
23+
var pattern = new RegExp(q.expected, 'i'),
24+
$el = $(q.selector);
25+
q.actual = $el.text().trim();
26+
27+
if ( q.actual.match( pattern ) ) {
28+
$el.append( $checkmark.clone() );
29+
} else {
30+
great_success = false;
31+
}
32+
})
33+
34+
// check problem set is complete
35+
if (great_success) {
36+
$("body").prepend($("<img>", {
37+
src: "https://media.giphy.com/media/kNrNdfk2qokHC/giphy.gif",
38+
class: "img-responsive center-block"
39+
}));
40+
}
41+
42+
});
43+
44+
// DO NOT MODIFY

‎scripts/ignore-setup.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
// DO NOT MODIFY
2+
3+
window.data = {
4+
first_name: random_sample(["George", "Walter", "William"],1)[0],
5+
last_name: "Fox",
6+
age: 13,
7+
occupation: random_sample(["Artist", "Entrepreneur"],1)[0],
8+
location: "Sheepsville, New Zealand",
9+
qualities: random_sample([
10+
"honest", "hard-working", "loyal", "creative", "clever", "opportunistic"
11+
]),
12+
siblings: random_sample([
13+
{ first_name: "Chet", age: 5 },
14+
{ first_name: "Wit", age: 7 },
15+
{ first_name: "Dawn", age: 9 },
16+
{ first_name: "Juniper", age: 2 },
17+
{ first_name: "Floyd", age: 12 },
18+
{ first_name: "Nancy", age: 5 },
19+
{ first_name: "Drew", age: 7 }
20+
]),
21+
hobbies: random_sample([
22+
{
23+
name: "Improv",
24+
category: "Theater",
25+
wikipedia_url: "https://en.wikipedia.org/wiki/Improvisational_theatre",
26+
proficiency: "intermediate"
27+
},
28+
{
29+
name: "Demolition",
30+
category: "Construction",
31+
wikipedia_url: "https://en.wikipedia.org/wiki/Demolition",
32+
proficiency: "beginner"
33+
},
34+
{
35+
name: "Howling",
36+
category: "Music",
37+
wikipedia_url: "https://en.wikipedia.org/wiki/Howl",
38+
proficiency: "advanced"
39+
},
40+
{
41+
name: "Motorcycles",
42+
category: "Sport",
43+
wikipedia_url: "https://en.wikipedia.org/wiki/Motorcycle",
44+
proficiency: "intermediate"
45+
},
46+
{
47+
name: "Hunting",
48+
category: "Sport",
49+
wikipedia_url: "https://en.wikipedia.org/wiki/Hunting",
50+
proficiency: "advanced"
51+
}
52+
]),
53+
profile_image: "https://media.giphy.com/media/aiL0BGeWHbtRu/giphy.gif"
54+
}
55+
56+
function random_sample(a, length) {
57+
var n,
58+
swap,
59+
i = a.length,
60+
qty = length || Math.floor(Math.random() * i);
61+
62+
// shuffle the array
63+
if (qty){
64+
while (i--) {
65+
n = Math.floor(Math.random() * i);
66+
swap = a[i];
67+
a[i] = a[n];
68+
a[n] = swap;
69+
}
70+
}
71+
72+
// randomly remove elements
73+
a.length = qty;
74+
75+
return a;
76+
}
77+
78+
$(document).on('ready', function(){
79+
$('pre').text(JSON.stringify(data,true,2))
80+
});
81+
82+
// DO NOT MODIFY

‎styles/style.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
body {
2+
color: #333;
3+
font-family: Helvetica, Arial, sans-serif;
4+
background-color: #FFB232; /* Sanity Check! */
5+
}
6+
7+
h1 {
8+
margin-top: 100px;
9+
text-align: center;
10+
}

0 commit comments

Comments
 (0)