Skip to content
OverviewSolutions
21
Comments
19

Parves Hossain Rabby

@IamparvesRajshahi, Bangladesh560 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Next.js

Latest solutions

View more solutions

Latest comments

  • Parves Hossain Rabby•560
    @Iamparves

    There is a minor error when adding CSS files to HTML. When you put '/' at the beginning of the path, it looks for that path directly from the main domain or root, which in your case is just after https://waru-guru.github.io, resulting in the final CSS file path https://waru-guru.github.io/static/assets/css/styles.css.

    However, your CSS file is stored at https://waru-guru.github.io/blog-preview-card/static/assets/css/styles.css. So instead, use a relative path. Simply add a dot (.) in front of the path, and it should work.

    Correct this: <link rel="stylesheet" href="/static/assets/css/styles.css

    To this: <link rel="stylesheet" href="./static/assets/css/styles.css">

    Edit: I noticed you also did same mistake for the avatar image. Fix that too.

    Marked as helpful
  • Parves Hossain Rabby•560
    @Iamparves

    Hello, @AlemDaphelan. Your design looks fantastic. However, there is a minor issue. Try resizing the browser's height to see the effect.

    When the browser window height is small, the entire card is not shown and cannot be scrolled. That's because you used the fixed height and overflow hidden properties.

    To fix that instead you can use min-height as well as remove the overflow hidden completely.

    body {
   min-height: 100vh;
}
    Marked as helpful
  • Parves Hossain Rabby•560
    @Iamparves

    Your approach is good. This is also how single-page applications, such as React.js, work. React projects contain only one index.html file. Additionally, the content/DOM is altered with Javascript.

    However, if you absolutely want to accomplish it with different html files, you can pass the rating using URL parameters.

    For more information, see this article: How to Pass Value From One HTML Page To Another Using JavaScript

    Marked as helpful
  • Parves Hossain Rabby•560
    @Iamparves

    The reason it is happening is because when you submit a form it by default changes the URL and the page reloads.

    In the form submit event listener you added e.preventDefault() inside if condition. Instead do it outside any condition.

    form.addEventListener("submit", (e) => {
  e.preventDefault();

  if (email.value == "") {
    error();
	} else {
		success();
	}
});
    Marked as helpful
  • Parves Hossain Rabby•560
    @Iamparves

    There sure is. You did a good job, but you did everything manually. You added all of the FAQ content manually in the html. Then selected every single one of them separately in JavaScript and added event listener to all of them separately.

    Which is not how it should be done. If you did everything manually then it could've been done using CSS only.

    Also, there were only 4 FAQ item so it wasn't that hard to add them manually. But what if there was like 20 or 30 items? Or what if the data came from an external source / API. Then this won't work right?

    What you can do instead is that you can add all of the FAQ items in a JavaScript array of objects and loop over them and insert them in the DOM using JavaScript. Then you can add a event listener to the parent of FAQ items and toggle answers based on the clicked target.

    I suggest you watch this video from Web Dev Simplified to understand how to handle event listeners better: Learn JavaScript Event Listeners In 18 Minutes

    Hope this helps :)

    Marked as helpful
  • Parves Hossain Rabby•560
    @Iamparves

    You don't need to upload node modules folder. You can still deploy this site on Netlify/Vercel to make it live.

    You can directly connect your github repository on Netlify and Vercel both. If you don't want to do that you can run the npm run build command and upload the generated dist folder on Netlify directly.

View more comments