Add style preview button functionality

This commit is contained in:
kaBeech
2023-03-18 15:44:02 -07:00
parent 113d94990c
commit 39f69b76d4
2 changed files with 121 additions and 0 deletions

62
index.js Normal file
View File

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