Deploying to Netlify

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/puung3.jpg (referenced asset)
• sound/duck.mp3 (referenced asset)

Deploying the yeuems.io project to Netlify enables hosting of the static front-end assets. The project consists of HTML, CSS, and JavaScript files that operate entirely on the client side. Netlify serves these files without requiring a backend server or complex build process.

The application follows a standard static directory structure. The root directory contains the entry point, while subdirectories hold styling, logic, images, and audio assets.

Project Architecture and Deployment Readiness

The project functions as a static web application. Netlify identifies the index.html file as the primary entry point for the site.

Directory Structure and Resource Mapping

The following table describes the core files and directories required for a successful deployment.

File/Directory	Purpose	Reference in Code
index.html	Entry point and structural framework.	N/A
css/	Contains style.css and spinload.css for layout and animations.	index.html:15-16
js/	Contains myJs.js for interactive logic and SweetAlert2 integration.	index.html:73
img/	Stores background images and popup icons.	js/myJs.js:33, css/style.css:25
sound/	Contains MP3 files for interaction feedback.	js/myJs.js:46, 56, 86

Sources: index.html:1-74, js/myJs.js:1-125, css/style.css:1-76

External Dependency Integration

The application utilizes Content Delivery Networks (CDNs) to load external libraries. Netlify fetches these resources at runtime from the user's browser.

Library	Source	Usage
Google Fonts	Pacifico	Typography for headers.
Bootstrap 4.3.1	StackPath	Grid system and button styling.
jQuery 3.4.1	jQuery CDN	DOM manipulation and event handling.
SweetAlert2	jsDelivr	Interactive popup dialogs.

Sources: index.html:18-29, 60-72

Initialization and Loading Process

When the browser loads the deployed site, a preloader mask covers the content while assets initialize.

The preloader uses specific CSS animations defined in spinload.css to indicate loading progress to the user.
Sources: js/myJs.js:17-26, css/spinload.css:2-68

Application Logic and Event Handling

The application manages user interaction through DOM events and conditional logic. Netlify serves the logic within myJs.js to handle button movements and response generation.

Interaction Flow

1. Initial Prompt: The firstQuestion() function displays a SweetAlert2 modal.
2. Logic Branching:
   • Yes Button: Triggers a sequence of popups and eventually redirects to an external URL.
   • No Button: Swaps positions with the "Yes" button or moves to a random coordinate based on user mouse movement.

Dynamic Button Behavior

The switchButton and moveButton functions prevent the user from clicking the "No" button by altering its CSS left and top properties.

• switchButton swaps the CSS coordinates of the "Yes" and "No" IDs.
• moveButton generates random coordinates using Math.random() and applies them to the button's position.

Sources: js/myJs.js:45-71, css/style.css:5-18

Deployment Procedure for Netlify

To deploy this project:

1. Initialize a Git repository or prepare a ZIP folder containing the root files.
2. Connect the repository to Netlify or drag-and-drop the folder into the Netlify UI.
3. Ensure the "Build command" is left blank as there is no build script.
4. Set the "Publish directory" to the root directory (where index.html resides).

Sources: index.html:1-74, js/myJs.js:1-125

Conclusion

The project is a lightweight static site optimized for immediate deployment. By hosting on Netlify, all client-side logic in myJs.js and styling in css/style.css execute directly in the browser, providing a responsive experience without server-side dependencies.