https://github.com/cats256/FocusBlock

FocusBlock-Final.mp4

Built with

HML, CSS, JavaScript, and JSON

What I learned

Async/await, shadow DOM, web-accessible resource, etc,...

Ideas to implement

- Restrict Focus/Break minutes time select to two digits only

• Allow importing / exporting data

- For production branch download and combine all files needed for popup.js into one file

• Toggle whether user wants an alert

• Pause pomodoro button

• Alert when a focus / break session ended

• Implement calculating progress. For example: Today's Usage: (↑30%)

• Do unit test

• Whitelist mode

• Make chrome.storage.local.get(["key"]) specific to each function to improve performance

• Add title / alt to buttons

• Look for best small cap fonts

• Be able to change font

• Calculate the percent increase from last week's daily average (↑30%)

• Refactor code

• Hover mode for my button similar to my Etch-a-sketch project

• Password protection before disabling

• Game-like experience system

• Today's average, daily's average, weekly's average

• Customizable quote

• Customizable time-extension

• Scheduling system

• Customizable background's option

• Customizable icon option

• Check this out https://www.reddit.com/r/reactjs/comments/lfic9j/i_reactified_the_ui_of_my_previouslyvanillajs_web/

• Check https://chrome.google.com/webstore/detail/blocksite-block-websites/eiimnmioipafcokbfikbljfdeojpcgbh

• Look up block website chrome extension

Notes

• Lotus icon is from uxwing.com, dangerous icon is from google material, and icon.png is self-made

• For more free icon sites without attribution look up uxwing.com on Twitter and similar

• Set Custom Time, Disable/Enable Focus Mode, Options