Aplikacja TODO :: 4programmers.net

0

Hej, możecie mi ocenić kod co poprawiać czego się trzymać, jakich rzeczy unikać?

<html>
    <head>
        <title>Website</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="navbar">
                <h1 class='logo'>Logo internation</h1>
                <nav>
                    <ul>
                        <li> <a href="test">Home</a></li>
                        <li> <a href="test">About</a></li>
                        <li> <a href="test">Collections</a></li>
                        <li> <a href="test">Category</a></li>
                    </ul>
                </nav>
                <div class="cart"></div>
            </div>
            <div class="content">
                <a href="" class="btn">2020 Collections</a>
                <h1> You should always feel pretty</h1>
                <p>Clothes that are sure to heat up your winter</p>
                <div class="arrow-icons">
                    <div class="xs">
                        <input type="text" placeholder="text" class="inputTask" minlength="3"> 
                        <button class="taskAdd">Add</button>
                    </div>
                    
                </div>
                <div class="demo">
                    <div class="containerTask3">
                        
                    </div>
                    <div class="b"></div>
                </div>
                <div class="social-links">
                    <a href="">FACEBOOK</a>
                    <a href="">FACEBOOK</a>
                    <a href="">FACEBOOK</a>
                    <a href="">FACEBOOK</a>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

