C_7 Comments - Answer Overflow

C_7

•Created by Vandana on 8/22/2024 in #front-end

Math in JS.

emm.... This should not happen, because the first line of the function performs the number conversion operation.

  const num = Number(document.querySelector("input").value);

  const num = Number(document.querySelector("input").value);

161 replies

KPCKevin Powell - Community

•Created by Vandana on 8/22/2024 in #front-end

Math in JS.

There are two errors in this function 1. Obtaining the value of decResult 2. Calculation formula for <40 First, let’s talk about problem 1: You will find that your input may have one or two decimal places. When there are two decimal places, the value calculated by decResult is correct. When there is one decimal place, decResult is obviously incorrect, which is why the final result is wrong ————————————————————————————— Decimal part Actual Expected ————————————————————————————— 0.99 99 99 0.05 5 5 0.5 5 50 ————————————————————————————— Let’s talk about problem 2: The following is your code

(wholeNum * 100 + decResult) / 100 + 10
// Take 7.99 as an example
// 7 * 100 === 700
// 700 + 99 === 799
// 799 / 100 === 7.99
// 7.99 + 10 === 17.990000000000002

(wholeNum * 100 + decResult) / 100 + 10
// Take 7.99 as an example
// 7 * 100 === 700
// 700 + 99 === 799
// 799 / 100 === 7.99
// 7.99 + 10 === 17.990000000000002

You will find that your calculation formula is the same as directly [num + 10], there is no difference, because you finally take a floating point number for calculation, instead of converting it into a floating point number that is 100 times smaller after the calculation is completed As Kirin-808 said, You probably want .toFixed() to handle that kind of stuff.

function calc() {
  const num = Number(document.querySelector("input").value);
  const totalElement = document.querySelector(".total");

  // num is not a number
  if (isNaN(num)) {
    window.alert("user input is not a number");
    return;
  }

  // free
  if (num >= 40) {
    totalElement.innerHTML = `$${num}`;
    return;
  }

  // $10 shipping
  const res = Number.parseFloat(num + 10).toFixed(2);
  totalElement.innerHTML = `$${res}`;
}

function calc() {
  const num = Number(document.querySelector("input").value);
  const totalElement = document.querySelector(".total");

  // num is not a number
  if (isNaN(num)) {
    window.alert("user input is not a number");
    return;
  }

  // free
  if (num >= 40) {
    totalElement.innerHTML = `$${num}`;
    return;
  }

  // $10 shipping
  const res = Number.parseFloat(num + 10).toFixed(2);
  totalElement.innerHTML = `$${res}`;
}

161 replies

KPCKevin Powell - Community

•Created by Shadow_Lurker on 8/5/2024 in #front-end

Can someone explain to me why this is happening?

28 replies

KPCKevin Powell - Community

•Created by Ellie <3 on 8/1/2024 in #front-end

How to define max width of flex grow container

1、Understand flex-grow and flex-shrink. 2、Understand the meaning of the flex shorthand. see： https://developer.mozilla.org/en-US/docs/Web/CSS/flex#constituent_properties

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: monospace;
    color-scheme: dark;
}

.grandparent {
    height: 100vh;
    display: flex;
    flex-direction: column;

    /* This is to ensure viewport size. */
    overflow: hidden;
}

.parent {
    /* This is to occupy the entire bottom half of the page. */
    flex: 1;
    display: flex;

    /* This is to make the bottom half scrollable. */
    overflow-y: auto;
    border: 4px solid #fff;
}

.child1 {
    flex: 0 0 100px;

    /* This is to make the left sidebar scrollable. */
    /* This appears again to allow for separate control. */
    overflow-y: auto;
    background-color: steelblue;
}

.child2 {
    flex: 1;

    /* This is to make the main content area scrollable. */
    /* This appears again to allow for separate control. */
    overflow-y: auto;
    background-color: seagreen;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: monospace;
    color-scheme: dark;
}

