├── .gitignore
├── LICENSE
├── README.md
├── app.js
├── index.html
└── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | exported
2 | raw
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Jason Rhodes
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # tut-functional-js
2 | Functional JS tutorial project code for tutsplus.com
3 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | var beerData = JSON.parse(document.getElementById("beerData").textContent);
 2 | var beerTemplate = document.getElementById("tmpl-beer").textContent;
 3 | var beerList = document.getElementById("beerList");
 4 | var filters = document.getElementById("filters");
 5 | var filterLinks = filters.querySelectorAll("a");
 6 | 
 7 | beerList.innerHTML = _.template(beerTemplate)(beerData);
 8 | 
 9 | filters.addEventListener('click', function (e) {
10 |   e.preventDefault();
11 |   var beers = beerData.beers;
12 |   var clicked = e.target;
13 |   var filter = clicked.dataset.filter;
14 |   var filteredBeers = [];
15 |   var i;
16 | 
17 |   for (i=0; i<filterLinks.length; i++) {
18 |     filterLinks[i].classList.remove('btn-active');
19 |   }
20 | 
21 |   clicked.classList.add('btn-active');
22 |       
23 |   switch (filter) {
24 |     case 'all':
25 |       filteredBeers = beers;
26 |       break;
27 |     case 'domestic':
28 |       for (i=0; i<beers.length; i++) {
29 |         if (beers[i].locale === 'domestic') {
30 |           filteredBeers.push(beers[i]);
31 |         }
32 |       }
33 |       break;
34 |     case 'imports':
35 |       for (i=0; i<beers.length; i++) {
36 |         if (beers[i].locale === 'import') {
37 |           filteredBeers.push(beers[i]);
38 |         }
39 |       }
40 |       break;
41 |     case 'ale':
42 |       for (i=0; i<beers.length; i++) {
43 |         if (beers[i].type === 'ipa' || beers[i].type === 'ale') {
44 |           filteredBeers.push(beers[i]);
45 |         }
46 |       }
47 |       break;
48 |     case 'lager':
49 |       for (i=0; i<beers.length; i++) {
50 |         if (beers[i].type === 'lager') {
51 |           filteredBeers.push(beers[i]);
52 |         }
53 |       }
54 |       break;
55 |     case 'stout':
56 |       for (i=0; i<beers.length; i++) {
57 |         if (beers[i].type === 'stout') {
58 |           filteredBeers.push(beers[i]);
59 |         }
60 |       }
61 |       break;
62 |   }
63 |     
64 |   beerList.innerHTML = _.template(beerTemplate)({ beers: filteredBeers });
65 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Functional JS</title>
 6 |     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 7 |     <link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
 8 |     <link href='style.css' rel='stylesheet' type='text/css'>
 9 | </head>
10 | <body>
11 |     <div class="site-container">
12 |         <header class="site-header">
13 |             <a href="/" class="header-logo fancy">( McCarthy's Pub )</a>
14 |         </header>
15 |         
16 |         <h1 class="fancy">Beer List</h1>
17 |         
18 |          <div id="filters">
19 |             <a href="#" class="btn btn-default btn-active" data-filter="all">All</a>
20 |             <a href="#" class="btn btn-default" data-filter="domestic">Domestic</a>
21 |             <a href="#" class="btn btn-default" data-filter="imports">Imports</a>
22 |             <a href="#" class="btn btn-default" data-filter="ale">Ales</a>
23 |             <a href="#" class="btn btn-default" data-filter="lager">Lagers</a>
24 |             <a href="#" class="btn btn-default" data-filter="stout">Stouts</a>
25 |         </div>
26 |         
27 |         <ul id="beerList"></ul>
28 |         
29 |         <script type="text/json" id="beerData">
30 |         {
31 |             "beers": [
32 |                 {"name": "Bitter Hop", "type": "ipa", "locale": "domestic", "abv": 7.9},
33 |                 {"name": "Dragonblood Black IPA", "type": "ipa", "locale": "domestic", "abv": 6.5},
34 |                 {"name": "Good Dog Lager", "type": "lager", "locale": "domestic", "abv": 4.8},
35 |                 {"name": "Good Dog Snowpants", "type": "stout", "locale": "domestic", "abv": 8.1},
36 |                 {"name": "Lake Erie 2x IPA", "type": "ipa", "locale": "domestic", "abv": 9.3},
37 |                 {"name": "Lake Erie Session", "type": "ale", "locale": "domestic", "abv": 4.2},
38 |                 {"name": "Samwell British Pale Ale", "type": "ale", "locale": "import", "abv": 6.5},
39 |                 {"name": "Samwell Oatmeal Stout", "type": "stout", "locale": "import", "abv": 5.5},
40 |                 {"name": "Samwell Winter Ale", "type": "ale", "locale": "import", "abv": 6.8},
41 |                 {"name": "Sparkwood Beer Five", "type": "lager", "locale": "domestic", "abv": 6.2},
42 |                 {"name": "Sparkwood Campfire Lager", "type": "lager", "locale": "domestic", "abv": 5.8},
43 |                 {"name": "Tartan Scottish Ale", "type": "ale", "locale": "import", "abv": 7.5} 
44 |             ]
45 |         }
46 |         </script>
47 |         
48 |         <script type="text/template" id="tmpl-beer">
49 |         <% _.forEach(beers, function (beer) { %>
50 |         <li><%= beer.name %> <small>(<%= beer.abv %>%)</small></li>
51 |         <% }); %>
52 |         </script>
53 |         
54 |     </div>
55 | 
56 |     <script src="https://rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
57 |     <script src="http://code.jquery.com/jquery.min.js"></script>
58 |     <script src="app.js"></script>
59 | 
60 | </body>
61 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: url("http://i.imgur.com/IDJdOFb.jpg") top left repeat;
 3 |   color: white;
 4 | }
 5 | 
 6 | a:link, a:hover, a:active, a:visited {
 7 |   color: #666;
 8 |   text-decoration: none;
 9 | }
10 | 
11 | .site-container {
12 |   width: 95%;
13 |   margin: 0 auto;
14 |   max-width: 500px;
15 |   text-align: center;
16 | }
17 | 
18 | .fancy {
19 |   font-family: 'Rye', Georga, display, serif;
20 | }
21 | 
22 | .site-header {
23 |   text-align: center;
24 |   padding: 1em 0;
25 | }
26 | 
27 | a.header-logo {
28 |   color: red;
29 |   font-size: 3.5em;
30 |   text-decoration: none;
31 |   text-align: center;
32 | }
33 | 
34 | #filters {
35 |   line-height: 2.7;
36 | }
37 | 
38 | #filters a.btn-active {
39 |   background-color: red;
40 |   color: white;
41 |   border-color: red;
42 | }
43 | 
44 | #beerList {
45 |   margin: 1em 0;
46 |   padding-left: 0;
47 | }
48 | 
49 | #beerList li {
50 |   list-style: none;
51 |   padding-left: 0;
52 |   font-size: 2em;
53 |   line-height: 1.5;
54 | }
55 | 
56 | #beerList li small {
57 |   font-size: 0.75em;
58 |   color: #bbb;
59 | }


--------------------------------------------------------------------------------