💯Mindful Dashboard Challenges

Project template ➡ https://github.com/ewuweblab/mindfulness-dashboard

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 content

• Use CSS variables for styles

• Customize provided template bentoLayout.css

• Apply your Art Direction in styles.css

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

Challenge 3: Code

• Apply provide JS libraries

  • clock.js, date.js, daysTillEvent.js, streakOfDays.js, calculateAgeOf

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

Challenge 4: Process

Project template ➡ https://github.com/ewuweblab/mindfulness-dashboard

• Customize provided project template

  • Project template ➡ https://github.com/ewuweblab/animate-icon-css

• 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

• README.md file edited 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

Challenge 6: Optional

• Integrate Open Props into your Design

  • https://open-props.style/