TO DO APP – how to align the 2 icons to the right of the li?

Issue

I am doing a to-do list using JavaScript to practice events.
In javascript I created <li> and <i> with specific className attached to the li with append Child. When clicking the button the li goes to the output. Everything works fine but what happens is that the icons are first and then the text of the li, like it had a align right.
This is the image :

print-1

what I want is this, the text aligned to the left the icons to align to the end (right). exactly like the image. no matter the length of the text:

print-2
(source: pastepic.xyz)

I have tried display flex but nothing happens.

(function(){
                'use strict'

                const input = document.querySelector('#input-todo')
                const btn = document.querySelector('#button-todo')
                const ul = document.querySelector('#list')


                btn.addEventListener('click', () =>{

                    const li = document.createElement('li')
                    const iCheck = document.createElement('i')
                          iCheck.className='fas fa-check'
                    const iTrash = document.createElement('i')
                          iTrash.className='far fa-trash-alt'
                    const textInput = document.createTextNode(input.value)
                    li.appendChild(iCheck)
                    li.appendChild(iTrash)
                    li.appendChild(textInput)
                    ul.appendChild(li)

                    input.value = ''
                    input.focus()

                })

                input.addEventListener('keyup', (e)=>{
                    if(e.target.keyCode === 13){
                        const li = document.createElement('li')
                        const iCheck = document.createElement('i')
                              iCheck.className='fas fa-check'
                        const iTrash = document.createElement('i')
                              iTrash.className='fas fa-trash-alt'
                        const textInput = document.createTextNode(input.value)
                        li.appendChild(iCheck)
                        li.appendChild(iTrash)
                        li.appendChild(textInput)
                        ul.appendChild(li)

                        input.value = ''
                        input.focus()
                    }
                })


            })()
:root{
 --color-primary: rgb(91, 213, 224);
 --color-secondary:rgb(240, 128, 128);
 --color-tertiary:rgb(2, 0, 117);
}


*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html{
    font-size:100%;
    height:100vh;
}

body {
    font-family:sans-serif;
    box-sizing: border-box;
    line-height:1.7;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items: center;
}

.container{
    background:linear-gradient(to right top, var(--color-primary), var(--color-tertiary));
    border-radius:3px;
    /* how to do a box-shadow looking smooth */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);
    padding:2rem;

    display:grid;
    grid-template-rows:min-content minmax(10rem,max-content) min-content;
    grid-template-columns: repeat(auto-fit,minmax(25rem,max-content))
}

.item1{
    grid-row: 1 / 2;
    grid-column:1 / -1;
    text-align:center;
}

.item2{
    grid-row: 2 / 3;
    grid-column:1 / -1;
    margin:2rem 0;

}

.item3{
    grid-row: 3 / 4;
    grid-column:1 / -1;

    display:flex;
    flex-direction: row;
    justify-content:space-between;
}



.title{
    color:var(--color-secondary);
}

.subtitle{
    color:var(--color-tertiary);
    font-size:1rem;
}

.list-todo{
    list-style-type:none;

}

li {
    background-color:white;
    padding:.5rem 1rem;
    color: var(--color-tertiary);
    font-size: 1rem;
    font-weight: 600;
     margin:1rem 0;

    /* display:flex;
    align-items:center;
    justify-content:flex-start; */

}
/* ICONS */

.fas:first-child{
   margin-left:auto;

}
.fas,
.far{
    margin:0 1rem;
}

.fa-check{
    color:var(--color-tertiary);
}

.fa-trash-alt{
    color:var(--color-secondary);
}



.write-todo{
    padding:.5rem 1.5rem;
    outline:transparent;
    border:none;

}

.add-todo{
    padding:.3rem .5rem;
    border:1px solid white;
    background-color:white;
    color: var(--color-secondary);
    font-weight:600;
    font-size:1rem;
    letter-spacing: .2rem;
    cursor:pointer;
}
<div class="container">

                <div class="item1">
                    <h2 class="title">To Do App</h2>
                    <h3 class="subtitle">Write here your to do´s</h3>
                </div>
                <div class="item2">
                    <ul class="list-todo" id ="list">

                    </ul>
                </div>
                <div class="item3">
                    <input class="write-todo" id="input-todo" type="text">
                    <button class="add-todo" id='button-todo' type="submit">Add Note</button>
                </div>

       </div>

