toggle font button
This commit is contained in:
parent
c5bbdd194c
commit
e52ea0c3e6
@ -1,4 +1,5 @@
|
|||||||
</main>
|
</main>
|
||||||
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
@ -6,7 +6,33 @@
|
|||||||
<title>avg convo</title>
|
<title>avg convo</title>
|
||||||
<link href="text_analysis.css" rel="stylesheet">
|
<link href="text_analysis.css" rel="stylesheet">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style id="style-heonian" disabled>
|
||||||
|
.convo-heonian {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.convo-roman {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style id="style-roman">
|
||||||
|
.convo-heonian {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.convo-roman {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<style>
|
||||||
|
#font-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</noscript>
|
||||||
|
<p class="button" id="font-button">toggle font</p>
|
||||||
<main>
|
<main>
|
28
main.js
28
main.js
@ -5,13 +5,17 @@
|
|||||||
|
|
||||||
let words = {}
|
let words = {}
|
||||||
|
|
||||||
|
let currentFont = "r";
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
createWordList();
|
// createWordList();
|
||||||
injectWords();
|
// injectWords();
|
||||||
document.querySelector("#popup-container").addEventListener("click", () => {
|
// document.querySelector("#popup-container").addEventListener("click", () => {
|
||||||
document.querySelector("#popup-container").style.opacity = 0;
|
// document.querySelector("#popup-container").style.opacity = 0;
|
||||||
document.querySelector("#popup-container").style.pointerEvents = "none";
|
// document.querySelector("#popup-container").style.pointerEvents = "none";
|
||||||
})
|
// })
|
||||||
|
// above are commented out until wordlist is added~
|
||||||
|
document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
|
||||||
}
|
}
|
||||||
|
|
||||||
function showPopup(word) {
|
function showPopup(word) {
|
||||||
@ -68,6 +72,18 @@ function injectWords() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function fontButton() {
|
||||||
|
if (currentFont == "r") {
|
||||||
|
document.querySelector("#style-heonian").disabled = false;
|
||||||
|
document.querySelector("#style-roman").disabled = true;
|
||||||
|
currentFont = "h";
|
||||||
|
} else {
|
||||||
|
document.querySelector("#style-heonian").disabled = true;
|
||||||
|
document.querySelector("#style-roman").disabled = false;
|
||||||
|
currentFont = "r";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
init();
|
init();
|
||||||
}
|
}
|
27
test.html
27
test.html
@ -6,9 +6,35 @@
|
|||||||
<title>avg convo</title>
|
<title>avg convo</title>
|
||||||
<link href="text_analysis.css" rel="stylesheet">
|
<link href="text_analysis.css" rel="stylesheet">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style id="style-heonian" disabled>
|
||||||
|
.convo-heonian {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.convo-roman {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style id="style-roman">
|
||||||
|
.convo-heonian {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.convo-roman {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<style>
|
||||||
|
#font-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</noscript>
|
||||||
|
<p class="button" id="font-button">toggle font</p>
|
||||||
<main>
|
<main>
|
||||||
<div class="convo-container">
|
<div class="convo-container">
|
||||||
<div class="convo">
|
<div class="convo">
|
||||||
@ -378,6 +404,7 @@ relfur chu arilaen dedaka'nya.
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
@ -163,3 +163,11 @@ main {
|
|||||||
data-swap {
|
data-swap {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user