Valentine's Day Tutorial

As Valentine's Day rolls around, love is in the air, and what better way to celebrate in the tech world than with a creative project? At Ncoded Solutions, we embraced the spirit of love and innovation by developing a small but delightful Next.js 14 project that adds a twist to the classic "Will you be my Valentine?" question. Our project not only spreads love but also showcases the power of Next.js in crafting interactive web experiences.

The central idea behind our Valentine's Day project was to add an element of fun and surprise to the typical Valentine's Day interaction. We wanted to create a simple yet engaging web app where users could respond to the question "Will you be my valentine?" by clicking either "Yes" or "No". However, to inject a bit of humor and prevent users from rejecting the proposal too easily, we introduced a playful twist – a runaway button that makes it challenging for users to click on "No".

You can test it out here: https://nextjs-valentines-day.vercel.app/

The implementation of the runaway button is given bellow:

"use client";

import { useState } from "react";
import styles from "./no-button.module.css";

export default function NoButton() {
  // State to manage the position of the button
  const [x, setX] = useState(54);

  // Function to handle mouse over event
  function mouseOver() {
    // Update the x-coordinate randomly
    setX(Math.random() * 100);
  }

  // Inline style to dynamically adjust the position of the button
  let noStyle = {
    left: x + "%",
  };

  return (
    <div className={styles.container}>
      <button onMouseOver={mouseOver} style={noStyle} className={styles['no-button']}>
        No
      </button>
    </div>
  );
}        

Basically, we've created a client component NoButton for this purposes. The button will start at the fixed position but will dynamically change its position when a user tries to move over it. The position change will occur horizontally by changing the x coordinate of a button, using Math.random() and CSS styles. We used a well known React's hook useState to manage the state of the x-coordinate of the button.

We hope our Valentine's Day project brings a smile to your face! Go ahead and send it to your Valentine ??

Happy Valentine's Day from Ncoded Solutions! ??