Skip to content

Latest commit

 

History

History
50 lines (40 loc) · 2.45 KB

Assignment2.md

File metadata and controls

50 lines (40 loc) · 2.45 KB
Raw

EWU-CSCD378-2024-Spring

Assignment 2

The purpose of this assignment is to solidify your learning of:

  • Front end component development
  • Using Vuetify's components
  • Building a new custom component
  • Creating new pages

Instructions

Note: Custom CSS can only be used where specified.

  1. Create a custom component to show available words ❌✅
  • Create/extend a word list component with a method called validWords that returns an array of valid words based on current guesses ❌✅
  • Create unit tests for the validWords method ❌✅
  • Display the number of valid words based on the entered letters ❌✅
  • When the number is clicked, show a dialog with all the available words with scrolling if there are too many to show on the screen. ❌✅
  • When a word is clicked, the word should be entered as the guess but not submitted ❌✅
  • Add a hover over for the word so it is obvious that it can be clicked. (No CSS) ❌✅
  1. Convert the sidebar to an App Bar ❌✅
  • Name of the app on the left with an icon ❌✅
  • Choose an icon for the app (from Material Design or somewhere on the web) ❌✅
  • Clicking the name and icon of the app take you to the home page ❌✅
  • Hamburger menu on the right ❌✅
  • Menu option for an About page ❌✅
    • Create an About page that has a few sentences about this class project and how great Meg is ❌✅
    • Make sure this has a back button ❌✅
  1. Add a settings dialog ❌✅
  • Add a settings selection to the App Bar's menu with a gear icon. This should open this dialog regardless of where you are on the site ❌✅
  • Option for dark and light mode ❌✅
  • Develop two additional color schemes (with creative names) and allow the user to change to them. Schemes should look good in both light and dark mode ❌✅
  • The above two items must be implemented with built in Veutify features ❌✅
  1. Style the main game page ❌✅
  • Make it look like wordle.com or the Wordle mobile app ❌✅
  • Add gradient to guesses blocks and keys (with CSS) ❌✅
  • Add drop shadow to keys (No CSS) ❌✅
  • Make the app responsive (No CSS) ❌✅
  1. Include a link to your Azure App in your PR comments.

Extra Credit

  • Add an appropriate sound when the UI letter buttons are clicked (5 points)
  • Add creative styling following good UI/UX practices