homework/hw-js-02-types-expression-conditions-logic-homework/js/task-01.js

// switch: sizes
// Сделайте задание Comparison: sizes из предыдущего ДЗ используя switch
const f1 = (rootId) => {
    let fromCountry;
    let toCountry;
    const sizesLength = 8;

    // Ранее у меня список начальных значений размеров находился в объекте
    // coatSizes = { Russian: 40, German: 34, France: 36, Italy: 38, "Great Britain": 8, USA: 6 };
    // теперь он находится в функции chooseCountrySize(country) со switch,
    //     которая используется 2 раза: 
    // - для выбора начального размера страны, с которой конвертируем
    // - для выбора начального размера страны, в которую конвертируем

    function chooseCountrySize(country) {
        let initialSize;
        switch (country) {
            case 'Russian':
                initialSize = 40;
                break;
            case 'German':
                initialSize = 34;
                break;
            case 'France':
                initialSize = 36;
                break;
            case 'Italy':
                initialSize = 38;
                break;
            case 'Great Britain':
                initialSize = 8;
                break;
            case 'USA':
                initialSize = 6;
                break;
        }
        return initialSize;
    }

    //Подставляет размерную сетку той страны, с которой конвертируем

    const substituteFnc = () => {
        fromCountry = fromCountryId.value;
        const sizesArray = [];
        sizesArray[0] = chooseCountrySize(fromCountry);
        for (let i = 1; i < sizesLength; i++) { sizesArray[i] = sizesArray[0] + i * 2 };
        const sizesStr = sizesArray.map(item => "<option value=" + item + ">" + item + "</option>");
        fromSizeId.innerHTML = sizesStr;
        convertedSizeId.innerHTML = "---";
    };

    //Вычисляет размер той страны, в которую конвертируем
    function countSizeFnc() {
        toCountry = convertedCountryId.value;
        const fromSize = fromSizeId.value;
        convertedSizeId.innerHTML = chooseCountrySize(toCountry) + (fromSize - chooseCountrySize(fromCountry));
    };

    //Блок создания формы
    const task01block = document.createElement('div');
    task01block.style = "display:inline-block";
    const task01title = document.createElement('h2');
    task01title.innerText = 'Task-01  Comparison: sizes';
    
    //Блок создания формы
    const countries = document.createElement('div');
    const sizes = document.createElement('div');
    const from = document.createElement('span');
    const fromCountryId = document.createElement('select');
    const to = document.createElement('span');
    const convertedCountryId = document.createElement('select');
    const fromSizeId = document.createElement('select');
    const convertedSizeId = document.createElement('output');
    const sizeBtn = document.createElement('button');

    sizes.style = "margin-top:20px";
    from.innerText = 'From';
    fromCountryId.innerHTML = "<option value='hide'> -- Enter initial country --</option><option value='Russian'>Russian</option><option value='German'>German</option><option value='France'>France</option><option value='Italy'>Italy</option><option value='Great Britain'>Great Britain</option><option value='USA'>USA</option>";
    fromCountryId.style = "margin-left:10px; margin-right:10px";
    to.innerText = 'to';
    convertedCountryId.style = "margin-left:10px";
    convertedCountryId.innerHTML = "<option value='hide'> -- Enter converted country --</option><option value='Russian'>Russian</option><option value='German'>German</option><option value='France'>France</option><option value='Italy'>Italy</option><option value='Great Britain'>Great Britain</option><option value='USA'>USA</option>";
    fromSizeId.style = "display:inline-block; width:150px; margin-left:40px"
    fromSizeId.innerHTML = "<option value='hide'> -- Enter size --</option>";
    convertedSizeId.innerHTML = "---";
    convertedSizeId.style = "display:inline-block; text-align:center; width:150px; border: 1px solid green; border-radius:3px; margin-left:30px;"
    convertedSizeId.name = "result";
    convertedSizeId.for = "sizeBtn";       
    sizeBtn.innerText = "Convert";
    sizeBtn.style = "display:block; margin-left:auto; margin-right:auto; margin-top:20px";
    sizeBtn.type = "button";
 
 
// guessYearBtn.innerText = "Run Vanga";
// guessYearBtn.style = 'margin-bottom:20px';

rootId.appendChild(task01block); 
    task01block.appendChild(task01title); 
    task01block.appendChild(countries);
    task01block.appendChild(sizes);
    countries.appendChild(from); 
    countries.appendChild(fromCountryId); 
    countries.appendChild(to); 
    countries.appendChild(convertedCountryId);
    sizes.appendChild(fromSizeId);
sizes.appendChild(convertedSizeId);
task01block.appendChild(sizeBtn); 

    sizeBtn.onclick = countSizeFnc;
    fromCountryId.onchange = substituteFnc;

    //Сброс результата при изменении одного из полей
    fromSizeId.onchange = () => { convertedSizeId.innerHTML = "---"; };
    convertedCountryId.onchange = () => { convertedSizeId.innerHTML = "---"; };
}
f1(root);
export default f1;