Will You Be My Valentine? - jQuery

1 minute read

Published:

A jQuery application using front-end technologies for accepting or denying a Valentine.

Introduction

A silly classic will-you-be-my-valentine application that allows a user to easily select Yes to the question. The No option quickly evades the cursor and becomes extremely difficult to select.

The aim of this project is to use CSS and HTML to design a front-end UI of a Valentine, and animate it using jQuery. When a user clicks the Yes button, the button morphs into a heart. If a user attempts to select the No option, the button moves quickly away from the cursor.

Technologies

This application was built with the following technology:

  • JavaScript - jQuery
  • HTML
  • CSS

Implementation

The application was implemented in Visual Studio Code.

HTML and CSS were used for front-end styling of the Valentine, and animation. jQuery was used to accept cursor input from the users mouse. This input was then used to evade the cursor with the No button.

Below is an image of the alert displayed when a user successfully clicks on the No button.

Valentine

Run

To run the application follow the steps below:

  1. Clone the following repo: https://github.com/erincameron11/valentine-jquery
  2. Navigate to the new repo on your machine
  3. Open the index.html file in a browser.