rdjarbeng/countdown

Countdown timer with themes, dark and light mode, day of year count built as website & PWA

Hi I am Richard Djarbeng

Developer | Computer Engineer

I specialize mostly in web development, machine learning and Internet of Things (IoT) devices such as the Raspberry Pi and Arduino.

Often use Python, Java, C++, Dart for Flutter mobile app development and a host of other languages to build a working application.

Contributor to the complete machine learning package

• 🚀  I'm currently working on Countdown application with themes and dark mode, building my personal website and following the course fastai for deep learning
• 🧠  I'm learning Machine learning, Data Science, Software Engineering best practices
• 🤝  Open to collaborating on interesting projects

Skills

Socials

countdown's Issues

dark notification background

The notification for dark/light mode needs a contrasting background instead

Toggle Icon Misaligned

The toggle icon overlaps the banner
This is reproducible on mobile and/or any device with a small screen

Author page icon alignment

Authors (contact us) page in #40 should be consistent.

Prefer icon on left with name on right.

enable theme persistence site/app wide

add a way to remember theme choices #40

50% background gradient not showing distinctly in light mode

Difficult to see that nice border and gradient with the 2 colors on light mode

Whatsapp link redirect not working

The link for whatsapp redirect without needing to click a button does not work after the second try when the user allows the app permissions to show notifications . Find more details in the stack overflow question I posted below.

Stack overflow post

Test it out here on a mobile browser with a phone with whatsapp installed.
Test day of year link

Find the code in the branch whatsapp link/dayofyear.html
Link to branch

Access user/site data from any device

Previous and Current implementation v2.5.1 of the application stores the created data on the user's device.
Once the user moves to a different device the saved countdowns/items are lost. There is also no way to transfer the saved items to another device.

Proposed solution: move countdown storage to cloud storage (firebase). Partition users so data remains private. Use public countdowns for data that user's want to share.

Performance & Optimization

The project is growing fast and consequently performance begins to be a concern, #38 as an example. There is also need for more consistency in the project.
This is my suggestion:
when everything is set for v2(before deploying), there should be an optimization run where we will;

• organize the files into suitable folders
• agree on code spacing and pretty format all files (currently some are 2 spaces and others 4)
• remove redundant comment and code.
• optimize DOM manipulations (most performance issues come from this ) - analyze and take out unneeded manipulations
• refactor the files
    use BEM convention for the CSS, agree on method of getting DOM references and improve consistency

Countdown list context delete not consistent

The countdown list, context menu delete functionality does not work sometimes (tested on chrome android)

Add animations

Some animations, for background and clock

Netlify CI/CD for all branches

Currently Netlify only deploys the master/production branch
@RDjarbeng Please set continuous deployment for all branches, to enable ease in testing experimental features happening on other branches

Rcoundown needs a color palette, to guide ui choices

Current ui colors feels one way, monotonic in a sense. It lacks "charm" which I believe can easily be gotten when a palette is defined for the project.
Palette proposals are all welcome.

Night mode does not remain consistent across pages

The night mode state does not remain consistent across the site even when the user toggles it. The auto night mode changes the night mode state even when the user picks a specific one.

Sanitize/ escape user input

When a tech savvy user enters html code or scripts in the text input box it is output directly unto the page. Scripts fortunately do not run but the html is parsed on the page. A fix is being implemented in #85

Update readme to show how to use application, follow github conventions of what the repository is about, how to use, contributing, licenses

Current readme focuses on progress the repository has made and gives a nice history of where it started. Although this is cool it does not show how to use the application or suggest ways contributors can contribute to the project.
It would be nice to have the main readme that shows what a user needs and more helpful information.
Example sections include: what is the repository about, how is it supposed to be used, what are the guidelines for contributors...

Site counts negative numbers if open and countdown is reached

Got to add a reset or a stop when the countdown reaches the end.

Toggle Icon, autoMode inconsistent

in autoDark mode: the toggle icon changes to the appropriate icon upon the first click. Subsequent clicks do not change it whatsoever.
in autolight mode, the icon does not change at all

Tested at 6:45am and autoMode is still in dark
so at 7:00am, mode switches to light.
Expected behaviour is for light mode to activate at 6am

Auto dark mode at night, light mode at daytime

Make site exciting to watch

Add animations, transitions (not too much) to make clock interesting to watch

Whatsapp share button does not work in UC browser

Clicking on share button in UC browser opens blank page instead of redirecting to whatsapp

Wider and bigger clock on Large screens

The clock has to get big, center of attention on laptops

ui and performance differences on devices

• noticeable lag when toggling mode on some devices, surfaced after #16 PR
• animated buttons display on some devices as having no gap in-between and around

Add count for day of the year

Add a day x/365 display

Page loads slowly sometimes on mobile

The site can take greater than 7 seconds to load on a mobile network, according to lighthouse audit.
Not sure if this is due to the service worker for the PWA

Add message/notification or effects on countdown deadline elapsed

Add exciting effects on countdown time reached.
Add congratulatory message for new year
Current behaviour just stops the clock at 00:00:00

Default background has shaky behaviour on scroll on mobile

The default background seems to adjust itself when the user scrolls down and readjust when the user scrolls back up

Edit readme images

screenshots of dark and light mode for mobile should be placed side by side to save screen real estate and scrolling

Change logo to time based one

Set logo as a clock 🕒 , hourglass⏳ or time themed one.
Current R logo does not feel right.

Change Countdown deadline

• Create a separate class/file for the clock.
• Set the countdown deadline to a given date and time instead of midnight

Site has problems in UC browser android

Site JS files for clock and autonightMode does not load correctly and clock does not function properly in UC browser for android