DEV Community: Adremy

JavaScript Practice: Building an Analog Clock

Adremy — Thu, 13 Apr 2023 14:28:59 +0000

It’s my second practice and I will be building an analog clock with moving hands. This is still part of Wes Bos's JavaScript 30 Playlist. Loved this because I was quite lazy today but didn't want to end the day without coding.

The Project:

The project involves creating an analog clock that displays the current time using three moving hands; the hour hand, the minute hand, and the second hand. The hour hand moves slower than the minute hand, and the minute hand moves slower than the second hand. The clock should update in real time, meaning it should change every second.

The Breakdown:

To create the analog clock, we need to break it down into three parts; HTML, CSS, and JavaScript. HTML is responsible for the basic structure of the clock, while CSS is used to style it. JavaScript is where the real magic happens, as it is responsible for updating the clock hands in real time.

Step-by-Step Process:

Step 1: Create the HTML Structure

The first step is to create the basic structure of the clock using HTML. We will create a div element and then create three child div elements inside it, one for each hand of the clock. We will give each child div a unique class so that we can access it later using JavaScript.

<div class="clock">
    <div class="clock-face">
       <div class="hand hour-hand"></div>
       <div class="hand min-hand"></div>
       <div class="hand second-hand"></div>
    </div>
 </div>

Step 2: Style the Clock with CSS

The next step is to style the clock using CSS. We will use CSS to position the clock's hands and give them their unique appearance. We can achieve this by using the transform property, which allows us to rotate the clock hands.

  .clock-face {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-3px); /* account for the height of the clock hands */
  }

  .hand {
    width: 50%;
    height: 6px;
    background: black;
    position: absolute;
    top: 50%;
    /* code below allows hand rotate along the x-axis */
    transform-origin: 100%;
    /* pushes hand direction to the 12-hour mark */
    transform: rotate(90deg);
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0, 1.24, 1, 1);
  }

Initially, the hand element is placed horizontally. We use the transform-origin and transform (rotate) properties to keep all hands at the 12-hour mark. The transition and transition-timing-function allow us to animate the moving hands when it rotates to a degree.

Step 3: Create the JavaScript Logic

The final step is to create the JavaScript logic that will update the clock hands in real-time. We will use the Date object to get the current time and calculate the angle at which each hand should be rotated. We will then use the transform property to rotate each hand to the calculated angle.

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

