Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Post History

25%

+0 −4

Q&A queryselector for all does not select the specified css selectory [closed]

I tried using query selector but it does not work heres my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS + CSS Clock&lt...

0 answers · posted 2y ago by Ansh‭ · closed 2y ago by Alexei‭

Question javascript web css

#3: Question closed by

Alexei‭ · 2023-01-11T08:50:02Z (almost 2 years ago)

Copy Link

Raw

Markdown

#2: Post edited by

Ansh‭ · 2023-01-10T15:01:15Z (almost 2 years ago)

Copy Link

Raw

Markdown

I tried using query selector but it does not work
heres my HTML code:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hour-hand"></div>
<div class="min-hand"></div>
<div class="second-hand"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
```
Heres my css code:
```
html {
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.second-hand{
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin:100% ;
border-radius: 20px;
transition: all 0.5s;
transform: rotate(90deg);
}
```
Heres my .js file:
```
const secondHand=document.querySelector('.second-hand');
function setDate(){
const now= new Date();
const seconds=now.getSeconds;
const secDEG=6*seconds;
secondHand.style.transform =`rotate(${secDEG}deg)`;
const minutes=now.getMinutes;
const hours=now.getHours;
}
setInterval(setDate, 1000);
```

I tried using query selector but it does not work
heres my HTML code:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hour-hand"></div>
<div class="min-hand"></div>
<div class="second-hand"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
```
Heres my css code:
```
html {
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.second-hand{
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin:100% ;
border-radius: 20px;
transition: all 0.5s;
transform: rotate(90deg);
}
```
Heres my .js file:
```
const secondHand=document.querySelector('.second-hand');
function setDate(){
const now= new Date();
const seconds=now.getSeconds;
const secDEG=6*seconds;
secondHand.style.transform =`rotate(${secDEG}deg)`;
const minutes=now.getMinutes;
const hours=now.getHours;
}
setInterval(setDate, 1000);
```
The problem is that the secondHand returns null and the element doesnt get selected.

#1: Initial revision by

Ansh‭ · 2023-01-10T14:59:48Z (almost 2 years ago)

Copy Link

Raw

Markdown

queryselector for all does not select the specified css selectory

I tried using query selector but it does not work
heres my HTML code:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>


    <div class="clock">
      <div class="clock-face">
        <div class="hour-hand"></div>
        <div class="min-hand"></div>
        <div class="second-hand"></div>
      </div>
    </div>
    <script src="index.js"></script>

</body>
</html>
```
Heres my css code:
```
html {
    background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
    background-size: cover;
    font-family: 'helvetica neue';
    text-align: center;
    font-size: 10px;
  }

  body {
    margin: 0;
    font-size: 2rem;
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
  }
  .second-hand{
    width: 50%;
    height: 6px;
    background: black;
    position: absolute;
    top: 50%;
    transform-origin:100% ;
    border-radius: 20px;
    transition: all 0.5s;
    transform: rotate(90deg);

  }
```
Heres my .js file:
```
const secondHand=document.querySelector('.second-hand');
function setDate(){
    const now= new Date();
    const seconds=now.getSeconds;
    const secDEG=6*seconds;
    secondHand.style.transform =`rotate(${secDEG}deg)`;
    const minutes=now.getMinutes;
    const hours=now.getHours;
}
setInterval(setDate, 1000);

```

javascript web css

Communities

Post History