abel-otegbola / clock-app

A clock application built with html css and js

Hacktoberfest-2022🔥

This repository aims to help code beginners with their first successful pull request and open source contribution. 🥳

⭐ Feel free to use this project to make your first contribution to an open-source project on GitHub. Practice making your first pull request to a public repository before doing the real thing!

⭐ Make sure to grab some cool swags during Hacktoberfest by getting involved in the open-source community.

This repository is open to all members of the GitHub community. Any member can contribute to this project!

Guidelines

1. Note: open an issue first. check if the issue you want to solve already exist. if it doesn't,
   create an issue with explanation of what you want to do.
2. Writing the author's name and the date modified is a must (Write it as a multiline comment in your code).
3. Filename should be meaningful.
4. Don't spam it will be rejected immediately.
5. Only send one pull request for your contributions to the project. 

---

Steps For Contribution

0. Star this repository.

1. Fork this repository.

2. Clone the forked repository.

git clone https://github.com/<your-github-username>/clock-app

3. Navigate to the project directory.

cd clock-app

4. Create a new branch.

git checkout -b <your_branch_name>

5. Make changes.

6. Stage your changes and commit

git add -A

git commit -m "<your_commit_message>"

7. Push your local commits to the remote repo.

git push -u origin <your_branch_name>

8. Create a Pull Request.

9. Congratulations! 🎉 you've made your contribution.

---

Clock app 🕥🔥

An HTML,CSS and Javascript clock application.

---

---

Features

• Clean user interface
  
• Light and Dark mode
  
• Multiple clock themes
  

Themes

Neumorphism, Glassmorphism, Vintage, Abstract, Wooden, Futuristic, Minimalist, Neon, Endless.

visit live site here

---

Screenshots

---

How to use

Download

Download the zip file and unzip into your computer.

Clone this repository

To clone and run this application, you'll need git installed on your computer Download Git

open up your terminal and clone this repository

git clone https://github.com/abel-otegbola/clock-app

Go into the folder

open the index.html in your browser.

You may also like

Check out my awesome Quiz app built with javascript

Contributors

clock-app's Issues

Show theme name displayed under the clock

Hint: Use the data-theme to display the current theme name

Enhancement and adding more features in footer and Nav bar

@abel-otegbola Kindly assign me this under Hacktoberfest 2022.

Proposed responsiveness for tablet.

Good day,
While writing the animation for neon, I had the webpage in a tablet for on my laptop and i discovered that the webpage just compresses to one side, while more can be done to transform that, I am proposing that the sidebar becomes the navbar with the night mode and dark mode at the top and the differen clock theme at the bottom of the dark and light mode.
This gives the clock enough spacing and also make the webpage look pleasing in tablet format.

Add new theme to the project

1. Open index.html and add your own theme in the list using the same format and including a data-theme. You can search fontawesome icons to add the name of your icon.
   

2. Move to the themes.css to style your theme using the data-theme. Forexample
   

3. Optional. You can style the darkmode of your theme also by moving to the darkmode.css and follow same pattern as other themes.

bug(Mobile): Sidebar not collapsing on select of a theme/mode

In Mobile view the side should be auto collapse on click of any theme/mode.

I want to raise PR for this.

Styling the neon clock.

I would love to style the neon clock ring and fingers in such a way that they change color using animation.

Make footer social icons same as header social icons

Style the footer social icons to be the same as header social icons

Theme of clocks

I would like to make another theme for that clock..... Please assing it to me.

Add a new theme to the project.

#1 Open up index.html, Add your own theme to the lists.
- Add your data-theme name
- Use fontawesome icon name to add your icon

#2 Open the theme.css and Style your theme using the data-theme you set. Forexample

article[data-theme="wooden"] .clock {
   // Your styles
}

#3 Optional. You can also style the dark version of your theme at the darkmode.css using .dark

Looking forward to the awesome theme you will create.

Add a bricks theme

Hey, @abel-otegbola I want to add a new theme based on bricks. Can I add this? If yes, please assign me the task.

adding favicon and new theme

I can add a favicon for the title tab for the page and 1/2 new themes to the project

update readme with rules

separate buttons for mode and background of clock

we should have separate buttons for the mode and background of the clock. there needs to be alignment between items.

Custom scroll bar with hover effect

@abel-otegbola Can I add Custom scroll bar with hover effect?I tried it.You can see this screenshot.

Adding preview image in the theme section

I want to add preview image in the theme section for each theme name so that people get idea what they look like. @abel-otegbola please assign me the task

Adding logo.

Changes to be made according to the color theme.

adding scroll on theme option

@abel-otegbola please assign me this task

Adding Date to project

I wanted to add date.

adding new clock

Add A New Theme (Fire)

Hey, @abel-otegbola I want to add a fire theme on your app. Can I do this? Please assign me the task.