KPC
Kevin Powell - Community•5mo ago
Nar

Why Bootstrap Styles Are Not Active

The cards should be 4 in a row because they are wrapped <div class="col-12 col-md-4 col-lg-3"> but somehow it did not index.js 
import '../sass/main.scss';
import '../components/stories-card.js';

const storiesContainer = document.querySelector('#stories-container');
async function fetchData() {
  try {
      const response = await fetch('https://raw.githubusercontent.com/dicodingacademy/a565-webtools-labs/099-shared-files/proyek-awal/DATA.json');
      if (!response.ok) {
          throw new Error('Network response was not ok.');
      }
      const data = await response.json();
      return data.listStory;
  } catch (error) {
      console.error('Error fetching data:', error);
      return null;
  }
}

fetchData().then(data => {
  if(!data) {
    console.log('Gagal mengambil data JSON.');
    return;
  }

  console.log(data);
  // Set the 'stories' attribute on the custom element
  storiesContainer.setAttribute('stories', JSON.stringify(data));
});
import '../sass/main.scss';
import '../components/stories-card.js';

const storiesContainer = document.querySelector('#stories-container');
async function fetchData() {
  try {
      const response = await fetch('https://raw.githubusercontent.com/dicodingacademy/a565-webtools-labs/099-shared-files/proyek-awal/DATA.json');
      if (!response.ok) {
          throw new Error('Network response was not ok.');
      }
      const data = await response.json();
      return data.listStory;
  } catch (error) {
      console.error('Error fetching data:', error);
      return null;
  }
}

fetchData().then(data => {
  if(!data) {
    console.log('Gagal mengambil data JSON.');
    return;
  }

  console.log(data);
  // Set the 'stories' attribute on the custom element
  storiesContainer.setAttribute('stories', JSON.stringify(data));
});
stories-card.js 
class StoriesCard extends LitElement {
  static properties = {
    stories: { type: Array }
  };

  constructor() {
    super();
    this.stories = [];
  }
 
  render() {
    return html`
        <div class="container">
            <div class="row g-4">
                <div class="col-12 col-md-4 col-lg-3">
                    ${this.stories.map((story) => this._templateCard(story))}
                </div>
            </div>
        </div>
    `;
  }

  _templateCard(story) {
    return html `
        <div class="card" style="max-width: 18rem;">
            <img src="${story.photoUrl}" alt="${story.name}" class="card-img-top" style="width: 100%;">
            <div class="card-body">
                <h5 class="card-title">${story.name}</h5>
                <p class="card-text">${story.description}</p>
                <p class="card-text"><small class="text-muted">Created at: ${new Date(story.createdAt).toLocaleString()}</small></p>
            </div>
        </div>
    `
  }
}
class StoriesCard extends LitElement {
  static properties = {
    stories: { type: Array }
  };

  constructor() {
    super();
    this.stories = [];
  }
 
  render() {
    return html`
        <div class="container">
            <div class="row g-4">
                <div class="col-12 col-md-4 col-lg-3">
                    ${this.stories.map((story) => this._templateCard(story))}
                </div>
            </div>
        </div>
    `;
  }

  _templateCard(story) {
    return html `
        <div class="card" style="max-width: 18rem;">
            <img src="${story.photoUrl}" alt="${story.name}" class="card-img-top" style="width: 100%;">
            <div class="card-body">
                <h5 class="card-title">${story.name}</h5>
                <p class="card-text">${story.description}</p>
                <p class="card-text"><small class="text-muted">Created at: ${new Date(story.createdAt).toLocaleString()}</small></p>
            </div>
        </div>
    `
  }
}
No description
2 Replies
caldane
caldane•5mo ago
You are rendering all four cards to the same column.
<div class="col-12 col-md-4 col-lg-3">
<div class="col-12 col-md-4 col-lg-3">
needs to be inside your map
Nar
NarOP•5mo ago
Like this? it still did not work 
render() {
    return html`
        <div class="container">
            <div class="row g-4">
                    ${this.stories.map((story) => this._templateCard(story))}
            </div>
        </div>
    `;
  }

  _templateCard(story) {
    return html `
    <div class="col-12 col-md-4 col-lg-3">
        <div class="card" style="max-width: 18rem;">
            <img src="${story.photoUrl}" alt="${story.name}" class="card-img-top" style="width: 100%;">
            <div class="card-body">
                <h5 class="card-title">${story.name}</h5>
                <p class="card-text">${story.description}</p>
                <p class="card-text"><small class="text-muted">Created at: ${new Date(story.createdAt).toLocaleString()}</small></p>
            </div>
        </div>
    </div>
    `
  }
render() {
    return html`
        <div class="container">
            <div class="row g-4">
                    ${this.stories.map((story) => this._templateCard(story))}
            </div>
        </div>
    `;
  }

  _templateCard(story) {
    return html `
    <div class="col-12 col-md-4 col-lg-3">
        <div class="card" style="max-width: 18rem;">
            <img src="${story.photoUrl}" alt="${story.name}" class="card-img-top" style="width: 100%;">
            <div class="card-body">
                <h5 class="card-title">${story.name}</h5>
                <p class="card-text">${story.description}</p>
                <p class="card-text"><small class="text-muted">Created at: ${new Date(story.createdAt).toLocaleString()}</small></p>
            </div>
        </div>
    </div>
    `
  }
or this 
render() {
    return html`
        <div class="container">
            <div class="row g-4">
                ${this.stories.map((story) => html`
                    <div class="col-12 col-md-4 col-lg-3">
                        ${this._templateCard(story)}
                    </div>
                `)}
            </div>
        </div>
    `;
}

_templateCard(story) {
    return html`
        <div class="card" style="max-width: 18rem;">
            <img src="${story.photoUrl}" alt="${story.name}" class="card-img-top" style="width: 100%;">
            <div class="card-body">
                <h5 class="card-title">${story.name}</h5>
                <p class="card-text">${story.description}</p>
                <p class="card-text"><small class="text-muted">Created at: ${new Date(story.createdAt).toLocaleString()}</small></p>
            </div>
        </div>
    `;
}
render() {
    return html`
        <div class="container">
            <div class="row g-4">
                ${this.stories.map((story) => html`
                    <div class="col-12 col-md-4 col-lg-3">
                        ${this._templateCard(story)}
                    </div>
                `)}
            </div>
        </div>
    `;
}

_templateCard(story) {
    return html`
        <div class="card" style="max-width: 18rem;">
            <img src="${story.photoUrl}" alt="${story.name}" class="card-img-top" style="width: 100%;">
            <div class="card-body">
                <h5 class="card-title">${story.name}</h5>
                <p class="card-text">${story.description}</p>
                <p class="card-text"><small class="text-muted">Created at: ${new Date(story.createdAt).toLocaleString()}</small></p>
            </div>
        </div>
    `;
}
Turn out it is because shadow DOM
Want results from more Discord servers?
Add your server