DEV Community

Vinkal Prajapati
Vinkal Prajapati

Posted on

Eternal Love Proposal


Description:
"Love Confession" is an interactive web program designed to express romantic feelings in a playful and engaging manner. The program presents a sequence of questions and responses that guide the user through a fun and light-hearted interaction. It features various animated GIFs, emojis, and sound effects to enhance the user experience. The program's main goal is to create a memorable and entertaining way to confess love.

How It Works:
The program starts by asking the user a simple question, "Do you love me?" The user is given two options to respond: "Yes" or "No." Depending on the user's choice, different scenarios are presented, each accompanied by relevant GIFs, text, and sound effects.

Key Features:
Animated GIFs and Emojis: The program uses animated GIFs and emojis to convey emotions and make the interaction more lively.
Sound Effects: Specific actions trigger sound effects, enhancing the overall experience.
Dynamic Responses: The user's choices lead to different outcomes, making the interaction unique each time.
Interactive Buttons: The "No" button moves to a random position if the user hovers over or touches it, adding a playful twist.
Code Explanation:
HTML Structure:

The HTML document is structured with a DOCTYPE declaration, head, and body.
The head contains metadata, the title, and style definitions.
The body contains a container div with various sections (initial question, love response, please think again, final plea, last chance) that are displayed based on user interactions.
CSS Styling:

The CSS styles define the visual appearance of the page, including background color, font styles, and layout.
Classes like .container, .btn, .gif-image, and .emoji are used to style different elements.
JavaScript Functions:

The JavaScript functions control the interaction logic.
loveResponse(answer): Handles the user's response to the initial question.
finalPlea(): Displays the final plea message.
lastChance(): Displays the last chance message.
hideAll(): Hides all sections.
moveButton(event) and moveButtonMobile(event): Move the "No" button to a random position when hovered over or touched.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs