Skip to content

Commit

Permalink
added steam and form data
Browse files Browse the repository at this point in the history
  • Loading branch information
@aboutaaron
aboutaaron committed Feb 18, 2013
1 parent da9071a commit 38814d1
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 25 deletions.
27 changes: 20 additions & 7 deletions .tmp/styles/main.css
View file
Expand Up @@ -8288,36 +8288,49 @@ a.label:hover, a.label:focus, a.badge:hover, a.badge:focus {
/* line 5, ../../app/styles/main.scss */
body {
font-family: "Open Sans", san-serif;
font-smoothing: antialiased;
margin-top: 20px;
}

/* line 16, ../../app/styles/main.scss */
/* line 17, ../../app/styles/main.scss */
.coffee-container .coffee-drink {
border: 4px solid black;
width: 100px;
height: 110px;
height: 70px;
margin: 0 auto;
}
/* line 22, ../../app/styles/main.scss */
/* line 23, ../../app/styles/main.scss */
.coffee-container .coffee-drink #air {
display: block;
}
/* line 26, ../../app/styles/main.scss */
/* line 27, ../../app/styles/main.scss */
.coffee-container .coffee-drink #milk {
background-color: #fbf3dc;
display: block;
}
/* line 31, ../../app/styles/main.scss */
/* line 32, ../../app/styles/main.scss */
.coffee-container .coffee-drink #espresso {
background-color: #915C2C;
display: block;
}
/* line 36, ../../app/styles/main.scss */
.coffee-container .coffee-drink #extra {
/* line 37, ../../app/styles/main.scss */
.coffee-container .coffee-drink #syrup {
background-color: #45280E;
display: block;
}
/* line 42, ../../app/styles/main.scss */
.coffee-container .coffee-drink #water {
background-color: #017691;
display: block;
}
/* line 48, ../../app/styles/main.scss */
.coffee-container #steam {
color: #eeeeee;
display: block;
font: 50px "Skranji", cursive;
text-align: center;
}
/* line 55, ../../app/styles/main.scss */
.coffee-container h3, .coffee-container p {
text-align: center;
}
24 changes: 14 additions & 10 deletions app/index.html
View file
Expand Up @@ -11,7 +11,7 @@
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="styles/main.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Skranji' rel='stylesheet' type='text/css'>
<!-- build:js scripts/vendor/modernizr.js -->
<script src="components/modernizr/modernizr.js"></script>
<!-- endbuild -->
Expand All @@ -25,29 +25,33 @@ <h1>Proper Coffee</h1>

<section id="coffee" class="row"></section>

<!-- <section class="span12">
<section class="span12">
<form action="#" id="addCoffee">
<h2>What you drinking?</h2>
<section>
<label for="name"></label><input type="text" id="name" placeholder="Latte">
<label for="name"></label><input type="text" id="name" placeholder="Name of the Drink">
<label for="espresso"></label><input type="text" id="espresso" placeholder="how many espresso shots?">
<label for="milk"></label><input type="text" id="milk" placeholder="Milk to espresso ratio?">
<label for="milk"></label><input type="text" id="milk" placeholder="Milk amount? e.g. ">
<label for="water"></label><input type="text" id="water" placeholder="Any water in the drink?">
<label for="syrup"></label><input type="text" id="syrup" placeholder="Any Syrup?">
<hr>
<button class="btn btn-primary" id="add">Add coffee drink</button>
</section>
</form>
</section> -->
</section>

<!-- Template -->
<script id='coffee-template' type='text/template'>
<span id="steam">sss</span>
<section class='coffee-drink'>
<span id="air" style='margin-top: <%= 110 - ( extra + milk + espresso ) %>px'></span>
<span id="extra" style='height: <%= extra %>px'></span>
<span id="milk" style='height: <%= milk %>px'></span>
<span id="espresso" style='height: <%= espresso %>px'></span>
<span id="air" style='margin-top: <%= 70 - ( (syrup*10) + (milk*10) + (espresso*10) + (water*10) ) %>px'></span>
<span id="syrup" style='height: <%= syrup*10 %>px'></span>
<span id="milk" style='height: <%= milk*10 %>px'></span>
<span id="espresso" style='height: <%= espresso*10 %>px'></span>
<span id="water" style='height: <%= water*10 %>px'></span>
</section>
<h3 id="coffee-name"><%= name %></h3>
<p><%= espresso %> shots of espresso and <%= milk %> parts milk.</p>
<p><%= espresso %> shots of espresso and <%= milk %> parts milk. | <button class="delete btn btn-mini">Delete</button></p>
</script>

</section><!-- #coffee-app -->
Expand Down
13 changes: 7 additions & 6 deletions app/scripts/app.js
View file
Expand Up @@ -3,13 +3,14 @@
var app = app || {};

$(function() {
// Total sum can't exceed 7
var coffees = [
{ name: 'double espresso', milk: 0, espresso: 20, extra: 0 },
{ name: 'macchiato', milk: 10, espresso: 20, extra: 0 },
{ name: 'cappuccino', milk: 30, espresso: 20, extra: 0 },
{ name: 'americano', milk: 0, espresso: 20, extra: 30 },
{ name: 'latte', milk: 40, espresso: 20, extra: 0 },
{ name: 'mocha', milk: 40, espresso: 20, extra: 10 }
{ name: 'double espresso', milk: 0, espresso: 2, syrup: 0, water: 0 },
{ name: 'macchiato', milk: 1, espresso: 2, syrup: 0, water: 0 },
{ name: 'cappuccino', milk: 3, espresso: 2, syrup: 0, water: 0 },
{ name: 'americano', milk: 0, espresso: 2, syrup: 0, water: 3 },
{ name: 'latte', milk: 5, espresso: 2, syrup: 0, water: 0 },
{ name: 'mocha', milk: 4, espresso: 2, syrup: 1, water: 0 }
];

new app.CafeView(coffees)
Expand Down
17 changes: 15 additions & 2 deletions app/styles/main.scss
View file
Expand Up @@ -4,6 +4,7 @@

body {
font-family: "Open Sans", san-serif;
font-smoothing: antialiased;
margin-top: 20px;
}

Expand All @@ -16,7 +17,7 @@ body {
.coffee-drink {
border: 4px solid $black;
width: 100px;
height: 110px;
height: 70px;
margin: 0 auto;

#air {
Expand All @@ -33,10 +34,22 @@ body {
display: block;
}

#extra {
#syrup {
background-color: #45280E;
display: block;
}

#water {
background-color: #017691;
display: block;
}
}

#steam {
color: $grayLighter;
display: block;
font: 50px "Skranji", cursive;
text-align: center;
}

h3, p {
Expand Down

0 comments on commit 38814d1

Please sign in to comment.