🔧 Tech Stack: React.js, Typescript, Tailwind CSS, ViteJS.
🌐Key Takeaways: I successfully implemented dark mode using Tailwind CSS, and also was able to deepen my understanding of props, useState, and useEffect in the process of creating this app.
🐛 While this project presented numerous challenges and bugs, I view them as invaluable learning opportunities. They have contributed to my growth as a developer and honed my problem-solving skills.
Looks very good man, and the responsiveness works great! I did find one issue though that pretty much breaks the app: if all your tasks are unchecked, and you click on "Completed", the bottom selection bar disappears and it's impossible for the user to see the list again. (Same thing if all tasks are checked and you click on "Active", though at least in this case you can add a new task and that will make the bottom bar popup again).
Please I don't know how to edit the hover tooltip
I know there are a few ways to create the tooltip:
Some people will create a single <div> element set to opacity:0 and position: absolute, and use the "mouseover" eventListener to change the opacity to 1 (and "mouseout" to set it back to 0), and change its position and textContent depending on which bar you're hovering over.
I believe it's possible to create tooltips with only CSS using ::before and ::after, but I've never looked into it. Here's the tutorial: https://www.youtube.com/watch?v=ujlpzTyJp-M&ab_channel=WebDevSimplified
I created a <div class="tooltip"> after each <div class="bar"> on my graph (so, multiple tooltips), then changed the "order" property to have each .tooltip appear before each .bar (even if they're after the .bar in my html) and set opacity: 0. Then, since each .tooltip is still AFTER .bar on the html, you can use ".bar:hover + .tooltip {opacity: 1}", and everytime you hover over a .bar element, the .tooltip that's immediately after it in the html will have its opacity set to 1 (I used ".bar:hover ~ .tooltip {opacity: 1}" in my code, but "+" would have been more specific).
Hope this helps!
I faced a difficult decision on this project: using an img tag or the background-image property. From mobile to desktop, the main image changes.
Should I change the src attribute with js or how can I make the background-image grow according to its aspect ratio?
Hey man, if I understood correctly what you mean, you might want to give your <img> element a CSS property of "object-fit: cover". Provided that the <img> is contained within a <div> or whatever containing element, if this parent element changes in size, the img size will also change but always maintaining its aspect ratio (which means the image will get clipped if the parent element has a different aspect ratio, but the image won't get distorted). If the image is not a <img> element but rather a background image, you can use "background-image: cover". This link might be useful: https://www.bisign.es/css/
Also, if I may offer some extra advice, you might want to give your .newsletter a maximum width so that it doesn't stretch too much on large screens.
EDIT: one last detail: the email address shown in the success state does not match the address the user enters.
Some better updates
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Hey there, all you need to do is add an eventListener to your "email" variable. Use the eventListener "input" and remove the .error class. As soon as the user types anything, the .error class will be removed and the input element will go back to its original color.
I just finished this challenge myself so you can take a look at my code if you want to.
Hello, I'm a beginner, this was my third challenge on this platform, I had more difficulty with this one compared to the others. I have a question, in my solution, in the icons part (Reaction, Memory, Verbal, Visual) for some reason, on the right side of the number "100" there is a gradual spacing, which I was unable to resolve and align them. If anyone could explain it to me, I would be grateful. Thank you very much and I am subject to other tips and suggestions.
Seems to me like the "num/100" are further from the right edge the shorter the word is. Here's where your problem lies: .icon1 > p, .icon2 > p, .icon3 > p, .icon4 > p { padding-right: 80px; padding-left: 8px; }
Each of your <p> elements will always push the "number/100" text 80 px to the right, so the shorter the word inside <p> is, the further from the right edge "number/100". The problem is that you're pushing the "number/100" elements a set amount of pixels to the right of the <p> elements. You need to find a way to have "number/100" always pushing against the right edge, instead of pushing X amount of pixels to the right of <p>. Hope this helps!
Ohhh that's pretty neat how you filled the bars depending on the score 🙌🙌
Solution for the results-summary. Advice and correction are most welcome.
Like Eduardo mentioned, the problem is in the image path. When you were working on your computer, the path to the image file you used included going into the folder called "images". However, you did not upload the "assets" and "images" folder to your repository, so the src attributes link to folders that aren't there. You need to either:
change src="/assets/images..." to the top level src="./... or create the necessary folders on your repository and put the image files there, so that the path links to an existing location with your repository
PS: to my knowledge, you can't simply create a folder in github: you need to click on "New file" (or "Add file", don't remember exactly right now. Something like that), then when you have the option of typing the name of a file, press / which will create a new folder. Create a new, random file within this folder, and then rename the folder (if my explanation isn't clear, you can look up tutorials on YouTube, which is what I did, as I was going nuts trying to find a "Create folder" button).
I was unable to center the component vertically.
In regards to centering the component vertically, I've never really understood why using "margin: auto" doesn't work, but you can at least do it by turning the body into a flex container and using its flex properties. You will need to give the body a height property for this to work though.
My first Javascript/React project on this website after having completed the "Front End Development Libraries Certification" unit on freeCodeCamp.org. By this point, the HTML/CSS aspect is a breeze😌the layout for the initial state took about 1:15 h to complete. I also feel pretty comfortable working with React, as I already had to complete 5 projects to earn the fCC certification. Finding out how to make a rating button remain highlighted after clicking was challenging, though😓 And making the ratings button deselect after having clicked on a different button was hell😵 Still, I pulled through and I'm pretty happy with how it turned out. I also had to learn how to export from Codepen and make sure everything's properly formatted beforehand.
Welp, I didn't want to look at anybody's code before giving this one a try, so I'm just now learning about the :focus pseudo-state, lol. Would have come in really handy, but at least I got some more practice with React state changes and conditional rendering, so no complaints.
After deploying my project, the image isn't displaying. What could have gone wrong?
This is my first project having started learning HTML and CSS this August. I forgot a lot of the basic things I had learnt and I had to try a bunch of things to see which worked. This really tested my problem solving skills.
Like fkrunic mentioned, the problem is in the image path. When you were working on your computer, the path to the image file you used included going into the folder called "images". However, you did not upload the images folder to your repository, so the src attribute links to a folder that isn't there. You need to either:
PS: to my knowledge, you can't simply create a folder in github: you need to click on "New file" (or "Add file", don't remember exactly right now. Something like that), then when you have the option of typing the name of a file, press / which will create a new folder. Create a new, random file within this folder, and then rename the folder (if my explanation isn't clear, you can look up tutorials on YouTube, which is what I did, as I was going nuts trying to find a "Create folder" button).
Hello! I recently started learning front-end development as of July of this year. I've been in tutorial hell for quite a bit, but this is the first project I've done without following a tutorial. I think I did pretty good, but I had to google a lot of stuff because it felt like my mind went blank for a good couple of minutes.
In the text "Improve your front-end skills by building projects", how do I remove the indent on the second line of the sentence? I tried text-indent: 0; with no success, so I am wondering if I need to alter something in my HTML or CSS file.
Also, is there anything wrong with my syntax or if there are things I could re-input to make my CSS look a lot less "beginner"? I'm not sure what's the most efficient ways of approaching things, so it would be very nice if someone were to point me to the right direction.
Thank you!
Hello and welcome, Josiah
Congratulations on completing your first project without using a tutorial. Haven't checked out the code, but it looks very good to me .
I've only been studying coding since January so don't take my word as if I'm some sort of expert, but I'm pretty sure the issue you mention has nothing to do with indentation. It's probably just a matter of playing around with other simple properties in your <p> element like font-size, paragraph width, margin, padding, or something like that. Just try different combinations and you'll get it looking right.
My advice though, would be that you don't sweat the small stuff: when it comes to the visual aspect, what's truly important is practicing your layout skills. Not saying that you need it though! Just that that's where the meat of the issue is: learning how to organize or center elements, working with margins and/padding, using the Display and Position proprties, Flexbox and Grid, that sort of stuff. Other things like changing font sizes, families, can be done very quickly, so don't get too hang up on that. Good luck on your coding journey!
While building this project, my main challenge was creating a border radius for the card itself since they were two separate elements near to one another, which was the image and product description section. I was wondering if someone could look over my code and website to see if there is something I missed. A second pair of eyes doesn't hurt. Thank you so much. :)
Not much to add, looks very good to me! The only minor detail that's missing would be setting the cursor to a pointer when hovering over the "Add to cart" button.
