Please post your questions below
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?
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
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;
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));
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
Carlos Z
Yes, that solved indeed the problem.
I was already checking complete Chrome settings.
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;
};
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>';
};
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));
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));
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));
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>;
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}</>
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);
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>'}
`;
};