Помогите сократить код. Если это возможно.
Это просто код который меняет оформление.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 18px;
}
body {
background-color: #fff;
color: #000;
font-size: 1rem;
}
.light {
background-color: #fff;
color: #000;
}
.black {
background-color: #000;
color: #fff;
}
.size__1 {
font-size: .8rem;
}
.size__2 {
font-size: 1rem;
}
.size__3 {
font-size: 1.2rem;
}
main {
max-width: 480px;
padding: 0px 20px 0px 20px;
margin: 0px auto 0px;
}
.title {
font-weight: 900;
font-size: 26px;
padding: 20px 0px 20px 0px;
}
.sample__text {
margin: 20px 0px 20px 0px;
}
.general__blok {
display: flex;
}
.button {
display: flex;
justify-content: center;
align-items: center;
border-width: 3px;
border-style: solid;
border-color: #F4A900;
border-radius: 50%;
width: 48px;
height: 48px;
margin: 0px 5px 0px 5px;
cursor: pointer;
}
.color__fonts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 30px 0px 30px;
}
.color__fonts__title {
margin: 0px 0px 10px 0px;
font-weight: 900;
}
.color__fonts__block {
display: flex;
}
.color__fonts__button__1 {
background-color: #fff;
color: #000;
}
.color__fonts__button__2 {
background-color: #000;
color: #fff;
}
.size__fonts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 30px 0px 30px;
}
.size__fonts__title {
margin: 0px 0px 10px 0px;
font-weight: 900;
}
.size__fonts__block {
display: flex;
}
.size__fonts__buttons__1 {
font-size: 12px;
}
.size__fonts__buttons__2 {
font-size: 18px;
}
.size__fonts__buttons__3 {
font-size: 22px;
}
.aktive {
border-width: 6px;
border-style: double;
cursor: default
}
</style>
</head>
<body>
<main>
<div class="title">Образец</div>
<div class="sample__text">
Таким образом, укрепление и развитие внутренней структуры говорит о возможностях дальнейших направлений развития.
Внезапно, сторонники тоталитаризма в науке освещают чрезвычайно интересные особенности картины в целом, однако
конкретныевыводы, разумеется, представлены в исключительно положительном свете. Внезапно, активно развивающиеся
страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть превращены в посмешище, хотя
само их существование приносит несомненную пользу обществу.
</div>
<div class="title">Оформление</div>
<div class="general__blok">
<div class="color__fonts">
<div class="color__fonts__title">Цвет шрифта</div>
<div class="color__fonts__block">
<div class="button color__fonts__button__1 aktive">Аа</div>
<div class="button color__fonts__button__2">Аа</div>
</div>
</div>
<div class="size__fonts">
<div class="size__fonts__title">Размер шрифта</div>
<div class="size__fonts__block">
<div class="button size__fonts__buttons__1">0.5</div>
<div class="button size__fonts__buttons__2 aktive">1.0</div>
<div class="button size__fonts__buttons__3">1.5</div>
</div>
</div>
</div>
</main>
<script>
let body = document.querySelector("body");
let color__fonts__button__1 = document.querySelector(".color__fonts__button__1");
let color__fonts__button__2 = document.querySelector(".color__fonts__button__2");
let size__fonts__buttons__1 = document.querySelector(".size__fonts__buttons__1");
let size__fonts__buttons__2 = document.querySelector(".size__fonts__buttons__2");
let size__fonts__buttons__3 = document.querySelector(".size__fonts__buttons__3");
const button__1__state = localStorage.getItem("button__1__state");
const button__2__state = localStorage.getItem("button__2__state");
const button__3__state = localStorage.getItem("button__3__state");
const button__4__state = localStorage.getItem("button__4__state");
const button__5__state = localStorage.getItem("button__5__state");
if (button__1__state === "true") {
color__fonts__button__1.classList.add("aktive");
color__fonts__button__2.classList.remove("aktive");
body.classList.add("light");
body.classList.remove("black");
}
if (button__2__state === "true") {
color__fonts__button__2.classList.add("aktive");
color__fonts__button__1.classList.remove("aktive");
body.classList.add("black");
body.classList.remove("light");
}
if (button__3__state === "true") {
size__fonts__buttons__1.classList.add("aktive");
size__fonts__buttons__2.classList.remove("aktive");
size__fonts__buttons__3.classList.remove("aktive");
body.classList.add("size__1");
body.classList.remove("size__2");
body.classList.remove("size__3");
}
if (button__4__state === "true") {
size__fonts__buttons__1.classList.remove("aktive");
size__fonts__buttons__2.classList.add("aktive");
size__fonts__buttons__3.classList.remove("aktive");
body.classList.remove("size__1");
body.classList.add("size__2");
body.classList.remove("size__3");
}
if (button__5__state === "true") {
size__fonts__buttons__1.classList.remove("aktive");
size__fonts__buttons__2.classList.remove("aktive");
size__fonts__buttons__3.classList.add("aktive");
body.classList.remove("size__1");
body.classList.remove("size__2");
body.classList.add("size__3");
}
let colorFonts__1 = () => {
color__fonts__button__1.classList.add("aktive");
color__fonts__button__2.classList.remove("aktive");
body.classList.add("light");
body.classList.remove("black");
const button__1__state = color__fonts__button__1.classList.contains("aktive");
localStorage.setItem("button__1__state", button__1__state.toString());
localStorage.removeItem("button__2__state");
}
color__fonts__button__1.addEventListener("click", colorFonts__1);
let colorFonts__2 = () => {
color__fonts__button__2.classList.add("aktive");
color__fonts__button__1.classList.remove("aktive");
body.classList.add("black");
body.classList.remove("light");
const button__2__state = color__fonts__button__2.classList.contains("aktive");
localStorage.setItem("button__2__state", button__2__state.toString());
localStorage.removeItem("button__1__state");
}
color__fonts__button__2.addEventListener("click", colorFonts__2)
let fontSize__1 = () => {
size__fonts__buttons__1.classList.add("aktive");
size__fonts__buttons__2.classList.remove("aktive");
size__fonts__buttons__3.classList.remove("aktive");
body.classList.add("size__1");
body.classList.remove("size__2");
body.classList.remove("size__3");
const button__3__state = size__fonts__buttons__1.classList.contains("aktive");
const bodySize = body.classList.contains("size__1");
localStorage.setItem("button__3__state", button__3__state.toString());
localStorage.removeItem("button__4__state");
localStorage.removeItem("button__5__state");
}
size__fonts__buttons__1.addEventListener("click", fontSize__1);
let fontSize__2 = () => {
size__fonts__buttons__1.classList.remove("aktive");
size__fonts__buttons__2.classList.add("aktive");
size__fonts__buttons__3.classList.remove("aktive");
body.classList.remove("size__1");
body.classList.add("size__2");
body.classList.remove("size__3");
const button__4__state = size__fonts__buttons__2.classList.contains("aktive");
const bodySize = body.classList.contains("size__2");
localStorage.setItem("button__4__state", button__4__state.toString());
localStorage.removeItem("button__3__state");
localStorage.removeItem("button__5__state");
}
size__fonts__buttons__2.addEventListener("click", fontSize__2);
let fontSize__3 = () => {
size__fonts__buttons__1.classList.remove("aktive");
size__fonts__buttons__2.classList.remove("aktive");
size__fonts__buttons__3.classList.add("aktive");
body.classList.remove("size__1");
body.classList.remove("size__2");
body.classList.add("size__3");
const button__5__state = size__fonts__buttons__3.classList.contains("aktive");
const bodySize = body.classList.contains("size__3");
localStorage.setItem("button__5__state", button__5__state.toString());
localStorage.removeItem("button__3__state");
localStorage.removeItem("button__4__state");
}
size__fonts__buttons__3.addEventListener("click", fontSize__3);
</script>
</body>
</html>