*{
    padding: 0;
    margin: 0;
}
.container{
    height: 200vh;
    width: 100%;
    background-color: rgb(233, 233, 233);
    background:linear-gradient(0deg, #ffffff, #ff77cd,#318cb1);
    background-position: center;
    background-size: cover;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
    position: relative;

} 
.navbar{
    width: 100%;
    height: 15vh;
    margin: auto;
    display: flex;
    align-items: center;

}

.logo{
    width: 160px;
    cursor: pointer;
}
.cart{
    flex: 1;
    cursor: pointer;
}
nav{
    flex: 1;
    padding-left: 60px;
}
nav ul li{
    display: inline-block;
    list-style: none;
    margin: 0px 20px;;
}
nav ul li a{
    text-decoration: none;
    color: #333;
}
.content h1{
    font-size: 30px;
    font-weight: 100;
    margin-top: 24px;
    margin-bottom: 15px;
    color: #232d60;

    
}
.logo{
    width: 100;
    font-size: 22px;
    color: #3b3961;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.content p{
    font-size: 20px;
    color: #6a7199;
}
.content{
    margin-left: 10%;
    margin-top:10%;
}
.content .btn{
     display: inline-block;
     background:linear-gradient(45deg, #87adfe, #ff77cd);
     border-radius: 6px;
     padding: 10px 20px;
     box-sizing: border-box;
     text-decoration: none;
     color: #ffff;
     box-shadow: 3px 8px 22px rgba(94);
  
}

.arrow-icons{
    margin-top: 40px;
    display: flex;
    height: 30px;
    background-color: #6a7199;
    justify-content: center;
    align-items: center;
}
.arrow-icons .xs{
    width: 720px;
    height: 30px;
    margin-right: 25px;
    background-color: #6a7199;
    display: flex;

}
.inputTask{

    width: 700px;
    height: 30px;
    background-color: #adaeeb;
    border-style: none;
}
.inputTask:focus{
    border: 1px solid #7c8ad8;
    outline: none;
    box-shadow: inset 0 4px 5px rgb(160, 154, 214);
}
.social-links{
    transform: rotate(-90deg);
    position: absolute;
    left: -120px;
    bottom: 1200px;

}
.social-links a{
    text-decoration: none;
    color: #6a7199;
    padding-right: 20px;
    font-size: 14px;
}
.taskAdd{
    height: 30px;
    width: 70px;
    color: #000;
    border-radius: 5px;
    background:linear-gradient(45deg, #7ca1f0, #ff88d3);
    border-style: none;
    text-decoration: none;
    opacity: 0.9;
    cursor: pointer;
}
.taskAdd:hover{
    opacity: 1;
}

.shadow{
    width: 200px;
    height: 30px;
}
.btnAddTaskElement{
    padding: 10px;
    margin: 3px 0 5px 0;
    width: auto;
    border-radius: 2px;
    background-color: #6a7199;
}
.btnRemoveTaskElement{
    display: flex;
    margin: 10px 0 10px 0;
    width: 200px;
    height: 30px;
    background-color: #318cb1;
}
.btnEditTaskElement{
    display: flex;
    margin: 0 0 10px 0;
    width: 50px;
    height: 30px;
    background-color: #b19e31;
}
.createInputEdit{
    
    margin: 0 0 0 40px;
    width: 400px;
    height: 30px;
}
.btnSaveTaskElement{
    width: 50px;
    height: 30px;
    background-color: #318cb1;
}
.demo1{
    position: relative;
    display: flex;
    width: 500px;
    height: 30px;
    background-color: #318cb1;
    margin-top: 10px;
}
.buttonSave{
    background-color: green;
    width: 50px;
    height: 30px;
}
.buttonEdit{
    background-color: #318cb1;
    width: 50px;
    height: 30px;
}

const btnTask = document.querySelector('.taskAdd');
const input = document.querySelector('.inputTask');
const demo = document.querySelector('.demo');

btnTask.addEventListener('click', function(){

    addTaskElement();

})

function enterKeyPress(event){
    if(event.keyCode === 13){
        addTaskElement();

    }
}

addEventListener("keydown", enterKeyPress);

function checkLengthTask(){
    if(input.value.length < 4){
        demo.innerHTML = "Too Short"  
    }
}


function addTaskElement(){

    const createTask = document.createElement('div');
    createTask.classList.add('btnAddTaskElement');
    console.log('add' + input.value);
    const containerTask = document.createElement('div');
    containerTask.classList.add('containerTask');
    demo.appendChild(containerTask);

    const createDemo = document.createElement('div');
    createDemo.classList.add('demo1');
    createDemo.innerHTML = input.value;
    containerTask.appendChild(createDemo);


    createTask.innerText = input.value;

    containerTask.appendChild(createDemo);

    
    function editTaskBtnElement(){
        const createBtnSave = document.createElement('button');
        const createBtnEdit= document.createElement('button');

        createBtnSave.classList.add('buttonSave');
        createBtnEdit.classList.add('buttonEdit');


        containerTask.appendChild(createBtnSave).style.display = 'none';
        containerTask.appendChild(createBtnEdit).style.display = 'block';

        containerTask.appendChild(createBtnEdit);
        createBtnEdit.innerHTML = "Edit";

        let maxEditElementTask = 1;
        let currentElementTask = 0;

        
        const createInputEdit = document.createElement('input');
        createInputEdit.classList.add('createInputEdit');            
        
            console.log('work')

        
        createBtnEdit.onclick = function(){
            createBtnEdit2();
        }
        createBtnSave.onclick = function(){
            console.log('createbtnSave: ');
            btnSave();

        }
        
        function createBtnEdit2(){


            if(currentElementTask < maxEditElementTask){
                currentElementTask++;

                console.log('dziala btn')
                containerTask.appendChild(createInputEdit);
                createBtnSave.innerHTML = 'Save';
                createBtnEdit.innerHTML = 'Edit'
                createBtnSave.style.display = 'block';
                createBtnEdit.style.display = 'none';


                createBtnEdit.onclick = function(){
                    
                    blocknoneCreateBtnEdit();
                
                }
                function blocknoneCreateBtnEdit(){
                    createBtnSave.style.display = 'block';
                    createBtnEdit.style.display = 'none';
                    createInputEdit.style.display = 'block';

                }
            
            }
            
            else if(currentElementTask > maxEditElementTask){
                console.log('work')
            }

            else{
                console.log(' nic nie dziala')
            }
        }

        function btnSave(){
            
                createDemo.innerHTML = createInputEdit.value;
            
                createBtnEdit.style.display = 'block'
                createBtnSave.style.display = 'none';
                createInputEdit.style.display = 'none';
        }

    function deleteTaskBtnElement(){
        const createBtnRemove = document.createElement('button');
        createBtnRemove.classList.add('btnRemoveTaskElement');
        createBtnRemove.innerHTML= "Remove Task";
        demo.appendChild(createBtnRemove);
    
        createBtnRemove.onclick = function(){
            createTask.remove();
            createInputEdit.remove();
            createDemo.remove();
            createBtnEdit.remove();
            createBtnSave.remove();
            createBtnRemove.remove();
        }

        
    }
    deleteTaskBtnElement();
}
    editTaskBtnElement();
    checkLengthTask();
    
}

3

if(event.keyCode === 13){

to przestarzała właściwość:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

2

Postaraj się to rozdzielić na mniejsze funkcje - przykładowo w linii 83 masz if i potem masz kilka/kilkanaście linii z rzeczami do zrobienia w zależności od tego IF'a. A o wiele lepiej to by wyglądało, jakbyś zrobił na zasadzie IF (warunek) funkcjaWarunekOK() TRUE else funkcjaWarunekFalse()
Masz to brzydko sformatowane - jakieś puste linie, niespójnie zrobione wcięcia itp
Dobrze, że korzystasz z addEventListener a nie onClick

4

const createDemo = document.createElement('div');
createDemo.classList.add('demo1');
createDemo.innerHTML = input.value;  // <--- wstawiasz tekst pobrany od użytkownika bezpośrednio do diva bez żadnego filtrowania
containerTask.appendChild(createDemo);

Takich rzeczy z innerHTML nie powinno się robić, bo mogą prowadzić do problemu z XSS (https://sekurak.pl/czym-jest-xss/)

4

Ja ze swojej strony dodałbym:

Nie używaj raczej console.log(). Wsadź to do debuga jeśli potrzebujesz pilnie, ale zaraz potem usuń.
Mieszasz strasznie dużo logiki i widoku.
Użyj addEventListener zamiast nadpisywać onclick.
Testów pewnie nie ma żadnych?
Nie używaj innerHTML chyba żę wiesz co robisz.

Aplikacja TODO

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami