Challenges

Challenges for Mindfulness Dashboard

Project template ➡ https://github.com/ewuweblab/mindful-dashboard-vite-tailwind

Challenge 1: Content

• Dynamically display the current date and time

• Determine content you'd like to mindfully track:

  • Days until an event

  • Consecutive streaks

  • Age of person, place, thing, event, etc.

• Use provided Favicons Template on Figma to convert this SVG into a favicons

  • https://assets.codepen.io/16425/dashboard-icon.svg

Challenge 2: Design

• Determine an Art Direction for your defined content

• Use CSS variables for styles

• Use oklch for color

  • See Generator https://oklch.com/

• Customize provided template using Bento Box layouts

• See Bento Box layout examples

• Apply your Art Direction in styles.css

• Cite any borrowed content, code, AI, assets, etc. in README.md

Challenge 3: Code

• Modify the provided JS functions for your content

• Cite any borrowed content, code, AI, assets, etc. in README.md

Challenge 4: Process

Project template ➡ https://github.com/ewuweblab/mindful-dashboard-vite-tailwind

• Customize provided project template provided

• Version Control is used with multiple commits, over multiple days

• Project is stored on GitHub

• Project is deployed via Netlify

• Add a deployment link to your repo

• Add deployment URL to About section -> Website field

• Update README.md file with your-own-content e.g. citations, notes, links, or any relevant information

Challenge 5: Deployment

• Provide URL to your project repo stored on GitHub

  • Example: https://github.com/YourUserName/RepoName

• Provide URL to your project website deployed via Netflify

  • Example: https://YourAppName.netlify.com