.grandparent {
    height: 100vh;
    display: flex;
    flex-direction: column;

    /* This is to ensure viewport size. */
    overflow: hidden;
}

.parent {
    /* This is to occupy the entire bottom half of the page. */
    flex: 1;
    display: flex;

    /* This is to make the bottom half scrollable. */
    overflow-y: auto;
    border: 4px solid #fff;
}

.child1 {
    flex: 0 0 100px;

    /* This is to make the left sidebar scrollable. */
    /* This appears again to allow for separate control. */
    overflow-y: auto;
    background-color: steelblue;
}

.child2 {
    flex: 1;

    /* This is to make the main content area scrollable. */
    /* This appears again to allow for separate control. */
    overflow-y: auto;
    background-color: seagreen;
}

3 replies

KPCKevin Powell - Community

•Created by Abc on 7/31/2024 in #front-end

How can I ensure that the container is at least as wide as the longest text?

If you are training html, css You can take a look at this https://codepen.io/Q-C_Q-C/pen/gONgJEW Or try using a UI framework to do it https://ui.shadcn.com/docs/components/dropdown-menu

7 replies

KPCKevin Powell - Community

•Created by anes039 on 7/23/2024 in #front-end

Responsive Layout

simple example: https://codepen.io/Q-C_Q-C/pen/JjQKVyV

22 replies

KPCKevin Powell - Community

•Created by Boeroe on 11/6/2023 in #front-end

Mobile nav bar

 /* Method 1 */
  .navbar a {
    /* display: block; */
    font-size: 1.8rem;
    /* margin: 3rem 0; */
  }


  /* Method 2 */
  .navbar a {
    display: block;
    font-size: 1.8rem;
    /* margin: 3rem 0; */
    width: fit-content;
  }

 /* Method 1 */
  .navbar a {
    /* display: block; */
    font-size: 1.8rem;
    /* margin: 3rem 0; */
  }


  /* Method 2 */
  .navbar a {
    display: block;
    font-size: 1.8rem;
    /* margin: 3rem 0; */
    width: fit-content;
  }

There is a difference between these two ways of writing. The reason for this problem is that the box element will occupy a full line by default. It is recommended to add this at the beginning of the code

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

10 replies

KPCKevin Powell - Community

•Created by Boeroe on 11/6/2023 in #front-end

Mobile nav bar

That's because you gave a big margin

 .navbar a {
    display: block;
    font-size: 1.8rem;
    /* margin: 3rem 0; */
  }

 .navbar a {
    display: block;
    font-size: 1.8rem;
    /* margin: 3rem 0; */
  }

10 replies

KPCKevin Powell - Community

•Created by Boeroe on 11/6/2023 in #front-end

Mobile nav bar

@media (max-width: 768px) {
    .header {
    background:  rgb(36, 1, 58);
    }

    #menu-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 4%;
        background: rgb(36, 1, 58);
        box-shadow: 0 .5rem 1rem rgba (0, 0, 0, 2);
        flex-direction: column;   /* Key code */
    }

    .navbar a {
        display: block;
        font-size: 1.8rem;
        margin: 3rem 0;
    }
}

@media (max-width: 768px) {
    .header {
    background:  rgb(36, 1, 58);
    }

    #menu-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 4%;
        background: rgb(36, 1, 58);
        box-shadow: 0 .5rem 1rem rgba (0, 0, 0, 2);
        flex-direction: column;   /* Key code */
    }

    .navbar a {
        display: block;
        font-size: 1.8rem;
        margin: 3rem 0;
    }
}

10 replies

KPCKevin Powell - Community

•Created by Bardacoon on 11/6/2023 in #front-end

Grid as a child of a flex doesn't work properly

