homework/js/js_10_loops/index.js

/*while confirm
Сделайте цикл с confirm, который продолжается по Отмена и заканчивается по ОК.*/

{
    let i = 0
    while (!confirm()) {
        alert(i++)
    }
}

/*array fill
Создайте пустой массив и добавляйте в него элементы, пока пользователь не нажмет Отмена в очередном prompt. Используйте push для удобства: push*/

{
    const arr = []
    let i = 0

    while (prompt('добавить в массив?') !== null) {
        arr.push(i++)
        alert(arr)
    }
}

/*array fill nopush
Сделайте предыдущее задание, не используя push, а обращаясь к элементам по индексу.*/

{
    const arr = []
    let i = 0

    while (prompt('добавить в массив?') !== null) {
        arr[i] = i * 10
        i++
        alert(arr)
    }
}


/*infinite probability
Создайте бесконечный цикл, который прерывается с помощью конструкции break, когда Math.random() > 0.9. Код должен подсчитывать количество итераций и вывести это число с помощью alert.*/

{
    let i = 0
    while (true) {
        i++
        if (Math.random() > 0.9) {
            break
        }
    }
    alert(i)
}

/*empty loop
Сделайте цикл с prompt, который прерывается по нажатию OK и продолжается по нажатию "Отмена" c пустым телом цикла.*/

{
    while (prompt('отмена = продолжить') === null) {
    }
}

/*progression sum
Подсчитать сумму арифметической прогрессии от 1 до N c шагом 3 (1,4,7....) используя цикл for. Метод Гаусса не применять, наоборот, сделать максимально наивное решение.*/

{
    const n = +prompt('задайте число N арифметической прогрессии от 1 до N c шагом 3')
    let memberN = 1
    let sum = memberN
    for (let i = 1; i < n; i++) {
        memberN += 3
        sum += memberN
    }
    console.log(sum)
}

//или

{
    const n = +prompt('задайте число N арифметической прогрессии от 1 до N c шагом 3')
    let sum = 0
    for (let i = 0; i < n; i++) {
        sum += i * 3 + 1
    }
}

/*chess one line
Сформировать строку " # # # # # " с помощью цикла for. Длина строки может быть четной и нечетной, и указывается в одном месте в коде.*/

{
    const evenOrOdd = prompt('1 если нечетное, 2 если чётное')
    let str = ''
    for (i = 0; i < 6; i++) {
        str += ' '
        if (i === 6 - 1 && evenOrOdd === '1') break
        str += '#'
    }
    console.log(str)
}

/*numbers
Сформировать строку c помощью вложенных циклов. Для перевода строки используйте \n.
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789*/

{
    let str = ''

    for (n = 0; n <= 9; n++) {
        for (i = 0; i <= 9; i++) {
            str += i
        }
        str += '\n'
    }
    console.log(str)
}

/*chess
Сформируйте строку с шахматной доской из вложенных циклов. Для перевода строки используйте \n. Код должен поддерживать легкое изменение размеров доски.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.
.#.#.#.#.#.#
#.#.#.#.#.#.*/

{
    const height = 10
    const width = 10
    let str = ''

    for (n = 0; n < height; n++) {

        for (i = 0; i < width; i++) {
            if (n % 2) { str += '#.' }
            else { str += '.#' }
        }

        str += '\n'
    }
    console.log(str)
}

/*cubes
Сформируйте массив из N элементов, содержащий в себе кубы индексов, т. е:
[0,1,8,27,64...]*/

{
    let n = 10
    let arr = []
    for(i=0; i<10; i++){
        arr.push(i**3)
    }
    console.log(arr)
}

/*multiply table
C помощью вложенного цикла сформируйте массив массивов "таблица умножения". Для инициализации вложенных массивов используйте
arr[i] = [] //в i-тый элемент массива заносится новый пустой массив
arr[5][6] должен быть равен, соответственно, 30, arr[7][2] == 14 и так далее.*/

{
    let arr = []
    for(n = 0; n < 10; n++){
        arr[n] = []

        for(i = 0; i < 10; i++){
        arr[n][i] = n * i
        }

    }
    console.log(arr)
}

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

