Getting Started

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• js/myJs.js
• css/style.css
• css/spinload.css
• sound/duck.mp3

The yeuems.io project is an interactive web application designed to facilitate a playful confession or "crush" interaction through a series of scripted prompts and dynamic UI behaviors. It presents the user with a question and uses JavaScript-driven logic to manipulate button positions, preventing the user from selecting negative responses while providing a custom messaging experience.

The application relies on a frontend stack comprising HTML5, CSS3, and JavaScript, leveraging the jQuery library for DOM manipulation and SweetAlert2 for interactive modal dialogs.

Application Initialization

The initialization process begins with a preloader that masks the content while the page assets load. The index.html file structures the preloader using five rectangular divs that animate via CSS keyframes defined in spinload.css.

Preloading and Setup

Upon the document.ready event, the system executes a sequence to transition from the loading state to the active interface.

1. A setTimeout function delays the transition for 600ms.
2. The firstQuestion() function executes to display the initial SweetAlert2 popup.
3. The spinner and preloader elements fade out using jQuery's .fadeOut() method.
4. The body overflow is set to visible to enable interaction.

Sources: index.html:26-34, js/myJs.js:18-28, css/spinload.css:2-55

Initial Logic Flow

The following sequence diagram illustrates the startup and initial user interaction flow:

The diagram shows the transition from the animated preloader to the first interactive modal dialog.
Sources: js/myJs.js:18-46

UI Components and Styling

The project interface consists of a background image, a header section, and two primary interaction buttons: "Yes" and "No".

Layout and Positioning

The style.css file defines the layout using absolute and fixed positioning to ensure the interactive elements remain centered or responsive.

• Background: The #bg element uses position: fixed and background-size: cover to display the puung3.jpg image with a 4px blur filter.
• Interaction Buttons: The buttons #yes and #no are absolutely positioned. Their locations change based on screen size using media queries (max-width: 500px).

Component	Selector	Primary Purpose
Background	#bg	Displays a blurred background image.
Yes Button	#yes	Triggers the success flow and secondary popups.
No Button	#no	Moves or switches positions to avoid interaction.
Content Wrapper	.content	Holds the primary questions and interaction buttons.

Sources: index.html:36-50, css/style.css:1-68

Dynamic Interaction Logic

The core functionality of the application lies in its "evasive" UI logic, which manipulates the "No" button to make it difficult for users to decline the prompt.

Button Manipulation

The js/myJs.js file contains two primary functions for button evasion:

1. switchButton(): Swaps the CSS left and top coordinates of the #yes and #no buttons.
2. moveButton(): Calculates random coordinates within the viewport and assigns them to the #no button.

These actions are triggered by the mousemove event on the #no button. On the first movement (n < 1), the buttons switch; for subsequent movements (n > 1), the button moves randomly.

This flowchart describes the logic used to prevent the user from clicking the negative response button.
Sources: js/myJs.js:48-83

Text Configuration and Input Simulation

Text strings are centralized in the textConfig object. A unique textGenerate() function simulates the user typing a pre-defined reason ("text9") regardless of what keys are actually pressed in the reason input field.

Configuration Key	Content	Context
text3	"Cậu yêu tớ có phải không nào ._."	Main H2 Header
text9	"Vì cậu đẹp try và dthuong vlll:>>"	Simulated user response
text11	"Tối nay tớ qua đón cậu đi chơi nhaa..."	Success message

Sources: js/myJs.js:1-15, js/myJs.js:86-103

Conclusion

The application concludes its interaction by handling a "Yes" button click, which plays a tick sound and opens a SweetAlert2 prompt for the user to enter a reason. Upon confirmation, a final success message is displayed, and the application redirects the user to a specific Facebook profile URL.

Sources: js/myJs.js:106-141