Latest solutions
Latest comments
- P@Biggboss7@gerichilli
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.
- Step 1: We create a series of input labels (input comes first, followed by its label). All inputs must have the same name attribute. To ensure accessibility, you should wrap them in a
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>
- Step 2: One thing you should avoid doing is hiding inputs with
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 😉)
Marked as helpful - Step 1: We create a series of input labels (input comes first, followed by its label). All inputs must have the same name attribute. To ensure accessibility, you should wrap them in a
- @Jexinte@gerichilli
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)
andgetPropertyValue(properties)
. You can refer here: Window.getComputedStyle().However, I find both of these methods to have disadvantages. Usually I would do the following.
- Add
.hidden
class to share
<a class="share hidden" href="#"> .... </a>
- I will cut
visibility: hidden
property from class.share
and paste to class.hidden
then I removevisibility: hidden;
from.arrow-down
because it will automatically hide and show along with.share
.hidden { visibility: hidden; }
- Your javascript code should look like this
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 ^^
Marked as helpful - Add
- @kristinbrooks@gerichilli
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
- Add
margin: 0
,padding: 0
to remove default margin, padding of elements
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }
- Create a div tag that wraps img-hero-full, use overflow: hidden for this div, it will hide all areas beyond 100vw created by the image
<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; }
- You don't need to set the width of the body to 100vw as they are not needed in this case, instead you can add overflow-x: hidden to hide the horizontal bar and residuals
body { overflow-x: hidden; }
◆ Regarding the bottom images, I can think of two solutions
- Wrap each two images in a div tag, each time there isn't enough space, the div will drop to a new row and it will take with it 2 images
<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; }
- Adjusted by media queries, for example at breakpoint 768px there is an unexpected new row drop. You can adjust the flex-basic of the img to a number greater than 33.33% at that breakpoint (some such that the total width of 3 images exceeds 100%)
.images img { flex-basis: 40%; }
Hope it helps you 😊
- Add
- @BelumS@gerichilli
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
- I wrapped the card into a div .wrapper. I set the min-height of the .wrapper to 100vh to have a page that has the length >= the screen's height. You also don't need to use
role="body"
for the body tag because it's not necessary. And you don't need to userole="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>
- Then I use display: flex, align-items and justify-content to make the card centered on main
.wrapper { /* */ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
- You can set the footer's position to absolute and put it at the bottom of the page so that it doesn't make the page height exceed 100vh
- In .card you can remove
margin: 20rem auto
. - Now your card is in the center of the screen.
*** 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!
Marked as helpful - I wrapped the card into a div .wrapper. I set the min-height of the .wrapper to 100vh to have a page that has the length >= the screen's height. You also don't need to use
- @TrueKapline@gerichilli
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 ofsection
here Section -
To make images responsive, you can use srcset for
img
orpicture
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 ^^
-
- @Florent-RICHARD@gerichilli
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
Marked as helpful -