homework/js/10/HW10.js

// while confirm
// Сделайте цикл с confirm, который продолжается по Отмена и заканчивается по ОК.
{
    while (!confirm('Жми отмену!')) {
        alert('Опа, нежданчик! Тут магия зазеркалья')
    }
}



// array fill
// Создайте пустой массив и добавляйте в него элементы, пока пользователь не нажмет Отмена в очередном prompt.Используйте push для удобства: push
{
    const arr = []
    let item
    while (item !== null) {
        item = prompt('введи что-то для добавления в массив')
        if (item !== null) { arr.push(item) }
        else break
    }

    console.log(arr)
}



// array fill nopush
// Сделайте предыдущее задание, не используя push, а обращаясь к элементам по индексу.
{
    const arr = []
    let item, i = 0
    while (item !== null) {
        item = prompt('введи что-то для добавления в массив')
        if (item !== null) { arr[i] = item }
        else break;
        i++
    }

    console.log(arr)
}



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

    while (num <= 0.9) {
        num = Math.random()
        console.log(`${i + 1}:`, num)
        if (num > 0.9) {
            break
        }
        i++
    }
    alert(`Всего было ${i + 1} итераций цикла`)
}



// empty loop
// Сделайте цикл с prompt, который прерывается по нажатию OK и продолжается по нажатию "Отмена" c пустым телом цикла.
{
    while (prompt('Жми') === null) { }
}



// progression sum
// Подсчитать сумму арифметической прогрессии от 1 до N c шагом 3(1, 4, 7....) используя цикл for.Метод Гаусса не применять, наоборот, сделать максимально наивное решение.
{
    const arr = []
    const length = +prompt('Введите количество членов арифметической прогрессии')
    for (let i = 0; i < length; i++) {
        arr.push(1 + i * 3)
    }

    console.log(arr.reduce((a, b) => a + b))
}



// chess one line
// Сформировать строку " # # # # # " с помощью цикла for.Длина строки может быть четной и нечетной, и указывается в одном месте в коде.
{
    const length = +prompt('Введите длину строки')
    let str = ''
    for (i = 0; i < length; i++) {
        str += (i % 2 ? '#' : ' ')
    }
    console.log(str)
}



// numbers
// Сформировать строку c помощью вложенных циклов.Для перевода строки используйте \n.
{
    let str = ''
    for (let i = 0; i < 10; i++) {
        for (let j = 0; j < 10; j++) {
            str += j;
        }
        str += '\n'
    }
    console.log(str);
}



// chess
// Сформируйте строку с шахматной доской из вложенных циклов.Для перевода строки используйте \n.Код должен поддерживать легкое изменение размеров доски.
{
    [row, column] = ['Введите количество строк в таблице', 'Введите количество столбцов в таблице'].map(prompt)
    let str = ''
    for (let i = 0; i < +row; i++) {
        for (let j = 0; j < +column; j++) {
            i % 2 ? str += (j % 2 ? '.' : '#') : str += (j % 2 ? '#' : '.')
        }
        str += '\n'
    }
    console.log(str)
}



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



// multiply table
// C помощью вложенного цикла сформируйте массив массивов "таблица умножения". Для инициализации вложенных массивов используйте: arr[i] = []
{
    const length = +prompt('Введите размер стороны таблицы Пифагора')

    let arr = []
    for (let i = 0; i < length; i++) {
        arr[i] = []
        for (let j = 0; j < length; j++) {
            arr[i].push(i * j)
        }
        arr.push(arr[i])
    }
    console.log(arr)
    console.log(arr[5][6] == 30)
    console.log(arr[7][2] == 14)
}



// read array of objects
// Напишите функцию readArrayOfObjects, которая циклически добавляет в массив объекты, которые ввел пользователь.Пользователь вводит ключи и значения(их в каждом объекте может быть любое количество), используя prompt.Когда пользователь нажимает "Отмена" в окне prompt, ввод объекта заканчивается и объект добавляется в массив.Перед вводом следующего объекта пользователю задается вопрос(используя confirm), хочет ли он продолжить это мучение ввод объектов.При утвердительном ответе, опять работает ввод любюго количества ключей для создания нового объекта
// Функция должна возвращать созданный массив с объектами.
{
    let readArrayOfObjects = () => {
        const arr = []
        do {
            const obj = {}
            for (let key, value; ; obj[key] = value) {
                key = prompt('Введите ключ для объекта')
                if (key === null) {
                    break
                }
                value = prompt('Введите значение ключа объекта')
                if (value === null) {
                    break
                }
            }
            arr.push(obj)
        } while (confirm('Продолжаем ввод объектов?'))

        return arr
    }

    readArrayOfObjects()
}



// ромбик
// Сформировать следующую строку - ромбик:
{
    const length = prompt('Введите любое нечетное число')
    let str = ''
    for (let i = 0; i < length; i++) {
        for (let j = 0; j < length; j++) {
            if (i < length / 2) {
                !(j < (Math.floor(length / 2) - i) || j > (Math.floor(length / 2) + i)) ? str += '#' : str += '.'
            } else {
                !(j < (i - Math.floor(length / 2)) || j > length - (i - Math.floor(length / 2) + 1)) ? str += '#' : str += '.'
            }

        }
        str += '\n'
    }

    console.log(str)
}



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

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

// Подсветить строку и столбец, в которой находится подсвеченная ячейка.Если у вас обработчики событий объявлены во вложенном цикле, то вы можете пользоваться счетчиками цикла(обычно i и j) и другими переменными, например переменной, содержащей в себе DOM - элемент строки.
{
    const length = +prompt('Введите размер стороны таблицы Пифагора')

    // создаем див-родитель для таблицы
    const div = document.createElement('div')
    document.body.append(div)

    // создаем тег table 
    const multiplyTable = document.createElement('table')
    div.append(multiplyTable)

    // создаем тело таблицы
    for (let i = 1; i < length + 1; i++) {
        const row = document.createElement('tr')
        multiplyTable.append(row)

        for (let j = 1; j < length + 1; j++) {
            const col = document.createElement('td')
            col.style.cssText = `
                    border: 1px solid grey;
                    min-width: 1.3em;
                    text-align: center;
                    `
            row.append(col)
            col.innerText = `${i * j}`

            // подсветка строки
            col.addEventListener('mouseover', () => multiplyTable.rows[i - 1].style.backgroundColor = '#00FFFF')
            col.addEventListener('mouseout', () => multiplyTable.rows[i - 1].style.backgroundColor = 'transparent')

            // подсвета столбца
            col.addEventListener('mouseover', () => {
                for (let k = 1; k < length + 1; k++) {
                    multiplyTable.rows[k - 1].cells[j - 1].style.backgroundColor = "#00FFFF"
                    // console.log(multiplyTable.rows[k - 0])
                }
            })
            col.addEventListener('mouseout', () => {
                for (let k = 1; k < length + 1; k++) {
                    multiplyTable.rows[k - 1].cells[j - 1].style.backgroundColor = "transparent"
                }
            })

            // подсветка элемента таблицы
            col.onmouseover = () => col.style.backgroundColor = '#FFFF00'
            col.addEventListener('mouseout', () => col.style.backgroundColor = 'transparent')
        }
    }
}