Assignment Solution – Problem Solving

Please post your questions below :raised_hands:

My solution is here:

const cryptos = ['ETH', 'DOT', 'SOL', 'ADA', 'BTC'];

function tickerToListt(tickers, isOrdered) {
    let listHTML ='<ul>';
    if (isOrdered === true) {
        listHTML = '<ol>';
    }

    for(i = 0; i < tickers.length; i++) {
        listHTML += `<li>${tickers[i]}</li>`;
    }

    if (isOrdered === true) {
        listHTML += '</ol>';
    } else {
        listHTML += '</ul>';
    }
    return listHTML;
}

Any advice if you would write this differently? :slightly_smiling_face:

3 Likes

const cryptos = [β€˜BTC’, β€˜ETH’, β€˜USDT’, β€˜BNB’, β€˜ADA’, β€˜XRP’];

function tickersToList(tickers, isOrdered = false) {

// 1. state space

let result = '<ul>';

// 2. computations

if (!Array.isArray(tickers)) {

    return '';

}

for (let crypto of cryptos) {

    result += `<li>${crypto}</li>`; //using template (`)instead of string (') literal

}

result += '</ul>';

// 3. return value

return result;

}

tickersToList(cryptos);

output is:
β€˜

  • ETH
  • DOT
  • SOL
  • ADA
  • BTC
’

then by inspecting an element and selecting a div for example and running in console:

$0.innerHTML = tickersToList(cryptos);

modifies selected element in innerHTML to show the unordered list live on the page

2 Likes

If i use developers tool in Chrome the code is not working as aspected.
The $ does not work in the code. Is there a way to solve this problem in the development console?

Code part does not work in the console.

result += '<li>${crypto}</li>';

Complete code:

function tickersToList(tickers, isOrdered = false) {
// 1. state space
let result = '<ul>';
// 2. computations 
if (!Array.isArray(tickers)) {
    return '';
}
for (let crypto of cryptos) {
    result += '<li>${crypto}</li>';
}
result += '<ul>';
// 3. return
return result;
2 Likes

Is my code readable?

const cryptos =[ "BTC", "ETH", "BNB", "ADA", "DOT", "USDT", "DOT"];

function tickerToList(ticker, isOrdered=false) {

    let resultType= isOrdered ? 'o' : 'u';
    let result="";
    result += `<${resultType}l>`;

    if(!Array.isArray(ticker)) {

        return "";
    }  
    
    for (let items of ticker) {
        result+=`<li> ${items} </li>`;
    }
    result+=`</${resultType}l>`;
    return result;
    
}

console.log(tickerToList(cryptos));

2 Likes

Hey @JelleSmaRT, hope you are well.

i think the problem is on the type of quote you are using here:

Instead you should use curvy quotes:

result += `<li>${crypto}</li>`;

Try with that and let me know :nerd_face:

Carlos Z

2 Likes

Yes, that solved indeed the problem.
I was already checking complete Chrome settings. :flushed:

1 Like

I tried to do this problem my own way, I used the solution a little as a guide though. But I’m kind of stuck still. This is my attempt at only the first part of the problem. I’ll get to the 2nd boolean part after I understand this.

I assumed an unordered lists code would look like this.

  • BTC
  • ETH
  • USDT
  • BNB
  • ADA
  • XRP

This is what I thought the code would look like

<ul>BTC</ul><ul>Eth</ul><ul>USDT</ul><ul>BNB</ul><ul>ADA</ul><ul>XRP</ul>

But here is my attempt at trying to make that happen.

const cryptos = ['BTC', 'ETH', 'USDT','BNB', 'ADA', 'XRP']; 

function tickerToList(tickers) {
//1. State Space: 
let result ='';
//2. Computation
  for (i=0; i=length.cryptos;i++){
    result +='<ul>' + cryptos[i] + '</ul>';
  }
//3. Return Value.
  return result;

};

tickersToList(cryptos);

The only thing that would get back from calling the function is
" "

Appreciate any help., Thanks!

Here it should be a condition, but you are assigning a value, I am not sure how It was returning " ", it should throw error instead. Here is the correct form

function tickerToList(tickers) {
//1. State Space: 
let result ='';
//2. Computation
  for (i=0; i < tickers.length; i++){
    result +='<ul>' + cryptos[i] + '</ul>';
  }
//3. Return Value.
  return result;

};
2 Likes

Ok I retried it. But with a few minor fixes.
My goal is to write this as my function output. I updated it a bit.

<ul><li>BTC</li><li>ETH</li><li>USDT</li><li>BNB</li><li>ADA</li><li>XRP</li></ul>

Here is my code. Now I’m getting an error that says Invalid String length within my for loop conditions.

const cryptos = ['BTC', 'ETH', 'USDT','BNB', 'ADA', 'XRP']; 

function tickersToList(tickers) {
//1. State Space: 
let result ='<ul>';
//2. Computation
  for (let i=0; i=cryptos.length ;i++){
    result +='<li>'+ cryptos[i] +'</li>';
  }
//3.Result
  return result+= '</ul>';

};

tickersToList(cryptos);

Uncaught RangeError: Invalid String Length

You should put a condition in the loop. This will work.

function tickersToList(tickers) {
//1. State Space: 
let result ='<ul>';
//2. Computation
  for (let i=0;i<tickers.length; i++){
    result +='<li>'+ tickers[i] +'</li>';
  }
//3.Result
  return result+= '</ul>';

};
1 Like

This is my solution:

const cryptos = ["BTC", "ETH", "USDT", "BNB", "ADA", "XRP"];

function tickersToList(tickers){
    var ul = document.createElement("ul"), li;
    for (var i = 0; i < tickers.length; i++) {
        if (Array.isArray(tickers[i])) {
            li.appendChild(tickersToList(tickers[i]));
        }   else {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(tickers[i]));
            ul.appendChild(li);
        }
    }
    return ul;
}
var MyArray = ["BTC", "ETH", "USDT", "BNB", "ADA", "XRP"];
document.body.appendChild(tickersToList(MyArray));
1 Like

