Why can't I get the background colors to render?

Question

I'm trying to render the background colors from the exported const according to the PokeAPI but I don't know why the colors don't render. I'm using three files. model.js, controller.js, and view.js. I have my project in an MVC architecture.

This is model.js

export const state = {
    pokemon: {},
    search: {
        query: '',
        results: [],
        page: 1,
        resultsPerPage: 100,
    },
};

const fetchJson = (url) =>
    fetch(url)
        .then((r) => r.json())
        .catch(console.log);
export const loadPokemon = async () => {
    const [arrayA, arrayB] = await Promise.all([
        Promise.all(
            new Array(1008)
                .fill(0)
                .map((_, i) => fetchJson(`https://pokeapi.co/api/v2/pokemon/${i + 1}`))
        ),
        Promise.all(
            new Array(151)
                .fill(0)
                .map((_, i) =>
                    fetchJson(`https://pokeapi.co/api/v2/pokemon-species/${i + 1}`)
                )
        ),
    ]);

    state.pokemon = arrayA.map((poke) => {
        return {
            name: poke.name,
            image: poke.sprites.front_default,
            types: poke.types,
        };
    });

    console.log(arrayA);
    console.log(arrayB);

};
export const typeColor = {
    bug: '#26de81',
    dragon: '#ffeaa7',
    electric: '#fed330',
    fairy: '#FF0069',
    fighting: '#30336b',
    fire: '#f0932b',
    flying: '#81ecec',
    grass: '#00b894',
    ground: '#EFB549',
    ghost: '#a55eea',
    ice: '#74b9ff',
    normal: '#95afc0',
    poison: '#6c5ce7',
    psychic: '#a29bfe',
    rock: '#2d3436',
    water: '#0190FF',
};

This is the controller

import * as model from './model.js';
import resultView from './views/resultsView.js';
import View from './Views/View.js';

const controlPokemon = async function () {
    try {
        await model.loadPokemon();

        resultView.render(model.state.pokemon);

        const typeData = model.state.pokemon.map((poke) => {
            return poke.types[0].type.name;
        });
        console.log(typeData);
        const themeColor = model.typeColor[typeData[0]];

        resultView.styleCard(themeColor);
    } catch (err) {
        console.error(err);
    }
};

const init = function () {
    resultView.addHandlerRender(controlPokemon);
};
init();

This is resultView.js

import View from './View.js';

class ResultsView extends View {
    _parentElement = document.querySelector('.results');
    _card = document.querySelector('.card');

    _generateMarkup() {
        console.log(this._data);
        return this._data.map(this._generateMarkupPreview).join('');
    }

    addHandlerRender(handler) {
        ['load'].forEach((ev) => window.addEventListener(ev, handler));
    }

    styleCard(color){
        return (this._card.style.background = `radial-gradient(circle at 50% 0%, ${color} 36%, #ffffff 36%)`);
    };

    _generateMarkupPreview(result) {
        return `
    <li class="preview">
        <a class="preview__link preview__link--active" href="#2343"></a>
            <div class="card">
            <p class="hp"><span>HP</span>80</p>
            figure class="preview__fig">
            <img class="fig" src="${result.image}" />
            </figure>
                        <h4 class="txt-description">${result.name[0].toUpperCase() + result.name.slice(1)
            }</h4>
            <div class="types">
            <span>${result.types[0]?.type.name[0].toUpperCase() +
                    result.types[0].type.name.slice(1)
                }</span>
            <span>${result.types[1]?.type.name}</span>
            </div>
            <div class="stats">
                    <div>
                        <h3>60</h3>
                        <p>Attack</p>
                </div>
                <div>
                        <h3>60</h3>
                            <p>Defense</p>
                </div>
                <div>
                    <h3>60</h3>
                    <p>Speed</p>
                </div>
            </div>
        </div>
    </li>`;
    }
}

export default new ResultsView();

I'll add View.js just in case

export default class View {
    _data;

    render(data) {
        if (!data || (Array.isArray(data) && data.length === 0))
            return this.renderError();

        this._data = data;
        const markup = this._generateMarkup();
        this._clear();
        this._parentElement.insertAdjacentHTML('afterbegin', markup);
    }

    _clear() {
        this._parentElement.innerHTML = '';
    }
}

That's all the files.

I consoled log the resultView.styleCard in the controller and saw the color was changed but it doesn't render the color in the UI. What am I doing wrong?

Answer 1

There are a few places where things can go wrong here.

First of all, try to check that themeColor has a meaningful value between these two lines:

const themeColor = model.typeColor[typeData[0]];

resultView.styleCard(themeColor);

Secondly, try to check what radial-gradient(circle at 50% 0%, ${color} 36%, #ffffff 36%) equals to before assigning it to the this._card.style.background within the following function:

styleCard(color){
  return (this._card.style.background = `radial-gradient(circle at 50% 0%, ${color} 36%, #ffffff 36%)`);
};

Finally, please check that this._card.style.background exists and returns the actual element before assigning a new background to it. You can just console.log(this._card); to see if the element is assigned.