HomeWork_JS/Js_09/js.js

// ДЗ: Циклы

//1.  while confirm +
// Сделайте цикл с confirm, который продолжается по Отмена и заканчивается по ОК.
/*{
     let i = 0;
    while (confirm("Введите что-то") === false) {
        i++
    }
} */

//2.  array fill +
// Создайте пустой массив и добавляйте в него элементы, пока пользователь не нажмет Отмена в очередном prompt.
// Используйте push для удобства: push
/*{
    const arr = [];
    let name;
    while (name = prompt("Введите любое имя")) {
        arr.push(name);
    }
    console.log(arr)
} */

// 3. array fill nopush +
// Сделайте предыдущее задание, не используя push, а обращаясь к элементам по индексу.
/*{
    const arr = [];
    let name;
    let i =0;
    while (name = prompt("Введите любое имя")) {
        arr[i] = name
        i++;
    }
    console.log(arr)
} */

// 4.  infinite probability +
// Создайте бесконечный цикл, который прерывается с помощью конструкции break, когда Math.random() > 0.9.
// Код должен подсчитывать количество итераций и вывести это число с помощью alert.
// {
//     let i = 0;
//     let j = Math.random();
//         while (j < 0.9) {
//             j = Math.random()
//             i++
//             if (j > 0.9) {
//                 break
//         }
//         }
//         alert(`Число > 0.9 появилось на ${i} итерации.`)
// }

//5.  empty loop +
// Сделайте цикл с prompt, который прерывается по нажатию OK и продолжается по нажатию "Отмена"
// c пустым телом цикла.
/*{
    let i = 0;
    while (prompt("Введите что-то") === false) {
    }
} */

//6.  progression sum +
// Подсчитать сумму арифметической прогрессии от 1 до N c шагом 3 (1,4,7....) используя цикл for.
// Метод Гаусса не применять, наоборот, сделать максимально наивное решение.
// {
//     const n = prompt("Задайте число от 1 до n c шагом 3)
//     let x = 0;
//     for (let i = 1; i < n; i+=3){
//         x += i;
//     }
//     console.log(`Сумма всех чисел от 1 до ${n} шагом 3 - ${x}`)
// }

//7.  chess one line +
// Сформировать строку " # # # # # " с помощью цикла for. Длина строки может быть четной и нечетной,
// и указывается в одном месте в коде.
// {
//     let x = "#";
//     for (let i = 0; i < 10; i++){
//         x += " #";
//     }
//     console.log(x)
// }

// 8.  numbers +
// Сформировать строку c помощью вложенных циклов. Для перевода строки используйте \n.
//
// 0123456789
// 0123456789
// 0123456789
// 0123456789
// 0123456789
// 0123456789
// 0123456789
// 0123456789
// 0123456789
// 0123456789
//
// {
//     let result = ""
//
//     for (let i=0; i<10; ++i) {
//         let line = " "
//         for (let j=0; j<10; ++j) {
//             line += j
//         }
//         result += line + "\n"
//     }
//     console.log(result)
// }
// 9. chess +
// Сформируйте строку с шахматной доской из вложенных циклов. Для перевода строки используйте \n. Код
// должен поддерживать легкое изменение размеров доски.
//
// .#.#.#.#.#.#
// #.#.#.#.#.#.
// .#.#.#.#.#.#
// #.#.#.#.#.#.
// .#.#.#.#.#.#
// #.#.#.#.#.#.
// .#.#.#.#.#.#
// #.#.#.#.#.#.
// .#.#.#.#.#.#
// #.#.#.#.#.#.
// {
//     let result = ""
//
//     for (let i=0; i<10; ++i) {
//         let line = ""
//         for (let j=0; j<10; ++j) {
//             line += i+j & 1 ? "#" : "."
//         }
//         result += line + "\n"
//     }
//     console.log(result)
// }

// 10. cubes +
// Сформируйте массив из N элементов, содержащий в себе кубы индексов, т. е:
//
//[0,1,8,27,64...]
// {
//     let arr = [];
//     let a = 1;
//      for (let i=0; i<15; i++) {
//         a = i**3;
//         arr.push(a)
//     }
//     console.log(arr)
// }

// 12. read array of objects -
// Напишите функцию readArrayOfObjects, которая циклически добавляет в массив объекты, которые ввел пользователь.
// Пользователь вводит ключи и значения (их в каждом объекте может быть любое количество), используя prompt.
// Когда пользователь нажимает "Отмена" в окне prompt, ввод объекта заканчивается и объект добавляется в массив.
// Перед вводом следующего объекта пользователю задается вопрос (используя confirm), хочет ли он продолжить это мучение
// ввод объектов. При утвердительном ответе, опять работает ввод любюго количества ключей для создания нового объекта
// Функция должна возвращать созданный массив с объектами.

