Javascript 101 Displaying Quote Excerise

hi all,
Can someone please point out to me what did I do wrong here?

This is the js code:

async function getTop10Tokens(){
    const response = await fetch('');
    const tokens = await response.json();

    //rank has to be >= 1 because some tokens has rank of 0.  then rank <=10 to list the top 10
    return tokens
            .filter(token => token.rank>= 1 && token.rank <= 10)
            .map(token => token.symbol);


async function getTickerData(tickerList){
    const response = await fetch('');
    const tokens = await response.json();
    const tokenList = Object.values(tokens.tokens);

    return tokenList.filter(token => tickerList.includes(token.symbol));

function renderForm(tokens){

//token.decimals is used to obtain how many decimals a token has (not all tokens has same amount of decimals)
//such that otken.decimals can be use to determine the correct exchange amount
    const options = => 
        `<option value = "${token.decimals} - ${token.address}">${} (${token.symbol})</option>`);
    document.querySelector('[name=from-token]').innerHTML = options;
    document.querySelector('[name=to-token]').innerHTML = options;

async function formSubmitted(event){
    //to prevent loading page error due to calling the form prematurely
    const fromToken = document.querySelector('[name=from-token]').value;
    const toToken = document.querySelector('[name=to-token]').value;
    const [fromDecimals, fromAddress] = fromToken.split('-');
    const [toDecimals, toAddress] = toToken.split('-');
    const fromUnit = 10 ** fromDecimals;
    const url = `${fromAddress}&toTokenAddress=${toAddress}&amount=${fromUnit}`;

    const response = await fetch(url);
    const quote = await response.json();
    const exchange_rate = Number(quote.toTokenAmount) / Number(quote.fromTokenAmount);
    document.querySelector('.js-quote-container').innerHTML = 
        <p>1 ${quote.fromToken.symbol} = ${exchange_rate} ${quote.toToken.symbol} <p>
        <p>Gas Fee: ${quote.estimatedGas}</p>
        document.querySelector('.js-quote-container').innerHTML = `The conversion didn't succeed.`



This is the html code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/dexstyles.css">
    <form action="#" method="POST" class="exchange-form">
        <div class="form-row">
                <select name="from-token"></select>

        <div class="form-row">
                <select name="to-token"></select>

        <div class="form-row">
            <button type="submit" class="js-submit-quote" disabled> Get Quote</button>
    <div class="js-quote-container"></div>
    <script src="./dex.js"></script>

when I run this code I got the following error

You can see on the right that it’s a 400 error, so it’s blamed on the client side code you wrote.

I can’t know the problem exactly because I can’t see your HTML. However, I couldn’t help but notice the %20 character in the URL of the red 400 error on the right. %20 is a space. So my best bet that you accidentally placed a space right before the 0xeeeeee… address in the markup, and this is why it’s not working for you as it’s trying to send an erronous from address in the GET parameter.

Same with the to address: the %20 is there too. %20 is just a URL-friendly way of writing a space (google encodeURIComponent if you want to learn more about these encodings).

thanks for the reply.
I’ve edited my post to include the html code.

after reading your comment and visiting my code again, I’ve found the space you’ve mentioned.

const options = => 
        `<option value = "${token.decimals}-${token.address}">${}(${token.symbol})</option>`);

in my original code I had:

const options = => 
        `<option value = "${token.decimals} - ${token.address}">${} (${token.symbol})</option>`);

and after I remove the space, it starts to work. It’s strange though, in the video I thought there’s a space in there.
but that’s ok. I’ve fixed the issue for now and will keep an eye on this next time.
by the way, will there be any updates to the videos since moralis is on v2 now, and they moved away from hosting servers and towards self-hosting servers.

1 Like

We are already working on a course for version 2 of moralis :nerd_face:

Carlos Z

1 Like