homework/js/js_07/index.js

//Temperature
//Оформите Temperature как функцию, в которую параметром передается температура в одной системе, а возвращается в другой. Никаких prompt и console.log в коде быть не должно, если вы хотите в дальнейшем пользоваться этой функцией где угодно в коде удобно. Нужен ли блок кода в функции для решения этой задачи?

{
const temperatureCtoF = c => c * 9/5 + 32;
}

/*RGB
Оформите Number: RGB как функцию, в которую параметрами передаются три числа (r,g,b) => . Функция должна возвращать строку в нотации #RRGGBB. Используя условия или тернарный оператор добейтесь что бы в результате всегда было 7 символов, даже когда значение цвета меньше 15ти. Нужен ли блок кода этой функции?*/
{
    const rgbToHex = (r,g,b) => {
        const hex = '#' + 
        (r > 15 ? r.toString(16) : "0" + r.toString(16)) +
        (g > 15 ? g.toString(16) : "0" + g.toString(16)) +
        (b > 15 ? b.toString(16) : "0" + b.toString(16));
        return hex
    }
    console.log(rgbToHex(0,0,0))
}

/*Flats
Оформите Number: flats как функцию. Продумайте достаточное количество параметров для решения задачи. Функция должна возвращать объект вида {entrance, floor}, где entrance - номер падика, floor - номер этажа на котором находится квартира.*/

{
    const entranceAndFlor = (apartmentNumber, houseFloors, apartmentОnFloor) => {
        const apartmentOnFrontDoor = houseFloors * apartmentОnFloor;
        const apartmentNumberInFrontDoor = (apartmentNumber -1) % apartmentOnFrontDoor;
        const floor = Math.floor(apartmentNumberInFrontDoor/apartmentОnFloor)+1;
        const entrance = Math.ceil(apartmentNumber / apartmentOnFrontDoor);

        return result = {
            entrance,
            floor
        }
    }

    console.log(entranceAndFlor(36,9,4))
}

/*Credentials
Оформите задание String: credentials как функцию без параметров. Используйте функцию capitalize из домашнего задания по массивам. Функция должна содержать вызовы prompt и возвращать объект вида {name, surname, fatherName, fullName}*/

{
    const person = () => {

        let trimAndCapitalize = (str) => str.trim()[0].toUpperCase() + str.trim().slice(1).toLowerCase();

        let surname = trimAndCapitalize (
            prompt('введите вашу фамилию.\nMожете добавить пару пробелов в конце или начале. Написать с маленькой буквы или даже сделать пару букв в середине фамилии большими, я все поправлю!')
            );

        let name = trimAndCapitalize (
            prompt('введите ваше имя')
            );

        let fatherName = trimAndCapitalize (
            prompt('введите ваше отчество')
            );

        let fullName = surname + " " + name + " " + fatherName;

        return {
            name,
            surname,
            fatherName,
            fullName
        }
    }   
}

/*New line
Оформите задание String: new line как функцию с параметром-строкой. Функция должна возвращать строку с настоящими переносами. */

{
    const stringNewline = (str) => str.split('\\n').join('\n')
    console.log( stringNewline('sdf\n\nsdf\nsdf') )
}

/*Prompt OR
Оформите задание Prompt: OR как функцию, которая принимает строку для prompt и значение по умолчанию. Функция должна возвращать введенный текст или значение по умолчанию в случае отказа пользователя вводить что-либо. Используйте функцию без блока кода (функцию в одно выражение)*/

//Prompt: or
//Для задания Number: age используя ИЛИ || вывести сообщение об ошибке (alert) если пользователь не введет возраст или нажмет отмену (т. е. prompt выдаст пустую строку или null, интерпретируемую как false).


{
    const promptOr = (promptStr, promptDefault) => prompt (promptStr) || promptDefault
    console.log( promptOr('введи что-то', 'ignore') )
}