{
    const readArrayOfObjects = () => {
        let arr = []
        while( confirm('добавить новій обьект?') ){
            const obj = {}
            let key
            while ( (key = prompt('введите ключ')) !== null){
                obj[key] = prompt('введите значение ключа "' + key + '"')
            }
            arr.push(obj)
        }
        return arr
    }
    readArrayOfObjects()
}

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

{
    const height = 10
    const sing = "#"
    const dot = "."
    let str = ""
    for (i = 0 ; i < height; i++){
        str += dot.repeat(height-i-1) 
        str += sing.repeat(i*2 + 1)
        str += dot.repeat(height-i-1)
        str += '\n'
     }
    for (i = height-1; i > 0; i--){
        str += dot.repeat(height-i) 
        str += sing.repeat(i*2 - 1)
        str += dot.repeat(height-i)
        str += '\n'
    }

console.log(str)
}

/*DOM: multiply table
Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу, вложенные строки и ячейки в циклах. Должно получится что-то вроде этого:*/

{
    let table = document.createElement('table')
    let tr1 = document.createElement('tr')
    table.append(tr1)
    tr1.innerHTML = '<th>0</th>'

    for(n = 1; n < 10; n++){

        let tr = document.createElement('tr')
        table.append(tr)
        let td1 = document.createElement('td')
        tr.append(td1)
        td1.innerText = n

        for(i = 1; i < 10; i++){

        let td = document.createElement('td')
        tr.append(td)
        td.innerText = n * i
        if (n === 1) {
            let th = document.createElement('th')
            th.innerText = n * i
            tr1.append(th)
        }
        }
    }
    document.body.append(table)
}

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

{
    let table = document.createElement('table')
    let tr1 = document.createElement('tr')
    table.append(tr1)
    tr1.innerHTML = '<th>0</th>'

    function backgroundColored(event) {
        event.target.style.backgroundColor = 'grey'
    }

    function backgroundDefault(event) {
        event.target.style.backgroundColor = ''
    }


    for (n = 1; n < 10; n++) {

        let tr = document.createElement('tr')
        table.append(tr)
        let td1 = document.createElement('td')
        tr.append(td1)
        td1.innerText = n

        for (i = 1; i < 10; i++) {

            let td = document.createElement('td')
            tr.append(td)
            td.innerText = n * i
            td.onmouseover = backgroundColored
            td.onmouseout = backgroundDefault

            if (n === 1) {
                let th = document.createElement('th')
                th.innerText = n * i
                tr1.append(th)
            }
        }
    }
    document.body.append(table)
}

/*DOM: Highlight cross
Подсветить строку и столбец, в которой находится подсвеченная ячейка. Если у вас обработчики событий объявлены во вложенном цикле, то вы можете пользоваться счетчиками цикла (обычно i и j) и другими переменными, например переменной, содержащей в себе DOM-элемент строки.*/

{
    let table = document.createElement('table')
    let tr1 = document.createElement('tr')
    table.append(tr1)
    tr1.innerHTML = '<th>0</th>'

    function backgroundColored(event) {

        let arrClasses = event.target.classList
        console.log(arrClasses)
        for(elemClass of arrClasses){
            console.log(elemClass)
            let elements = document.querySelectorAll('.' + elemClass)
            console.log(elements)
            for (element of elements){
                element.classList.add('backgroundColorGrey')
            }
        }
        //querySelectorAll
    }

    function backgroundDefault(event) {
        event.target.style.backgroundColor = ''
        console.log(event.target)
    }


    for (n = 1; n < 10; n++) {

        let tr = document.createElement('tr')
        table.append(tr)
        let td1 = document.createElement('td')
        tr.append(td1)
        //tr.onmouseover = backgroundColored
        //tr.onmouseout = backgroundDefault
        td1.innerText = n

        for (i = 1; i < 10; i++) {

            let td = document.createElement('td')
            tr.append(td)
            td.innerText = n * i
            td.classList.add('row' + n, 'col' + i)
            td.onmouseover = backgroundColored
            td.onmouseout = backgroundDefault

            if (n === 1) {
                let th = document.createElement('th')
                th.innerText = n * i
                tr1.append(th)
            }
        }
    }
    document.body.append(table)
}