I try to make all the trees after sorting to lowercase but For some reason, I cannot make the lower case to the listTree() work! I know that to lowercase() need to be pasted in a function in order for it to work with the array. But I am not sure how to add to the listTrees() function. Do we need to use if-else statement?
const trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']
const errorElement = document.querySelector('#error')
const displayResults = document.querySelector('#displayResults')
const listTrees = () => {
let treeList = ''
trees.forEach(tree => {
treeList += `${tree} <br>`
})
displayResults.innerHTML = `${treeList} <span>${trees.length} elements long </span>`
}
listTrees()
document.querySelector('#lowerTrees').onclick = () => {
if (trees.length > 0) {
trees.lowercase()
listTrees()
}
else {
errorElement.textContent = 'Dude, I cannot remove the last tree cause there are NO TREES!'
}
}
toLowerCase() is only used with strings here you are using toLowerCase() with array. If you want all array items to be in lowercase you need to transform each array items like that:
document.querySelector('#lowerTrees').onclick = () => {
if (trees.length > 0) {
trees.map((el, i) => {
trees[i] = el.toLowerCase()
});
listTrees()
}
else {
errorElement.textContent = 'Dude, I cannot remove the last tree cause there are NO TREES!'
}}
For making a whole array lowerCase letters you have to iterate through the trees using array.map() and call toLowerCase() on each string:
const trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']
const lowerCaseTrees = trees.map(tree => tree.toLowerCase())
Introduce it into your code by changing listTrees() slightly, you want to pass the trees as argument to it for having it dynamic:
var trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']
const errorElement = document.querySelector('#error')
const displayResults = document.querySelector('#displayResults')
const listTrees = () => {
let treeList = ''
trees.forEach(tree => {
treeList += `${tree} <br>`
})
displayResults.innerHTML = `${treeList} <span>${trees.length} elements long </span>`
}
// show the trees as they are
listTrees()
document.querySelector('#sortTrees').onclick = () => {
if (trees.length > 0) {
trees.sort()
listTrees()
}
else {
errorElement.textContent = 'No Tree'
}
}
document.querySelector('#lowerTrees').onclick = () => {
if (trees.length > 0) {
trees = trees.map(tree => tree.toLowerCase())
listTrees()
}
else {
errorElement.textContent = 'Dude, I cannot remove the last tree cause there are NO TREES!'
}
}<article>
<button id="sortTrees">Sort the trees A>Z</button>
<button id="lowerTrees">Make all tress lower case</button>
</article>
<aside>
<div id="displayResults"> </div>
<div id="error"></div>
</aside>Here is a handy oneliner (useful for small arrays < 1000 elements) for making whole tree to lowerCase(). This works aslong your trees will not have '##' in its name.
var trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']
var lowerCaseTrees = trees.join('##').toLowerCase().split('##')
console.log(lowerCaseTrees )