RecipeExample/index.html at master · hallielarsson/RecipeExample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<head>
  <title>Pumpkin Pie Recipe</title>
  <script src="https://unpkg.com/vue"></script>
  <style>
    body {
      background-color: #FFFEDD;
      font-family: sans-serif;
      margin: 0;
    }


    .header{
      user-select: none;
      background-color: #442200;
      color: #FFFEEE;
      padding-top: 4px;
      padding-bottom: 16px;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24px;
      cursor:
    }

    .nav-arrow{
      margin: 0;
      padding: 0 30px;
      user-select: none;

    }


    .recipe-wrapper{
      display: flex;
    }

    .recipe, .ingredients{
      margin: 4px;
      border: 4px solid #442200;
      border-radius: 2px;
    }

    .recipe{
      background-color: #FFDD88;
      counter-reset: section;
      flex: 1;
    }

    .recipe div::before {
      counter-increment: section;
      content: counter(section) ".";
      padding-right: 2px;

    }

    .ingredients {
      background-color: #7d5515;
      display: flex;
      flex-flow: row wrap;
      justify-content: stretch;
      flex: 0.5;
    }

    .ingredients div {
      background-color: #FEFEFE;
      margin: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      flex-grow: 1;

    }
    .ingredients div, .recipe div{
      padding: 4px;
    }

    .recipe div:nth-child(even) {
      background-color: white;
    }

  }
  </style>
</head>

<body>
  <div id = "app">
    <div class="header">
     <div @click="switchRecipe(-1)" class="nav-arrow">◀</div>
     <div>{{ recipe.title }}</div>
     <div @click="switchRecipe(1)" class="nav-arrow">▶</div>
    </div>

    <div class="recipe-wrapper">
      <div class="ingredients">
          <div class="ingredient" v-for="ingredient in recipe.ingredients">{{ ingredient }}</div>
      </div>

      <div class="recipe">
          <div class="recipe-step" v-for="step in recipe.steps">{{ step }}</div>
      </div>
    </div>

  </div>

  <script>
    ;

    var recipes = [
      {
        title: "Pumpkin Pie",
        ingredients: [ "1 can pumpkin puree",
          "1 can sweetened condensed milk",
          "2 large eggs",
          "1 tsp vanilla",
          "1 tsp cinnamon",
          "1/2 tsp salt",
          "1/2 ounce butter",
          "1/4 tsp nutmeg",
          "1/4 tsp clove",
          "1 tbsp bourbon",
        ],
        steps: [
          "Preheat oven to 375 degrees.",
          "While oven is preheating, melt the butter in a saucepan over medium-high heat.",
          "Add clove, nutmeg, cinnamon, and any other desired spices to the butter for one minute or until spices become aromatic.",
          "Reduce heat to low and add pumpkin puree and bourbon to the saucepan. Stir as mixture cools.",
          "Add condensed milk to saucepan. Stir until mixture is a smooth pastel orange. Remove from heat.",
          "While mixture cools, beat the eggs in a separate bowl.",
          "Fold eggs into mixture.",
          "Pour mixture into pie shell and bake for 30-45 minutes, or until top of pie begins to puff slightly.",
        ],
      },
      {
        title: "Hard-Boiled Eggs",
        ingredients: [ "6 large eggs." ],
        steps: [
          "Put eggs in saucepan.",
          "Fill a saucepan with water until eggs are covered.",
          "Bring water to a boil.",
          "Remove pot from heat and allow to cool.",
        ],
      },
      {
        title: "Soft-Boiled Eggs",
        ingredients: [ "6 large eggs." ],
        steps: [
          "Fill a saucepan with enough watever to cover 6 eggs.",
          "Bring water to a boil.",
          "Reduce heat and allow water to come to a simmer.",
          "Put eggs in saucepan.",
          "Cook eggs for 5-7 minutes.",
        ],
      }
    ];

    var recipeIndex = 0;

    var app = new Vue({
      el: '#app',
      data: {
        //we define the app data iself here
        recipe: recipes[0],
      },
      methods: {
        switchRecipe: function(delta) {
          recipeIndex += delta;
          if(recipeIndex < 0){
            recipeIndex += recipes.length;
          }
          recipeIndex = recipeIndex % recipes.length;
          this.recipe = recipes[recipeIndex];

        }
      }
    });
  </script>

</body>