denvercoder1 / countdown Goto Github PK

Website to display a countdown timer to a specified date.

Home Page: http://eyl327.mywebcommunity.org/countdown/

JavaScript 12.51% CSS 22.57% PHP 64.91%

hacktoberfest countdown countdown-timer countdown-clock countdown-javascript timer timer-clock time-and-date-diff first-timers-only beginner-friendly

countdown's Introduction

Countdown Timer

Website to display a countdown timer to a specified date.

Create a countdown using the UI
Create a countdown by passing url parameters
Screenshots
Contributing

Create a countdown using the UI

View the demo at http://eyl327.mywebcommunity.org/countdown/

Create a countdown by passing url parameters

Fields:

d - date and time in the format "YYYYMMDDTHHmm" (ex. 20201231T1300 for 31st of December, 2020 at 1 pm.)
tz - timezone offset from UTC (ex. -7 for MST)
msg - message to display above the countdown (ex. "Countdown to Deadline")
font - a font available from fonts.google.com (ex. "Roboto")
bg - background image url (ex. https://i.imgur.com/HcD6od4.jpg) or hex code preceded by %23 (ex. %23111111 for #111111)

Example:

http://eyl327.mywebcommunity.org/countdown/?d=20201231T2359&tz=%2B3&msg=New%20Year%27s%20Eve&font=Righteous&bg=https%3A%2F%2Fi.imgur.com%2FHcD6od4.jpg

Screenshots

Contributing

Video tutorial: How to make a Pull Request with Github Desktop

Fork this repository and clone your repo to your computer

git fork https://github.com/DenverCoder1/countdown.git

Create a new branch

git checkout -b new_branch (where new_branch is the feature you are working on)

Set up a local or hosted web server to test your code

This can be done with XAMPP

Make your changes to the code
When it is ready, submit a PR from your forked repository

countdown's People

Contributors

Stargazers

Watchers

Forkers

shweta200126 96radhikajadhav markkuleppala claw-hammer math3037 vansh-8502 kalamell zashton hareesh-pillai tahreem-khalil tharindulucky yelynn1 shiv1511 pierrethiollent macor003 kzeirxn nibhrit cccp3 frankyyeah

countdown's Issues

Add setting for font color

Currently the background color can be modified but the color of the text is always teal.

Replace Moment.js with a more modern library

Moment.js is no longer going to be maintained and there are faster and smaller alternatives which are just as effective such as Day.js.

Tooltips for filling out the form

Issue

Some input fields may need extra tips to help users figure out to correctly fill in the information.

For example, the UTC offset has a specific form for how it must be filled out (see issue #4)

Hint text like the following may be helpful:

The input boxes that accept hex codes could also have hint text.

You may choose how to word the hint text as long as it accurately describes what users should know about the input.

The tooltip should be next to the input box in a way where users will find it when filling out the form.

References

https://www.w3schools.com/howto/howto_css_tooltip.asp

Fix errors reported by W3C Markup Validator

W3C Markup Validator reports the following errors while scanning the website. These errors and warnings should be fixed to output valid HTML.

Warning: Consider adding a lang attribute to the html start tag to declare the language of this document.
Error: Start tag seen without seeing a doctype first. Expected <!DOCTYPE html>.
Error: Bad value https://fonts.googleapis.com/css?family=Open Sans for attribute href on element link: Illegal character in query: space is not allowed.

Disallow input of text in the UTC offset input box for invalid characters

UTC offset is always a number (ex. -3.5, +0, +7, etc.)

Currently it allows you to type any text in the input box.

Can we make it so that only characters that are: +, -, ., and digits will show up?

ISSUE A:

complete Input validation has been added to make sure the input box in the countdown creation form contains a positive or negative floating point number

ISSUE B:

complete Allow only valid offset values to be entered. That is, prevent values like +30:45 from being submitted.

ISSUE C:

complete Apply validation from issues A and B to the "change timezone" input field on the countdown page.

Details:

See how the UTC offset input box responds to input in the countdown form
Implement changes to the text box that is create when changing the display timezone
The text box for the user's preferred timezone appears when "Change Timezone" is clicked on a countdown page

Comment below to claim a part or all of this issue.

Code cleanup

Can the code be cleaned up to be easier to read and more easily maintainable without removing any functionality?

Adjustments to responsiveness for smaller screens

On smaller screens, the text begins to overlap at certain screen sizes. This can be done in a few ways such as by using media rules (for example: @media only screen and (max-width: 600px) {...}) or by using clamp on font sizes (for example: font-size: clamp(2rem, 22vw, 5rem);).

There are already some media rules in countdownStyle.css which can be changed to work better on more screen sizes.

The layout should look good on all screen sizes which are greater than or equal to 320px wide.

More about media rules: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

More about clamp: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

Screenshots of current site

740px (Looks fine)

620px (Text is overlapping)

320px (Using mobile layout but text is still overlapping)

Fix font sizes when using <!DOCTYPE HTML>

The change to add <!DOCTYPE html> (PR #18) caused some issues with the layout and font sizes.

Much of this seems to have to do with the use of inline styles.

To fix this issue:

inline styles should be moved the countdownStyle.css file with appropriate class/id selectors
style tags that are not in the head should be moved inside the head
Adjust the font sizes and alignments in the CSS to make it look similar to (or better than) the first image below

These fixes should be made while keeping <!DOCTYPE html> in the code.

Without `<!DOCTYPE html>`:

With `<!DOCTYPE html>`:

Remove unused variable from index file

There's an unused variable refresh in the index.php file.
This causes a PHP notice and has to be removed.