<div class="flex h-screen flex-row gap-2 p-2">
  <!--  -->
  <aside>
    <div class="grid grid-cols-2 gap-2">
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
    </div>
  </aside>

  <!--  -->
  <div class="min-w-[50%] flex-1 rounded-md bg-red-500">
    <div>aclaksdjfsdfa claksdjfsdfaclaksdjfsdfacla ksdjfsdfaclaksd jfsdfaclaksdjfsdfaclaksdjfsd faclaksdjfsdf aclaksdjfsd faclak sdjfsdfa claksdjfsdf</div>
  </div>
</div>

<div class="flex h-screen flex-row gap-2 p-2">
  <!--  -->
  <aside>
    <div class="grid grid-cols-2 gap-2">
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
    </div>
  </aside>

  <!--  -->
  <div class="min-w-[50%] flex-1 rounded-md bg-red-500">
    <div>aclaksdjfsdfa claksdjfsdfaclaksdjfsdfacla ksdjfsdfaclaksd jfsdfaclaksdjfsdfaclaksdjfsd faclaksdjfsdf aclaksdjfsd faclak sdjfsdfa claksdjfsdf</div>
  </div>
</div>

5 replies

KPCKevin Powell - Community

•Created by filipniik on 11/6/2023 in #front-end

Maybe a stupid question..

I wrote test code and your problem does not occur. You can take a look at this, it looks pretty good. https://marketplace.visualstudio.com/items?itemName=yandeu.five-server

6 replies

KPCKevin Powell - Community

•Created by filipniik on 11/6/2023 in #front-end

Maybe a stupid question..

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

6 replies

KPCKevin Powell - Community

•Created by imTypθ on 11/4/2023 in #front-end

Vertical squishing of elements even with overflow-y: scroll

Although it looks okay, there are still many problems inside

6 replies

KPCKevin Powell - Community

•Created by imTypθ on 11/4/2023 in #front-end

Vertical squishing of elements even with overflow-y: scroll

Your code looks like a layout exercise. There seems to be a lot of unnecessary padding, margin, width, and height. When you make grid constraints, you should consider whether it is necessary to declare the dimensions of the elements.

6 replies

KPCKevin Powell - Community

•Created by imTypθ on 11/4/2023 in #front-end

Vertical squishing of elements even with overflow-y: scroll

https://codepen.io/Q-C_Q-C/pen/MWZNxdx

6 replies

KPCKevin Powell - Community

•Created by imTypθ on 11/4/2023 in #front-end

Vertical squishing of elements even with overflow-y: scroll

.mainContainer > * {
  width: 25.5vw;

  background: var(--main-color);

  margin: 0.5vw;
  padding: 0.5vw;

  border-radius: 0.25vw;

  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* Key issues */

  display: grid;

  gap: 3vh;

  overflow-y: scroll;
}


.mainContainer > * > .listElement {
  position: relative;
  background: #fff;
  width: 90%;
  height: 20vh;

  background: var(--bar-color);

  border-radius: 0.25vw;
  padding: 0.5vw;

  display: grid;

  grid-template-areas:
    'name name'
    'desc desc'
    'text date';
  /* grid-template-rows: 25% 60% 15%; */
  /* Key issues */
  grid-template-columns: 50% 50%;
  grid-row-gap: 0.5vh;
}

.mainContainer > * {
  width: 25.5vw;

  background: var(--main-color);

  margin: 0.5vw;
  padding: 0.5vw;

  border-radius: 0.25vw;

  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* Key issues */

  display: grid;

  gap: 3vh;

  overflow-y: scroll;
}


.mainContainer > * > .listElement {
  position: relative;
  background: #fff;
  width: 90%;
  height: 20vh;

  background: var(--bar-color);

  border-radius: 0.25vw;
  padding: 0.5vw;

  display: grid;

  grid-template-areas:
    'name name'
    'desc desc'
    'text date';
  /* grid-template-rows: 25% 60% 15%; */
  /* Key issues */
  grid-template-columns: 50% 50%;
  grid-row-gap: 0.5vh;
}