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! 😁
👋Hello Front-End Mentor Community! This is my solution for this challenge!
What challenges did you encounter, and how did you overcome them?🏋️ The project was not demanding and there were no major problems
What specific areas of your project would you like help with?✍️ Feedback welcome!
Hi 👋
Great job with this component. It's super responsive and looks great at all viewports I've tested out!
One point of improvement would be to add a pointer: cursor to the Sign Up button as it is a clickable element.
.sign-up { cursor: pointer; }
Keep up the good work! 😁
product-preview-card
What challenges did you encounter, and how did you overcome them?product-preview-card
What specific areas of your project would you like help with?product-preview-card
Hi 👋
Great work with this project! It looks really great.
One point is that you have applied a fixed-value width: 344px on the card-container element. This means that when the viewport width is smaller than this the container will overflow and you won't be able to see it all without scrolling.
A solution to this problem would be to apply a percentage-based width along with a fixed-value max-width for larger viewports.
For example:
.card-container { width: 90%; max-width: 350px; }
Hope this helps! Happy coding 😁
Hello everyone,
Any comment or feedback with respect to this project will be highly appreciated.
With regards,
ZM. Baig
Hi there 😁
Great job with this!
Just a couple of notes on making it more responsive:
This part's sticking out of the screen, making you scroll to see everything. It's happening because of the set width. A slick way to fix this for a responsive design is to use a percentage for the width and then add a max-width in pixels for how big you want it on a desktop screen.
.card-container { width: 80%; max-width: 1110px; }
Also, about stuff overflowing, it's usually not a great idea to lock in the height. When you set a fixed height, it won't adjust if your content grows or shrinks. That could mean your content ends up spilling out of its box or disappearing, depending on your overflow setting.
CSS is pretty smart and can figure out the height based on what's inside. Best to just let it do its thing 😎
.card-container { height: auto; /* this is the default value */ }
Hope this helps! 😁
I actually strugled with the u/i, cos at first my design didn't look anything close to the sample image. So i deleted the defualt html file content and started writing the code from scratch the way i best understand html later proceded to css had a couple of time i even have to go look at another project i had worked on just to get around css. It's really good stuff that this path of learning comes with challenges. What i'll do diferently next time is dependant on the honest reviews and contributions i'll be getting from the cummuninty.
What challenges did you encounter, and how did you overcome them?I was faced with difficulties tring to get my user interface look just like the sample i was given, so the image wasn't redusing at a time , but afetr couple of twist i had a heads up from a friend that actually worked. He pointed me to an in-lne styling(css) to the html file, code line that targeted had image and it worked i was then able to resize the imge to fit.
What specific areas of your project would you like help with?I know my work is not very much good as per the user interface, so i'll appreciate honest contributions pointing me to where i would have done better with the styling, my css file to this work is available at my git profile provided aabove
Hi 👋
A suggestion regarding the rounded corners of the image.
The best approach to applying this effect is to actually apply the element containing the image, in your case a <section>. By applying a border-radius to this container, and setting the overflow to be hidden, you can achieve this rounded corner effect.
.image-container { border-radius: 10px; overflow: hidden; }
Also, I would recommend to switch this container from a <section> to a <div> for accessibility reasons. Using a <section> element to create structure around an image like this does not make sense semantically.
Hope this helps! Happy coding 😁
I am proud of my first working javascript code, since I only started learning it 1 month ago, being able to write this amount (although quite redundant and easy) without too much trouble felt nice!
What challenges did you encounter, and how did you overcome them?I forgot how to target a specific css attribute (in this case visibility and display) in js and had to look it up on google.
What specific areas of your project would you like help with?I would like to know of a way to make my Javascript less redundant and more maintainable, but I am just a beginner so a beginner friendly advice would be best.
I also cannot resize the star image next to the FAQ heading below 40px in
@media (max-width: 400px); so I kept it at 40px. no matter how hard I tried. Is there a specific reason why? Any insight would be much appreciated. Thank you!
Hi 👋
After taking a quick look at your code, it seems that the reason you can't resize the star image is because there are still max-height properties being applied to the image from the larger viewport media queries. This property is being overwritten with each media query decreasing in width, but in the @media (max-width: 400px) media query, you want to ignore this. A way to do this would be to set:
@media (max-width: 400px) { .star_image { max-height: none; /* add width and height here */ } }
The sizing should work then.
Taking a look at the JavaScript, there's a couple of things I would mention to reduce redundancy.
The first thing would be to use classes that can be added and removed from the elements. For example:
.hidden { visibility: hidden; }
Then, you can use JavaScript to add or remove the class when the element is clicked:
myElement.addEventListener("onclick", function(event) { event.target.classList.toggle("hidden"); });
This will apply the CSS visibility: hidden property when clicked, and then remove it again when clicked again.
Using this approach you don't need to have separate logic for applying styles and then removing them again.
Hope this helps 😁
I am proud that i was able to finish the challenge within a short period of time.
What challenges did you encounter, and how did you overcome them?The challenge i encounter during this project was displaying the show icon over the picture when hovered on. And I overcome it with the help of of youtube videos.
What specific areas of your project would you like help with?i will need help in arranging my HTML code in the proper HTML standard.
Hi 👋
Congratulations on this project. It looks pixel-perfect to me!
A few ways you could improve what you've done here would be to:
Apply classes to the <img> elements representing the large image and the image that appears on hover and style using those.
Generally, inline styling of the type `style="height: 50px; width: 50px" is not recommended. A better approach would be to apply the classes:
<img class="image-main" src="./images/image-equilibrium.jpg" /> <div class="icon"> <img class="image-overlay" src="./images/icon-view.svg" /> </div>
That way you could then style accordingly:
.image-main { width: 260px; height: 260px; ... } .image-overlay { width: 50px; height: 50px; }
One of the benefits of this approach is that all of your styling will be within your `
