Customizing Text & Content

The text and content management system centralizes all user-facing strings within a single configuration object. This architecture decouples the display logic from the HTML structure, allowing developers to modify messaging without altering the document framework. The system targets specific DOM elements and SweetAlert2 components to deliver a customized interactive experience.

Sources: js/myJs.js:1-15, index.html:43-52

Centralized Configuration Object

The application stores all textual content in the textConfig constant. This object maps unique keys to string values used across the landing page and interactive popups.

textConfig Mapping

The following table describes the keys used to populate the interface:

Sources: js/myJs.js:1-15

Content Injection Logic

The application uses jQuery to inject content from textConfig into specific HTML elements during the initialization phase.

The diagram shows how the textConfig object distributes strings to various DOM elements and SweetAlert2 modals.
Sources: js/myJs.js:25-28, index.html:46-52

DOM Targeted Updates

When the document is ready, the script executes direct HTML replacements:

1. The element #text3 receives textConfig.text3.
2. The element #text4 receives textConfig.text4.
3. The button #no receives textConfig.text5.
4. The button #yes receives textConfig.text6.

Sources: js/myJs.js:25-28

Dynamic Text Generation

The application implements a unique text injection feature in the "Reason" input field. This feature intercepts user keyboard input and replaces it with characters from textConfig.text9.

Implementation Details

When the user focuses on the #txtReason input, a setInterval function triggers the textGenerate() logic every 10 milliseconds.

  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];
      }
    }
    $("#txtReason").val(n);
  }

Sources: js/myJs.js:84-100, js/myJs.js:132-137

Visual Styling and Assets

The content presentation relies on external assets and CSS rules to maintain theme consistency.

Typography

The project uses the "Pacifico" font from Google Fonts for all header elements.

• header h2 uses a 80px font size.
• header h4 uses centered alignment.
• Media queries reduce h2 to 45px for screens smaller than 500px.

Sources: index.html:20, css/style.css:35-64

Media Integration

The interaction utilizes images and sound files referenced within the logic and styles:

• Background: img/puung3.jpg is applied to the #bg element with a 4px blur.
• Modals: img/cuteCat.jpg and img/iput-bg.jpg serve as visual aids in popups.
• Audio: Sound effects (duck.mp3, Swish1.mp3, tick.mp3) provide feedback during content interactions.

Sources: css/style.css:17-29, js/myJs.js:34-37, js/myJs.js:47-48, js/myJs.js:105-106

Summary of Interaction Flow

The interaction sequence controls how text is revealed to the user:

The sequence diagram illustrates the lifecycle of text display from initial preloading to the final message.
Sources: js/myJs.js:18-43, js/myJs.js:104-140, css/spinload.css:1-55