Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="exercise">
- <!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
- <div>
- <button @click="startEffect">Start Effect</button>
- <div id="effect" :class="effect"></div>
- </div>
- <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
- <div :class="classes">I got no class :(</div>
- <!-- 3) Let the user enter a class (create some example classes) and attach it -->
- <div>
- <input type="text" v-model="dynamic" placeholder="Enter 'red' or 'blue'">
- <div :class="dynamic">Dynamic class</div>
- </div>
- <!-- 4) Let the user enter a class and enter true/ false for another class (create some example classes) and attach the classes -->
- <div>
- <input type="text" v-model="dynamicClass" placeholder="Enter class">
- <input type="text" v-model="dynamicClassEnabled" placeholder="Do you need this enabled? (true/false)">
- <div :class="{ [dynamicClass]: dynamicClassEnabled === 'true' }">An example</div>
- </div>
- <!-- 5) Repeat 3) but now with values for styles (instead of class names). Attach the respective styles. -->
- <div>
- <input v-model="fontSize" placeholder="Enter text size(e.g. 15px, 1rem etc.)" type="text">
- <div :style="{ fontSize: fontSize }">An example</div>
- </div>
- <!-- 6) Create a simple progress bar with setInterval and style bindings. Start it by hitting the below button. -->
- <div class="progress-bar-section">
- <button v-on:click="startProgress">Start Progress</button>
- <div class="progress-bar-wrapper">
- <div :style="{ width: progress + 'px' }" class="progress-bar"></div>
- </div>
- </div>
- </div>
Add Comment
Please, Sign In to add comment