<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bold text generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Convert to <b>bold</b> text</h1>
<label for="inputText">Input text:</label>
<br>
<textarea id="inputText" placeholder="Wpisz tekst tutaj..."></textarea>
<br>
<button onclick="convertText()">Convert</button>
<div id="result">
<strong>Result:</strong>
<div id="boldedText"></div>
</div>
<script src="script.js"></script>
</body>
</html>
{
"A": "𝗔",
"B": "𝗕",
"C": "𝗖",
"D": "𝗗",
"E": "𝗘",
"F": "𝗙",
"G": "𝗚",
"H": "𝗛",
"I": "𝗜",
"J": "𝗝",
"K": "𝗞",
"L": "𝗟",
"M": "𝗠",
"N": "𝗡",
"O": "𝗢",
"P": "𝗣",
"Q": "𝗤",
"R": "𝗥",
"S": "𝗦",
"T": "𝗧",
"U": "𝗨",
"V": "𝗩",
"W": "𝗪",
"X": "𝗫",
"Y": "𝗬",
"Z": "𝗭",
"a": "𝗮",
"b": "𝗯",
"c": "𝗰",
"d": "𝗱",
"e": "𝗲",
"f": "𝗳",
"g": "𝗴",
"h": "𝗵",
"i": "𝗶",
"j": "𝗷",
"k": "𝗸",
"l": "𝗹",
"m": "𝗺",
"n": "𝗻",
"o": "𝗼",
"p": "𝗽",
"q": "𝗾",
"r": "𝗿",
"s": "𝘀",
"t": "𝘁",
"u": "𝘂",
"v": "𝘃",
"w": "𝘄",
"x": "𝘅",
"y": "𝘆",
"z": "𝘇",
"ą": "𝗮̨",
"ć": "𝗰́",
"ę": "𝗲̨",
"ł": "𝗹",
"ń": "𝗻́",
"ó": "𝗼́",
"ś": "𝘀́",
"ź": "𝘇́",
"ż": "𝘇̇",
"Ą": "𝗔̨",
"Ć": "𝗖́",
"Ę": "𝗘̨",
"Ł": "𝗟",
"Ń": "𝗡́",
"Ó": "𝗢́",
"Ś": "𝗦́",
"Ź": "𝗭́",
"Ż": "𝗭̇"
}
async function loadBoldMap() {
const response = await fetch('bold_map.json');
const boldMap = await response.json();
return boldMap;
}
async function convertText() {
const inputText = document.getElementById('inputText').value;
const boldMap = await loadBoldMap();
let boldedText = '';
for (let char of inputText) {
boldedText += boldMap[char] || char;
}
document.getElementById('boldedText').textContent = boldedText;
}