DEV Community

Cover image for Runaway Button React App
Desmond Gilmour
Desmond Gilmour

Posted on


Runaway Button React App

I made my partner a valentines site using react, and I used emailJS to notify me when they said yes! It was a quick build, but one thing I did get caught on was trying to take people's jquery or vanilla js code from CodePen and use it in my react app for the runaway button on the site.

The runaway button is perfect for pranking friends, and a small thing like this makes computer science very enjoyable for a beginner, so I decided to share.

I've cut a lot of code to focus on the main parts (rest can be found Github). The component has a set x and y where the button begins, but once someone tries to move over the button, the position will change using Math.random(), which is reflected in the CSS of the button.

function App() {

  const [x, setx] = useState(52);
  const [y, sety] = useState(55);

  function mouseOver() {
    setx(Math.random() * 100);
    sety(Math.random() * 100);

  var noStyle = {
    left: x + "%",
    top: y + "%",
    position: "absolute",

  return (
       Click me!

export default App;

Enter fullscreen mode Exit fullscreen mode

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!