how to change the order of inputs in this extension app to make the newest lead at the top instead of the bottom

Question

As you can see if u tried the code and save an input in the app it will be save in a top to bottom order and i want it to be from bottom to top order, here is the whole code and if you want the html and css code I will give it to you

let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
const deleteBtn = document.getElementById("delete-btn")
const leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") )
const tabBtn = document.getElementById("tab-btn")

if (leadsFromLocalStorage) {
    myLeads = leadsFromLocalStorage
    render(myLeads)
}

tabBtn.addEventListener("click", function(){    
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        myLeads.push(tabs[0].url)
        localStorage.setItem("myLeads", JSON.stringify(myLeads) )
        render(myLeads)
    }) 
})

function render(leads) {
    let listItems = ""
    for (let i = 0; i < leads.length; i++) {
        listItems += `
            <li>
                <a target='_blank' href='${leads[i]}'>
                    ${leads[i]}
                </a>
            </li>
        `
    }
    ulEl.innerHTML = listItems
}

deleteBtn.addEventListener("dblclick", function() {
    localStorage.clear()
    myLeads = []
    render(myLeads)
})

inputBtn.addEventListener("click", function() {
    myLeads.push(inputEl.value)
    inputEl.value = ""
    localStorage.setItem("myLeads", JSON.stringify(myLeads) )
    render(myLeads)
})

i tried to reverse the order in the render function but it didnt work as expected.

Answer 1

Style the <ul> as a reverse column flexbox with JavaScript:

document.querySelector("ul").style.cssText += 
"display: flex; flex-direction: column-reverse";

OR with CSS:

ul {
  display: flex;
  flex-direction: column-reverse;
}

localStorage doesn't function on this site so if you want to see a functioning demo see this PLUNKER.

let data = JSON.parse(localStorage.getItem('data')) || [];
const ui = document.forms.ui;
const io = ui.elements;
const list = document.getElementById('list');

const render = (array) => {
  const frag = document.createDocumentFragment();
  array.forEach((url) => {
    const item = document.createElement('li');
    const link = document.createElement('a');
    link.href = url;
    link.textContent = url;
    link.target = '_blank';
    item.append(link);
    frag.append(item);
  });
  list.replaceChildren();
  list.append(frag);
};

ui.addEventListener('click', (e) => {
  if (e.target.id === 'del') {
    list.replaceChildren();
    localStorage.clear();
    data = [];
  } else if (e.target.id === 'add') {
    data.push(io.input.value);
    render(data);
    localStorage.setItem('data', JSON.stringify(data));
  } else {
    return false;
  }
});

let test = () => {
  let testData = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  localStorage.setItem('data', JSON.stringify(testData));
  data = JSON.parse(localStorage.getItem('data'));
  render(data);
};

render(data);
// test();
// Solution
list.style.cssText += "display: flex; flex-direction: column-reverse";

<form id="ui">
  <input id="input">
  <button id="add" type="button">Add</button>
  <ul id="list"></ul>
  <button id="del" type="button">Delete All</button>
</form>