Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

clock responsive to full screen + CSS for canvas #1

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

FranzAT
Copy link

@FranzAT FranzAT commented Aug 31, 2021

  • clock size is responsive to full screen (mainly based on new #clock-section in CSS/main.css)

  • update function draw() in file clock.js with canvas.width instead of fixed pixel values. Due to responsive design, also line weight or lengths must be responsive.

  • get properties from CSS into Canvas with the help of DOM (mainly due to function getPropeties(className) in file clock.js). So that color and font of the canvas clock can be defined in CCS/main.css under #clockface

  • set draw interval to 1000ms so that the second Hand is moving like a real clock.

  • making 3 layers of the clock in index.html, so that additional functions can be added between clock background and clock hands (e.g. day/date)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant