HTML Structure & DOM

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

The HTML Structure & DOM of this project defines the visual and interactive framework for a romantic "proposal" web application. It utilizes a centralized index.html file to define the document hierarchy, which is subsequently manipulated by JavaScript to provide dynamic responses and animations.

The system organizes elements into three primary layers: a preloader for initial assets, a background layer for visual aesthetics, and a content layer containing the main interactive elements. These layers are managed through CSS positioning and jQuery-based DOM manipulation.

Sources: index.html:1-73, js/myJs.js:15-28

Document Hierarchy and Layout

The application uses a standard HTML5 structure wrapped in a .wrapper container. This container hosts the preloader, background, and the interactive content area.

Primary Containers

Element ID/Class	Type	Purpose
#preloader	div	Masks the content during initial load using a CSS animation.
#bg	div	Displays the blurred background image (puung3.jpg).
.content	div	Contains the primary text headers and interactive buttons.
audio	audio	Plays background music (sound.mp3) automatically upon load.

Sources: index.html:26-55, css/style.css:17-30, css/spinload.css:2-9

The following diagram illustrates the relationship between the major DOM components:

The diagram shows the nesting of interactive elements within the main wrapper and their sibling relationship to the preloader.
Sources: index.html:25-56

Interactive Elements and Attributes

The core functionality relies on two main buttons identified by #yes and #no. These elements use Bootstrap classes for styling and custom IDs for JavaScript event binding.

• Header Texts: h2#text3 and h4#text4 display the primary questions. Their content is updated dynamically from the textConfig object in js/myJs.js.
• Response Buttons:
  • #yes: A btn-danger button that triggers a SweetAlert2 sequence.
  • #no: A btn-info button that moves or switches positions to avoid user interaction.

Sources: index.html:43-52, js/myJs.js:30-33

Dynamic DOM Modification

The script js/myJs.js performs several direct modifications to the DOM upon specific events:

1. Initialization: The script injects text from a configuration object into the headers and buttons using the .html() method.
2. Preloader Removal: After 600ms, the firstQuestion() function executes, the .spinner fades out, and the #preloader is removed.
3. Position Manipulation: The switchButton and moveButton functions modify the left and top CSS properties of the #no and #yes buttons directly.

Sources: js/myJs.js:16-28, js/myJs.js:30-33, js/myJs.js:47-75

This sequence illustrates the initial DOM manipulation and visibility transitions during page load.
Sources: js/myJs.js:16-45

Style and Presentation

The DOM elements are styled via style.css and spinload.css. The layout uses absolute and fixed positioning to ensure the background and preloader cover the viewport.

• Typography: The Pacifico font is applied to h2 and h4 tags within the header.
• Transitions: The #no and #yes buttons have transition properties (0.1s and 0.3s respectively) to animate their movement when the DOM properties are updated.
• Responsive Adjustments: Media queries target screens smaller than 500px, reducing font sizes and adjusting button positioning.

Sources: css/style.css:34-45, css/style.css:47-73

External Dependencies

The HTML structure includes several external libraries that extend the DOM's capabilities:

Library	Source	Function
jQuery	code.jquery.com	Simplifies DOM selection and event handling.
Bootstrap	stackpath.bootstrapcdn.com	Provides basic layout and button styling.
SweetAlert2	cdn.jsdelivr.net	Generates high-level modal dialogs (popups).

Sources: index.html:59-71

Conclusion

The HTML Structure & DOM of the project serves as a lightweight container for a highly interactive JavaScript application. By maintaining a simple hierarchy and delegating text content and positioning to the script, the system creates a dynamic user experience where the DOM responds fluidly to mouse movements and button clicks.