JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<h3>Задача №1</h3>
<span>Свойство className после дополнений: </span>
<p id="result">hello</p>

<h3>Задача №2</h3>
<span>Преобразованная строка:</span>
<p id="camelized"></p>

<h3>Задача №3</h3>
<span>Объект из массива:</span>
<p id="obj"></p>
<span>Новый массив:</span>
<p id="arr"></p>

CSS

body{
    font-family: Verdana;
}

span{
    font-style: italic;
}

p{
    font-family: monospace;
    font-size: 17px;
    color: green;
}

JavaScript

/*Задача №1
Создайте функцию addClass(obj, cls), которая добавляет в список класс cls, но только если его там еще нет*/

var obj = {
	className: 'open menu'
};

function addClass(obj, cls) {
    
    var objClassNames = obj.className.split(' ');
    
    for (var i = 0; i < objClassNames.length; i++) {
        if(cls == objClassNames[i]) {
            return;
        }
    }
    
    objClassNames.push(cls);
    obj.className = objClassNames.join(' ');
    //выводим результат
    document.getElementById('result').innerHTML = '"' + obj.className + '"';
}

//добавляем классы
addClass(obj, 'new'); 
addClass(obj, 'open'); 
addClass(obj, 'me'); 
addClass(obj, 'me');
addClass(obj, 'hello');
addClass(obj, 'new'); 

/*Задача №2
Напишите функцию camelize(str), которая преобразует строки вида «my-short-string» в «myShortString».*/

function camelize(str) {
    var arrFromStr = str.split('-');
    
    for (var i = 1; i < arrFromStr.length; i++) {
        arrFromStr[i] = arrFromStr[i].charAt(0).toUpperCase() + arrFromStr[i].slice(1);
    }
    
    var camelisedStr = arrFromStr.join('');
    //выводим результат
    document.getElementById('camelized').innerHTML = camelisedStr;
}
//"Верблюдируем" строку
camelize('my-beautiful-function-work\'s-very-well');

/*Задача №3
Есть массив с данными он обновляется каждые 300 м.секунды
После каждого обновления он передаётся аргументом в нашу функцию.
Наша функция возвращает два значения. Первое: объект со всеми элементами из массива. Второе: массив у которого в начале |Готово| и в конце |LikeABoss|*/

function arrToObj(array) {
    var objFromArr = {};
    
    //добавить |start| первому значению
    if(!isNaN(parseInt(array[0]))) {//добавляем '+' к числовым свойствам, чтобы сохранить порядок при выводе объекта
        objFromArr['+' + array[0]] = '|start| This is ' + array[0];
    }else{
        objFromArr[array[0]] = '|start| ' + objFromArr[array[0]];
    }
    
    for(var i = 1; i < array.length ; i++) {
       ...