I recently started self studying some HTML/CSS/Js, one of my first projects was a clock. I was following a tutorial on how to make it and, in the end, everything seemed to work properly but instead of it being centered, it is too far on the right and I can't seem to find a way to fix the position.
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");
var clock = setInterval(
function time() {
var date_now = new Date();
var hr = date_now.getHours();
var min = date_now.getMinutes();
var sec = date_now.getSeconds();
if (hr < 10) {
hr = "0" + hr;
}
if (min < 10) {
min = "0" + min;
}
if (sec < 10) {
sec = "0" + sec;
}
hour.textContent = hr;
minute.textContent = min;
seconds.textContent = sec;
}, 100
)*,
*::before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 135deg, #8052ec, #d161ff);
}
.clock {
width: 550px;
height: 150px;
position: absolute;
transform: translate(-50% -50%);
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: space-between;
}
.clock div {
position: relative;
background-color: white;
height: 100%;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 60px;
color: black;
border-radius: 5px;
box-shadow: 0 15px 30px rgba(0, 0, 0, .3);
letter-spacing: 3px;
}
.clock span {
font-weight: bolder;
font-size: 60px;
color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class="clock">
<div id="hour">00</div>
<span>:</span>
<div id="minute">00</div>
<span>:</span>
<div id="seconds">00</div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>You are missing a comma in your transform property declaration.
transform: translate(-50% -50%);
should be
transform: translate(-50%, -50%);
Demo:
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");
var clock = setInterval(
function time() {
var date_now = new Date();
var hr = date_now.getHours();
var min = date_now.getMinutes();
var sec = date_now.getSeconds();
if (hr < 10) {
hr = "0" + hr;
}
if (min < 10) {
min = "0" + min;
}
if (sec < 10) {
sec = "0" + sec;
}
hour.textContent = hr;
minute.textContent = min;
seconds.textContent = sec;
}, 100
)*,
*::before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 135deg, #8052ec, #d161ff);
}
.clock {
width: 550px;
height: 150px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: space-between;
}
.clock div {
position: relative;
background-color: white;
height: 100%;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 60px;
color: black;
border-radius: 5px;
box-shadow: 0 15px 30px rgba(0, 0, 0, .3);
letter-spacing: 3px;
}
.clock span {
font-weight: bolder;
font-size: 60px;
color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class="clock">
<div id="hour">00</div>
<span>:</span>
<div id="minute">00</div>
<span>:</span>
<div id="seconds">00</div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>