I created this for a poster generator.
The code references an asset.js file to pull copy.
But asset.js is angel_number.js but it is not pulling the data.
What am I doing wrong?
<div class="poster-creator-wrapper">
<style>
/* Scoped styles for the poster creator */
body {
margin: 0;
height: 100vh;
background-color: #f0f0f0;
}
.poster-creator-wrapper {
font-family: 'Georgia', serif;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f9f9f9;
color: #333;
max-width: 400px;
margin: 0 auto;
position: relative;
z-index: 100;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.input-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.poster-input {
padding: 10px;
font-size: 1em;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 24px;
width: 100%;
font-family: 'Georgia', serif;
font-weight: bold;
text-transform: uppercase;
color: #40E0D0;
text-align: center;
}
.poster-input::placeholder {
color: #aaa;
opacity: 1;
font-size: 0.8em;
}
.poster-input:focus {
border-color: #40E0D0;
outline: none;
}
.poster-button {
padding: 10px 20px;
background-color: #fff;
border: 2px solid #40E0D0;
color: #40E0D0;
cursor: pointer;
border-radius: 24px;
transition: background-color 0.3s, color 0.3s;
margin-top: 10px;
font-family: 'Georgia', serif;
font-size: 0.6em;
text-transform: uppercase;
}
.poster-button:hover {
background: #40E0D0;
color: white;
}
#poster {
width: 100%;
height: 500px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
margin-top: 20px;
overflow: hidden;
background-color: #f0f0f0;
border-radius: 10px;
}
#background-image, #wing-image {
position: absolute;
width: 100%;
height: 100%;
display: none;
}
#wing-image {
max-width: 200px;
height: auto;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
#angel-number-display, #angel-number-headline, #meaning-display {
position: absolute;
text-align: center;
z-index: 10;
display: none;
}
#angel-number-display {
font-size: 64px;
font-weight: bold;
top: 25%;
}
#angel-number-headline {
font-size: 16px;
top: 40%;
left: 25px;
right: 25px;
margin: 20px 0;
}
#meaning-display {
font-size: 12px;
top: 55%;
left: 25px;
right: 25px;
text-align: justify;
}
.poster-silhouette {
width: 100%;
height: 100%;
background: rgba(64, 224, 208, 0.8);
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: white;
position: absolute;
z-index: 5;
text-align: center;
flex-direction: column;
}
</style>
<div class="input-container">
<input type="text" id="angel-number" class="poster-input" placeholder="Enter your angel number" />
<button class="poster-button" id="generate">Generate Poster</button>
</div>
<div id="poster">
<div class="poster-silhouette" id="silhouette">
MANIFEST YOUR<br>ANGEL NUMBER MEANING
</div>
<img id="background-image" />
<img id="wing-image" />
<div id="angel-number-display">111</div>
<div id="angel-number-headline"></div>
<div id="meaning-display"></div>
</div>
<button class="poster-button" id="download">Download Poster</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="{{ 'angel_number.js' | asset_url }}"></script>
<script>
const generateButton = document.getElementById('generate');
const angelNumberDisplay = document.getElementById('angel-number-display');
const angelNumberHeadline = document.getElementById('angel-number-headline');
const meaningDisplay = document.getElementById('meaning-display');
const backgroundImage = document.getElementById('background-image');
const wingImage = document.getElementById('wing-image');
const silhouette = document.getElementById('silhouette');
const backgrounds = ['https://i.imgur.com/X6sFcd4.png'];
const wings = ['https://i.imgur.com/6p33W70.png'];
function generatePoster() {
const angelNumber = document.getElementById('angel-number').value;
console.log('Entered angel number:', angelNumber); // Log input value
const angelData = angelNumbers[angelNumber]; // Fetch data from the external JS file
if (angelData) {
angelNumberDisplay.textContent = angelNumber;
angelNumberHeadline.textContent = angelData.headline; // Set headline from fetched data
meaningDisplay.textContent = angelData.meaning; // Set meaning from fetched data
angelNumberDisplay.style.display = 'block';
angelNumberHeadline.style.display = 'block';
meaningDisplay.style.display = 'block';
silhouette.style.display = 'none';
backgroundImage.src=backgrounds[0];
backgroundImage.onload = () => { backgroundImage.style.display = 'block'; };
wingImage.src=wings[0];
wingImage.onload = () => { wingImage.style.display = 'block'; };
} else {
silhouette.style.display = 'flex';
angelNumberDisplay.style.display = 'none';
angelNumberHeadline.style.display = 'none';
meaningDisplay.style.display = 'none';
}
}
function downloadPoster() {
const poster = document.getElementById('poster');
html2canvas(poster).then(canvas => {
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'poster.png';
link.click();
});
}
generateButton.addEventListener('click', function() {
console.log('Generate button clicked'); // Debug log
generatePoster();
});
document.getElementById('download').addEventListener('click', downloadPoster);
</script>
</div>
