Skip to content

imd1005-web-development-winter-2023/exercise-22

Repository files navigation

Exercise 22 - My first Vue.JS App

For this exercise, you are going to write a couple of lines of JavaScript to finish our Vue.JS setup function and also write one line in our HTML template so that all of the pokemons in the array are looped through and printed on the web page.

In the setup() function we have to add a ref or reactive object and initialise it to the array of pokemons provided.

And then, in the HTML, we add an li and use the v-for directive to loop through the array of pokemons and then write the names of each pokemon to the page.

More detailed instructions for what JS to add are in your your javascript-start.js and index-start.html file. You will not have to update the CSS for this exercise.

Desired outcome

This is an image of the finished product

Steps

Since you now experts at cloning repos, one option open to you is that you could clone this Exercise-22 repo and then work on it locally.

If you aren't as comfortable with cloning just yet, you can copy the HTML, CSS and JS files in the main project folder to your local machine and modify the javascript-start.css file as well as the index-start.html file until you acheive the desired outcome. In this exercise you must not modify the CSS file to acheive the desired outcome.

Please note that you should also not be editing the CSS reset file.