Hi Everyone, please help me with these issues :
I hope you guys can help me to solve these issues. Thankyou in advance.
Hi Michael, Nice to meet you 😊,
I hope my following answers can help you
Q1. Yes, you can completely implement tip select with radios, and it is a best practice, much better than using div. Getting form data from a div tag will be more complicated and inefficient than getting it from a form element.
fieldset tag. (References: fieldset)Â <fieldset>
<legend>Select Tip %</legend>
<div>
<input name="tips" type="radio" value="5" />
<label for="tip-5"> 5% </label>
<input name="tips" type="radio" value="10" />
<label for="tip-10"> 10% </label>
<input checked="checked" name="tips" type="radio" value="15" />
<label for="tip-15"> 15% </label>
<input name="tips" type="radio" value="25" />
<label for="tip-25"> 25% </label>
<input name="tips" type="radio" value="50" />
<label for="tip-50"> 50% </label>
<input name="tips" type="number" value="" placeholder="Custom" />
</div>
</fieldset>
display: none. Â You can hide them like this to ensure web accessibility (I copied from Tailwind CSS)position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
Step 3: Create styles for the labels. Their styles are what you wrote for the div tag (your tip select button).
Step 4: Since the input and the label (with the for attribute being the id of the input) are connected, when you click on a label, you will also select the radio button corresponding to that label. So when a radio is selected, its corresponding label will be added with the class selected . This can be achieved through CSS using CSS Combinators. Here I use +
input:checked + label {
color: hsl(183deg, 100%, 15%);
background-color: hsl(172deg, 67%, 45%);
}
We're done with it. Here is my solution: Github link Live
Q2. In response to the second question, I see that your form can be reset using the reset button, but the input fields must still be filled out.Â
I would be very grateful if you star my github repo (Since I'm in the process of looking for a new job 😉)
Hello all ,
Could I get some feedback especially on two things :
Thanks for reading !
Hi Yokke, congratulations on completing the project
I have tried console.log condition to show shareContainer when share button is clicked and its result will be false. The first time, when you click the button, it will execute the statements in the else which is to hide the shareContainer
console.log(shareContainer.style.visibility == "hidden" && arrowDown.style.visibility == "hidden");
This happens because element.style.properties is read-only and returns the results of inline-styles, i.e. styles that you put directly into the tag. You can read more about it here HTMLElement.style
If you want to read the value in the css file you can use getComputedStyle(element) and getPropertyValue(properties). You can refer here: Window.getComputedStyle().
However, I find both of these methods to have disadvantages. Usually I would do the following.
.hidden class to share<a class="share hidden" href="#">
....
</a>
visibility: hidden property from class .share and paste to class .hidden then I remove visibility: hidden; from .arrow-down because it will automatically hide and show along with .share.hidden {
visibility: hidden;
}
shareButton.addEventListener("click", () => {
if (shareContainer.classList.contains("hidden")) {
shareContainer.classList.remove("hidden");
shareButton.style.color = "#F7FCFF";
shareButton.style.background = "#6F839B";
} else {
shareContainer.classList.add("hidden");
shareButton.style.color = "#718095";
shareButton.style.background = "hsl(210, 46%, 95%)";
}
});
Hope it helps you ^^
I think this went ok. I definitely struggle with a lot of trial and error. ðŸ˜ðŸ˜‚ In the future I will work on learning to make transitions smooth at the break points, but I'm fine with it for my first page. I had to learn lots of new things so that was good.
The only thing that really bothers me is I would really like the the bottom images (from the square of four images in the mobile view) to not pop up the the upper row one at a time. It looks really bad when there is a row of three on top of a row of one. I'd really like them to stay in a square until there is enough space for them both to pop up to the top row.
Hi Kristin. Congratulations on completing the wonderful project 💖.
â—† Your page is quite similar to the design, but I notice that the horizontal scrollbar is still visible and your page still has a bit of horizontal excess. That is caused by this code:
.img-hero-full {
width: 110vw;
transform: translate(-5vw);
}
⟹ You can fix them and still make the image wider than 100vw
margin: 0, padding: 0 to remove default margin, padding of elements*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
<div class="img-hero-wrapper">
<img class="img-hero-full" src="assets/tablet/image-hero.png" alt="little circles filled with images of different people's faces">
</div>
.img-hero-wrapper {
overflow: hidden;
}
body {
overflow-x: hidden;
}
â—† Regarding the bottom images, I can think of two solutions
<div class="images">
<div class="images-group">
<img />
<img />
</div>
<div class="images-group">
<img />
<img />
</div>
</div>
.images-group {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.images img {
flex-basis: 40%;
}
Hope it helps you 😊
This is my first solution to FrontEnd Mentor, and was fairly simple, with minor nitpicks.
Feedback is welcome for the following questions:
Hi Bel Sahn, Congratulations on completing the first challenge, nice to meet you.
First of all, I would like to answer your questions
*** I have center this card as follows
role="body" for the body tag because it's not necessary. And you don't need to use role="main" for the section because it's incorrect. You can read about the section tag here Section - MDN docs<div class="wrapper">
<section class="card">
</section>
</div>
.wrapper {
/* */
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
margin: 20rem auto.*** You can find colors in style-guide.md, or if not, I usually use the EYE DROPPER extension to search for colors. Since the font is thin, I usually open the image in a separate tab, zoom in, and use the eye dropper to detect its color.
*** Box shadow is
box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.05)
You can see the shadow is wide, blurred, the bottom of the card has shadow but the top is not. In such a case usually the y-offset and blur-radius will be large.
*** I think you use enough css, but you should limit the use of roles in the html and if you do, read about it and be careful with it.
*** Also we should not set the html font-size to 62.5%. It will be hard to combine your CSS with bootstrap because the html in bootstrap was 100%. You can read the explanations here. Never resize html/root font size down to 62.5%
Have a nice day and happy coding!
Media queries were tough in this one (￣ヘ￣) I will be grateful for feedback
Hi Kapline, your project is beautiful and it almost looks same as the design. There are some points that I think you should fix to make it better
If you use tag section, I think you should use it for cards instead of using 1 section for images and 1 section for content. You can refer to the meaning and usage of section here Section
To make images responsive, you can use srcset for img or picture tags to let the browser decide itself, you don't need to use media queries and separate img tags for each device.
You can refer how to do it here
Happy codding ^^
The solution did not perfect but I will try to improve it.
Hi Grizoba, congratulations on completing this project. I think your project will look better if you add some points
Adjust the font size to be larger, the font color to be the same as the design, make the padding of the buttons and inputs a bit larger.
You should wrap the inputs in a form element, use the calculate button for submitting the form and the reset button for resetting the form, I think using the semantic element and taking advantage of the built in function for the form in JS will help the code neater and easier to understand and manage.
In the Select Tip % section, I think it will be more suitable for the form if you use <input type="radio"> elements with the same name. And to make them look like the design, you can hide these radios and show them by their labels. You can refer how to do it here, although it is a bit different, but the way to do it is similar [How To Build Tabs only with CSS](https://medium.com/allenhwkim/how-to-build-tabs -only-with-css-844718d7de2f)
Finally, I think you should round Tip Amount and Total because in case of irrational numbers, their length will break the layout.
Have a nice day and happy coding
There was something I couldn't quite figure out with my state , the dice button doesn't seem to update if you click on it too fast consecutively... almost like you have to wait 1 second before being able to see a new string. I tried to use prevState to prevent batching re-renders but I don't think that helped. I would love if this was smoothly/quickly updating the advice data each time I clicked the button.
The glowing hover state looks a little odd to me so any tips on how to make it more nuanced/pretty would be great!
I improvised a bit of a title page/homepage because when my default state (an empty advice object) would render on refresh, I'd have just quotation marks and "advice #..." without any data yet. I ended up tinkering with conditional rendering and template literals to achieve somewhat of a homepage based on if the dice button had fetched the data for my object in state yet (for example, was advice undefined? if so, render "Welcome" string", etc). Could I have done this another way that's maybe more efficient?
It was also my first time using Vercel and it was super easy to set up and get going.
Hi Alice, you did a great job. However, I think you can make it better at some points.
blur-radius of box-shadow by a very large number. For example:.Dice-button:hover {
box-shadow: 0 0 60px 5px #53ffaa;
}
The exact number in the design is box-shadow: 0 0 64px #53ffaa; (spread-radius is 0)
const fetchAdvice = async () => {
};
In my opinion the next data update will depend on the network speed and the API we are using. data can be returned only when the fetch is successful and I read at https://api.adviceslip.com/ that Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice..
const fetchAdvice = async () => {
fetch('https://api.adviceslip.com/advice')
.then(response => response.json())
.then(data => setAdvice({...advice, id: data.slip.id, text: data.slip.advice}));
};
const [advice, setAdvice] = useState(null)
//...
//...
return (
<div className="Card">
{advice ? (
<>
<h4 className="Advice-id">
Advice # {advice.id || "your default text if advice has no id"}
</h4>
<h1 className="Advice-text">{advice.adviceText || "your default text if advice has no text"}</h1>) : (
<>
<h4 className="Advice-id">Advice Generator 3000</h4>
<h1 className="Advice-text">
Welcome to the Advice Generator. Click the Dice below to start.
</h1>)}
</div>
);
I'm not good at React, if there are any mistakes above, I look forward to discussing them further with you. Anyway, have a nice day and happy coding ^^
I had some problems with the header image and two images (egg and glass) with their sizes since they would just grow bigger and zoom in and couldn't really figure out how to solve it. If anyone has any idea please share.
Any other feedback is also welcome :)
About the header, I think it's because you set background-size: 100%; the width of the image will be equal to the screen width and its height will shrink to keep the aspect ratio, try setting with background-size: cover; so that it can fill the header space. Hope it helps you.
