How to make the background of the £ symbol lime colored when the "mortgage amount" input is clicked. Using tailwind, I tried focus:bg-lime as well as focus-within:bg-lime but it didn't seem to change anything. (I added lime as a color in my tailwind.config.js; it works in other areas of the project but not here)
Hi!
I believe you're looking for the group class.
You can use it when you want to change a child element's style based on the parent's state - just like in your case.
Your code would look like this (I put the classes in the beginning):
<div className={`group flex w-full border mb-1 focus:border-none focus-within:ring focus-within:ring-lime hover:border-black rounded-lg ${error.mortgageAmount ? "border-red" : "border-slate-500"} `}>
<div className={`group-focus-within:bg-lime w-12 text-center text-lg p-2 rounded-tl-lg rounded-bl-lg ${error.mortgageAmount ? "bg-red text-white" : "bg-slate-100 text-slate-700"}`}>
£
</div>
<input
value={mortgageAmount}
onChange={(e) => setMortgageAmount(e.target.value)}
className="w-full px-3 rounded-br-lg focus:outline-none focus:border-lime rounded-tr-lg h-11"
/>
</div>
This is the underlying CSS selector:
.group:focus-within .group-focus-within\:bg-lime
I'm proud of getting the form so that the NVDA screen reader notifies users of errors in a reasonable way.
For a project this size, I probably wouldn't do too much different. My CSS could use some more organization here.
What challenges did you encounter, and how did you overcome them?I had a hard time taking advantage of native browser HTML5 form validation with React. I wrote a little hook that takes a ref to an element that allows me to use validation information on render, as well as a MessageBoxInput component that helps automate some error messages.
What specific areas of your project would you like help with?Any tips for better accessability, or organization in React projects would be nice!
Hi!
I see you're using CSS modules to style your app. In this example:
<div className={styles["App"]}>
<main className={styles["main"]}>
...
your class names are single words (any string that is a valid object key - e.g. no hyphens), so you could just do this:
<div className={styles.App}>
<main className={styles.main}>
...
It's not a big deal, but looks a bit nicer.
I already know how to use fonts from Google. Moving forward, I will frequently use @font-face in CSS.
I was challenged to use fonts from Google in my CSS file. To solve this, I created several @font-face rules to separate the normal, semi-bold, and extra-bold fonts.
I need help on how to read a Figma file so that the sizes, colors, margins, and padding match the Figma design file.
Hi!
To find out what color, how much padding etc. there is in the design, you just need to simply double-click the element.
For example, if you want to get the padding of the card, hover over the padding with your mouse and find a small line in the middle of the side (https://imgur.com/a/TD6bYnM).
For font sizes, double-click the text, and you should see a panel on the right side of Figma window. There's a "text" section with all data related to fonts.
Double-click and "design" ribbon on the right side are your friends.
box-shadow ...
Hi!
If you want to style a shadow like in the design, you could use this line:
box-shadow: 10px 10px 0 black;
Here's a brief breakdown:
Feel free to experiment with those values to meet your likings.
I am glad it is very similar to design
What challenges did you encounter, and how did you overcome them?no challenges in this one
What specific areas of your project would you like help with?no
Hi!
For the "FAQ" abbreviation, you might want to use abbr tag with the title attribute to explain the abbreviation to the user (a tooltip is shown when user hovers on it):
<h1 className="font-bold text-[2rem] leading-[38px] desktop:text-[3.5rem] desktop:leading-[65.7px] text-purple-dark"> <abbr title="Frequently Asked Questions"> FAQs </abbr> </h1>
You could use the details and summary tags to create the accordion. You wouldn't need to implement open/close functionality, as it's already in place. It would look something like that:
export default function Accordeon({
topic,
content,
open,
onOpenChange,
}: AccordeonProps) {
return (
<details open={open}>
<summary>{topic}</summary>
<p>{content}</p>
</details>
);
}
Great job!
On JavaScript Code I need feedback.
Hi!
You could use data attributes on your buttons and access the associated values in JavaScript rather than rely on innerHTML, like this:
<button class="btn active" data-value="1">1</button>
let value = e.target.dataset.value;
You might also want to prevent user from submitting if they didn't select a rating - you could do that by adding a disabled attribute to the button with a default value of true and after the user selected a rating, set the attribute to false or in the submit event listener early return if rating was not selected (you would need an additional variable, e.g. selectedRating, to store that information), then use it in the handler:
const selectedRating;
submit.addEventListener("click", () => {
if (!selectedRating) return;
...
});
I am proud of completing this challenge.
What challenges did you encounter, and how did you overcome them?I am having difficulty making the website responsive.
What specific areas of your project would you like help with?any feedback
I really like your solution, it looks almost identical when compared to the design :)
One tip for you: consider using em as the unit in your media queries - it adapts better, is more consistent across devices and is future-proof.
I am most proud of effectively implementing a responsive CSS Grid layout for different screen sizes. Next time, I would focus more on enhancing the accessibility and adding animations for a better user experience.
What challenges did you encounter, and how did you overcome them?I encountered challenges with aligning the grid layout correctly for larger screens. I overcame this by thoroughly researching CSS Grid properties and experimenting with various configurations until achieving the desired layout.
What specific areas of your project would you like help with?I would like help with optimizing the CSS for better performance and ensuring cross-browser compatibility. Additionally, feedback on improving the overall design and accessibility would be appreciated.
You could use article instead of div for each of the testimonials - each "card" is independent content (the author, their opinion etc.), so it's a better choice when it comes to semantic HTML.
Using CSS Grid to Position Images within a Card
What challenges did you encounter, and how did you overcome them?There were quite a few considerations for responsiveness. Additionally, many styles were guessed due to not knowing the exact element styles.
What specific areas of your project would you like help with?I want to know how to create a responsive layout more efficiently. Currently, I am specifying elements in px units, but I want to understand whether I should use em, rem, etc., and how to utilize them effectively.
When you set a container's height (body in this example), it's better to use min-height instead of height. In this case, you know how much content you'll have, but when you don't, setting a min-height won't cut out any content that doesn't fit on the screen.
It's better to use relative units, such as em and rem, to set margins, paddings, font- sizes etc.
JS
What challenges did you encounter, and how did you overcome them?Js
What specific areas of your project would you like help with?Js
Hi!
I would implement a function that removes the active class from all other buttons than the clicked one. It would improve user experience, as now it's unsure which button was clicked last.
For buttons, I would add a custom data-value attribute and assign a corresponding value to it, like this:
<button id="5-rating" class="rating-btn" type="button" data-value="5">5</button>
You could access that information like this:
function ratingBtnClicked(e){
if(e.target.classList.contains("rating-btn")){
e.target.classList.toggle("active");
}
defaultScore = e.target.dataset.value;
}
Not much to call out here, in my opinion, but I'm pretty happy with the use of semantic HTML and general css names. I tried to limit how specific the styling was to the content, so it could, in theory, be used for other types of content, but using the same style/coloring.
What challenges did you encounter, and how did you overcome them?The only real challenge I had to work through here was the working through making the design responsive. I ended up relying on fixed dimensions. I'm mostly happy with what's here, but I would really like to figure out how to allow for a bit more dynamic resizing of the content while preserving aspect-ratio of images and such.
What specific areas of your project would you like help with?Any feedback is welcome. I'm far from an expert in frontend dev, but I'm definitely getting more confident from working through these projects.
It's a good idea to include box-sizing: border-box; in your universal selector *:
* { margin: 0; padding: 0; box-sizing: border-box; }
It helps you better control your elements dimensions, especially when working with borders/paddings.
Good job choosing rem as the unit in media queries, you could also use em.
Well done!
As you're using Next, I would split up the code into smaller components and pass data through props - this is what React's about.
Other than that, nice job!