/*Login And Password
Оформите задание Login And Password как функцию, которая принимает два параметра - правильный логин и пароль и возвращает true если логин и пароль введенные пользователями верны, или false если пользователь не смог.*/

//Login and password
//Напишите код, который спрашивает логин, проверяет его на верность, в случае если логин верен, просит ввести пароль и проверяет его. В случае несовпадения логина или пароля выводить alert с текстом ошибки. В случае успешного логина - alert с поздравлением. Правильные логин: admin и пароль: qwerty. Используйте вложенные if и else.

{
    const LoginAndPass = (loginTrue, passTrue) => {

        const login = prompt("login");
    
        if (login !== loginTrue){
    
            return false
    
        }else{
    
            const passs = prompt("pass");
            if (passs !== passTrue){
    
                return false;
    
            }else{
    
                return true
            }
        }
    }
console.log(LoginAndPass("admin", "admin"))
}

/* For Table
Оформите задание For Multiply Table как функцию, которая принимает любой массив с массивами, а возвращает строку HTML с тэгом <table> и всякими tr и td. */

/* For Multiply Table
Выведите таблицу умножения 5x5 из задания Multiply table в таблицу, используя вложенные for .... of и document.write
Сделайте черезстрочную подсветку - задавайте четным строкам один цвет фона, нечетным - другой*/

{
    const arr = [

        [0,0,0,0,0,0],
        [0,1,2,3,4,5],
        [0,2,4,6,8,10],
        [0,3,6,9,12,15],
        [0,4,8,12,16,20],
        [0,5,10,15,20,25]
        
        ];


    const arrToHtml = (arr) => {
        
        let str = "<table>"
        let i = 1
            
        for (let tr of arr){
                
            if (i++ % 2 === 0){
                str += '<tr style="background-color: grey;">'
            }else{
                str += "<tr>"
            }
            
            for (let td of tr){
                str += "<td>" + td + "</td>"
            }
            str += "</tr>"
        }
            
        str += "</table>" 
        return (str)
    }

    console.log(arrToHtml(arr))
}

/*Filter Lexics
Оформите задание Filter Lexics как функцию, принимающую любую строку для проверки и массив некорректных слов (['бляха', 'муха', "пляха", "шабля"], например). Функция должна возвращать строку без этих некорректных слов.*/

/*Filter Lexics
Пусть пользователь вводит строку. Разбейте её по пробелам. Используя filter верните true если элемент массива не состоит в определенном массиве недопустимых слов. Если же элемент массива - недопустимое слово, функция, переданная в filter должна возвращать false. Соберите массив в строку обратно.*/

{
    let FilterLexics = (str, arrBadWords) => {
 
         let arr = str.split(" ");
         const f = (word) => {
         
         for (let BadWord of arrBadWords){
             if (word.toLowerCase() === BadWord.toLowerCase()){return false}
         }
         return true;
     }
     let arrNew = arr.filter(f);
     return arrNew.join(' ')
    }
     console.log(FilterLexics("ilter Lexics Оформите задание Filter Lexics как функцию, принимающую любую строку для проверки и массив некорректных слов бляха , муха , пляха, шабля, например). Функция должна возвращать строку без этих некорректных слов." , ['бляха', 'муха', 'пляха', 'шабля']))
 }

 /*Currency Table
Оформите задание Currency Table как функцию, без параметров, которая складывает полученные данные во внутренний двумерный массив, после чего отображает его используя функцию из задания For Table*/

/*Currency table
Сделайте двумерную таблицу с курсами между всеми возможными парами валют по типу таблицы Пифагора, используя заготовку из задания Currency real rate:

Используйте только один запрос на сервер. Используйте расчет кросскурса для вычисления курса между любой парой валют*/


{
    const arrCurency = () =>{
        fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
        .then(data => {
        const arrToHtml = (arrInner) => {
        
                let str = "<table>"
                let i = 1
                    
                for (let tr of arrInner){
                        
                    if (i++ % 2 === 0){
                        str += '<tr style="background-color: grey;">'
                    }else{
                        str += "<tr>"
                    }
                    
                    for (let td of tr){
                        str += "<td>" + td + "</td>"
                    }
                    str += "</tr>"
                }
                    
                str += "</table>" 
                document.write(str)
            }

            arr = [];
            let arrTh = ["",]
                for (let currency in data.rates){
                    arrTh.push(currency)
            }
            arr.push(arrTh)

            
            for (let currencyStart in data.rates){
                let arrTr = []
                arrTr.push(currencyStart)
                    for (let currencyFinish in data.rates) {
                        arrTr.push(data.rates[currencyFinish] / data.rates[currencyStart])
                    }
            arr.push(arrTr)
            }

        console.log(arr)
            arrToHtml(arr)
        })
    }

    arrCurency()
}

/*Form
Оформите задание Form как функцию, которая принимает любой объект как параметр и создает форму на экране.*/

{
    const car = {
        "Name":"chevrolet chevelle malibu",
        "Cylinders":8,
        "Displacement":307,
        "Horsepower":130,
        "Weight_in_lbs":3504,
        "Origin":"USA",
        "in_production": false
  }

    let objToForm = (obj) => {
        let form = '<form>'

        for (let label in obj){
            form += '<label>' + label +':';
            let type = typeof obj[label];
            let typeHtml
            if (type === "number") typeHtml = "number";
            if (type === "string") typeHtml = "text";
            if (type === "boolean") typeHtml = "checkbox";

            form += `<input type="${typeHtml}" value="${obj[label]}"/>`
            
            form += '</label>';
        }
        document.write(form)
    }

    objToForm(car)
}

/*Array of objects sort
Сделайте обобщенную функцию сортировки массива с объектами
var persons = [
    {name: "Иван", age: 17},
    {name: "Мария", age: 35},
    {name: "Алексей", age: 73},
    {name: "Яков", age: 12},
]

sort(persons, "age"); //сортирует по возрасту по возрастанию
sort(persons, "name", false); //сортирует по имени по убыванию

Функция позволяет отсортировать любой набор данных по имени поля (второй параметр). Третьим параметром идет необязательный Boolean, который в случае true делает сортировку по возрастанию, в случае false - по убыванию. По умолчанию (без третьего параметра) происходит сортировка по возрастанию.
Если параметр не задан - внутри функции он равен undefined
*/

{
    var persons = [
        {name: "Иван", age: 17},
        {name: "Мария", age: 35},
        {name: "Алексей", age: 73},
        {name: "Яков", age: 12},
    ]

   // console.log(persons.sort((a,b) => a.name > b.name ? 1 : -1))


    const sortObjByProperty = (arrObj, objProperty, sortDirectionUp) => {
        if (sortDirectionUp) {
            direction1 = 1;
            direction2 = -1;
        }else if(sortDirectionUp === undefined){
            direction1 = 1;
            direction2 = -1;
        }else if(sortDirectionUp === false){
            direction1 = -1;
            direction2 = 1;
        }
        const sortObj = (a,b) => {
            if(a[objProperty] === undefined && b[objProperty] === undefined){
                return 0;
            }else if(a[objProperty] === undefined && b[objProperty]){
                return 1
            }else if(b[objProperty] === undefined && a[objProperty]){
                return -1
            }else{
            return a[objProperty] > b[objProperty] ? direction1 : direction2;
            }
        }
        arrObj.sort(sortObj);
        return arrObj
    }
    
 console.log(sortObjByProperty(persons, "name", false))
}
 /* Table
Оформите задание Table как функцию, которая принимает следующие параметры:
любой массив объектов для отображения
поле, по которому сортировать
порядок сортировки (убывание/возрастание)
Перед отображением:
скопируйте исходный массив, что бы сортировка не изменила оригинал;
отсортируйте с помощью функции из предыдущего задания
Отображение возьмите из задания Table */

{
    const persons = [
        {
            name: 'Мария',
            fatherName: 'Ивановна',
            surname: 'Иванова',
            sex: 'female'
        },
        {
            name: 'Николай',
            fatherName: 'Иванович',
            surname: 'Иванов',
            age: 15
        },
        {
            name: 'Петр',
            fatherName: 'Иванович',
            surname: 'Иванов',
            married: true
        },
    ]


    // этой функцией сортируем обьекты в массиве по одному из свойств (по колонке), тут же определяем сортировка вверх или вниз
    const sortObjByProperty = (arrObj, objProperty, sortDirectionUp) => {
        
        // тут пишим правило сортировки по параметру sortDirectionUp (если параметр любое значение равное true или параметр вовсе не задан (undefined) сортируем снизу вверх. если false - от большего к меньшему)
        if (sortDirectionUp || sortDirectionUp === undefined) {
            direction1 = 1;
            direction2 = -1;
        }else if(sortDirectionUp === false){
            direction1 = -1;
            direction2 = 1;
        }
        // тут описываем как сравнивать. Задаем правило считать большим или меньшим если значение свойства или само свойство не существует (undefined). Это нужно для кореектной сортировки пустых ячеек. Если ни одно из сравниваемых свойств не undefined просто сравниваем больше меньше.
        const sortObj = (a,b) => {
            if(a[objProperty] === undefined && b[objProperty] === undefined){
                return 0;
            }else if(a[objProperty] === undefined && b[objProperty]){
                return 1
            }else if(b[objProperty] === undefined && a[objProperty]){
                return -1
            }else{
            return a[objProperty] > b[objProperty] ? direction1 : direction2;
            }
        }
        arrObj.sort(sortObj);
        console.log(arrObj)
    }
    

    // этой функцией рисуем отсортированный массив обьектов
    const arrObjCopyToTableAndSort = (arrObj, objProperty, sortDirection) =>{

        //копируем переданный обьект, дабы не менять исходник
        let arrObjCopy = [...arrObj]

        //сортируем arrObjCopy внешней фунцией (массив обьектов, по какому свойству сортировать, необязательное направлнеие сортировки(если не задаано или true сортирует по возрасианию, если false по убыванию) )
        sortObjByProperty(arrObjCopy, objProperty, sortDirection)

        // пербираем все свойства отсортированых ранее обьекты. Добавляем их в новый массив свойств (колонки в таблице). Если такое свойство уже ранее было добавлнео, пропускаем его.
        let arrColumn = [];
        for ( let obj of arrObjCopy){ 

            for (let key in obj ){
                if ( !(arrColumn.includes(key)) ) {arrColumn.push(key)}
            }
        }
        // рисуем заголовок таблицы (первую строку) по массиву с колонками
        let table = '<table>';
        table += '<tr>'
            for (let th of arrColumn){
                table += '<th>' + th + '</th>'
            }
        table += '</tr>'
        // рисуем строки таблицы. Одна строка = одному обьекту из массива
        for ( let obj of arrObjCopy) {
            table += '<tr>';
            // далее идем по массиву с колонками и создаем ячейки внутри каждой строки
            for (column of arrColumn){
                table += '<td>'
                    // если в обьекте есть ключ соответвующий названию колонки внтурь ячейки добавляем его значение. Если нет ячейка добавляется пустой
                    if (obj[column]) { table += obj[column] }
                table += '</td>'
            }
            table += '</tr>';
        }

        table += '</table>'
        document.write(table)
    }

    arrObjCopyToTableAndSort (persons, 'married', false)
}

/* Divide
Реализуйте задание Number: divide в HTML:

<input type='number' id="firstNumber" />
<input type='number' id="secondNumber" />
<div id="divisionResult">
    текст в div
</div>
<script>
    const calcResult = () => {
        console.log(firstNumber.value, secondNumber.value, divisionResult.innerHTML)
        divisionResult.innerHTML = "Текст в <code>div</code> поменян с помощью <strong>Javascript</strong><br/>" + Math.random()
    }
    
    firstNumber.oninput = secondNumber.oninput = calcResult
</script>
Воспользуйтесь следующей информацией:
все id в HTML становятся глобальными переменными (если это имя не занято, id="prompt" не сработает, функция prompt будет работать и далее);
Любой DOM-элемент (то, что в HTML называется тэгом или парой тэгов) является объектом;
Для доступа к атрибуту value тэгов input используется свойство value (например, firstNumber.value)
Для доступа к вложенному тексту парных тэгов используется свойство innerHTML (например, divisionResult.innerHTML)
Заготовка выше обеспечивает запуск функции calcResult по любому изменению текста в полях ввода. Напишите в ней деление значений из полей ввода и выведите результат в div. */

{
    <body>
        <input type='number' id="firstNumber" />
        <input type='number' id="secondNumber" />
        <p id="ResultP"> первое число поместится во втором целых <span id="divisionResult">___</span> раз</p>
        <p id="Resultmodulo">тут будет остаток от деления ____</p>
        <script>
            const calcResult = () => {
                console.log(firstNumber.value, secondNumber.value, divisionResult.innerHTML)
                divisionResult.innerHTML = Math.floor(Math.abs(firstNumber.value) / Math.abs(secondNumber.value));
                const modulo = Math.abs(firstNumber.value) % Math.abs(secondNumber.value);
                Resultmodulo.innerHTML = 'Остаток: ' + modulo.toFixed(3)
            }
            
            firstNumber.oninput = secondNumber.oninput = calcResult
        </script>
    </body>
}

/* Calc Func
Вспомните первое ДЗ по Javascript, в котором вы делали всякие расчеты используя код на Javascript. Оформите это как функцию:
найдите все входящие данные, сделайте из них параметры
найдите переменную с результатом расчетов и сделайте так, что бы ваша функция возвращала этот результат.
Если результатов несколько, создайте объект из этих результатов и верните его. */

{
    /*let bikes = prompt ('сколько велосипедов вам нужно', '1');
    let bikesCategory = prompt ('укажите категорию велосипедов');
    const bikesCost = 80;
    let timeRent = prompt ('Стоимость одного часа 80 грн. Укажите цифрами сколько часов аренды?');
    let costResult = bikes * bikesCost * timeRent;
    confirm ('Давайте проверим всё ли правильно! \n количество велосипедов: ' + bikes + '\n Выбранная категория: ' + bikesCategory + '\n Время аренды ' + timeRent + ' часов \n ИТОГОВАЯ СТОИМОСТЬ: ' + costResult + 'грн \n Всё верно?')*/

    let bikeRentCalculator = (bikes, bikesCategory, bikesCost, timeRent) => {
        let costResult = bikes * bikesCost * timeRent;
        return {
            bikes,
            bikesCategory,
            bikesCost,
            timeRent,
            costResult,
        }
    }
}

/*Calc Live
Используя пример из задания Divide и функцию из Calc Func сделайте несколько полей ввода в HTML, меняя которые вы будете получать результат калькуляции в каком-то div.*/

{
    <body>
    <p>Количество велосипедов: <input type='number' id="bikes" /></p>
    <p>Категория велосипедов: <input type='number' id="bikesCategory" /></p>
    <p>Часов арнеды (стоимость 80грн/час): <input type='number' id="timeRent" /></p>
    <br></br>
    <p id="result" style = "background: green; padding: 20px 10px; color: white">тут появится цена когда вы заполните все ячейки</p>
    <script>

    const calcResult = () => {
            let bikesCost = 80;
            result.innerHTML = bikes.value * timeRent.value * bikesCost + ' грн'
        }
        
        bikes.oninput = timeRent.oninput = calcResult
    </script>
</body>
}