Web Developer Fast Track

Winter 2022

Vue Hackathon Day

Achievement 7: Create Vue Components

  • Due: Sunday, March 27 11:59PM
  • Focus: Creating Reusable Vue Components
  • Syntax: props, conditionals, v-for, complex components
  • Task: Create, style, and test a few vue components, use props and slots for reusability

Vue Event Handling Demonstration

  • Gist
    • Syntax for properly using events with @click in vue
  • Github Repo
    • Note for structure and design of components
    • Example of Tailwind
    • Fontawesome icons in a vue project
  • Task: create a shopping list using the list components and calculate the total using a button

Font Awesome Icons Vue

What is today about?

Today we are going to pair code to create a small website using all the concepts that we have learned. At the end of the day, each team will showcase their work at the end of the day.

Everything that you do in this can be used for your achievements. However you will need to make sure that your name is in the package.json etc and that you are able to submit your own repo for any submissions that you may use this work for.

What do we get out of this??

  • If each team submits a github repo with a vue project made in this mini hackathon, we will have late start on Thursday
  • If every single person submits a github repo as noted above, then Monday will also be a late start day.
  • This is also an excellent opportunity to prepare for your group work that will be coming up, as well as for practicing and sharpening your skills

What are the rules?

  • Create a web page about whatever you want
  • Use whatever approach to css you want (but stick with 1 approach)
  • Teams can be of 2 or 3 (they will be assigned)
  • Use a git based workflow
    • One person initializes and the other is added as a collaborator
    • Add all of your group member names to the README file
    • for full submission, the collaborator(s) need to fork the repo and change the name in package.json
  • You can use a formal pair code approach, or divide and conquer
  • Use the challenges listed below
    • You don't need to progress to a new challenge with every sprint, but dont jump ahead
  • Hack like there's no tomorrow

Structure of the session

  • Work in 30 minute sprints
  • We will break for full team debriefs after each spring
    • Present problems, and topics that you're working on
    • Decide to continue with same work, or switch up challenges
  • End with Show and Tell (last hour of class)

Challenges

The 1st 30 minutes will be for project setup. Make sure that you

  • Create a vue project
  • Push it to Github
  • Add Collaborators
  • Pick a Website to Emulate (be general, focus on creating, the example is just for some guidance)
  • Decide if you want to use a linter
  • Decide if you want to use the vue router or not
  • Set up your css approach

Challenge I Options

  • Create, style, and set up ui components
  • Create, style, and set up reusable base components
  • Create, style, and set up utility components

Challenge II Options

  • Create a card component layout
  • Create a gallery layout
  • Create a shopping cart

Challenge III Options

  • Use computed properties to create variations in content
  • Add a mobile navigation menu
  • Create a toggle
  • Create a calculator function

Challenge IV Options

  • Create another page
  • Optimize your css and styling
  • Render static lists to arrays iterated through with v-for

Challenge V

  • Code clean up
  • Pick a feature or bug to discuss with group