Commit 5d3102f3 authored by David Trattnig's avatar David Trattnig
Browse files

Initial version of clock.

parent 0be35789
<script> <script>
export let name; import { onMount } from 'svelte';
</script>
let time = new Date();
// these automatically update when `time`
// changes, because of the `$:` prefix
$: hours = time.getHours();
$: minutes = time.getMinutes();
$: seconds = time.getSeconds();
<main> onMount(() => {
<h1>Hello {name}!</h1> const interval = setInterval(() => {
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> time = new Date();
</main> }, 1000);
return () => {
clearInterval(interval);
};
});
</script>
<style> <style>
main { svg {
text-align: center; width: 100%;
padding: 1em; height: 100%;
max-width: 240px; }
margin: 0 auto;
.clock-face {
stroke: #333;
fill: white;
}
.minor {
stroke: #999;
stroke-width: 0.5;
}
.major {
stroke: #333;
stroke-width: 1;
} }
h1 { .hour {
color: #ff3e00; stroke: #333;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
} }
@media (min-width: 640px) { .minute {
main { stroke: #666;
max-width: none;
}
} }
</style>
\ No newline at end of file .second, .second-counterweight {
stroke: rgb(180,0,0);
}
.second-counterweight {
stroke-width: 3;
}
</style>
<svg viewBox='-50 -50 100 100'>
<circle class='clock-face' r='48'/>
<!-- markers -->
{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
<line
class='major'
y1='35'
y2='45'
transform='rotate({30 * minute})'
/>
{#each [1, 2, 3, 4] as offset}
<line
class='minor'
y1='42'
y2='45'
transform='rotate({6 * (minute + offset)})'
/>
{/each}
{/each}
<!-- hour hand -->
<line
class='hour'
y1='2'
y2='-20'
transform='rotate({30 * hours + minutes / 2})'
/>
<!-- minute hand -->
<line
class='minute'
y1='4'
y2='-30'
transform='rotate({6 * minutes + seconds / 10})'
/>
<!-- second hand -->
<g transform='rotate({6 * seconds})'>
<line class='second' y1='10' y2='-38'/>
<line class='second-counterweight' y1='10' y2='2'/>
</g>
</svg>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment