Skip to content
OverviewSolutions
13
Comments
9
Levi Kuhaulua
@LeviKuhaulua

All solutions

  • Submitted 4 months ago

    Age Calculator with ARIA Attributes

    • HTML
    • CSS
    • JS
    0
  • Submitted 6 months ago

    Contact Form with Flex and ARIA Attributes

    • HTML
    • CSS
    • JS
    1

    How often should we be placing aria-label for our components? Should this be for every major section that is apart of your component or should this be used for sections / parts where they may not be some sort of indicator to describe the content within?

  • Submitted 6 months ago

    Advice Generator App with Accessibility Elements

    • HTML
    • CSS
    • JS
    • API
    0

    One thing that I did have a question about in regards to best practices regarding JavaScript async/await and fetch is when you use .then() or .catch(), should you be nesting them? I suck at explaining lol so see code below for what I mean:

    getAdvice()
  .catch()

OR 

getAdvice()
.catch()
  • Submitted 6 months ago

    Intro Component with Signup Form using CSS Grid

    • HTML
    • CSS
    • JS
    0
  • Submitted 6 months ago

    Single Price Grid Component with CSS Grid

    • HTML
    • CSS
    1

    I wonder if a media query was necessary to get the components to wrap at smaller screen sizes. I did the following to make the components take up all the available space on mobile screen sizes:

    @media (width < 426px) {
  .wrapper {
    margin-block: 1rem; 
    & > * {  grid-column: span 2; }
  }
}

    What I tried was to initially do was grid-template-columns: repeat(auto-fit, minmax(320px, 1fr); to get it to wrap, but found that the components would not wrap or some components (specifically the pricing) would end up larger than the others. Is there a better function or unit to use inside the repeat() function to accomplish the mobile design without a media query?

  • Submitted 6 months ago

    Coming Soon Page using Flex and JavaScript

    • HTML
    • CSS
    • JS
    0
  • Submitted 6 months ago

    Responsive Card Columns Layout with CSS Grid and Subgrid

    • HTML
    • CSS
    0
  • Submitted 6 months ago

    Interactive Rating Component with CSS Nesting and JavaScript

    • HTML
    • CSS
    • JS
    1

    I had an initial problem when it came to getting the value associated with the radio button in JavaScript. What I did in my CSS was to put a display: none for the input tag and then style my label based on the design file.

    In my JavaScript I did the following to retrieve the value:

    const ratingOptions = document.querySelectorAll('input[name="rating"')
function getRating() {
  ratingOptions.forEach(e => {
    if (e.checked) {
       return e.value
     }
  }
}

button.addEventListener('click', () => {
  let value = getRating() 
  ... rest of code where I get the element associated for the rating and replace with the value variable
}

    However, I found that I kept getting undefined after I clicked the submit button. What could be causing the undefined value?

  • Submitted 6 months ago

    FAQ Accordion with ARIA attributes and Media Queries

    • HTML
    • CSS
    • JS
    0

    I noticed that the transition for the expanding and minimizing of the answer was still kinda snappy. So I tried this way in JavaScript:

    window.getComputedStyle(faqElement).height

    then assign that to my faqAnswer element's height through faqAnswer.style.height. However, the element would not expand or minimize when I click on the question.

    My questions are - why my implementation above was causing issues and also how I would go about making the transition for expanding and minimizing smooth using JavaScript.

    Thank you in advance for any feedback that you guys have!

  • Submitted 6 months ago

    Mobile First Design for Results Summary Component

    • HTML
    • CSS
    0
  • Submitted 6 months ago

    Social Links Profile with CSS Grid and min function

    • HTML
    • CSS
    0

    I want to learn more about the CSS min function. More specifically, any tips and tricks that you may have regarding implementing the min function: such as units to use and use cases. If there is also an article or video that you think best explains the different CSS functions, I would like to know that as well.

  • Submitted 6 months ago

    Responsive Blog Preview Card with CSS Flex

    • HTML
    • CSS
    0

    N/a

  • Submitted 6 months ago

    QR Code Component with Semantic HTML Elements

    • HTML
    • CSS
    2

    My implementation for getting the card component to be in the middle of the screen was to do the following:

    .container {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    translate: -50% -50%; 
}

    Initially, I was planning to position the card component using Flex but was having issues regarding the positioning. The way I had it was to make the body tag have a display of flex then do flex-direction: column, justify-content: center, and align-items: center but noticed that the card was still positioned at the top. I was wondering the different ways you could position the card component in the middle using Flex or Grid and also the benefits of using those methods versus the implementation I had done above.