DEV Community: Hayr Hotoca

How to Convert Short URLs to Long URLs in JavaScript Using Axios or Fetch

Hayr Hotoca — Thu, 16 Jan 2025 11:31:17 +0000

Converting short URLs to long URLs can be a common task in web development, especially when dealing with redirects. In this post, we'll explore how to achieve this using JavaScript with two popular libraries: Axios and Fetch API. We'll demonstrate how to retrieve the full URL from a shortened TikTok link.

Using Axios

Axios is a promise-based HTTP client for the browser and Node.js. Below is a simple example of how to use Axios to convert a short URL to its long form.

axios("https://vt.tiktok.com/ZS6yXCpvq/")
  .then(res => console.log(`Full URL with Axios: ${res.request.res.responseUrl}`))
  .catch(err => console.error(err));

// Full URL with Axios: https://www.tiktok.com/@bigthink/video/7345607663322926366

Explanation:

We initiate a GET request to the short URL using axios().
Upon success, the response object contains a property res.request.res.responseUrl that holds the full URL after following any redirects.
If there’s an error during the request, it will be caught in the catch block, and we log the error message.

Using Fetch

The Fetch API provides a more modern way to make network requests. Here’s how you can use it to achieve the same result:

fetch("https://vt.tiktok.com/ZS6yXCpvq/")
  .then(res => console.log(`Full URL with Fetch: ${res.url}`))
  .catch(err => console.error(err));

// Full URL with Fetch: https://www.tiktok.com/@bigthink/video/7345607663322926366

Explanation:

The fetch() function initiates a request to the specified URL.
The res.url property contains the final URL after any redirects.
Similar to Axios, errors are handled in the catch block.

Conclusion

Both Axios and Fetch provide straightforward methods for converting short URLs to long URLs in JavaScript. While Axios may offer additional features like interceptors and automatic JSON data transformation, Fetch is built into modern browsers and is quite powerful for basic requests. Depending on your project requirements, you can choose either method for handling URL redirection.

Build a Secure Password Generator with Javascript

Hayr Hotoca — Wed, 15 Jan 2025 11:21:07 +0000

In today's digital world, having a strong password is crucial for safeguarding your online accounts. In this post, I'll walk you through creating a simple yet effective password generator using JavaScript. This generator allows users to customize their password by selecting various criteria such as length, and the inclusion of uppercase letters, lowercase letters, numbers, and symbols.

The Code Breakdown

HTML Structure
Before diving into the JavaScript code, let’s set up the HTML structure for our password generator. Here’s a basic template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <link rel="stylesheet" href="styles.css"> <!-- Add your CSS file -->
</head>
<body>
    <h1>Password Generator</h1>
    <div>
        <label for="lengthSlider">Password Length: <span id="lengthValue">12</span></label>
        <input type="range" id="lengthSlider" min="8" max="20" value="12">
    </div>
    <div>
        <input type="checkbox" id="uppercase" checked> Include Uppercase Letters
        <input type="checkbox" id="lowercase" checked> Include Lowercase Letters
        <input type="checkbox" id="numbers" checked> Include Numbers
        <input type="checkbox" id="symbols"> Include Symbols
    </div>
    <button onclick="generatePassword()">Generate Password</button>
    <input type="text" id="passwordOutput" readonly>
    <button class="fa-copy" onclick="copyPassword()">Copy</button>

    <script src="script.js"></script> <!-- Link to your JavaScript file -->
</body>
</html>

JavaScript Functionality

Now, let’s dive into the JavaScript code that powers our password generator.

function generatePassword() {
    const length = document.getElementById('lengthSlider').value;
    const uppercase = document.getElementById('uppercase').checked;
    const lowercase = document.getElementById('lowercase').checked;
    const numbers = document.getElementById('numbers').checked;
    const symbols = document.getElementById('symbols').checked;

    let chars = '';
    if (uppercase) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    if (lowercase) chars += 'abcdefghijklmnopqrstuvwxyz';
    if (numbers) chars += '0123456789';
    if (symbols) chars += '!@#$%^&*()_+-=[]{}|;:,.<>?';

    let password = '';
    for (let i = 0; i < length; i++) {
        password += chars.charAt(Math.floor(secureRandom() * chars.length));
    }

    document.getElementById('passwordOutput').value = password;
}

function secureRandom() {
    try {
        const array = new Uint8Array(8);
        const buf = window.crypto.getRandomValues(array);
        const offset = Math.random() < 0.5 ? 0 : buf.length - 4;
        const dataView = new DataView(buf.buffer);
        const intVal = dataView.getUint32(offset, true); // Convert bytes to an unsigned 32-bit integer
        const normalized = intVal / (Math.pow(2, 32) - 1); // Scale to [0, 1)
        return normalized;
    } catch (error) {
        console.error("Error generating secure random number:", error);
        throw error; // Rethrow or handle as needed
    }
}

function copyPassword() {
    const passwordOutput = document.getElementById('passwordOutput');
    passwordOutput.select();
    document.execCommand('copy');

    // Add visual feedback
    const btn = document.querySelector('.fa-copy').parentElement;
    btn.innerHTML = '<i class="fas fa-check"></i>';
    setTimeout(() => {
        btn.innerHTML = '<i class="fas fa-copy"></i>';
    }, 1000);
}

// Update length value display
document.getElementById('lengthSlider').addEventListener('input', function () {
    document.getElementById('lengthValue').textContent = this.value;
});

// Generate initial password
generatePassword();

Explanation of Key Functions

generatePassword(): This function collects user preferences from the UI and constructs a character set based on the selected options. It then generates a random password by selecting characters from this set.
secureRandom(): This function uses the Web Crypto API to generate secure random numbers, ensuring that the passwords generated are not only random but also secure.
copyPassword(): This function allows users to easily copy the generated password to their clipboard and provides visual feedback to confirm the action.
Event Listener for Length Slider: This updates the displayed password length dynamically as the user adjusts the slider.

The final product: https://1limx.com/password-generator

Conclusion

With just a few lines of code, you can create a robust and customizable password generator that enhances your online security. Feel free to expand upon this project by adding more features or improving the user interface! Happy coding! If you have any questions or suggestions for improvements, feel free to leave a comment below!

Create Stunning Gradual Div Reveals with JavaScript setTimeout and CSS Transitions

Hayr Hotoca — Tue, 14 Jan 2025 11:32:27 +0000

Creating a smooth and engaging user experience on the web often involves combining JavaScript and CSS transitions. In this post, we will explore how to use the setTimeout function in JavaScript to gradually reveal elements on a webpage with CSS transitions.

Overview

The goal of this example is to create a series of div elements that fade in one after the other. We will leverage the setTimeout function to control the timing of each element's appearance, while CSS transitions will handle the visual effects.

HTML Structure

We will start by defining our HTML structure. Here’s a simple layout with several divs containing images and links:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gradual Div Reveal</title>
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="toggle-div">
      <img src="https://aws.amazon.com/startups/upload/e4d8d468-90d1-704f-a34e-7e195ce4025a/ceac2e85-dca6-4da4-bbf7-359df7db739d.png" />
      <a href="">perplexity.com</a>
    </div>
    <div class="toggle-div">
      <img src="https://aimode.co/wp-content/uploads/2024/07/meta-ai-logo.webp" />
      <a href="">meta.ai</a>
    </div>
    <div class="toggle-div">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Microsoft_365_Copilot_Icon.svg/2048px-Microsoft_365_Copilot_Icon.svg.png" />
      <a href="">copilot.microsoft.com</a>
    </div>
    <div class="toggle-div">
      <img src="https://www.deepseek.com/favicon.ico" />
      <a href="">chat.deepseek.com</a>
    </div>
    <div class="toggle-div">
      <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/google-gemini-icon.png" />
      <a href="">gemini.google.com</a>
    </div>
    <script src="src/script.js"></script>
  </body>
</html>

CSS for Transitions

Next, we will define the CSS styles that will control the appearance and transition effects of our divs:

.toggle-div {
  opacity: 0; /* Start hidden */
  transition: opacity 1s ease; /* Transition effect */
  height: 50px; /* Set a height for visibility */
  background-color: lightblue; /* Background color for visibility */
  margin: 10px 0; /* Spacing between divs */
  padding: 12px 80px;
  display: flex;
  align-items: center;
}

.toggle-div img {
  height: 100%;
  margin-right: 8px;
}

.toggle-div a {
  font-size: 20px;
}

Explanation of CSS

Opacity: Initially set to 0, making the divs invisible.
Transition: The opacity property will transition over 1 second with an ease effect.
Styling: Basic styling is applied to ensure visibility and layout.

JavaScript for Gradual Reveal

Finally, we will implement the JavaScript logic to control when each div becomes visible:

// JavaScript to reveal divs
const divs = document.querySelectorAll('.toggle-div');

divs.forEach((div, index) => {
  setTimeout(() => {
    div.style.opacity = 1; // Change opacity to make it visible
  }, index * 500); // Delay each div by half a second multiplied by its index
});

Explanation of JavaScript

Query Selector: We select all elements with the class .toggle-div.
forEach Loop: We iterate over each selected div.
setTimeout: For each div, we set a timeout that changes its opacity to 1, making it visible. The delay increases with each iteration, creating a staggered reveal effect.

Here is the final product:

Check it out: https://playcode.io/2219619

Conclusion

By combining JavaScript's setTimeout function with CSS transitions, we can create visually appealing effects that enhance user interaction. This approach is not only simple but also effective in providing a polished feel to web applications.
Feel free to experiment with different timings and styles to see how they affect the overall user experience!

Detecting Key Combinations Press in JavaScript

Hayr Hotoca — Mon, 13 Jan 2025 08:57:57 +0000

Capturing a single key press in JavaScript is a straightforward task, but when it comes to detecting multiple key combinations, things can get a bit trickier. In this post, we'll explore a simple implementation that captures the "Command" key and its combinations with "C" (for copy) and "V" (for paste). We'll also discuss how to extend this functionality to detect more complex key combinations.

The Basic Setup

Here's a simple code snippet that demonstrates how to capture the "Command" key and its combinations:

const keyState = {
  cmd: false,
};

// Add event listeners for keydown and keyup events
window.addEventListener("keydown", handleKeyDown);
window.addEventListener("keyup", handleKeyUp);

// Function to handle keydown events
function handleKeyDown(event) {
  if (event.key === "Meta") {
    keyState.cmd = true;
  }
  // Check for the Command and c combination
  if (keyState.cmd && event.key === "c") {
    console.log("user wants to copy");
  }
  // Check for the Command and v combination
  if (keyState.cmd && event.key === "v") {
    console.log("user wants to paste");
  }
}

// Function to handle keyup events
function handleKeyUp(event) {
  if (event.key === "Meta") {
    keyState.cmd = false;
  }
}

How It Works

Key State Tracking: We maintain a simple keyState object to track whether the "Command" key is pressed.
Event Listeners: We add event listeners for keydown and keyup events to detect when keys are pressed or released.
Combination Detection: In the handleKeyDown function, we check if the "Command" key is held down while another specific key (like "C" or "V") is pressed.

Extending Functionality: Detecting More Key Combinations

While our initial implementation works well for detecting just two combinations, you might want to expand it to include more keys or even complex combinations. Here’s how you can do that:

Step 1: Expand the Key State Object

You can add more keys to your keyState object. For example, let’s add support for Shift and Alt:

const keyState = {
  cmd: false,
  shift: false,
  alt: false,
};

Step 2: Update Event Handlers

Modify your event handlers to track these additional keys:

function handleKeyDown(event) {
  if (event.key === "Meta") {
    keyState.cmd = true;
  }
  if (event.key === "Shift") {
    keyState.shift = true;
  }
  if (event.key === "Alt") {
    keyState.alt = true;
  }

  // Example of detecting Command + Shift + C
  if (keyState.cmd && keyState.shift && event.key === "c") {
    console.log("user wants to copy with Shift");
  }

  // Example of detecting Command + Alt + V
  if (keyState.cmd && keyState.alt && event.key === "v") {
    console.log("user wants to paste with Alt");
  }
}

function handleKeyUp(event) {
  if (event.key === "Meta") {
    keyState.cmd = false;
  }
  if (event.key === "Shift") {
    keyState.shift = false;
  }
  if (event.key === "Alt") {
    keyState.alt = false;
  }
}

Step 3: Test Your Combinations

Now you can test various combinations like:
Command + C for copy
Command + V for paste
Command + Shift + C for a different action
Command + Alt + V for another action

Conclusion

Detecting single key presses in JavaScript is easy, but as you start combining multiple keys, it requires a bit more thought and implementation. By maintaining a state object for your keys, you can effectively track multiple combinations and respond accordingly.
Feel free to experiment with the code above and extend it further! What other combinations would you like to implement? Share your thoughts in the comments below!