// const result = () => {
//     let arr = [];
//     let ask;
//     while (ask = confirm("Создадим объект")) {
//         while (ask === true) {
//             let obj = {};
//             obj[prompt("Введите ключ")] = prompt('Введите значение для ключа');
//             console.log(obj)
//             if (ask === false) {
//                 break
//             }
//         }
//     }
// }
// result()


// 13. ромбик +
// Сформировать следующую строку - ромбик:
//
// .....#.....
// ....###....
// ...#####...
// ..#######..
// .#########.
// ###########
// .#########.
// ..#######..
// ...#####...
// ....###....
// .....#.....

// let n = 10
//
//     for(let i=1; i<=n; i++){
//         let str='';
//
//         for(let j=n-i; j>0; j--){
//             str+=' ';
//         }
//
//         for(let j=1; j<=i*2-1; j++){
//             str+='#';
//         }
//         console.log(str);
//     }
//
//     for (let i=2; i<=n; i++){
//         let str='';
//
//         for (let j=0; j<i-1; j++){
//             str+=' ';
//         }
//         for (let j=(n-i)*2+1; j>0; j--){
//             str+='#';
//         }
//         console.log(str);
//     }



// 14. DOM: multiply table +
// Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу, вложенные строки и ячейки
// в циклах. Должно получится что-то вроде этого:
// {
//     let table = document.getElementById("table");
//     document.body.append(table);
//
//     for (let i = 1; i < 10; i++) {
//         let tr = document.createElement("tr");
//         table.appendChild(tr);
//         if (i % 2 === 0) {
//             tr.style.backgroundColor = 'lightgrey';
//         }
//         for (let j = 1; j < 10; j++) {
//             let td = document.createElement("td");
//             tr.appendChild(td);
//             td.innerText = i * j;
//             table.style.width = '30%';
//             table.style.border = 'black 2px'
//         }
//     }
// }


// const table = document.getElementById('table');
//
// for (let i = 0; i < 10; i++){
//     let tr = document.createElement('tr');
//     if (i % 2 === 1) {
//              tr.style.backgroundColor = 'lightgrey';
//          }
//     for (let j = 0; j < 10; j++){
//         const td = document.createElement('td');
//         let value = i * j;
//         if (value === 0) {
//             value = i || j;
//         }
//         td.innerHTML = value;
//         tr.appendChild(td);
//     }
//     table.appendChild(tr);
// }

// 15 DOM: highlight cell +
// Подсветить ячейку, над которой находится курсор мыши. Используйте события mouseover и mouseout,
// и style.backgroundColor для подсветки. Для того, что бы подсветить правильную ячейку, добавьте обработчики событий
// во вложенный цикл, и используйте в них ту переменную, которая хранит <td>. В таком случае замыкания вам помогут.
// Внимание: :hover это читерство :-)

// const table = document.getElementById('table');
//
// for (let i = 0; i < 10; i++){
//     let tr = document.createElement('tr');
//     if (i % 2 === 1) {
//              tr.style.backgroundColor = 'lightgrey';
//          }
//     for (let j = 0; j < 10; j++){
//         const td = document.createElement('td');
//         let value = i * j;
//         if (value === 0) {
//             value = i || j;
//         }
//         td.innerHTML = value;
//         tr.appendChild(td);
//     }
//     table.appendChild(tr);
// }
//
// table.onmouseover = function(event) {
//     let target = event.target;
//     target.style.background = 'lightblue';
// };
//
// table.onmouseout = function(event) {
//     target = event.target;
//     target.style.background = '';
// };

// 16. DOM: Highlight cross +
// Подсветить строку и столбец, в которой находится подсвеченная ячейка. Если у вас обработчики событий объявлены во
// вложенном цикле, то вы можете пользоваться счетчиками цикла (обычно i и j) и другими переменными, например
// переменной, содержащей в себе DOM-элемент строки.
//
// const table = document.getElementById('table');
//
// for (let i = 0; i < 10; i++){
//     const row = document.createElement('tr');
//     for (let j = 0; j < 10; j++){
//         const col = document.createElement('td');
//         let val = i * j;
//         if (val === 0) {
//             val = i || j;
//         }
//         col.innerHTML = val;
//         row.appendChild(col);
//     }
//     table.appendChild(row);
// }
//
// table.onmouseover = function(event) {
//     let target = event.target;
//     target.style.background = 'pink';
//
//     document.querySelectorAll(".highlight").forEach(
//         item => item.classList.remove("highlight")
//     );
//     target.closest("tr").classList.add("highlight");
//     target.closest("table").querySelectorAll("tr").forEach(
//         row => row.cells[target.cellIndex].classList.add("highlight")
//     );
// };
//
// table.onmouseout = function(event) {
//     let target = event.target;
//     target.style.background = '';
//
//     document.querySelectorAll(".highlight").forEach(
//         item => item.classList.remove("highlight")
//     );
// };