i am most proud of my javascript, it was difficult while writing the reload cart function but i was able to get it right.
What challenges did you encounter, and how did you overcome them?i was unable to write certain funtion, including the hover effect in the nav bar
Hi, great work with this project.
Just a few pointers:
I'd recommend representing the product as an array of objects rather than nested objects. This is because a typical API will use this pattern.
Rather than this
const products = { 1: { name: "Fall Limited Edition Sneakers", price: 125.0, image: "images/image-product-1.jpg", }, };
Like this
const products = [ { id: 1, name: "Fall Limited Edition Sneakers", price: 125.0, image: "images/image-product-1.jpg", }];
You'll have an easier time searching and filtering this way in the future.
When you click the "Add to cart" button, only 1 product is added to the cart regardless of how many are selected using the above selector.
I've gone into your source code and got to the bottom of it. You're incrementing the quantity by 1 in the addToCart method. To fix this try:
function addToCart(key) {
if (listCards[key] == null) {
listCards[key] = {
...products[key],
quantity: +quantityElement.textContent,
};
} else {
listCards[key].quantity += +quantityElement.textContent;
}
}
Hope this helps. Keep up the good work ☺️
I'd like some help with the theme switcher for the data in the Dashboard the first data stays as the light version and I don't know how to fix that.
Hi 👋
I've taken a look at your source code and narrowed it down.
The reason this weird behaviour is happening with the first element not changing colour in dark mode is to do with how you are using CSS selectors in your SASS.
Right now you have the following selector for selecting each of the cards individually in dark mode:
.fb-resume-data + .dark-cards-resume, .twitter-resume-data + .dark-cards-resume, .ig-resume-data + .dark-cards-resume { background-color: var(--Dark-Desaturated-Blue-card-bg); }
However, the + operator does not select an element which has both the class preceeding the + operator and that following the operator. Rather, this is the adjacent sibling selector. A more general example is:
a + b selects element b if and only if it is the immediate sibling that directly follows element a. It won't select any other b elements that are not directly preceded by a. In your case, this means all elements except the first are selected, because the first is not preceeded by any sibling.
Hope this makes sense, these selectors can be quite confusing.
To select an element that has both classes, you just need to concatenate the classes in the selector:
.fb-resume-data.dark-cards-resume, .twitter-resume-data.dark-cards-resume, .ig-resume-data.dark-cards-resume { background-color: var(--Dark-Desaturated-Blue-card-bg); }
Otherwise great work! Happy coding 😁
Hey, guess what? I just successfully tossed in some JavaScript for the first time! 😂 It looks like I've stumbled upon a new talent. Better start cranking out more JS projects, 'cause apparently, that's where my hidden genius lies! 🚀
What challenges did you encounter, and how did you overcome them?So, picture this: the first two hours of me diving into the wild world of JavaScript code hunting. Yeah, I know, pretty lame, right? But hey, gotta start somewhere! 😅
What specific areas of your project would you like help with?Sure thing! I'm open to suggestions, even if they're as welcome as a pineapple pizza at an Italian family reunion! 🍍🍕 But hey, variety is the spice of life, right?
Hi 👋
Great work with this project. It looks really great 😊
Just thought I'd share a slice of pineapple pizza 🍕😁
To improve the user experience you could introduce a expand/collapse animation on the toggles to remove this layout shift. You can refer to this codepen I've made if you're interested in how to do that!
Hope this helps! Keep up the good work 😁
The highlight of this project is using flexbox and minimal media query to make the page responsive. I designed for desktop first because the task looked a bit complex at the beginning.
What challenges did you encounter, and how did you overcome them?The biggest challenge was aligning the two middle vertical cards. It was dicey to manage because I kept them in a different container from the two cards on the side.
What specific areas of your project would you like help with?I would appreciate comments on any part of this project.
Hi 👋
Great work on this project!
It really looks great at both mobile and desktop layouts 😁
The main issue I see is with larger viewports. I think it would make sense to talk about the width and height of the cards separately.
Width:
Right now you are using a vw-based flex-basis to determine the width of the columns in your flex container. This is fine for standard viewports, but with wider viewports the cards grow indefinitely, leading to lots of empty space within the card. I would recommend adding a max-width with a fixed pixel value to each of the cards to stop this behaviour.
.card { flex-basis: 20vw; max-width: 300px; }
Height:
Something similar is happening with the height becase of the vh-based value for height. Although the problem is the same, the solution is not. generally, it is best practice to not apply a fixed-value height, because it can lead to content overflow, especially when our containers have dynamic content.
CSS is responsive by default and will determine the correct height for your component based on the size of the content, as well as padding, border etc, depending on the box-sizing property you use.
I would recommend to leave the default height: auto on your cards and use a padding-bottom to add the desired whitespace below the content.
Hope this helps! 😁
The challenges I encountered is how i should center my elements, and also how to make the qr responsive.
What specific areas of your project would you like help with?I would like to know if there is a better way to make the qr more responsive
Hi 👋
Great work with this component.
I can make a few comments regarding responsivity.
I'd recommend changing the way you're thinking about defining the width in the desktop view. From what I understand you're deciding on how you want the component to look at full width, which is approximately 15vw.
The problem with this is that at smaller viewports (approx width: 450px) the component ends up with a width of around 100px which really is too small.
You'd be better to use a much wider width for the component, let's say 90% and then add a max-width with a fixed-value for the larger screen size. That way you'll have a more appropriate width across a range of viewport widths.
.qrwrapper { width: 90%; max-width: 300px; }
Thanks
Hello, Frontend Mentor community 🙋♂️.
This is my solution ✅ for the Social Links Profile
This was a fun project, and I am thinking to include it in my future projects. I am currently working on my Frontend Developer Portfolio, So this gave me a good idea about some of the things that I want to add.
I had some trouble with resizing the image. So I would appreciate it if I get a feedback on that.
Follow me in my journey to finish all Free 🆓 and Free + challenges (61 left 🎯)! Gotta Catch ’Em All
That's all.
Have Fun Coding!
What specific areas of your project would you like help with?I would like help with the use of images in flexbox.
How should we define an image size in a flexbox, along with flexbox width.
Hi 👋
Great work with this!
I've cloned your repository and played around with the code a little. You're approach to styling the image and creating the layout is mostly just fine in my opinion.
Just a couple of minor points:
The <div> around the profile picture is kind of unnecessary. Wrapping the image and then adding a border-radius to the container leads to you needing to apply overflow: hidden on the container. You could actually remove this container and just apply the border-radius directly to the <img> element. That way you don't have to worry about overflow.
You're having some problems with the layout of the image because you are combining both fixed-value width and height with transform: scale() to define the size of the image. width and height are part of the box-model, and therefore inform the rest of the document where elements should be placed. transform: scale() is not. That means when you increase the size with the transform: scale() function, the image becomes bigger, but the space allocated for it does not increase. I'd recommend just using width and height exclusively and then adding a margin-bottom to the image to create space below.
Hope this helps 😁
Considering it is my first time working on any front-end project the way I did with this one, I think following the design files (*.fig) guide lines when it comes to dimensions is going to have to be one of my religious methods. After being confused by the many, but informative read me files, I am proud of the way I managed to handle this in such less time than I had expected.
What challenges did you encounter, and how did you overcome them?While working on the mobile display, I realized that the styles I had would not work for those same mobile devices in landscape orientation. finding a way to target the screen widths while not altering the original display on desktops and tablets proved to be troublesome.
Off to StackOverflow I went...
Their answer didn't exactly work for my situation but it got me close enough to figuring out what I had to do. There, initially, @media (max-device-width: 767px) was explained but after modifying, I found that @media (max-device-height: 480px) worked perfectly for my situation.
Not, just with my project but with my knowledge entirely when it comes to working with responsivity. I struggle to understand what to use between max-width: ; and width: ; css rules. The same with the height. And then in addition, I have problems with @media queries and then basic concepts of how @keyframes work.
Hi 👋
Just thought I would share my two cents about the purpose and difference between using width and max-width.
It is not recommended to provide a fixed-value for the width property of compoents. The reason for this is that at viewport widths less than this value, the content will overflow the visible area of the page.
A better solution is to use a %-based value, which will be calculated dynamically according to the width of the parent container.
This means that the component will grow and shrink with the width of the screen.
Let's say we set width: 90% on the component, then it will grow at 90% of the screen width. This is not ideal at larger viewports, and we therefore want to specify some maximum value so that the component doesn't spread too wide. This is where max-width comes into play. We can set a fixed-value for this property to make sure the component never gets too wide.
.container { width: 90%; max-width: 360px; }
With respect to height: Generally it's not recommended to set a fixed-value for this property. CSS is dynamic and responsive by default and it will calculate the necessary height of the component according to the content it contains. If we set a fixed-value height, then if the content for some reason becomes larger, it will overflow the component, leading to an ugly user experience.
I'd recommend leaving the default value of height: auto and using padding or margin on the internal elements of the container to define whitespace within the container.
Hope this helps 😁
Need more practicing
What challenges did you encounter, and how did you overcome them?Need more practicing
What specific areas of your project would you like help with?Found multiple ways to deal with shopping cart image/svg/icon Using different ways to resize the image/svg/icon
Hi 👋
I've cloned your repository and it seems that you haven't added the image to the repository.
That means the file cannot be found during deployment and is leading to a HTTP 404 response.
Also, there is an extra $ sign in the discounted price.
Hope this helps 😁
Just one more thing.
It might be useful for you to take a look at the toggle() method on the element.classList to toggle classes on and off an element.
That way you wouldn’t need to implement separate functions for adding classes and then for removing those same classes.
element.addEventListener(“onclick”, (event) => {
event.target.classList.toggle(“hidden”);
}):
Just removed a bit of redundancy from the JavaScript 😌
Tell me if i did something wrong,any feedback is welcome, tks you so much ^^!
Hi 👋
Well done with this. It looks really good in both mobile and desktop viewports!
However, with very large viewports the three columns become very spread out. I would recommend adding a fixed-value max-width to the <main> element that wraps the entire layout. That way you won't have this spread.
.main { max-width: 1600px; }
Hope this helps 😁
The the container border was really hard to do and I feel like there is too much white space below the profile picture icon and the "Greg Hooper" text. I also feel like the picture isn't big enough so I think I got the padding wrong.
What specific areas of your project would you like help with?Picture padding and the white space below the profile pic.
Hi 👋
Great work with this project!
A quick note about that space below the profile picture. This is caused by the fixed-value height: 565px on the .preview-card-container element. This is generally ill-advised as it can lead to overflowing content if the content its too big to fit in the container.
CSS will calculate the appropriate height for the component with its default value of height: auto and so you can control the appropriate space below the image by applying a margin-bottom to the image itself.
.preview-card-container { height: auto; } .profile-icon { margin-bottom: 20px; }
Hope this helps! 😁
Hi 👋
Great work with this form. The validation works great.
A couple of points if you want to keep working on this 😁
I'd recommend increasing the viewport width at which the media query is applied for switching the layout, as at ~400px viewport width there still isn't really enough space for a column-based layout. Perhaps it would be better to apply this at around 1000px?
The appearance of validation messages causes a layout shift which can be a little jarring for some users. Perhaps implementing a expand/collapse type animation would help. Refer to this codepen I have created if you're interested in implementing this kind of animation for form validation.
Hope this helps! 😁