function setDate() {
  const now = new Date();

// code to get the seconds of the time 

  const seconds = now.getSeconds();

//   Initially the rotation of the secondHand does not match the actual seconds and that's because we gave it an initial rotation of 90deg in the CSS codes. So we need to add that (90deg) to the secondsDegrees to make it align

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

// code to get the minutes of time
  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

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

// code to run the function every second
setInterval(setDate, 1000);

First, we use querySelector to get the div elements for the secondHand, minHand, and hourHand. We then create a function that gets time and rotates each hand based on the current seconds, minutes, and hours as shown below. I also highlighted some issues and their solutions in the code comments. The setInterval function is used to make sure my setDate function is running every second.

This is my second JavaScript practice and I am excited about the next few weeks. I learned more about querySelectors and how the simplest of codes can solve what looked like an uphill task. I can only look ahead with confidence and purpose.

My First JavaScript Practice: Building a Drum Kit

Adremy — Tue, 11 Apr 2023 11:38:32 +0000

This is my first JavaScript practice and I’ll be learning how to build the Drum Kit from Wes Bos JavaScript 30 Playlist.

The Drum Kit project is a web-based application that allows users to play different drum sounds using their keyboard. The application consists of various drum sounds mapped to different keys on the keyboard. When a user presses a key on their keyboard, the corresponding drum sound plays, and an animation is displayed to indicate which key was pressed.

The application is built using Tailwind CSS and JavaScript. Tailwind CSS is used to create the user interface, while JavaScript is used to handle the logic behind the application.

Logic Behind the Process

The logic behind the Drum Kit project is relatively straightforward. First, we need to create the HTML and CSS to display the user interface. Then we need to map the different drum sounds to specific keys on the keyboard. Finally, we need to write the JavaScript code to handle the user input and play the corresponding sound when a key is pressed.

To map the drum sounds to specific keys on the keyboard, we use the data-key attribute in HTML. We assign each drum sound a unique data-key value, and we assign each key on the keyboard a unique keyCode value. When a user presses a key on the keyboard, we check the keyCode value of the key to determine which drum sound to play.

To play the drum sound, we use the Audio object in JavaScript. We create an instance of the Audio object for each drum sound and store it in a variable. When a key is pressed, we use the data-key value to determine which Audio object to play.

To display the animation when a key is pressed, we use CSS. We create a custom class in CSS that applies the desired animation to the element, and we add this class to the element using JavaScript when a key is pressed. We then remove the class after a short delay to reset the animation.

Step-by-Step Process

Now let's dive into the step-by-step process of building the Drum Kit project.

Step 1: Create the HTML and CSS

The first step is to create the HTML and CSS to display the user interface. We will create a div for each drum sound and assign each div a unique data-key value. We will also create a custom CSS class to apply the animation to the div when a key is pressed.

We will create an audio element for each drum sound and assign each audio element a unique data-key value. We will also add the audio file for each drum sound. Each audio file is located in the sounds folder located in the same directory as my HTML file.

<!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="./dist/output.css">
   <link rel="icon" href="https://fav.farm/✅" />
   <title>Beat Maker</title>
</head>

<body class="antialiased bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-rose-100 to-teal-100">
   <!-- Container for the Keys -->
   <div class="flex gap-2 h-screen items-center justify-center place-items-center px-3">
       <!-- Key # -->
       <div data-key="65" class="key">
           <kbd>A</kbd>
           <span class="sound">CLAP</span>
       </div>
       <!-- Key # -->
       <div data-key="83" class="key">
           <kbd>S</kbd>
           <span class="sound">HIHAT</span>
       </div>
       <!-- Key # -->
       <div data-key="68" class="key">
           <kbd>D</kbd>
           <span class="sound">KICK</span>
       </div>
       <!-- Key # -->
       <div data-key="70" class="key">
           <kbd>F</kbd>
           <span class="sound">OPENHAT</span>
       </div>
       <!-- Key # -->
       <div data-key="71" class="key">
           <kbd>G</kbd>
           <span class="sound">BOOM</span>
       </div>
       <!-- Key # -->
       <div data-key="72" class="key">
           <kbd>H</kbd>
           <span class="sound">RIDE</span>
       </div>
       <!-- Key # -->
       <div data-key="74" class="key">
           <kbd>J</kbd>
           <span class="sound">SNARE</span>
       </div>
       <!-- Key # -->
       <div data-key="75" class="key">
           <kbd>K</kbd>
           <span class="sound">TOM</span>
       </div>
       <!-- Key # -->
       <div data-key="76" class="key">
           <kbd>L</kbd>
           <span class="sound">TINK</span>
       </div>
   </div>

   <audio data-key="65" src="sounds/clap.wav"></audio>
   <audio data-key="83" src="sounds/hihat.wav"></audio>
   <audio data-key="68" src="sounds/kick.wav"></audio>
   <audio data-key="70" src="sounds/openhat.wav"></audio>
   <audio data-key="71" src="sounds/boom.wav"></audio>
   <audio data-key="72" src="sounds/ride.wav"></audio>
   <audio data-key="74" src="sounds/snare.wav"></audio>
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>

   <script src="./index.js"></script>
</body>
</html>

Step 2: Create the JavaScript Code to Play the Sound and Show Animation

The next step is to create the JavaScript code to handle the user input and play the corresponding sound. We will use the Audio object to play the sound and add and remove the CSS class to display the animation.

// code to play the corresponding audio file when a key is pressed

function playSound(e) {
    // select an audio element that matches the corresponding data-key
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    // select the key element for animations
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
    // stops the function from running if the key pressed has no associated data-key
    if(!audio) return
    // reset sounds so it can play on multiple taps without delay
    audio.currentTime = 0;
    audio.play();
    key.classList.add('playing');
}

I created a function to listen for a keydown event. A Keydown event happens when the key is pressed down, and auto repeats if the key is pressed down for long. The code listens for a keydown event and matches the keyCode value to the corresponding div element and Audio object using the querySelector method.

We then check if an Audio object exists for the key that was pressed. If no Audio object exists, we exit the function using the return statement. Otherwise, we set the currentTime property of the Audio object to 0 and call the play method to play the sound. The currentTime allows me to play a sound repeatedly without any delays. I also added the custom class(playing) to the div element using the classList.add method to display the animation.

Step 3: Create the JavaScript Code to Stop the Animation After the Key is Pressed

The problem after creating the code above was that the animation still stays after the key is pressed. One cannot tell if the key pressed is repeated or not. Thus creating the need to add a code that removes the playing class after the key is pressed.

I tried the code in the practice and faced a bug where the animation was stuck on multiple presses. Thanks to the Youtube community and StackOverflow, I found a better way to do that with the Keyup event.

// code to stop transition after button is pressed

// listens for when a pressed key is released
window.addEventListener('keyup', function(e) {
   const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
   // stops the function from running if the key pressed and released has no associated data-key
   if (!key) return;
   // removes the playing class when the pressed key is released
   key.classList.remove('playing');
})

The code listens for a keyup event and removes the class of playing. I also added a return statement in case the wrong key is pressed.

This is the first of many practices I will be doing within a few months. My goal is to be good at JavaScript. I understand I can never be perfect and I will need to keep learning. However, I want to build muscle memory around this and understand how to logically approach every issue.

TIME TO FOCUS ON MY NEXT PRACTICE!!!

Introducing Myself

Adremy — Wed, 15 Mar 2023 13:43:58 +0000

Hello, my name is Adremy, and I am a frontend web developer currently learning JavaScript. Before getting into tech, I started out as a content writer, but I've always been interested in technology and its limitless possibilities. So, I decided to make the switch and become a front-end developer. It has been an exciting journey so far, and I am determined to make the most of it.

As with any journey, there have been challenges along the way. One of the biggest challenges I faced was learning how to code from scratch. I had no prior knowledge of HTML, CSS, or any programming language. However, with a lot of determination and dedication, I was able to learn HTML5, CSS3, and Tailwind CSS in just seven months. It was a huge achievement for me, and it gave me the confidence to keep going.

Currently, I am learning JavaScript. I have learned about the basics so far, which include data types, variables, arrays, and an introduction to objects. I started my learning journey from freeCodeCamp, but I later switched to a video course by Bro Code. I found that I work better with video tutorials, and it has helped me to understand the concepts better.

Over the next 30-45 days, I will be focusing on tutorial-based JavaScript projects. I aim to build a bit of muscle memory around JavaScript while understanding the whys and logic of each process. I made a promise to become a React developer before the end of 2023, and I am proud of the progress I’ve made so far.

As I continue on my journey to becoming a React developer, I hope to connect with fellow developers. I believe that collaboration and networking are essential to success, and I am excited to be a part of this vibrant community. There is still a lot for me to learn, but I am excited about the possibilities and look forward to what the future holds.