My site owns this feature,but not everything goes out.
I tried to change the parameters of the server part but does not help, there is someone who understands,
I am a novice developer
Language change:
The user can select a language from the drop-down list.
When you select a language, you query the server to retrieve the contents of the fairy tale file in the selected language.
Folk Tales:
The user can upload folktales for the selected language.
Downloaded files are displayed in the appropriate subcategory.
The contents of each file are displayed in text format.
Web counter:
The visitors counter is increased each time you visit the page or press the "Increase Counter" button.
The current value of the counter is displayed on the page.
Overall structure:
The page is divided into categories, represented by blocks with headers.
Each category can have subcategories with additional content.
You can upload files and display them on the page depending on the language you choose.
Server part (approximately):
Server on Node.js using Express, multer and other necessary modules.
Storage of uploaded files in the server memory.
Transfer of data between client and server via AJAX (Fetch API).
Important remarks:
This code provides the basis for further development. Additional security checks, error handling and other features should be added depending on specific requirements.
files should be dubbed on the site itself, each language should have its own files, the user will see only those files that have been added to the language he chose
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAIRY-TALIA</title>
<style>
/* Add your styles here */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
header {
background-color: #4CAF50;
padding: 20px;
text-align: center;
color: white;
font-size: 24px;
}
main {
margin: 20px;
}
h1 {
text-align: center;
font-family: 'cursive', sans-serif;
color: #333;
}
.category {
margin-top: 20px;
}
.language-select {
margin-bottom: 10px;
}
.tales-list,
.authors-list,
.blog-list {
list-style: none;
padding: 0;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>FAIRY-TALIA</h1>
</header>
<main>
<div class="category" id="languageCategory">
<h2>Language Category</h2>
<select class="language-select" onchange="changeLanguage()">
<option value="en">English</option>
<option value="ru">Russian</option>
<option value="de">German</option>
<option value="pt">Portuguese</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="ro">Romanian</option>
</select>
</div>
<div class="category" id="folkTalesCategory">
<h2>Folk Tales</h2>
<input type="file" id="fileInputFolk" onchange="displayFile('folk')"/>
<pre id="fileContentFolk"></pre>
<ul class="tales-list" id="folkTalesList">
<!-- Populate with folk tales -->
</ul>
</div>
<div class="category" id="authorsTalesCategory">
<h2>Author's Tales</h2>
<input type="file" id="fileInputAuthors" onchange="displayFile('authors')"/>
<pre id="fileContentAuthors"></pre>
<ul class="authors-list" id="authorsTalesList">
<!-- Populate with author's tales -->
</ul>
</div>
<div class="category" id="blogCategory">
<h2>Blog</h2>
<input type="file" id="fileInputBlog" onchange="displayFile('blog')"/>
<pre id="fileContentBlog"></pre>
<ul class="blog-list" id="blogContentList">
<!-- Populate with blog content -->
</ul>
</div>
</main>
<footer class="footer">
<p>Visitors Count: <span id="visitorsCount">0</span></p>
<p>Contact: [email protected]</p>
</footer>
<script>
function displayFile(category) {
const fileInput = document.getElementById(`fileInput${category}`);
const fileContent = document.getElementById(`fileContent${category}`);
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
fileContent.textContent = e.target.result;
switch (category) {
case 'folk':
loadFolkTales(e.target.result);
break;
case 'authors':
loadAuthorsTales(e.target.result);
break;
case 'blog':
loadBlog(e.target.result);
break;
default:
break;
}
};
reader.readAsText(file);
} else {
fileContent.textContent = 'No file selected';
}
}
function changeLanguage() {
const selectedLanguage = document.getElementById('languageCategory').querySelector('select').value;
loadFolkTalesContent(selectedLanguage);
loadAuthorsTalesContent(selectedLanguage);
loadBlogContent(selectedLanguage);
}
function loadFolkTales(content) {
const folkTalesList = document.getElementById('folkTalesList');
folkTalesList.innerHTML = '';
const tales = content.split('n');
tales.forEach(tale => {
const listItem = document.createElement('li');
listItem.textContent = tale;
folkTalesList.appendChild(listItem);
});
}
function loadAuthorsTales(content) {
const authorsTalesList = document.getElementById('authorsTalesList');
authorsTalesList.innerHTML = '';
const tales = content.split('n');
const sortedTales = tales.sort((a, b) => {
const [aName] = a.split('-');
const [bName] = b.split('-');
return aName.localeCompare(bName);
});
sortedTales.forEach(tale => {
const listItem = document.createElement('li');
listItem.textContent = tale;
authorsTalesList.appendChild(listItem);
});
}
function loadBlog(content) {
const blogContentList = document.getElementById('blogContentList');
blogContentList.innerHTML = '';
const posts = content.split('n');
posts.forEach(post => {
const listItem = document.createElement('li');
listItem.textContent = post;
blogContentList.appendChild(listItem);
});
}
function loadFolkTalesContent(language) {
const content = {
en: 'English Folk Tale 1nEnglish Folk Tale 2nEnglish Folk Tale 3',
ru: 'Russian Folk Tale 1nRussian Folk Tale 2nRussian Folk Tale 3',
de: 'German Folk Tale 1nGerman Folk Tale 2nGerman Folk Tale 3',
pt: 'Portuguese Folk Tale 1nPortuguese Folk Tale 2nPortuguese Folk Tale 3',
es: 'Spanish Folk Tale 1nSpanish Folk Tale 2nSpanish Folk Tale 3',
fr: 'French Folk Tale 1nFrench Folk Tale 2nFrench Folk Tale 3',
ro: 'Romanian Folk Tale 1nRomanian Folk Tale 2nRomanian Folk Tale 3',
};
loadFolkTales(content[language]);
}
function loadAuthorsTalesContent(language) {
const content = {
en: 'John Doe - English Author's Tale 1nJane Smith - English Author's Tale 2nAlice Johnson - English Author's Tale 3',
ru: 'Иван Иванов - Russian Author's Tale 1nМария Петрова - Russian Author's Tale 2nАлексей Сидоров - Russian Author's Tale 3',
de: 'Hans Müller - German Author's Tale 1nAnna Schmidt - German Author's Tale 2nKlaus Wagner - German Author's Tale 3',
pt: 'João Silva - Portuguese Author's Tale 1nAna Santos - Portuguese Author's Tale 2nCarlos Pereira - Portuguese Author's Tale 3',
es: 'Juan López - Spanish Author's Tale 1nMaria González - Spanish Author's Tale 2nCarlos García - Spanish Author's Tale 3',
fr: 'Jean Dupont - French Author's Tale 1nMarie Martin - French Author's Tale 2nPierre Lambert - French Author's Tale 3',
ro: 'Ion Popescu - Romanian Author's Tale 1nAna Vasilescu - Romanian Author's Tale 2nMihai Radu - Romanian Author's Tale 3',
};
loadAuthorsTales(content[language]);
}
function loadBlogContent(language) {
const content = {
en: 'English Blog Post 1nEnglish Blog Post 2nEnglish Blog Post 3',
ru: 'Russian Blog Post 1nRussian Blog Post 2nRussian Blog Post 3',
de: 'German Blog Post 1nGerman Blog Post 2nGerman Blog Post 3',
pt: 'Portuguese Blog Post 1nPortuguese Blog Post 2nPortuguese Blog Post 3',
es: 'Spanish Blog Post 1nSpanish Blog Post 2nSpanish Blog Post 3',
fr: 'French Blog Post 1nFrench Blog Post 2nFrench Blog Post 3',
ro: 'Romanian Blog Post 1nRomanian Blog Post 2nRomanian Blog Post 3',
};
loadBlog(content[language]);
}
// Initialize the page with the default language
loadFolkTalesContent('en');
loadAuthorsTalesContent('en');
loadBlogContent('en');
</script>
</body>
</html>
server.js
const express = require('express');
const multer = require('multer');
const app = express();
const port = 5000;
app.use(express.json());
const folkTalesByLanguage = {};
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });
app.post('/api/uploadFolkTales', upload.single('folkTalesFile'), (req, res) => {
const { content, language } = req.body;
if (!folkTalesByLanguage[language]) {
folkTalesByLanguage[language] = [];
}
folkTalesByLanguage[language].push(content);
res.send('Folk tales uploaded successfully');
});
app.get('/api/getContent', (req, res) => {
const language = req.query.language || 'en';
if (folkTalesByLanguage[language] && folkTalesByLanguage[language].length > 0) {
const content = folkTalesByLanguage[language].join('n');
res.send(content);
} else {
res.send('No content available for the selected language');
}
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
script.js
fetch(`/api/getContent?language=${language}`)
.then(response => response.text())
.then(content => {
loadFolkTales(content);
})
.catch(error => {
console.error('Error fetching content:', error);
});
}
function uploadFolkTales() {
const fileInput = document.getElementById('fileInputFolk');
const fileContent = document.getElementById('fileContentFolk');
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
fileContent.textContent = e.target.result;
const selectedLanguage = document.getElementById('languageCategory').querySelector('select').value;
sendFolkTalesToServer(e.target.result, selectedLanguage);
};
reader.readAsText(file);
} else {
fileContent.textContent = 'No file selected';
}
}
function sendFolkTalesToServer(content, language) {
fetch('/api/uploadFolkTales', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
content: content,
language: language,
}),
})
.then(response => response.text())
.then(message => {
console.log(message);
loadFolkTalesFromServer(language);
})
.catch(error => {
console.error('Error uploading folk tales:', error);
});
}
let visitorsCount = 0;
function increaseCounter() {
visitorsCount++;
document.getElementById('visitorsCount').textContent = visitorsCount;
}
document.addEventListener('DOMContentLoaded', () => {
increaseCounter();
const selectedLanguage = document.getElementById('languageCategory').querySelector('select').value;
loadFolkTalesFromServer(selectedLanguage);
});
// Additional functions and existing code remain unchanged
// ...
</script>
I thought the problem was in the server part and the function, but before that everything was right, maybe I accidentally deleted or missed something, and also for some reason when I changed something in the script.js file I had broken categories.Also I tried me port on 8080 and 5000 but did not help me
