Nar
Nar
PostsComments
KPCKevin Powell - Community
Created by Nar on 7/15/2024 in #front-end
Why Bootstrap Styles Are Not Active
Turn out it is because shadow DOM
4 replies
KPCKevin Powell - Community
Created by Nar on 7/15/2024 in #front-end
Why Bootstrap Styles Are Not Active
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>
    `;
}
4 replies
KPCKevin Powell - Community
Created by Nar on 3/27/2024 in #front-end
can somebody tell me the correct path for this image?
Already did even --force but still cannt fix that dunno why
21 replies
KPCKevin Powell - Community
Created by Nar on 3/27/2024 in #front-end
can somebody tell me the correct path for this image?
Yeah, sharp need to configure the source and destination. Perhaps it cause an error or maybe just my laptop had some issue. When i ran npm it got 31 vulnerability maybe that's it
21 replies
KPCKevin Powell - Community
Created by Nar on 3/27/2024 in #front-end
can somebody tell me the correct path for this image?
Sorry for late response I am using webpack for bundle and tried to make PWA, the dist is a production result and src is dev folder. For context, actually this path is work fine until i am using sharp.js for responsive picture/img. The prod is fine but the dev mode somehow cannt find the img. <img src="./images/hero-img.jpg" alt="Hero image"> I thought it might not the path fault because the dev mode work when i change the img location and more of maybe network, cache, or something doing magic trick.
21 replies
KPCKevin Powell - Community
Created by Nar on 3/27/2024 in #front-end
can somebody tell me the correct path for this image?
neither of it work. However, if i change the image folder into direct children of public, it's working. I'm still don't understand what happened <img class=".hero-bg" src="./hero-img.jpg" alt="Hero image">
21 replies
KPCKevin Powell - Community
Created by Nar on 6/13/2023 in #front-end
Pass ID
thank you so much 👍
15 replies
KPCKevin Powell - Community
Created by Nar on 6/13/2023 in #front-end
Pass ID
From what I know, the error is because the website can not access my directory directly or something, therefore I need to use localhost. I'm happy to learn, but I don't know where to start and dont have time to, because my school project is quite unforgiving (deadline is near and nobody in my project team can code). To me, chat GPT is easiest way to get the project done.
15 replies