Stopwatch Website banner

Stopwatch Website

3 devlogs
1h 51m 33s

This is my second try of an HTML Website. I want to Create this time a Site with Jason, HTML and CSS. This should be an Stopwatch and Timer website.

-Functionality:

To start the Stopwatch press the Green “Start” Button.
To Stop the Stopwatch press the – “Stop” Button. You wil be now able to read the Time clearly.
If you want to Reset the Stopwatch, press the – “Reset” Button, so the Stopwatch will be Resetet.

The Stopwatch is able to Track: Hours, Minutes, Seconds, and Miliseconds.

-Design:
Nice, light Blue Background.
Headline with Stopwatch in light Grey Tone
Field with Border radius in White, where the Stopwatch Numbers are.
If you hover over the Buttons, the Cursor becomes an Arrow, and the Colour is slowly, with an Transition of 0.5s, becoming a Darker Tone.

peterotzi79

Shipped this project!

So this is my second Ship :)

I thought for an beginner like me an Stopwatch Website would be a great Point to Start, and I think I was right!
It was often quite challenging because its just my second time using HTML and first time usind CSS and JSON, but considering that I think the Project went pretty well.

I have already new Ideas for Future Functions and Changes, and Im excited to try them out soon!

I am beginning to Understand how all that Website Stuff works and how you can Code!
Looking forward to keep Improving!

peterotzi79

Fixed now the not Clean UI, and everything is ready to Ship now :)

I also leaned the first time about the Life Server Extension, it is pretty useful

Attachment
0
peterotzi79

JSON is working!
So basically the Stopwatch can run now, I still need to implement the Stop and Reset Buttons.
Also I need to Create a better Form for the Stopwatch numbers. Now its not running in a great Form haha

Attachment
0
peterotzi79
  • So I finished now the basic HTML.
    (This should be my first Devlog at 15-20 Minutes, but i forgot to attach Screenshot so it wasnt published lmao… So my first Devlog should be basically two haha) -

I updated the Readme file explaining: functionality and even design.
The CSS is now also finished and Im pretty happy with the outcome!
Might fine tuning it a bit in the Future.

Attached is a Screenshot of how it now looks with the CSS.
Next the Json!

Attachment
0