alvierahman90/comic-mono-font
1
0
Fork 0
mirror of https://github.com/dtinth/comic-mono-font.git synced 2026-02-21 22:43:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add page-wide serious toggler

Browse Source
This commit is contained in:
kaBeech
2023-03-18 17:48:56 -07:00
parent 6cd90ec137
commit 23e6e86e4d
3 changed files with 47 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -46,6 +46,14 @@
</div>
</div>
<br />
<form>
Apply to
<label for="entirePage">entire page:</label>
<input type="radio" name="applyTo" id="entirePage" />
<label for="newExampleTextButton">example text only:</label>
<input type="radio" name="applyTo" id="exampleTextOnly" />
</form>
<br />
<form>
<label for="newExampleText">Example Text:</label>
<input type="text" id="newExampleText" name="newExampleText" />

37
index.js
View File

@@ -1,3 +1,4 @@
const mainClasses = document.getElementById("main").classList;
const exampleText = document.getElementById("exampleText");
const exampleTextClasses = exampleText.classList;
const seriousButton = document.getElementById("seriousButton");
@@ -26,6 +27,12 @@ seriousButton.addEventListener("click", function () {
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
mainClasses.add("serious");
mainClasses.remove("seriousItalic");
mainClasses.remove("seriousBold");
mainClasses.remove("seriousBoldItalic");
mainClasses.remove("seriousLight");
mainClasses.remove("seriousLightItalic");
});
seriousItalicButton.addEventListener("click", function () {
@@ -41,6 +48,12 @@ seriousItalicButton.addEventListener("click", function () {
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
mainClasses.remove("serious");
mainClasses.add("seriousItalic");
mainClasses.remove("seriousBold");
mainClasses.remove("seriousBoldItalic");
mainClasses.remove("seriousLight");
mainClasses.remove("seriousLightItalic");
});
seriousBoldButton.addEventListener("click", function () {
@@ -56,6 +69,12 @@ seriousBoldButton.addEventListener("click", function () {
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
mainClasses.remove("serious");
mainClasses.remove("seriousItalic");
mainClasses.add("seriousBold");
mainClasses.remove("seriousBoldItalic");
mainClasses.remove("seriousLight");
mainClasses.remove("seriousLightItalic");
});
seriousBoldItalicButton.addEventListener("click", function () {
@@ -71,6 +90,12 @@ seriousBoldItalicButton.addEventListener("click", function () {
exampleTextClasses.add("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
mainClasses.remove("serious");
mainClasses.remove("seriousItalic");
mainClasses.remove("seriousBold");
mainClasses.add("seriousBoldItalic");
mainClasses.remove("seriousLight");
mainClasses.remove("seriousLightItalic");
});
seriousLightButton.addEventListener("click", function () {
@@ -86,6 +111,12 @@ seriousLightButton.addEventListener("click", function () {
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.add("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
mainClasses.remove("serious");
mainClasses.remove("seriousItalic");
mainClasses.remove("seriousBold");
mainClasses.remove("seriousBoldItalic");
mainClasses.add("seriousLight");
mainClasses.remove("seriousLightItalic");
});
seriousLightItalicButton.addEventListener("click", function () {
@@ -101,6 +132,12 @@ seriousLightItalicButton.addEventListener("click", function () {
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.add("seriousLightItalic");
mainClasses.remove("serious");
mainClasses.remove("seriousItalic");
mainClasses.remove("seriousBold");
mainClasses.remove("seriousBoldItalic");
mainClasses.remove("seriousLight");
mainClasses.add("seriousLightItalic");
});
newExampleTextButton.addEventListener("click", function () {

4
style.css
View File

@@ -49,8 +49,8 @@ body {
display: flex;
flex-direction: column;
align-items: center;
font-family: "Serious Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 100%;
font-size: 1.2rem;
text-align: center;