Vue.js project

Create a vue.js page of your own design. I

The work for this project comes in creating content and adapting the existing

structures to your needs.

A list of sample topics is included below.

Sample project topics

A$.$ Gallery of pet images $$ your own, or images found on the internet

B$.$ A news site that allows users to click to different articles without changing the entire web

page

C$.$ Redesign one page of the SPSCC web site

This is you reimagining how one page might be designed! You are not responsible for

recreating functionality or even all the content of any particular page.

D$.$ Interactive web site for children that uses JavaScript events to reward them using the mouse

to explore the page$/$site$.$ One approach is mouseover events: pictures that wiggle, rockets that launch,

$...,$ but other designs are acceptable.

E$.$ An input form for user information to register at a hospital.

Project requirements

The project must use:

$1\mathrm{.}1.$ Vue.js

$1\mathrm{.}2.$ Animations and$/$or transitions

$1\mathrm{.}3.$ At least one of the following:

$3\mathrm{.}1.$ Conditional rendering

$3\mathrm{.}2.$ Forms and input

$3\mathrm{.}3.$ Looped rendering $($v$-$for$)$

$3\mathrm{.}4.$ Single$-$file components $($SFCs$)$

Steps to complete the task

$1.$ Identify the web site you want to make.

$2.$ Sketch out a rough diagram of how you want the site to look and work. This gives you a target to work

towards.

$3\mathrm{.}1.$ You do not need to cite content sources for this project. Copy and reuse G$-$rated content

freely.

$3\mathrm{.}2.$ Vue.js code must cited if you find non$-$trivial code online.

$4.$ Create a short write$-$up about your project, including:

$4\mathrm{.}1.$ At least three screenshots

$4\mathrm{.}2.$ A one$-$ or two$-$paragraph $($total$)$ description of the features of your site

$4\mathrm{.}3.$ A brief description of how it meets project requirements $1\mathrm{.}1,1\mathrm{.}2,$ and $1\mathrm{.}3,$ about one sentence per item.

A template for the write$-$up page is provided at the end of this document

It$$s okay to link to online libraries such as vue.js$.$ You do not need to capture those locally.

WRITE$-$UP

Team member name$($s$)$:

Project name:

Screenshot #$1$:

Screenshot #$2$:

Screenshot #$3$:

Briefly describe your site and its major features. This should be about one paragraph.

Briefly, how does your site meet requirements? This should be about one sentence per item.

$1\mathrm{.}1.$ Vue.js:

$1\mathrm{.}2.$ Animations and$/$or transitions:

$1\mathrm{.}3.$ At least one of the following: conditional rendering, forms and input, looped rendering $($v$-$for$),$

single$-$file components $($SFCs$)$