IV1011• 20
@IV-1011
Submitted
How can I keep my hover effect after clicking an option? I lose the hover color when an option is selected.
How can I reassign the localStorage value? If the user presses back on the browser, the value remains the same.
Jonathon Silva Eng
@jonathon-eng
All comments
- Jonathon Silva Eng• 200
@jonathon-eng
Posted
To answer your first question, the most common and easy way to keep the hover color after selecting was just to build it using radio buttons and styling them to look like the sample. To achieve that with your method could require a lot more (and possibly unnecessary javascript)
The second question seems to be to the fact that you built the site using 2 html files and you are linking them via the submit button. There's a bunch of stuff regarding that fact, but the point is that I don't think manipulating localStorage is necessary, and frankly required, for a task that can be done in one page.
One way to solve that issue is to just put the finished card directly from your typage.html into your index.html and hide it with CSS. Then upon submitting, you can just toggle between showing and hiding the start and complete cards with some Javascript.
0 - Jithin Sabu• 30
@jithinsabumec
Submitted
The code is a mess. I actually did the objectives of the task, but a problem I am encountering is that I can't confine the user to select just one rating.
Right now, the user can select all the ratings and the one which is selected last is taken into consideration.
This project helped me understand basic JS DOM Manipulation.
Feel free to go through the code and shoot your suggestions anfd feedbacks.
Happy Coding!
Jonathon Silva Eng• 200@jonathon-eng
Posted
Hi. I think I understand what your problem is. It looks like you used <button> for your solution. And I can understand that is a reasonable idea, however, the solution seems to use radio buttons which are a form of input that only restricts the user to one answer. I’m sure it’s possible to use your solution with a lot of JavaScript, but I think the way to go would be with radio buttons and styling them to look like you do now.
To get you started: https://moderncss.dev/pure-css-custom-styled-radio-buttons/
And also search for how to put a label inside of a radio button
Marked as helpful
2 @chukwudobe-Micah
Submitted
Honest feedbacks will be appreciated.
Jonathon Silva Eng• 200@jonathon-eng
Posted
I like the color and effects! Though, as cool as it is, I guess the purpose of this site is to learn that some people will not particularly enjoy such things due to accessibility reasons. Though, obviously that will differ from person to person.
That being said, I think you are using a wrong font than what was asked for this challenge. Also, your card is not centered on the page. I would like to look at your code, but it seems that you have not linked your GitHub page when you were submitting, so unfortunately I can't provide much help there.
0- Wuttipon (Pleum)• 230
@pleum3410
Submitted
I don't know what happen in the background color of screenshot comparison, In my browser it look OK. has anyone know how to solve this problem?
Jonathon Silva Eng• 200@jonathon-eng
Posted
The background color seems fine to me too. Unless you are talking about the bottom part of your page. I believe that is just the bottom of your page in comparison to the sample. Perhaps your screen is shorter in height, so you made the page with your dimensions, as opposed to the sample so it displays it as such. I say you can safely ignore that, however, if it bothers you, you will need to update your code to extend up and down to account for the extra space.
1 - Fortunate• 10
@Fortunate25
Submitted
Please check and help make corrections when necessary
Jonathon Silva Eng• 200@jonathon-eng
Posted
A few things I noticed on my end:
-
The font doesn't seem to load the correct font. Looking at your code, the issue seems that even though you linked a google font site to your HTML, it seem to be calling the "Happy Monkey" font, while in your CSS it's asking for the "Outfit" and "Cursive" fonts. I think updating your HTML will solve this.
-
When hovering over the image part of the card, it doesn't do the part of the task that the challenge is asking for. That being to load an "eye" icon and also changing the color of the image to blue.
0 -
@ssembatya-dennis
Submitted
How can I animate the card's image on hover to scale down and up smoothly while maintaining the hover effect of the image that appears when you hover the card's image initially.
Jonathon Silva Eng• 200@jonathon-eng
Posted
I can't say for sure, but I think that just putting "scale('some size')" inside of your card-img:hover selector in your CSS file might achieve what you're looking for. Afterwards, you can also insert a variety of other styles to adjust the speed and animation of it.
1
