The “Random Story” button tries to generate story 1-1000
argentina.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stories</title>
<link rel="stylesheet" href="../CSS/usa.css">
</head>
<body>
<header>
<h1>Stories</h1>
</header>
<main>
<div id="content-wrapper">
<div id="get-container">
<input type="text" id="story-number" placeholder="Enter story number">
<button id="get" type="button">Get Story</button>
<button id="getRandom" type="button">Random Story</button>
</div>
<div id="story-container">
<!-- Story content will be displayed here -->
<div id="generated-text"></div>
<button id="clear">Clear</button>
</div>
</div>
</main>
<script src="Scripts/argentina.js"></script>
</body>
</html>ript src="Scripts/argentina.js"></script>
</body>
</html>
argentina.js
document.addEventListener('DOMContentLoaded', function () {
var totalStories = 1000;
var currentStory = null;
var storyContainer = document.getElementById('story-container');
var contentWrapper = document.getElementById('content-wrapper');
var storyNumberInput = document.getElementById('story-number');
var getButton = document.getElementById('get');
var getRandomButton = document.getElementById('getRandom');
var clearButton = document.getElementById('clear');
function clearStoryContainer() {
if (storyContainer) {
storyContainer.style.display = 'none';
var generatedTextElement = document.getElementById('generated-text');
if (generatedTextElement) {
generatedTextElement.innerHTML = '';
}
if (contentWrapper) {
contentWrapper.style.marginTop = '0px';
}
currentStory = null;
storyNumberInput.value = ''; // Clear the input text
}
}
function fetchStory(storyNumber) {
clearStoryContainer();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'PHP/argentina.php?story=' + storyNumber, true);
xhr.onload = function () {
if (xhr.status === 200) {
if (storyContainer) {
storyContainer.style.display = 'block';
var generatedText = xhr.responseText;
var generatedTextElement = document.getElementById('generated-text');
if (generatedTextElement) {
generatedTextElement.innerHTML = parseAndStyleTitles(generatedText);
} else {
console.log('Generated text element not found.');
}
if (contentWrapper) {
contentWrapper.style.marginTop = '0';
}
currentStory = storyNumber;
} else {
console.log('Story container element not found.');
}
} else {
console.log('Error fetching story. Status code: ' + xhr.status);
clearStoryContainer();
if (xhr.status === 404) {
displayErrorMessage('Please enter a valid number between 1 and ' + totalStories + '.');
} else {
displayErrorMessage('Error fetching story.');
}
}
};
xhr.onerror = function () {
console.log('Network error while fetching story.');
clearStoryContainer();
displayErrorMessage('Network error while fetching story.');
};
xhr.send();
}
function displayErrorMessage(errorMessage) {
if (storyContainer) {
storyContainer.style.display = 'block';
}
var generatedTextElement = document.getElementById('generated-text');
if (generatedTextElement) {
generatedTextElement.innerHTML = errorMessage;
}
if (contentWrapper) {
contentWrapper.style.marginTop = '60px';
}
currentStory = null;
}
function parseAndStyleTitles(text) {
return text.replace(/[[(.*?)]]/g, function (match, title) {
return '<span>' + title + '</span>';
});
}
getButton.addEventListener('click', function () {
var storyNumber = parseInt(storyNumberInput.value);
if (!isNaN(storyNumber) && storyNumber >= 1 && storyNumber <= totalStories) {
fetchStory(storyNumber);
} else {
displayErrorMessage('Please enter a valid number between 1 and ' + totalStories + '.');
}
});
getRandomButton.addEventListener('click', function () {
var randomStoryNumber = Math.floor(Math.random() * totalStories) + 1;
fetchStory(randomStoryNumber);
});
clearButton.addEventListener('click', function () {
clearStoryContainer();
});
storyNumberInput.addEventListener('keyup', function (event) {
if (event.key === 'Enter') {
getButton.click();
}
});
});
argentina.php
<?php
// Read the requested story number from the URL parameter
$storyNumber = $_GET['story'];
// Read the content of argentina.txt (relative to the location of this PHP file)
$storiesFile = file_get_contents('../../Stories/argentina.txt');
// Split the content into stories based on the unique delimiter (<!-- Unique delimiter separating stories -->)
$stories = preg_split('/<!-- Unique delimiter separating stories -->/', $storiesFile);
// Determine the actual number of stories
$actualTotalStories = count($stories);
if ($storyNumber >= 1 && $storyNumber <= $actualTotalStories) {
// Check if the requested story exists
$requestedStory = trim($stories[$storyNumber - 1]);
$formattedStory = nl2br($requestedStory);
echo $formattedStory;
} else {
echo 'Error: Story not found.';
}
?>
I want to have it set to 1000 in the JavaScript because that’s the amount of stories that will be added in the end. But when I have 5 stories in the argentina.txt file I want the code to read 1-5, then when I add a new story I want it to read 1-6, etc.
How could I make this work? Would really appreciate some help on this!