@J-HernandezM
@remmji
Submitted
Hello, project works for destined window widths (375,1440) but going wild once it is resized to other values. Some advice on this would be very welcome ! Other things also ! Also what is wrong with those screenshots. It looks normally on screen yet here it looks terible.
@J-HernandezM
Posted
maybe you should try to add a max-height to the top section and the images of the ccard try to make the position absolute relative to the top container instead of doing it in the body, if needed add a 3rd media querie for tablets.
Great job with the js, i solved it using other methods but i like some of your code. I'll implement myself on my code some of your ideas!
Marked as helpful
@viniciusmontibeller
Submitted
This is my first project using fetch to wotrk with an API. Appreciate any tips or suggestions.
@J-HernandezM
Posted
Nice solution in the JavaScript, i didnt knew You could do all that in just one function, i always thought that everything should be in diferente functions, i did ir that way and find myself in trouble with they calls of the funtions, pretty straight forward, and understandable, congrats!
@kiangopez
Submitted
Can I get a tip on how I can get the notification number working?
@J-HernandezM
Posted
the way i did it was to assign a class called 'readed' and changed the styles, then i created in JS a function that evaluates for each notification if it contains the class 'readed'. If it doesnt have the class for that notification, add 1 to a variable counter, if it has the class then dont add anything. That way if the script evaluates each notification and none of them have the readed class the number will be 0.
I called the function after i created all the event listener logic but inside of it
@TianYeCal
Submitted
Finally finished this website, not easy for me, just last problem for me is that I don't know how to add the error icon in input, is it through placeholder?
@J-HernandezM
Posted
Hi! Im not sure if you have the backround image of desktop in the desktop view. I get to put the error icon inside the input by creating a div element that wraps both img and input elements (also a span for the error message), so i can use position absolut in the parent div and move the image inside of the input.
Marked as helpful
@erenymo
Submitted
Hi 👋
This is my solution to Frontend Mentor - Single Price Grid Challenge. I have some issues about mobile design, any feedback will make me much better developer :) .
@J-HernandezM
Posted
Maybe you should try to learn CSS GRID and apply it to this project. Usign in desktop a 4x4 grid meanwhile in mobile use a 1column x 3 row, change that using media queries. Use this resource to learn grid basics https://cssgridgarden.com/#es When you check that the rules that im reffering to are
grid-template-area
grid-area
or just the columns or just the rows
Marked as helpful
@amirandersonjones
Submitted
It was challenging to figure out how to take the user star rating input and display it on the page for the thank you.would appreciate if someone could help me figure out how to thank the user by saying you chose (amount of stars) on the thank you card.
@J-HernandezM
Posted
try using a radio input for the buttons of the scores, then read all the HTML elements in the JS using document.querySelector, create a function that evaluate each radio input element and see witha condition if they have the propertie .checket = true, if so then thats the option the user selected and you can assign that to a variable
@tayblackk
Submitted
There was a time when I had to refer back to MDN doc for clarification regarding grid and flexbox. I've been challenging myself to clean up my CSS so it is more legible for viewers.
Another challenge I faced within the project was the image.svg.. I could not figure it out and I began to get so tired that my problem solving skills turned into frustration.
You will find this at the bottom of the CSS stylesheet.
/* Having trouble adding the .svg - Really not even sure what is going on - Probably too tired / / .btn[data-icon="shopping-cart"]::before { content: ""; background-image: url("images/icon-cart.svg"); background-color: #fff; width: 15px; height: 16px; } */
I should have been more patient and tried to solve the issue. Nonetheless, I will be back tomorrow for another challenge. This is the conclusion of my 4th week of self-taught html & css.
@J-HernandezM
Posted
hi! i made it by adding a img tag inside the button tag, i didnt even think you could do it using css, thats an original hehe
<button type="button" class="cardContainer__cartButton btn">
<img src="./images/icon-cart.svg" alt="add to cart logo" class="cart"/>
Add to Cart
</button>
Marked as helpful
@RazvanTSG
Submitted
I was too lazy to also do the mobile version, sorry :( I need help with two things: -getting the card in the middle of the screen -using two fonts
@J-HernandezM
Posted
Hi! to place the card in the center i used in the main container or the body display: grid and place-items: center. to use two fonts i recommend you to import both of them, assign one of them as the main font in the body selector at the css file, then to use the other one try using font-family: 'The font you want' in the selector of the text that you want to change to the other font.
body{
font-family: 'Montserrat', sans-serif;
}
.cardContainer__title{
font-family: 'Fraunces', sans-serif;
}
Marked as helpful
@manosanti
Submitted
What did you find difficult while building the project?
<div>, also in some CSS properties, I'm not sure if the way I did it was the most correct, but in some way, it worked, but I would like, if possible, someone to review my code and inform another "more correct" way to build.Do you have any questions about best practices?
@J-HernandezM
Posted
Hi Lucas
The way i put the image up in mobile was using display grid, in the desktop media querie i used in the card selector the CSS propertie grid-template-columns and assigned two columns with their respective sizes. In the mobile media querie i used the propertie grid-template-rows assigned two rows, first the image and second all the texts.
I apologyze if my english is not the best
