Алексей Леонтьев's questions

let form = document.querySelector('form')
let input = document.querySelector('input')
let textarea = document.querySelector('textarea')
let checkbox = document.querySelector('input[type=checkbox]')
let radiobuttons = document.querySelectorAll('input[type=radio]:checked')

if (localStorage.getItem('param') !== null) {
  let param = JSON.parse(localStorage.getItem('param'));
  input.value = param.input
  textarea.value = param.textarea
  checkbox.checked = param.checkbox
}
document.addEventListener('input', function(e) {
  localStorage.setItem('param', JSON.stringify({input: input.value, textarea: textarea.value, checkbox: checkbox.checked}))
})

<form action="">
<input type="text"/>
<textarea name="t" id="text"></textarea>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id=""/>
    <label class="form-check-label" for=""> Default checkbox </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id=""/>
    <label class="form-check-label" for=""> Checked checkbox </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="" id=""/>
    <label class="form-check-label" for=""> Default radio </label>
</div>
<div class="form-check">
    <input
            class="form-check-input"
            type="radio"
            name=""
            id=""
    />
    <label class="form-check-label" for=""> Default radio </label>
    <div class="form-check">
        <input
                class="form-check-input"
                type="radio"
                name=""
                id=""
        />
        <label class="form-check-label" for=""> Default radio </label>
    </div>

    <select name="select" id="select">
        <option value="name1">name1</option>
        <option value="name2">name2</option>
        <option value="name3">name3</option>
    </select>
</div>
</form>

let table = document.querySelector("table");

table.addEventListener("click", ({ target }) => {
  if (target.tagName == "TD") {
    let trs = document.querySelectorAll("tr");
    for (let tr of trs) {
      let cols = tr.querySelectorAll("td.active");
      console.log(cols.length)
      if (cols.length <= 5) {
        target.classList.add("active");
      }
      else target.classList.remove('active')
    }
  }
});

 table {
    width: 500px;
    height: 500px;
    margin-bottom: 20px;
    /* border: 1px solid black; */
    /* border-collapse: collapse;  */
  }
  table tr {
    font-weight: bold;
    padding: 5px;
    border: 1px
 solid black;
  }
  table td {
    border: 1px solid black;
    padding: 5px;
    height: 40px;
    width: 40px;

  }
: 5px;
    border: 
  .active{
    background-color: aqua;
    pointer-events: none;

  }
  .diactive{
    pointer-events: none;
  } 

<table>
      <tr>
        <td data-col="0"></td>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
        <td data-col="4"></td>
        <td data-col="5"></td>
      </tr>
      <tr>
        <td data-col="6"></td>
        <td data-col="7"></td>
        <td data-col="8"></td>
        <td data-col="9"></td>
        <td data-col="10"></td>
        <td data-col="11"></td>
      </tr>
      <tr>
        <td data-col="12"></td>
        <td data-col="13"></td>
        <td data-col="14"></td>
        <td data-col="15"></td>
        <td data-col="16"></td>
        <td data-col="17"></td>
      </tr>
      <tr>
        <td data-col="18"></td>
        <td data-col="19"></td>
        <td data-col="20"></td>
        <td data-col="21"></td>
        <td data-col="22"></td>
        <td data-col="23"></td>
      </tr>
      <tr>
        <td data-col="24"></td>
        <td data-col="25"></td>
        <td data-col="26"></td>
        <td data-col="27"></td>
        <td data-col="28"></td>
        <td data-col="29"></td>
      </tr>
      <tr>
        <td data-col="30"></td>
        <td data-col="31"></td>
        <td data-col="32"></td>
        <td data-col="33"></td>
        <td data-col="34"></td>
        <td data-col="35"></td>v
      </tr>
      
    </table>

let textarea = document.querySelector("textarea");
let start;
let end;
textarea.addEventListener("mouseup", function () {
  start = this.selectionStart;
  end = this.selectionEnd;

});
textarea.addEventListener("keydown", function (event) {
  if (event.key == "Tab") {
    event.preventDefault();
    this.value = this.value.substring(0, start)+"\t"+this.value.substring(start, end)+ this.value.substring(end, this.value.length)
  }
});

    <textarea name="a" id="textarea"></textarea>

