Good practice using Sass, JavaScript, API and Grid
Design comparison
Solution retrospective
Hey everybody, I would appreciate any feedback. There's a few things that I couldn't quite figure out.
-
How to change the color of the SVG images. In dark mode, they're supposed to be white. Also, when something is 'Not Available' (i.e. twitter handle) it's supposed to be greyed out. I can't figure out how to change the color at all, let alone how to programmatically change it when something is 'Not Available'.
-
Another thing that's driving me crazy is that when the screen width gets too small the button gets pushed out of the form. Even worse, when the 'No result' error is there, it pushes it even further and 'No result' goes to 2 lines, for some reason.
-
Also, I feel like I could definitely refactor some of my javascript. This is my first "junior" project, after doing a few "newbies".
Thanks in advance for any help!
Community feedback
- @tuanngo1993Posted about 3 years ago
Great job! It would be nice if you challenge yourself with bonus requirement that is to keep theme being like previous state by using localStorage(). For example, your theme is light mode at the beginning then you switch it to dark and it should be dark after refreshing page as well
Enjoy your journey :D
Marked as helpful0 - @FocusCookiePosted about 3 years ago
You can change the color of an svg with the fill attribute of the svg path like this:
.btn--text:hover > #theme-icon path { color: var(--btn--text-color--hover); fill: var(--btn--text-color--hover); }
The Button issue within the search box can be fixed by applying a width of 100% to the input.
Marked as helpful0@nickcarlisiPosted about 3 years ago@FocusCookie Thanks so much! Both of your suggestions worked! I initially had the svgs as images, but changed them to inline svgs and was able to change the color that way.
0 - @nickcarlisiPosted about 3 years ago
One more thing I forgot to ask about is the 'joined' date. The API gives it to you in the ISO format, but the design has the month as "Jan" instead of 01, for example. Anyone know how to convert the month to text like that? Thanks again!
0@FocusCookiePosted about 3 years ago@nickcarlisi
I solved it this way. ''' const event = new Date(date); const options = { year: "numeric", month: "short", day: "numeric" };
return
Joined ${event.toLocaleDateString("en-US", options)}
.replace( ",", "" '''You could also use moment.js which is a very handy library for this type of matter.
Marked as helpful0@nickcarlisiPosted about 3 years ago@FocusCookie Awesome! I ended up doing this and it worked...
const date = data.created_at; const dateJoined = new Date(date); const day = dateJoined.getDate(); const month = dateJoined.toLocaleString("en-us", { month: "short" }); const year = dateJoined.getFullYear();
<p class="joined">Joined ${day} ${month} ${year}</p>I'll give your method a shot too. Thanks again for the help!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord