Coder Social home page Coder Social logo

abel-otegbola / clock-app Goto Github PK

View Code? Open in Web Editor NEW
21.0 2.0 33.0 21.59 MB

A clock application built with html css and js

Home Page: https://abel-otegbola.github.io/clock-app

License: MIT License

HTML 16.66% JavaScript 8.38% CSS 74.96%
clock-app css html js hacktoberfest

clock-app's Issues

Theme of clocks

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

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.
    Screenshot_20221015-100813

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

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

Adding logo.

Changes to be made according to the color theme.

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.

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 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
Screenshot_20221015-100813

#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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.