Sorting alphabetically ascending and descending using .sort()
Some of the things I'd point out in your code for improvements:

Arrays can be a const since you will not modify the array itself but just push new elements to the array.
In your functions sortAsc, sortDesc, you are iterating through arr just to make it lowercase and iterating through the array again in sortedList.sort(). In such scenarios, think about how you can reduce number of iterations.
sort() does in-place sorting, so no need to create a new array.
In function populateList by running arr.map you are creating another new array which I don't think is necessary.



const listArea = document.getElementById('listArea');
const btnAsc = document.getElementById('asc');
const btnDes = document.getElementById('des');

const architects = [
  "Lloyd Wright",
  "Hadid",
  "Mies van der Rohe",
  "Le Corbusier",
  "Foster",
  "Gaudi",
  "Piano",
  "Gropius",
  "Niemeyer",
  "Aalto",
  "Saarinen",
];

function sortAsc() {
  architects.sort();
  populateList();
}

function sortDes() {
  architects.sort().reverse();
  populateList();
}

function populateList() {
  listArea.innerHTML = '';
  architects.forEach( (a) =&gt; {
    const list = document.createElement('li');
    list.innerText = a;
    listArea.appendChild(list);
  });
}

btnAsc.addEventListener('click', sortAsc);
btnDes.addEventListener('click', sortDes);

window.addEventListener('onload', populateList());
&lt;div class="list"&gt;
  &lt;div class="buttons"&gt;
    &lt;button id="asc"&gt;Sort Ascending&lt;/button&gt;
    &lt;button id="des"&gt;Sort Descending&lt;/button&gt;
  &lt;/div&gt;
  &lt;ul id="listArea"&gt;
    
  &lt;/ul&gt;
&lt;/div&gt;