Adding New Features

Relevant source files

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

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

This document describes the process and architecture for adding new features to the yeuems.io project. The project is a single-page interactive web application that uses jQuery, SweetAlert2, and custom CSS animations to create a gamified user interface. New features typically involve modifying the central configuration object, updating event handlers, or adding new visual components to the DOM.

Application Configuration

The application centralizes its text content within a constant object named textConfig. This object stores all strings displayed in popups, headers, and buttons. When adding features that require new text, you must first update this object to ensure maintainability and ease of localization.

Key	Purpose	Used In
text1, text2	Initial popup content	firstQuestion()
text3, text4	Header titles	index.html headers
text5, text6	Button labels	#no and #yes buttons
text9	Auto-generated response text	textGenerate()
text11	Final success message	Final SweetAlert popup

Sources: js/myJs.js:1-15, js/myJs.js:25-28

Modifying UI Logic and Interactions

Interactive features are managed through jQuery event listeners. The application uses a specific sequence to reveal content and handle user input through buttons.

Event Initialization Flow

The application initializes by displaying a preloader and then triggering a series of UI events.

Button Interaction Mechanics

The "No" button implements evasive behavior to prevent user selection, while the "Yes" button triggers the primary application flow.

1. Evasive Behavior: The switchButton and moveButton functions manipulate CSS top and left properties.
2. Audio Feedback: Interactions trigger specific sound effects like duck.mp3 or Swish1.mp3.
3. Input Simulation: The textGenerate function intercepts keyboard input in the reason field to force a pre-defined string from textConfig.text9.

Styling and Layout

The layout uses absolute positioning and media queries to maintain the interactive elements' placement across different screen sizes.

Styling New Components

When adding new buttons or containers, follow the existing CSS structure:

• Containers: Use .wrapper for full-screen layout and .content for interactive elements.
• Z-Indexing: Ensure the #preloader remains at z-index: 9999999 to cover content during initialization.
• Responsiveness: Use @media only screen and (max-width: 500px) to adjust button sizes and font scales for mobile devices.

Sources: css/style.css:1-4, css/style.css:42-69, css/spinload.css:1-8

Adding External Integrations

The application concludes its primary flow by redirecting the user to an external URL. This is handled in the onClose callback of the final SweetAlert2 popup.

// Example of the redirection logic
onClose: () => {
  window.location = "https://www.facebook.com/lekientrung.info/";
}

Sources: js/myJs.js:125-127

Summary

To add a new feature to yeuems.io, developers should define new strings in textConfig, implement the corresponding logic in js/myJs.js using jQuery event handlers, and ensure visual consistency by updating css/style.css. The interactive flow relies heavily on the coordination between manual DOM manipulation and the SweetAlert2 library for modal dialogues.