помогите пожауйста с тестовым заданием на позицию junior frontend

Question

Форма завершается кнопкой “Сохранить”, по нажатию которой текст и кол-во сообщений сохраняются в БД.На js я весь функционал написал осталось это. Просто не разу работал с бд , наверно лучше будет использовать php. Вот код :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
</head>
<body>
    <form action="post">
        <input class = 'text' type="text">
        <input class = 'checkbox'type="checkbox"><label for="">транслировать</label>  
        <div class="div">Введено символов :<span class="Characters">0</span></div>
        <div class="div">SMS-сообщений будет отправлено : <p class="let_enter">1</p></div>
        <button>Сохранить</button>
    </form>
</body>
<script>
    
    const input     = document.querySelector('[type="text"]');
    const p         = document.querySelector('.Characters')
    const checkbox  = document.querySelector('[type="checkbox"]')
    const let_enter = document.querySelector('.let_enter');
    let ru = {
        'а':'a','А':'A','б':'b', 'Б':'B','в':'v','В':'V','г': 'g','Г':'G', 'д': 'd','Д':'D', 
        'е': 'e','E':'E','ё': 'yo','Ё':'Yo','ж':'zh','Ж':'Zh','з':'z','З':'Z', 'и': 'i','И':'I',
        'й':'y','Й':'Y','к':'k','K':'K','л':'l','Л':'L','м':'m','M':'M','н':'n','N':'N','о':'o',
        'O':'O', 'п': 'p','П':'P','р':'r','Р':'R','с': 's', 'C':'S', 'т': 't','T':'T','у': 'u',
        'Y':'U','ф':'f','Ф':'F','х': 'h', 'X':'H','ц': 'ts','Ц':'Ts','ч': 'ch','Ч':'Ch','ш':'sh',
        'Ш':'Sh','щ':'sch','Щ':'Sch','ъ':`'`,'Ъ':`'`,'ы': 'i','Ы':'I','ь':`'`,'Ь':`'`,'э':'e',
        'Э':'E','ю':'u','Ю':'U','я': 'ya','Я':'Ya','«':`"`,'»':'"','–':'-','_':'-','№':'#','`':`'` ,' ':' '
        } 
    
   
    input.onkeyup = function(e)
    {
        const symbol = input.value.split('');
        p.innerHTML = symbol.length;    
        let value = this.value;
        const isCyrillic = function (value) {   
            return /[а-я]/i.test(value);
        };
        let count = isCyrillic(value);
        let_enter.innerHTML = '';
        
        console.log(count)
        
        // if(count === true && symbol.length<160)
        //  console.log('ok')

        if(count === true && symbol.length <= 160){
            let_enter.innerHTML = 1; 
        }
        if(count == false && symbol.length < 70)
            let_enter.innerHTML = 1;
        if(count === false && symbol.length > 70){
            let_enter.innerHTML = Math.floor(symbol.length /67);
        }
        if(count === true && symbol.length > 160){
            let_enter.innerHTML = Math.floor(symbol.length / 153);
        }
        
    }
    
    checkbox.onclick  = function(){
    checkbox.onchange = function(e){
            
            
        if(e.target.checked){
            let k = input.value;
            let str_lat = '';
            k = k.split('');
            for(let i = 0 ; i < k.length ; i++){
                if(ru[k[i]] != undefined)
                    str_lat += ru[k[i]];                
            }                               
            input.value = str_lat;
        }
        else {                      
                    
            const ru2 = {};
            let keys = Object.keys(ru);
            keys.forEach(function(key){
                let val = ru[key];   
                ru2[val] = key;      
                });
                let k = input.value;
                let str_cyr = '';
                k = k.split('');
                    for(let i = 0 ; i<k.length ; i++){
                        if(ru2[k[i]] != undefined)
                            str_cyr +=ru2[k[i]];                
                    }
                    input.value = str_cyr;
                }
            
            }
        }   
</script>
<style>
    form
    {
        text-align: center;
        margin-top: 25px;
    }
    .div
    {
        position: relative;
        right: 45px;
    }
    label
    {
        margin-left: 10px;
    }
    button
    {
        position: relative;
        right: 45px;
    }
</style>
</html>

Как его переделать , чтобы решить данное задание ?

БЛОГ НА HUSL

помогите пожауйста с тестовым заданием на позицию junior frontend

Ответы (0 шт):