Javascript-форум - Получается огромный код

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Получается огромный код (https://javascript.ru/forum/misc/84073-poluchaetsya-ogromnyjj-kod.html)

рони,
ИДЕАЛЬНО! :yes:

рони,
Да там все понятно, спасибо

рони,
Но только не 4 а три, день, время и продолжительность, я просто переспрошу на всякий случай.

Сергей Ракипов,
четыре!!!
data-weekday="2"
data-duration="1_15"
data-status="Собрание Начнется через:_Собрание идет:"
data-begin="15_00"

рони,
А я даже в расчет не взял это с ними все хорошо их даже менять не нужно )))

Сергей Ракипов,
удачи!)))

Помогите сократить код. Если это возможно.
Это просто код который меняет оформление.

<!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>

Ну сделать функции для стандартных вещей.
Например ввести функцию

const setBodySize = (n) => {
    body.classList.remove('size__1','size__1','size__3');
    body.classList.add(`size__${n}`);
}

и вместо

body.classList.remove("size__1");
body.classList.remove("size__2");
body.classList.add("size__3");

писать

setBodySize (3);

С size__fonts__buttons__ придумать что то аналогичное

Смена оформления с запоминанием

Сергей Ракипов,

<!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>
        const body = document.querySelector("body");
        const decor = {
            'color': ['light', 'black'],
            'size': ['size__1', 'size__2', 'size__3']
        }
        const state = {
            'color': localStorage.getItem("state_color") ? localStorage.getItem("state_color") : 0,
            'size': localStorage.getItem("state_size") ? localStorage.getItem("state_size") : 1
        };
        const set_decor = () => {
            for (let sel in decor) {
                body.classList.remove(...decor[sel]);
                body.classList.add(decor[sel][state[sel]]);
            }
        }
        set_decor();
        for (let sel in decor) {
            let div = document.querySelector(`.${sel}__fonts__block`);
            const children = [...div.children];
            const active_btn = () => children.forEach((btn, i) => btn.classList.toggle('aktive', i == state[sel]));
            active_btn();
            div.addEventListener('click', ({
                target
            }) => {
                let index = children.indexOf(target);
                if (index > -1) {
                    state[sel] = index;
                    localStorage.setItem(`state_${sel}`, index);
                    active_btn();
                    set_decor();
                }
            })
        }
        set_decor();
    </script>
</body>
</html>

Цитата:

Сообщение от voraa (Сообщение 551700)

Ну сделать функции для стандартных вещей.
Например ввести функцию

const setBodySize = (n) => {
    body.classList.remove('size__1','size__1','size__3');
    body.classList.add(`size__${n}`);
}

и вместо

body.classList.remove("size__1");
body.classList.remove("size__2");
body.classList.add("size__3");

писать

setBodySize (3);

С size__fonts__buttons__ придумать что то аналогичное

Спасибо не знал что так можно писать.