Skip to content
OverviewSolutions
25
Comments
4
Julie_Gz
@Julie-Gz

All comments

  • Gift Richard•520
    @fibonacci001Submitted over 1 year ago

    Although using CSS alone worked, it was a little buggy. I would appreciate any feedback you may have on it

    FAQ Questions

    2
    Julie_Gz•450
    @Julie-GzPosted over 1 year ago

    Hi Gift. I agree with Timothy, you might need to add more media queries. There are 5 common break points: <481px for mobile devices 481px - 768px for Ipads and Tablets 769px - 1024px for small screens and laptops 1025px - 1201px for desktops

    1201px for Extra large screens.

    Try creating media queries for these break points and hopefully it will fix the issue. It's also important to pay attention to semantics when writing code. While your code is good, it is best to use proper semantics because it helps browsers better interpret the content of the page, which is important for accessibility. You can start by wrapping your code in a main element instead of a div. I hope you find this helpful. All the best with your journey :)

    1
  • Julie_Gz•450
    @Julie-GzPosted over 2 years ago

    Hello, I only managed to complete this challenge today with the help of others in the community and it was a struggle but I'll share my thought process with you. The first step for me was to know the function or job of every field, writing it down or typing it in a text file helps. For example you know that you need the values in the bill and number of people fields as well as the tips, that means you need to return the value and assign it to variable. So you created a variable to hold the values of the bill, number of people and tip, next you want to start calculating so you create a function that will do that but you don't want it to start calculating as soon as the page loads because that will give you NaN(Not a Number) since there's no input, that means you need a trigger something to tell it when to start calculating. By understanding what each element does you can see how they connect with each other. So my advice would be to write your idea down and create the basic variables and functions and then going back to your notes to see how they will work together and then, if you want, you can draw a flow chart. Hope you find this helpful. If you need help with coding javascript let me know, I got a lot of help from the community and I'm eager to share what they taught me. One last thing, if you want to get rid of the scroll bars in the input fields you can use the code below input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    input[type=number] { -moz-appearance: textfield; }

    Marked as helpful
    1
  • Julie_Gz•450
    @Julie-GzPosted over 2 years ago

    Hello Paula, You can use the following code to get rid of the scrollbar in the input fields and then you can change the background color to white using the background property in css.

    This removes the scrollbar from Edge and explorer input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } This removes the scrollbar from mozilla firefox input[type=number] { -moz-appearance: textfield; }

    Marked as helpful
    0
  • Bektemir•35
    @bektonixSubmitted over 3 years ago

    Hello! I am new here. Honestly, I didn't tried as hard as I should on this first project. There are 3 unsolved tasks:

    1. Responsive images - I think it meant to be something like this: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
    2. Violet overlay (or what is it) - I tried to implement it with complementary div and its 50% opacity. But it's not what it should be :(
    3. Card's margin. On desktop and mobile there is different percentages, so what unit should I use? Thank you beforehand. Have a good day!

    Stats preview card component

    3
    Julie_Gz•450
    @Julie-GzPosted over 3 years ago

    Hello Bektemir,

    I just completed this challenge myself. I'm sure there are better ways to do this but I'll share what I did and hopefully you will find it useful.

    For the responsive images I used the <picture> tag in the html document. the picture tag allows you to tell the browser which image to use in what screen sizes. The "media" is similar to the media query in css, it allows you to set the conditions under which the image specified in the srcset will be displayed. If you want to know more google "picture tag mdn". <picture> <source media="(max/min-width: )" srcset="image source 1"> <source media="(max/min-width: )" srcset="image source 2"> <img src="fallback image for browsers that don't support the picture tag" alt=""> </picture>

    For the overlay, create a div(I'll name it parent here) and inside that div you will add your image and another div called overlay or anything you want. Creating the overlay affect relies on css, so in your css file set the "parent" div' to position: relative, and the "overlay" div to position: absolute, set the height and width in the "overlay" to 100% to cover the entire "parent" div and set the top, left, right, and bottom properties to 0, this will have it cover everything from edge to edge. Also use hsla. In the stule guide you'll find the colours you should use in the design, take the purple colour and change the colour unit from hsl to hsla, the (a) allows you to control the opacity with 1 being opaque and 0 being transparent, play around with it until you find what works best, between 0.4 and 0.6 should be fine I think.

    For your last question on which unit to use, I think em works well, you could use % and vw, but I can't give you advice on how because I don't use them, I find it hard to predict how they'll turn out in different screen sizes, especially vw unit, but maybe someone with a better understanding could guide you on this one.

    All the best with your work

    Marked as helpful
    1