Interactive JavaScript Logic

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
• img/cuteCat.jpg

The Interactive JavaScript Logic module manages the frontend behavior and user interactions for the yeuems.io web application. This module controls the initialization sequence, UI state transitions, and dynamic responses to user input using jQuery and SweetAlert2.

The system primary functions involve managing a preloading state, handling "trick" button interactions where a button moves or swaps positions to avoid clicks, and generating simulated text input based on pre-defined configurations.

Initialization and Preloading Logic

The application begins with a preloader managed via CSS and JavaScript. A spinner animation displays until a timeout triggers the main content visibility and the first interactive prompt.

The preloader uses a fixed-position container with a high z-index to mask the main content during initial load. The JavaScript setTimeout function executes after 600ms to transition the UI.
Sources: js/myJs.js:18-27, css/spinload.css:2-9

Configuration Data structure

The application centralizes its textual content within a textConfig object. This object stores all strings for headers, button labels, and popup messages.

Key	Content Description
text1 - text4	Initial greeting and main screen header text
text5 - text6	Labels for "No" and "Yes" buttons
text7 - text10	SweetAlert popup titles and questions
text9	Auto-generated text for the reason input field
text11 - text12	Final confirmation message and button text

Sources: js/myJs.js:1-15

Interactive Button Behavior

The core interactivity revolves around two primary buttons: "Yes" (#yes) and "No" (#no). The logic prevents the user from easily clicking the "No" button by moving or swapping it.

Button Evasion Logic

When the user moves the mouse over the "No" button, the system triggers one of two behaviors based on the interaction count n:

1. Switching: The "Yes" and "No" buttons swap their absolute CSS positions.
2. Moving: The "No" button moves to a random coordinate within a range defined by the screen width.

Input Manipulation Logic

When the user clicks the "Yes" button, a SweetAlert2 popup appears containing a text input. The application implements a "forced typing" effect where any key pressed by the user results in characters from a pre-defined string (textConfig.text9) appearing instead of the actual input.

textGenerate Function

The textGenerate function monitors the length of the current input value and maps it to the character array of the target string.

  function textGenerate() {
    var n = "";
    var text = " " + textConfig.text9;
    var a = Array.from(text);
    var textVal = $("#txtReason").val() ? $("#txtReason").val() : "";
    var count = textVal.length;
    if (count > 0) {
      for (let i = 1; i <= count; i++) {
        n = n + a[i];
        if (i == text.length + 1) {
          $("#txtReason").val("");
          n = "";
          break;
        }
      }
    }
    $("#txtReason").val(n);
  }

Sources: js/myJs.js:92-110

Event Sequence

The interaction follows a specific sequence from page load to external redirect.

External Dependencies

The logic relies on several external libraries and assets defined in the HTML structure:

• jQuery (3.4.1): Used for DOM manipulation and event handling.
• SweetAlert2: Used for all modal dialogs.
• Bootstrap (4.3.1): Provides the underlying layout and button styling.
• Custom Audio: Sounds like duck.mp3, Swish1.mp3, and tick.mp3 provide feedback during interactions.

Sources: index.html:56-78, js/myJs.js:50, 64, 115

Interactive JavaScript Logic serves to create a gamified interface through CSS position manipulation and controlled input fields, resulting in a redirect to a social media profile upon completion.