⚡ Javascript Clock

• Wes Bos Youtube Tutorial: We build a CSS + JS Clock in Vanilla JS — #JavaScript30 2/30.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Javascript Clock
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Tutorial Code to create a working clock using just HTML, CSS & javascript.

📷 Screenshots

.

📶 Technologies

• Ran in Google Chrome browser with: Javascript engine V8 for Windows (x64).

💾 Setup

• Open index.html in browser. If any code is changed the browser needs to be refreshed.

💻 Code Examples

• function to calculate position of clock hands using new Date().

function setDate() {
  const now = new Date();
  console.log('now', now);

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hours = now.getHours();
  const hoursDegrees = ((hours / 12) * 360) + ((mins/60)*30) + 90;
  hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}

🆒 Features

• Uses cubic-bezier CSS library for ease-in and ease-out of ticking clock hands.

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• We build a CSS + JS Clock in Vanilla JS — #JavaScript30 2/30.

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com