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

Question

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:

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:

_{(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>

Answer 1

Don't touch your style, just change the order of your append like this in your js function:

li.appendChild(textInput)  // this will append your text
li.appendChild(iCheck)     // this will append the checked icon
li.appendChild(iTrash)     // this will append the trash icon

Answer 2

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>

Answer 3

If you're using bootstrap (and fontawesome i guess, looking to the fa fa items), you can easily use the pull-right class, like this (check that i add those classes only in the click event)

 (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') li.className='block' const iCheck = document.createElement('i') iCheck.className='fa fa-check pull-right' const iTrash = document.createElement('i') iTrash.className='fa fa-trash pull-right' 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; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <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>