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 selected button indicator

Browse Source
This commit is contained in:
kaBeech
2023-03-18 15:54:21 -07:00
parent 39f69b76d4
commit fdf974f036
2 changed files with 105 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
index.js
View File

@@ -1,62 +1,102 @@
const exampleTextClasses = document.getElementById("exampleText").classList; const exampleTextClasses = document.getElementById("exampleText").classList;
const seriousButton = document const seriousButton = document.getElementById("seriousButton");
.getElementById("seriousButton") const seriousItalicButton = document.getElementById("seriousItalicButton");
.addEventListener("click", function () { const seriousBoldButton = document.getElementById("seriousBoldButton");
exampleTextClasses.add("serious"); const seriousBoldItalicButton = document.getElementById(
exampleTextClasses.remove("seriousItalic"); "seriousBoldItalicButton"
exampleTextClasses.remove("seriousBold"); );
exampleTextClasses.remove("seriousBoldItalic"); const seriousLightButton = document.getElementById("seriousLightButton");
exampleTextClasses.remove("seriousLight"); const seriousLightItalicButton = document.getElementById(
exampleTextClasses.remove("seriousLightItalic"); "seriousLightItalicButton"
}); );
const seriousItalicButton = document
.getElementById("seriousItalicButton") seriousButton.addEventListener("click", function () {
.addEventListener("click", function () { this.classList.add("selected");
exampleTextClasses.remove("serious"); seriousItalicButton.classList.remove("selected");
exampleTextClasses.add("seriousItalic"); seriousBoldButton.classList.remove("selected");
exampleTextClasses.remove("seriousBold"); seriousBoldItalicButton.classList.remove("selected");
exampleTextClasses.remove("seriousBoldItalic"); seriousLightButton.classList.remove("selected");
exampleTextClasses.remove("seriousLight"); seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.remove("seriousLightItalic"); exampleTextClasses.add("serious");
}); exampleTextClasses.remove("seriousItalic");
const seriousBoldButton = document exampleTextClasses.remove("seriousBold");
.getElementById("seriousBoldButton") exampleTextClasses.remove("seriousBoldItalic");
.addEventListener("click", function () { exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("serious"); exampleTextClasses.remove("seriousLightItalic");
exampleTextClasses.remove("seriousItalic"); });
exampleTextClasses.add("seriousBold");
exampleTextClasses.remove("seriousBoldItalic"); seriousItalicButton.addEventListener("click", function () {
exampleTextClasses.remove("seriousLight"); this.classList.add("selected");
exampleTextClasses.remove("seriousLightItalic"); seriousButton.classList.remove("selected");
}); seriousBoldButton.classList.remove("selected");
const seriousBoldItalicButton = document seriousBoldItalicButton.classList.remove("selected");
.getElementById("seriousBoldItalicButton") seriousLightButton.classList.remove("selected");
.addEventListener("click", function () { seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.remove("serious"); exampleTextClasses.remove("serious");
exampleTextClasses.remove("seriousItalic"); exampleTextClasses.add("seriousItalic");
exampleTextClasses.remove("seriousBold"); exampleTextClasses.remove("seriousBold");
exampleTextClasses.add("seriousBoldItalic"); exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight"); exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic"); exampleTextClasses.remove("seriousLightItalic");
}); });
const seriousLightButton = document
.getElementById("seriousLightButton") seriousBoldButton.addEventListener("click", function () {
.addEventListener("click", function () { this.classList.add("selected");
exampleTextClasses.remove("serious"); seriousButton.classList.remove("selected");
exampleTextClasses.remove("seriousItalic"); seriousItalicButton.classList.remove("selected");
exampleTextClasses.remove("seriousBold"); seriousBoldItalicButton.classList.remove("selected");
exampleTextClasses.remove("seriousBoldItalic"); seriousLightButton.classList.remove("selected");
exampleTextClasses.add("seriousLight"); seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.remove("seriousLightItalic"); exampleTextClasses.remove("serious");
}); exampleTextClasses.remove("seriousItalic");
const seriousLightItalicButton = document exampleTextClasses.add("seriousBold");
.getElementById("seriousLightItalicButton") exampleTextClasses.remove("seriousBoldItalic");
.addEventListener("click", function () { exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("serious"); exampleTextClasses.remove("seriousLightItalic");
exampleTextClasses.remove("seriousItalic"); });
exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic"); seriousBoldItalicButton.addEventListener("click", function () {
exampleTextClasses.remove("seriousLight"); this.classList.add("selected");
exampleTextClasses.add("seriousLightItalic"); seriousButton.classList.remove("selected");
}); seriousItalicButton.classList.remove("selected");
seriousBoldButton.classList.remove("selected");
seriousLightButton.classList.remove("selected");
seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.remove("serious");
exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold");
exampleTextClasses.add("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
});
seriousLightButton.addEventListener("click", function () {
this.classList.add("selected");
seriousButton.classList.remove("selected");
seriousItalicButton.classList.remove("selected");
seriousBoldButton.classList.remove("selected");
seriousBoldItalicButton.classList.remove("selected");
seriousLightItalicButton.classList.remove("selected");
exampleTextClasses.remove("serious");
exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.add("seriousLight");
exampleTextClasses.remove("seriousLightItalic");
});
seriousLightItalicButton.addEventListener("click", function () {
this.classList.add("selected");
seriousButton.classList.remove("selected");
seriousItalicButton.classList.remove("selected");
seriousBoldButton.classList.remove("selected");
seriousBoldItalicButton.classList.remove("selected");
seriousLightButton.classList.remove("selected");
exampleTextClasses.remove("serious");
exampleTextClasses.remove("seriousItalic");
exampleTextClasses.remove("seriousBold");
exampleTextClasses.remove("seriousBoldItalic");
exampleTextClasses.remove("seriousLight");
exampleTextClasses.add("seriousLightItalic");
});

5
style.css
View File

@@ -70,6 +70,11 @@ button {
color: rgb(0, 188, 138); color: rgb(0, 188, 138);
} }
.selected {
background-color: #d4d4d4;
color: #1e1e1e;
}
.serious { .serious {
font-family: "Serious Sans"; font-family: "Serious Sans";
} }