JSWatch

Developer
Bryan Smith
Size
3,294 Kb
Views
40,480
  1. JSWatch Previews
  2. JSWatch HTML Codes
  3. JSWatch CSS Codes
  4. JSWatch JS Codes

How do I make an jswatch?

Inspired by Wes Bos Javascript30 tutorial. Took it a little further.. What is a jswatch? How do you make a jswatch? This script and codes were developed by Bryan Smith on 21 November 2022, Monday.

JSWatch Previews
IQ Test

JSWatch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JSWatch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="clock"> <div class="clock-face"> <div class="hand hour-hand"></div> <div class="hand min-hand"></div> <div class="inner-face"> <div class="hand second-hand"></div> </div> <div class="date"> <div class="today"></div> </div> <div class="arrow up">▮</div> <div class="arrow down">▼</div> <div class="arrow left">▪</div> <div class="arrow right">▪</div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

JSWatch - Script Codes CSS Codes

body { font-size: 2rem; display: flex; flex: 1; min-height: 50vh; align-items: center; background: #1c1c1b;
}
.clock { width: 15rem; height: 15rem; border: 5px solid #cfc267; border-radius: 50%; margin: 50px auto; position: relative; padding: 2rem; box-shadow: 0 0 0px 3px #b29d00, inset 0 0 0 0 #ccc, inset 0 0 10px #000; z-index: 2; background: #fff;
}
.clock-face { width: 100%; height: 100%;
}
.clock-face .hand { background: #cfc267; position: absolute; top: 50%; transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); z-index: 2;
}
.clock-face .hour-hand { width: 35%; height: 11px; left: 17%; transform-origin: 100%; border-radius: 3px;
}
.clock-face .min-hand { width: 46%; height: 7px; transform-origin: 100%; left: 6%; border-radius: 3px;
}
.clock-face .inner-face { width: 4rem; height: 4rem; border: 2px solid #cfc267; border-radius: 50%; position: absolute; top: 40%; background: #fff; background: #000080;
}
.clock-face .inner-face .second-hand { width: 50%; height: 3px; transform-origin: 100%; border-radius: 3px;
}
.date { border: 1px solid #ccc; box-shadow: inset 0 0 3px #000; height: 27px; width: 30px; position: absolute; top: 47%; right: 10%; text-align: center; font-size: 1.5rem; font-family: sans-serif; color: #cfc267;
}
.arrow { color: #cfc267; position: absolute; font-size: 40px;
}
.up { bottom: -18px; left: 47%; text-shadow: 0px -2px 3px #736565;
}
.down { top: -7px; left: 43%; text-shadow: 0px 2px 3px #736565;
}
.right { left: -5px; top: 42%; text-shadow: 2px 0px 3px #736565;
}
.left { right: -5px; top: 42%; text-shadow: -2px 0px 3px #736565;
}

JSWatch - Script Codes JS Codes

 const secondHand = document.querySelector('.second-hand'); const minuteHand = document.querySelector('.min-hand'); const hourHand = document.querySelector('.hour-hand'); const today = document.querySelector('.today'); function setDate() { const now = new Date(); const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; const minutes = now.getMinutes(); const minutesDegrees = ((minutes / 60) * 360) + 90; const hours = now.getHours(); const hoursDegrees = ((hours / 12) * 360) + 90; const todaysDate = now.getDate(); today.innerHTML = todaysDate; secondHand.style.transform = `rotate(${secondsDegrees}deg)`; minuteHand.style.transform = `rotate(${minutesDegrees}deg)`; hourHand.style.transform = `rotate(${hoursDegrees}deg)`; } setInterval(setDate, 1000);
JSWatch - Script Codes
JSWatch - Script Codes
Home Page Home
Developer Bryan Smith
Username beeg
Uploaded November 21, 2022
Rating 3
Size 3,294 Kb
Views 40,480
Do you need developer help for JSWatch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryan Smith (beeg) Script Codes
Name
CSS only animated skills
Animated SVG Signature
Customer Checkout
A Pen by Bryan Smith
Clip Path Sunset
Circle Slider
Gradient Text
Angular Christmas List
Credit Card Wallet
Sudoku Validator
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!