Currently, I am working on an Analog clock project using React, Typescript, and SCSS. My main goal is to keep the CSS code primarily in the SCSS file and minimize its use in inline HTML (or eliminate it completely).
Here is an excerpt from my SCSS file:
.dial-style {
position: 'relative';
top: 0;
left: 0;
width: 200;
height: 200;
border-radius: 100%;
border-style: solid;
border-color: #000;
}
.second-hand-style {
position: 'relative';
top: 50%;
left: 50%;
border: 1px solid red;
width: 40%;
height: 1;
transform-origin: 0% 0%;
background-color: #ff0000;
}
minute-hand-style {
position: 'relative';
top: 100;
left: 100;
border: 1px solid grey;
width: 40%;
height: 3;
transform-origin: 0% 0%;
background-color: grey;
}
.hour-hand-style {
position: 'relative';
top: 100;
left: 100;
border: 1px solid grey;
width: 20%;
height: 7;
transform-origin: 0% 0%;
background-color: #808080;
}
Below is a snippet of my Typescript React component:
import * as React from 'react'
import '../styles/style'
export class AnalogClock extends React.Component<AnalogClockProps, AnalogClockState> {
constructor(props: AnalogClockProps) {
super(props)
}
render() {
// Additional code for transforming hands of the clock
}
}
interface AnalogClockState {}
interface AnalogClockProps {
currentTime: Date
}
If you want to see how my clock looks like, click on this link.
Despite trying different values for top, left, width, and height properties, the position of the clock hands does not change and remain fixed at the top of the screen. What could be causing this issue?