let table = document.querySelector("table");
for (let i = 0; i < 5; i++) {
  let newTr = document.createElement("tr");
  table.append(newTr);
  for (let j = 1; j <= 5; j++) {
    let newTd = document.createElement("td");
    newTr.append(newTd);
  }
}

let allTr = document.querySelectorAll("tr");
var output = "";
for (const tr of allTr) {
for (const td of tr.children) {

  for (let i = tr.children.length; i>=1; i--) {
          for (var j = 1; j <= i; j++) {
            output = 'x'
          }
          td.textContent =  output;
      }
    }
}

 table {
    width: 100%;
    margin-bottom: 20px;
    /* border: 1px solid black; */
    /* border-collapse: collapse;  */
  }
  table tr {
    font-weight: bold;
    padding: 5px;
    border: 1px solid black;
  }
  table td {
    border: 1px solid black;
    padding: 5px;
    height: 40px;
  }

  <table></table>

 let inputs = document.querySelectorAll("input");
      let button = document.querySelector("#btn");

      let texts = ["text1", "text2", "text3"];

      button.addEventListener("click", function () {
        for (let input of inputs) {
          for (let text of texts) {
            if (input.value === text) {
              input.classList.add("right")
            } else {
              input.classList.add("wrong");
              
            }
          }
        }
      });

   <input />
    <input />
    <input />

    <button id="btn">click</button>

   let events = [
    {
        date:  '2019-12',
        event: 'name1'
    },
    {
        date:  '2019-12',
        event: 'name2'
    },
    {
        date:  '2019-11',
        event: 'name3'
    },
    {
        date:  '2019-11',
        event: 'name4'
    },
    {
        date:  '2020-10',
        event: 'name5'
    },
    {
        date:  '2020-10',
        event: 'name6'
    },
    {
        date:  '2020-11',
        event: 'name5'
    },
    {
        date:  '2020-11',
        event: 'name6'
    },
    {
        date:  '2020-12',
        event: 'name7'
    },
    {
        date:  '2020-12',
        event: 'name8'
    },
    {
        date:  '2020-12',
        event: 'name9'
    },
]

let result = {};
for (const obj of events) {
        if (!result[obj.date.slice(0,4)]) {
          result[obj.date.slice(0,4)] = [];
        }
        result[obj.date.slice(0,4)].push(obj.event);
    }
    console.log(result)

 let divs = document.querySelectorAll("div");
  for (const div of divs) {
    div.addEventListener("click", function () {
      console.log(div.style.position);
      if (div.style.position === "absolute")
        div.style.position = "relative";
      else div.style.position = "absolute";
    });
  }

  <div style="background-color: 'red'; position: absolute">vfvf</div>
<div style="position: absolute">dasdasdasdasdasd</div>

 let fLetter = [] // массив для первых букв слова
  const array = ["apple", "apricot", "avocado", 'banana', 'bekon', 'chery']
    for (const m of array) {
        fLetter.push(m.charAt(0)) // пушим в массив первые буквы слов
    }
     console.log(fLetter) // вывожу в консоль все первые буквы
  const out = array.filter((el) => {
    let count = 0;
    if(el[count] === fLetter[count]) //  думаю), что сравниваю первую букву из массива слов и буквы из массива букв
    count++
    let ul = document.createElement("ul"); 
    let newtextitem = document.createElement('li') 
    newtextitem.textContent = el
    ul.appendChild(newtextitem)
    document.body.appendChild(ul)
  });

  
  let p = document.querySelector("p");
  let arr = [];
  let divs = document.querySelectorAll("div");
  for (const div of divs) {
    div.addEventListener("click", function () {
      if (div.click) arr.push(div.textContent);
      p.innerHTML = "Итого:" + arr ;
    });
  }

 
  <div>Яблоки: 200</div>
<div>Вишни: 300</div>
<div>Груши: 250</div>
<p></p>

 let arr = [...document.querySelectorAll("a")];// создаю массив из а
    let res = []// создаю массив в который буду пушить результат
  for (const el of arr) { //перербираю все элементы массива
    const obj = Object.fromEntries( // создаю обЪект, в котором буду перебирать массив
      arr.map((text, href) => [ //перебираю массив
        ,  
        {
          text: el.text, // формирую объект
          href: el.href,
        },
      ])
    );
   res.push(obj) //пушу объект в массив
  }

