feature: Update Rick Generator with instructions and a better templates

bencodezen · bencodezen · commit bbc786ed0d21 · 2017-12-10T21:54:03.000-05:00
diff --git a/exercises/rick-generator/01-start-rick-generator.html b/exercises/rick-generator/01-start-rick-generator.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -9,29 +10,48 @@
     <link href="https://fonts.googleapis.com/css?family=Frijole" rel="stylesheet">
 </head>
 
+<!-- Instructions -->
+<!-- 1. Replace 'Static' with the data property `noun` -->
+<!-- 2. Wire up `input#noun` to dynamically update `noun` when you type in it -->
+<!-- 3. Use dynamic inline-styles to define a `backgroundImage` on `div#image-wrapper` that uses the data property `imageUrl` -->
+<!-- 4. Wire up `input#background-image` to dynamically update the data property `imageUrl` -->
+<!-- 5. Toggle `aside#side-menu` visibility when you click on `button#toggle-menu` -->
+<!-- 6. Challenge: Write a method that updates `div#template-wrapper` position when you click on `div#image-wrapper` -->
+
 <body>
-    <div class="app-wrapper">
-        <div id="image-wrapper" class="image-wrapper" style="background-image: url('https://vignette.wikia.nocookie.net/clubpenguin/images/7/71/Pickle.png/revision/latest?cb=20140205184407')">
+    <div id="app" class="app-wrapper">
+        <div id="image-wrapper" class="image-wrapper">
             <div class="template-wrapper" id="template-wrapper">
                 <div class="speech-bubble">
-                    <p>I'm Pickle Rick!</p>
+                    <p>I'm Static Rick!</p>
                 </div>
                 <img class="rick-face" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/262582/PickleRickFace.svg" alt="Rick Face Template">
             </div>
         </div>
-        <button id="toggle-menu" class="toggle-menu">Toggle Menu</button>
+        <button id="toggle-menu" class="toggle-menu" @click="showMenu = !showMenu">Toggle Menu</button>
 
-        <aside id="side-menu" class="side-menu">
+        <aside v-if="showMenu" id="side-menu" class="side-menu">
             <form class="side-menu__form">
                 <label for="noun">Noun</label>
-                <input type="text" id="noun" />
+                <input type="text" id="noun" v-model="noun" />
                 <label for="background-image">Background Image</label>
-                <input type="text" id="background-image" />
+                <input type="text" id="background-image" v-model="imageUrl" />
             </form>
         </aside>
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
+    <script>
+        const app = new Vue({
+            el: '#app',
+            data: {
+                noun: 'Pickle',
+                showMenu: true,
+                imageUrl: 'https://vignette.wikia.nocookie.net/clubpenguin/images/7/71/Pickle.png/revision/latest?cb=20140205184407'
+            },
+            methods: {}
+        })
+    </script>
 </body>
 
 </html>
diff --git a/exercises/rick-generator/02-final-rick-generator.html b/exercises/rick-generator/02-final-rick-generator.html
@@ -12,7 +12,7 @@
 
 <body>
     <div id="app" class="app-wrapper">
-        <div id="image-wrapper" class="image-wrapper" @click="updatePosition" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
+        <div id="image-wrapper" class="image-wrapper" @click="updatePosition" :style="{ backgroundImage: `url('${imageUrl}')` }">
             <div class="template-wrapper" id="template-wrapper" :style="{ top: y, left: x, width: wrapperWidth }">
                 <div class="speech-bubble">
                     <p>I'm {{ noun }} Rick!</p>
@@ -36,15 +36,13 @@
     <script>
         const app = new Vue({
             el: '#app',
-            data() {
-                return {
-                    noun: 'Pickle',
-                    x: 20 + 'px',
-                    y: 50 + 'px',
-                    showMenu: true,
-                    wrapperWidth: 600 + 'px',
-                    imageUrl: 'https://vignette.wikia.nocookie.net/clubpenguin/images/7/71/Pickle.png/revision/latest?cb=20140205184407'
-                }
+            data: {
+                noun: 'Pickle',
+                x: 20 + 'px',
+                y: 50 + 'px',
+                showMenu: true,
+                wrapperWidth: 600 + 'px',
+                imageUrl: 'https://vignette.wikia.nocookie.net/clubpenguin/images/7/71/Pickle.png/revision/latest?cb=20140205184407'
             },
             methods: {
                 updatePosition(event) {
diff --git a/exercises/rick-generator/rick-generator.css b/exercises/rick-generator/rick-generator.css
@@ -24,6 +24,7 @@
 	right: 10px;
 	padding: 20px;
 	background-color: #eee;
+	font-family: sans-serif;
 }
 .side-menu__form {
 	display: -webkit-box;

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@`
`24`	`24`	`right: 10px;`
`25`	`25`	`padding: 20px;`
`26`	`26`	`background-color: #eee;`
	`27`	`+ font-family: sans-serif;`
`27`	`28`	`}`
`28`	`29`	`.side-menu__form {`
`29`	`30`	`display: -webkit-box;`