Create Your Perfect Christmas Scene with Our Free Prompt Tool

This holiday season, bring your imagination to life! Whether you’re dreaming of a cozy cabin in the snowy woods, a festive family gathering by a crackling fire, or a dazzling Christmas village under twinkling lights, our Free Prompt Tool makes it easy to design your ideal holiday scene.

index. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Christmas Scene Generator</title>
    <!-- Link to external CSS file -->
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <!-- Header for the application -->
    <header>
        <h1>Create Your Perfect Christmas Scene</h1>
    </header>

    <!-- Section for user input -->
    <main>
        <textarea id="promptInput" placeholder="Describe your Christmas scene..."></textarea>
        <button id="generateButton">Generate Scene</button>
    </main>

    <!-- Container for the generated scene -->
    <section id="sceneContainer"></section>

    <!-- Link to external JavaScript file -->
    <script src="scripts/app.js"></script>
</body>
</html>

styles/style.css

/* General styles for the page */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Header styling */
header {
    background-color: #2a9d8f;
    color: white;
    text-align: center;
    padding: 20px 0;
}

/* Main section styling */
main {
    text-align: center;
    margin: 20px;
}

/* Text area styling */
textarea#promptInput {
    width: 80%;
    height: 100px;
    margin: 10px 0;
    padding: 10px;
    font-size: 1rem;
    border: 2px solid #2a9d8f;
    border-radius: 5px;
}

/* Button styling */
button#generateButton {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #e76f51;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button#generateButton:hover {
    background-color: #d3452a;
}

/* Generated scene container styling */
#sceneContainer {
    margin: 20px;
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-height: 200px;
}

scripts/app.js

// Select the DOM elements
const promptInput = document.getElementById("promptInput");
const generateButton = document.getElementById("generateButton");
const sceneContainer = document.getElementById("sceneContainer");

// Event listener for the generate button
generateButton.addEventListener("click", () => {
    // Get the user's input
    const prompt = promptInput.value.trim();

    // Clear the previous scene
    sceneContainer.innerHTML = "";

    // Generate a placeholder Christmas scene based on the prompt
    if (prompt) {
        const sceneMessage = document.createElement("p");
        sceneMessage.textContent = `You described: "${prompt}". Imagine a snowy Christmas night with twinkling lights!`;
        sceneContainer.appendChild(sceneMessage);
    } else {
        // Show an error message if no prompt is provided
        const errorMessage = document.createElement("p");
        errorMessage.textContent = "Please describe your Christmas scene.";
        errorMessage.style.color = "red";
        sceneContainer.appendChild(errorMessage);
    }
});

File Tree

root/
├── index.html
├── styles/
│   └── style.css
└── scripts/
    └── app.js

Leave a Comment Cancel reply