Hearts and Headaches: A JavaScript Love Story 💔 to ❤️

#javascript #webdev #beginners

Hello fellow code warriors! 👋 Today I'm taking a break from sobbing into my keyboard to share my delightful journey of creating hearts in JavaScript. Why hearts, you ask? Because after three consecutive nights of debugging, my heart is the only thing I have left to give to this profession.

The "I'm New Here" Disclaimer

First things first: I'm still at that stage where I google "how to center a div" at least twice a day. So if you're an expert who accidentally clicked on this, feel free to judge my code silently while sipping your superiority tea. ☕

Heart #1: The "It's My First Day" HTML/CSS Heart with JavaScript Sprinkles

Let's start with something that actually works before I show you the 17 failed attempts that preceded it:

<div id="simple-heart"></div>

<style>
  #simple-heart {
    position: relative;
    width: 100px;
    height: 90px;
    margin: 30px auto;
  }

  #simple-heart:before, #simple-heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }

  #simple-heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }
</style>

<script>
  // Adding JavaScript because the tutorial title promised JavaScript
  // and I'm a person of my word
  const heart = document.getElementById('simple-heart');

  heart.addEventListener('click', function() {
    this.style.backgroundColor = getRandomColor();
    alert("You clicked on my heart! How forward of you!");
  });

  function getRandomColor() {
    return '#' + Math.floor(Math.random()*16777215).toString(16);
  }
</script>

This is the equivalent of putting on a fancy hat and pretending you're sophisticated. Sure, it's mostly CSS, but JavaScript is there, making things interactive like that one person at a party who keeps asking everyone if they want to play charades.

Heart #2: The "Canvas? More Like Can't-vas" Approach

Now let's draw a heart using HTML5 Canvas, because apparently, I enjoy pain:

<canvas id="heartCanvas" width="300" height="300"></canvas>

<script>
  const canvas = document.getElementById('heartCanvas');
  const ctx = canvas.getContext('2d');

  function drawHeart() {
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Set fill color
    ctx.fillStyle = 'red';

    // Start drawing
    ctx.beginPath();
    const x = 150, y = 130;
    const size = 100;

    ctx.moveTo(x, y);

    // Top left curve
    ctx.bezierCurveTo(
      x - size / 2, y - size / 2, 
      x - size, y + size / 3, 
      x, y + size
    );

    // Top right curve
    ctx.bezierCurveTo(
      x + size, y + size / 3, 
      x + size / 2, y - size / 2, 
      x, y
    );

    ctx.closePath();
    ctx.fill();

    // Add text because I'm extra
    ctx.fillStyle = 'white';
    ctx.font = '20px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('JS ❤️', x, y + 15);
  }

  // Make it beat because static hearts are so 2010
  let scale = 1;
  let growing = false;

  function beatHeart() {
    if (growing) {
      scale += 0.01;
      if (scale >= 1.1) growing = false;
    } else {
      scale -= 0.01;
      if (scale <= 0.9) growing = true;
    }

    ctx.setTransform(scale, 0, 0, scale, canvas.width/2*(1-scale), canvas.height/2*(1-scale));
    drawHeart();
    requestAnimationFrame(beatHeart);
  }

  beatHeart();
</script>

Working with Canvas is like trying to draw with a pencil while riding a unicycle. Possible? Yes. Elegant? Absolutely not. The Bezier curves in this code are the mathematical equivalent of me trying to explain to my mom what I do for a living.

Heart #3: The "SVG? Sure, Very Good" Method

SVG is like the Canvas's more sophisticated cousin who studied abroad:

<svg id="svgHeart" width="200" height="200" viewBox="0 0 200 200">
  <path id="heartPath" d="M100,30 C60,10 0,30 0,90 C0,150 100,170 100,170 C100,170 200,150 200,90 C200,30 140,10 100,30" fill="red"/>
</svg>

<script>
  const svgHeart = document.getElementById('heartPath');
  let colors = ['red', 'pink', 'purple', 'blue', 'green', 'yellow', 'orange'];
  let currentColor = 0;

  // Change color every second because ADHD programming is my specialty
  setInterval(() => {
    currentColor = (currentColor + 1) % colors.length;
    svgHeart.setAttribute('fill', colors[currentColor]);
  }, 1000);

  // Make it pulse with CSS because I'm lazy
  document.head.insertAdjacentHTML('beforeend', `
    <style>
      @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
      }

      #svgHeart {
        animation: pulse 1s infinite;
        transform-origin: center;
      }
    </style>
  `);