console.log('res', res)//  результате я получаю объект с двумя уровнями вложенности, которые мне не нужны. 

 <a href="1.html">111</a>
<a href="2.html">222</a>
<a href="3.html">333</a>

let p = document.querySelector("p"); // Получаю доступ к P
p.addEventListener("click", function() { // здесь уже ошибка - я обрабатываю клик по параграфу, а надо по слову:D
  let pText = document
    .querySelector("p")
    .innerText.split(" ") // получаю массив с текстом из параграфа и пытаюсь его перебрать 
    .forEach(
      (word) => ((p.innerHTML = word), (p.style.color = "red")) // Белеберда, в которой я пытался.... добавить слово в параграф... и покрасить параграф в красный цвет. Ну что написал, то и получил) 
    );
});

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod nostrum nemo, quis ipsum officiis cum id, placeat temporibus soluta tenetur consequatur illum vel autem assumenda corrupti dolor molestias consectetur!
</p>

let p = document.querySelector("p");
let res = [];
document.querySelector("button").addEventListener("click", function() {
  let arr = p.innerText.split(" ").forEach((word) => { //делаю перебор всех элементов массива
    let elem = document.createElement("span"); // создаю span
    elem.innerText = word; // добавляю в span слова 
    res.push(elem.outerHTML);
    // отправляю все слова со span в массив
  });
  p.innerHTML = res.join(" ");
  // заменяю исходный текст текстом в span элементах
});

<p>
  Lorem 1/2 ipsum dolor sit amet, 2/4 consectetur adipisicing elit. 3/6 Pariatur enim 4/8 omnis non blanditiis, dolore illo ullam labore autem sit. Illum beatae dolores ipsam blanditiis excepturi reiciendis quibusdam necessitatibus error atque.
</p>
<button>Press me</button> <br />

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <button>press me</button>
  <ul>
    <li>112</li>
    <li>222</li>
    <li>311</li>
  </ul>
  <script>
    let ul = document.querySelector("ul");
    document.querySelector("button").addEventListener("click", function() {
      let re = []; //Массив для всех значений тега li
      let max = 0; // Начальное значение для максимального числа
      let lis = [...document.querySelectorAll("li")]; //получаю массив всех li
      for (const li of lis) {
        re.push(parseFloat(li.textContent)); //добавляю в массив значения
        max = Math.max(...re); // получаю максимальное значение из списка, а дальше всё) 
      }
    });
  </script>
</body>

</html>

let weekEnd = [],
  d = new Date(),
  m = d.getMonth(),
  y = d.getFullYear(),
  totalDays = new Date(y, m, 6).getDate() && new Date(y, m, 0).getDate();

for (let i = 1; i <= totalDays; i++) {
  let dayNum = new Date(y, m, i).getDay();
  // console.log("dayNum", dayNum);
  if (dayNum === 6) weekEnd.push(i);
  else if (dayNum === 0) weekEnd.push(i);
}

console.log(weekEnd)

  let tds = document.querySelectorAll("td");
  let inputs = [...document.querySelectorAll("input")];

  document.querySelector("button").addEventListener("click", function () {
    for (const td of tds) {
      for (const element of inputs) {
        let i = document.createTextNode(element.value);
        let tr = document.createElement("tr");
        tr.appendChild(i);
        td.appendChild(tr);
    }
    }
  });

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
  </head>
  <body>
<input />
<input />
<input />
<table border="1px" style="width: 300px; height: 300px; color: black">
  <td></td>
  <td></td>
  <td></td>
</table>
<button>press</button>
  </body>
</html>

let lis = document.querySelectorAll("li");
let arr = [...document.querySelectorAll("li")];

for (const li of lis) {
  li.addEventListener("click", func);
  function func() {
    for (let i = 0; i < arr.length; i++) {
      li.innerHTML = li.innerText +[i];
    }
  }
}

<ul>
  <li>dasdasd</li>
  <li>dasdasd</li>
  <li>asdasdad</li>
  <li>dasdasdas</li>
</ul>