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
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<...
#2: Post edited
- 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
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); ```