Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tusharnankani/AnalogClock

Analog Clock with added Neomorphic effects.
https://github.com/tusharnankani/AnalogClock

aesthetic clock dark-mode html-css-javascript javascript light-theme neomorphic neomorphism time

Last synced: 3 months ago
JSON representation

Analog Clock with added Neomorphic effects.

Host: GitHub
URL: https://github.com/tusharnankani/AnalogClock
Owner: tusharnankani
License: mit
Created: 2020-06-26T10:18:11.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-11-18T17:43:36.000Z (almost 4 years ago)
Last Synced: 2024-06-10T09:48:10.134Z (5 months ago)
Topics: aesthetic, clock, dark-mode, html-css-javascript, javascript, light-theme, neomorphic, neomorphism, time
Language: CSS
Homepage: https://tusharnankani.github.io/AnalogClock/
Size: 26.4 KB
Stars: 18
Watchers: 1
Forks: 2
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        
# Analog Clock

### This website is deployed [here.](https://tusharnankani.github.io/AnalogClock/)

### *Features*:

* User-friendly

* Displays current Time

* Neomorphic Interface 

* Added Themes: Dark Mode <-> Light Mode

## *Features to be added*

- Adding Timezones 

- Adding a stopwatch / timer (countdowns)

## *Technologies used*

- HTML5

- CSS3 (with Flexbox)

- Vanilla Javascript

## *References*

* For Fonts: [Google Fonts](https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap)

* For Color Coordination: [w3schools](https://www.w3schools.com/colors/colors_mixer.asp?colorbottom=000000&colortop=FFFFFF)

* For Date and Time function: [Date and Time JS](https://javascript.info/date#setting-date-components)

* For Neomorphism: [Writing CSS for Neomorphism](https://www.youtube.com/watch?v=Gv0dy51SYL0)

* Help for Neomorphism: [Neomorphism](https://neumorphism.io/)

* More about Neomorphism: [CSS-tricks](https://css-tricks.com/neumorphism-and-css/)

## Website Demo:

![1](https://user-images.githubusercontent.com/61280281/85862463-6e0a9a00-b7df-11ea-806e-2ebbeda2ab0c.png)

![2](https://user-images.githubusercontent.com/61280281/85862468-6fd45d80-b7df-11ea-8142-435302297a22.png)

![3](https://user-images.githubusercontent.com/61280281/85862470-706cf400-b7df-11ea-8e31-90f2f8ae4a2e.png)

# *Author*

* Tushar Nankani (tusharnankani, [email protected])

   - [LinkedIn](https://www.linkedin.com/in/tusharnankani)