Skip to content

clock responsive to full screen + CSS for canvas#1

Open
FranzAT wants to merge 4 commits intoGeekLaunch:masterfrom
FranzAT:master
Open

clock responsive to full screen + CSS for canvas#1
FranzAT wants to merge 4 commits intoGeekLaunch:masterfrom
FranzAT:master

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