Skip to content
OverviewSolutions
21
Comments
19
Parves Hossain Rabby
@Iamparves

All comments

  • Parves Hossain Rabby•560
    @IamparvesPosted 10 months ago

    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
    0
  • Parves Hossain Rabby•560
    @IamparvesPosted 10 months ago

    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
    1
  • Alex-Gamarano•350
    @Alex-GamaranoSubmitted 10 months ago

    What did you find difficult while building the project? My first approach was to create two HTML's, index and thanks... I was not able to cross the rating's result from index.html to thanks.html.
    Finally I created both cards in the index.html file and using JS I controled the visibility with the obj.classList.toggle( ), and got the result.

    Which areas of your code are you unsure of? My second approach, described above is correct? Is is possible manipulate DOM crossing files?

    Do you have any questions about best practices? Above described.

    Visibility toggle?

    2
    Parves Hossain Rabby•560
    @IamparvesPosted 10 months ago

    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
    0
  • Parves Hossain Rabby•560
    @IamparvesPosted 10 months ago

    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
    0
  • Parves Hossain Rabby•560
    @IamparvesPosted 10 months ago

    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
    1
  • Iliyev Alisher•280
    @NONAlishSubmitted 10 months ago

    Not a particularly difficult project.

    I did it on a rocket so you won't see my site because the node-modules folder can't be uploaded to github. You can download this project and then add these folders, which you can download from the Internet.

    Skilled e-learning landing page With React

    1
    Parves Hossain Rabby•560
    @IamparvesPosted 10 months ago

    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.

    0
  • Fidelisuzoma•380
    @UzomaFidelisSubmitted 10 months ago

    This was my first time using an api call in javascript. I should point point out that I've only been learning and using js going on two months now, so I have limited experience with some aspects of it especially with asynchronous functions.

    I tried to implement some sort of feedback to the user when the api call fails due to bad network. I was able to get it working (sort of). If you tried to generate an advice without a connection you'd see what I did. The issue is. I wanted to be able to make the api call retry a couple of times before giving that feedback; right now it just gives the error once it fails the first time. Tried to research some solutions online but some persons were using 'Promises' which I frankly don't understand well at this point. If you know a way I could do something like that or you can point me to a good resource to learn about promises, I'd be very grateful. Thanks in advance

    Mobile First Solution: Sass

    1
    Parves Hossain Rabby•560
    @IamparvesPosted 10 months ago

    You can implement a retry system like the below function and use that

    async function retryGetAdvice(retries = 3, retryDelay = 2, err = null) {
  if (!retries) {
    return Promise.reject(err);
  }

  return fetch(apiUrl, { method: "GET" }).catch(async (error) => {
    if (retryDelay) {
      await new Promise((resolve) => setTimeout(resolve, retryDelay * 1000));
    }

    return retryGetAdvice(retries - 1, retryDelay, error);
  });
}

    By default it will retry 3 times after every 2 seconds. You can change that when retryGetAdvice function is being called inside getAdvice function.

    You can find the full script.js file here: Script.js Gist

    One other thing I want to mention is that, I noticed for the loading effect you used a fixed timeout. I don't think that's a ideal solution. Because not every requests will take 1.5 seconds, right? You should try to fix that.

    Hope this helps :)

    Marked as helpful
    0
  • ZionCodes1•50
    @ZionCodes1Submitted 10 months ago

    What do you think Guys Looking forward to your feedbacks And i have some questions to ask if anyone wants to answer thank you.

    Socials Links Profile page

    1
    Parves Hossain Rabby•560
    @IamparvesPosted 10 months ago

    Overall, your solution is good. However, there are some points I would like to mention for improvement.

    First, you should not use button tags for links; instead, use a (anchor) tags. Additionally, it is not always necessary to wrap elements in an extra div as you did with the name, location, and description; they could have been placed in a single div.

    Always strive to avoid using fixed width/height for elements like you did with the link items. Try to use relative units or the max-width, min-width, max-height, min-height properties.

    I also noticed that you used a grid in the links div. But you gave a column width of 100px and used padding-right of 215px to center the link items, which is definitely not a good approach. Instead, use grid-template-columns: 1fr for a single column and then use justify-items: center to center the links.

    That's all I could notice. Feel free to ask me anything; I will try to answer if I know.

    0
  • Aaron Currie•100
    @AaronCurrieSubmitted almost 3 years ago

    This is my first attempt at integrating JS and HTML/CSS. I thought the layout looked pretty simple but it ended up taking me alot of time to place the box correctly, I finally got something that works but I am not 100% happy with how I implemented it as my design feels less responsive than it should be. What would be your suggestion for the best way to place the 2/3 images correctly.

    As for my JS code I am disappointed with my writing of the code I attempted to use arrays and iterators to clean up the code but struggled to get my elements into arrays, because of this I ended up with VERY long bloated code with lots of unnessercary repeats.

    I imagine the whole thing could be done using one function iterator through the elements. I would love to see an example of clean simple code to this problem so I can study it so on the next challenge I can write much better JS.

    I am however happy that I have working code as this is my first attempt.

    faq-accordion-card

    3
    Parves Hossain Rabby•560
    @IamparvesPosted almost 3 years ago

    Hello @AaronCurrie, I saw your code and it was a very static code. Everything was manually selected and you did same tasks repeatedly. Now if you add another question in your html, you have to change your Javascript code again.

    You can avoid this by using querySelectorAll to select all the elements and convert it into an array. You can use Array.from() or spread operator [...]. Then you can loop over the array and add event listener or you can just add event listener in the parent element.

    Also it will be better if you handle design changes using CSS class rather than changing it from Javascript.

    You can look for more solutions of this challenge in the SOLUTIONS page. And You can see my solution if you want: FAQ Accordian Card

    0
  • Joy Kirii•60
    @WakarendeSubmitted almost 3 years ago

    Has a bug on the tip buttons that I cannot seem to figure out. Figured I would still upload and see if I can get some feedback as well as some help in fixing the problem.

    Tip Calculator

    1
    Parves Hossain Rabby•560
    @IamparvesPosted almost 3 years ago

    In the calculateTip function when you store tipPercentage you are taking it form this. But the thing is when you add event listener to an element then this keyword inside the callback function refers to that element. So whenever you click/change any fields, your tip percentage comes from that field. Doesn't matter if it's tip percentage field or not.

    You can store check using conditions which field you are dealing with and store the values in an object/variables. And then calculate using them.

    Maybe you should look other peoples solution of this project. And also, it will be better if you use form.

    Good luck.

    0
  • Parves Hossain Rabby•560
    @IamparvesPosted almost 3 years ago

    Hello @dserranoi, You did a great job.

    I just have a little tips. You shouldn't use height in the body like you used height: 100vh; in this project. I saw when the viewport's height is smaller than content it doesn't show all the content. Instead you should use min-height: 100vh;. I think you understand what min-height does. But if you don't you should learn about it.

    Marked as helpful
    0
  • Parves Hossain Rabby•560
    @IamparvesPosted almost 3 years ago

    Hello @EwenYiWen,

    You did everything to center the card except giving the body a min-height. You should use min-height: 100vh;. If you don't know about Viewport Unit you should google and learn about it. This is what you have to do to center a card:

    body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

    And you should use max-width for you preview card. It looks too big in large device.

    Marked as helpful
    1