It was cool to see the different ways in which Zsolt simplified his code. For now I was able to think of only one way to solve it. I’m hoping to learn to approach problem solving creatively!

Here’s my solution:

    const cryptosArr = ['BTC', 'ETH', 'USDT', 'ADA'];

    function tickersToList( ticker, isOrdered ) {
    
        let list = '';
    
        for(let i = 0; i < cryptosArr.length; i++) {
            
          list += `<li>${ticker[i]}</li>`;
        }
        
        if(isOrdered == true) {
          return (`<ol>${list}</ol>`);
        
        }else {
          return (`<ul>${list}</ul>`);
        }
    };

    console.log(tickersToList(cryptosArr, 0));
3 Likes

My fancy solution:

const cryptos = ['BTC', 'ETH', 'USDT', 'BNB', 'ADA', 'XRP'];

function wrapTag(tag, content) {
    return `<${tag}>${content}</${tag}>`;
}

function getUnorderedList(elements) {
    const listElements = elements
        .map((element) => wrapTag('li', element))
        .join('');
    return wrapTag('ul', listElements);
}

console.log(getUnorderedList(cryptos));
3 Likes

It wasn’t working for me it just kept on returning an < / ul >, So the return value at the end. Also I forgot how to link my code so it looks clean on here.

I am not understanding why in the final

result += </ul>;
1 Like

this is old javasript and you can use this notation to append items to your html elements dynamically based on data you have in your javascript code.

So for example if you have a list element in your html which you want to use to display items in a list, then you can do this in your javascript logic by writing a for loop to iterate through the list and for each item you can create a new list element like result += <li>{item.name}</>

thanks for the reply @mcgrane5

const cryptos = ['BTC', 'ETH', 'USDT', 'BNB', 'ADA', 'XRP'];

function tickersToList(tickers, isOrdered) {

  let result = '<ul>';

 

  for(let crypto of cryptos){

    result += `<li>${cryptos}</li>`;

  }

    result +='</ul>';

   

return result;

}

tickersToList(cryptos);
2 Likes
const cryptos = ['BTC', 'ETH', 'USDT', 'BNB', 'ADA', 'XRP'];

function tickersToList(tickers, isOrdered = false) {
    let listItems = [];

    if(!Array.isArray(tickers)) {
        return '';  //no data, no list
    }

    for(let crypto of cryptos) {
        listItems.push(`<li>${crypto}</li>`);
    }

    return `
    ${isOrdered ? '<ol>' : '<ul>'}
        ${listItems.join('')}
    ${isOrdered ? '<ol>' : '<ul>'}
    `;
};

4 Likes