Solution

Firstly you need to reorder your elements so the text will be displayed first then the icons … justify-content : flex-start will show all your li elements at the start ( which is the left side) a solution will be to use justify-content : space-between instead and then nest your icons into a single element so they get pushed together to the other side ( you can also use margin-left : auto) here is a snippet :

(function(){
                'use strict'

                const input = document.querySelector('#input-todo')
                const btn = document.querySelector('#button-todo')
                const ul = document.querySelector('#list')


                btn.addEventListener('click', () =>{
                    const span = document.createElement('span')     
                    const li = document.createElement('li')
                    const iCheck = document.createElement('i')
                          iCheck.className='fa fa-check'
                    const iTrash = document.createElement('i')
                          iTrash.className='fa fa-trash'
                    const textInput = document.createTextNode(input.value)
                  
                    span.appendChild(iCheck)
                    span.appendChild(iTrash)
                    li.appendChild(textInput)
                    li.appendChild(span)
                    ul.appendChild(li)

                    input.value = ''
                    input.focus()

                })

                input.addEventListener('keyup', (e)=>{
                    if(e.target.keyCode === 13){
                        const li = document.createElement('li')
                        const iCheck = document.createElement('i')
                              iCheck.className='fas fa-check'
                        const iTrash = document.createElement('i')
                              iTrash.className='fas fa-trash-alt'
                        const textInput = document.createTextNode(input.value)
                        li.appendChild(iCheck)
                        li.appendChild(iTrash)
                        li.appendChild(textInput)
                        ul.appendChild(li)

                        input.value = ''
                        input.focus()
                    }
                })


            })()
:root{
 --color-primary: rgb(91, 213, 224);
 --color-secondary:rgb(240, 128, 128);
 --color-tertiary:rgb(2, 0, 117);
}


*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html{
    font-size:100%;
    height:100vh;
}

body {
    font-family:sans-serif;
    box-sizing: border-box;
    line-height:1.7;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items: center;
}

.container{
    background:linear-gradient(to right top, var(--color-primary), var(--color-tertiary));
    border-radius:3px;
    /* how to do a box-shadow looking smooth */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);
    padding:2rem;

    display:grid;
    grid-template-rows:min-content minmax(10rem,max-content) min-content;
    grid-template-columns: repeat(auto-fit,minmax(25rem,max-content))
}

.item1{
    grid-row: 1 / 2;
    grid-column:1 / -1;
    text-align:center;
}

.item2{
    grid-row: 2 / 3;
    grid-column:1 / -1;
    margin:2rem 0;

}

.item3{
    grid-row: 3 / 4;
    grid-column:1 / -1;

    display:flex;
    flex-direction: row;
    justify-content:space-between;
}



.title{
    color:var(--color-secondary);
}

.subtitle{
    color:var(--color-tertiary);
    font-size:1rem;
}

.list-todo{
    list-style-type:none;

}

li {
    background-color:white;
    padding:.5rem 1rem;
    color: var(--color-tertiary);
    font-size: 1rem;
    font-weight: 600;
     margin:1rem 0;
    display:flex;
    align-items:center;
    justify-content:space-between; 

}
/* ICONS */

.fa:first-child{
   margin-left:auto;

}
.fa,
.fa{
    margin:0 1rem;
}

.fa-check{
    color:var(--color-tertiary);
}

.fa-trash-alt{
    color:var(--color-secondary);
}



.write-todo{
    padding:.5rem 1.5rem;
    outline:transparent;
    border:none;

}

.add-todo{
    padding:.3rem .5rem;
    border:1px solid white;
    background-color:white;
    color: var(--color-secondary);
    font-weight:600;
    font-size:1rem;
    letter-spacing: .2rem;
    cursor:pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">

                <div class="item1">
                    <h2 class="title">To Do App</h2>
                    <h3 class="subtitle">Write here your to do´s</h3>
                </div>
                <div class="item2">
                    <ul class="list-todo" id ="list">

                    </ul>
                </div>
                <div class="item3">
                    <input class="write-todo" id="input-todo" type="text">
                    <button class="add-todo" id='button-todo' type="submit">Add Note</button>
                </div>

       </div>

Answered By – Abdelillah Aissani

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.