</script>

SVG paths are like cooking recipes if they were written by a mathematician who hates you. But once you figure them out, they're actually pretty powerful, like discovering you can make dinner in a microwave.

Heart #4: The "DOM Manipulation Gone Wild" Edition

Who needs specialized graphics when you can just abuse DOM elements?

<div id="heart-container"></div>

<script>
  const container = document.getElementById('heart-container');

  function createHeartParticleSystem() {
    // Clear existing hearts
    container.innerHTML = '';

    // Create 100 heart particles
    for (let i = 0; i < 100; i++) {
      const heart = document.createElement('div');
      heart.textContent = '❤️';
      heart.style.position = 'absolute';
      heart.style.fontSize = Math.random() * 20 + 10 + 'px';
      heart.style.left = Math.random() * 100 + '%';
      heart.style.top = Math.random() * 100 + '%';
      heart.style.opacity = Math.random();
      heart.style.transform = `rotate(${Math.random() * 360}deg)`;
      heart.style.transition = 'all 2s ease-in-out';

      container.appendChild(heart);

      // Animate each heart
      setTimeout(() => {
        heart.style.top = Math.random() * 100 + '%';
        heart.style.left = Math.random() * 100 + '%';
        heart.style.transform = `rotate(${Math.random() * 360}deg)`;
      }, Math.random() * 1000);
    }
  }

  // Style the container
  container.style.width = '300px';
  container.style.height = '300px';
  container.style.border = '1px solid #ccc';
  container.style.position = 'relative';
  container.style.overflow = 'hidden';
  container.style.margin = '0 auto';

  // Initial creation
  createHeartParticleSystem();

  // Update every 3 seconds
  setInterval(createHeartParticleSystem, 3000);
</script>

This approach is like filling a room with heart-shaped confetti and calling it "interior design." Technically accurate, completely impractical, and yet oddly satisfying.

The "What Did We Learn?" Section

After all this heart-making, what did we learn?

JavaScript can make hearts in approximately 17,342 different ways, most of them unnecessarily complicated.
Much like my dating life, sometimes the simplest approach is the best.
Canvas and SVG are powerful tools, or as I call them, "things I pretend to understand during job interviews."
DOM manipulation is the programming equivalent of solving a problem with duct tape - inelegant but effective.

Final Thoughts

Creating hearts in JavaScript is much like actual relationships: they start simple, get complicated quickly, and if you're not careful, you'll end up with performance issues.

Next week: "How I Tried to Center a Div and Accidentally Invented a New Sorting Algorithm" – stay tuned!

If you enjoyed this post, please help validate my existence by hitting the ❤️ button. My therapist says I need external validation while I work on my self-esteem.

Top comments (4)

Nikoloz Turazashvili (@axrisi) • Jun 11

Introduction to Heart Creation
- A fun exploration of creating heart shapes in JavaScript.
- Author mentions debugging challenges and a light-hearted approach to learning.
The "I'm New Here" Disclaimer
- The author is beginner-level in JavaScript and seeks understanding.
- Encourages experts to be kind while reading.
Heart #1: Basic HTML/CSS Heart with JavaScript Interactivity
- Utilizes a <div> and CSS to create a basic heart shape.
- Includes JavaScript to change heart color on click.
- Code snippets for HTML, CSS, and JavaScript provided.
Heart #2: Using HTML5 Canvas
- Illustrates how to draw a heart using the Canvas API.
- Demonstrates use of Bezier curves for shaping.
- Implements a pulsing animation for interactivity.
Heart #3: SVG Heart Shape
- Describes creating hearts with SVG graphics.
- Changes color every second with JavaScript.
- Adds CSS animation effects for a pulsing effect.
Heart #4: DOM Manipulation for Heart Particles
- Focuses on creating multiple heart particles through DOM manipulation.
- Utilizes random positioning and animations for hearts.
- Shows practical application of JavaScript for dynamic content.
What Was Learned
- JavaScript offers many complex methods for creating simple shapes.
- Sometimes simpler approaches are more effective.
- Canvas and SVG are powerful yet complex tools.
- DOM manipulation can be effective even if inelegant.
Final Thoughts
- Creating with JavaScript can mirror relationships – start simply, can get complicated.
- Teases upcoming tutorials and the importance of community support.