All solutions

What challenges did you encounter, and how did you overcome them?

One challenge I faced was checking if the date was invalid. What I found was that if the other input fields were invalid (i.e Day was set to something higher than 31), then both error messages would pop up. My solution was to do an initial check to see if any input elements contained the aria-invalid="true" attribute first, then check if the date was invalid.

What are you most proud of, and what would you do differently next time?

One thing that I did like was being able to style the radio button and checkbox with CSS by using the accent-color attribute with a specified width and height to make a size for the radio buttons and checkmark. See code below:

.form__input-radio {
  display: block; 
  width: 18px; 
  height: 18px; 
  accent-color: var(--clr-green); 
}

In this way, it made the challenge a lot easier to handle since I didn't need to use divs to create a custom element.

Doing this challenge differently:

• Using divs to style the components
• Look into creating custom web components with JavaScript, HTML, and CSS (if anybody has any resources on that please lmk, mahalo in advance).

What specific areas of your project would you like help with?

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?

What are you most proud of, and what would you do differently next time?

I like how I was able to add a loading event for the webpage in addition to the button so that when users enter the page, the advice slip will load as well instead of it being empty and having to press the button to get a random piece of advice.

What I would do differently / improving this project:

• Implementing some sort of loading screen or visual component to show that the advice generator is working.
• Maybe a way to disable the button clicks for two seconds or a visual indicator that the user has to wait before attempting to generate a random piece of advice again.

What specific areas of your project would you like help with?

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()

What challenges did you encounter, and how did you overcome them?

I had an initial challenge with getting the Intro Component to line up with the Signup Form. However, something that I failed to realize was that I did not style the signup form yet with all it's margins and padding so the layout / lining up would be off regardless. Once I realized that and finished styling the form, I was able to achieve the layout in the design file.

What are you most proud of, and what would you do differently next time?

I'm proud of being able to use CSS Grid to accomplish the component versus Flex. I definitely use Flex more because I am more comfortable with using it - so using Grid helped to challenge me with completing the component. Another thing that I'm proud of is actually using Paint 3D and the Photo tool with Windows to markup the design files to get the layout that I wanted to achieve with Grid. It is definitely something that I should've used earlier to get better at visualizing and creating layouts with Flex and/or Grid.

What specific areas of your project would you like help with?

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?

What are you most proud of, and what would you do differently next time?

Using this segment of code:

&:has(.button:hover) :is(.email__field:invalid, .email__field:placeholder-shown) {
  border-color: var(--clr-red); 
}

I was able to accomplish the border color change for an empty email or invalid email input using only CSS. Then in JavaScript, I handled the displaying of the error message based on the state.

What challenges did you encounter, and how did you overcome them?

I had problems dealing with the mobile design where the button and email input took up the same amount of space. How I overcame that was to take advantage of Flex's flex-basis and flex-grow so that at larger screen sizes, the email input is larger than the button, and at smaller screen sizes, they take up the same space. See code below:

form {
  display: inherit; 
  flex-wrap: wrap; 

  & > * {
    flex-grow: 1; 
  }   

  & .email__field {
    flex-basis: 40ch
  } 

  & .form__btn {
    flex-basis: 20ch
  }

What are you most proud of, and what would you do differently next time?

I am proud of being able to complete this challenge pretty quickly and also with getting more comfortable with CSS Grid and Subgrid.

What challenges did you encounter, and how did you overcome them?

I initially had the challenge with dealing the responsiveness of CSS Grid and Subgrid, when I finished the setup, I found that the card components didn't wrap. How I overcame that was to use the span keyword followed by the amount of rows created by the browser. See code below:

.columns__card {
  display: grid; 
  grid-template-rows: subgrid; 
  grid-row: span 4; 
}

What are you most proud of, and what would you do differently next time?

I am pretty proud of completing this challenge because it is helping me get even more comfortable with HTML, CSS, and JavaScript.

What specific areas of your project would you like help with?

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?

What are you most proud of, and what would you do differently next time?

I am proud of my JS file that deals with expanding the sections because it helped me get comfortable with JavaScript and also helped me with understanding how to implement the script tag in the head tag of your HTML file. See JS code below:

function updateFAQ(questionElement) {
    const img = questionElement.querySelector("img")
    const faqAnswer = document.getElementById("faqAns" + questionElement.id.slice(7,))

    // Expand or Minimize section based on state of img element
    if (img.src.endsWith("/path/to/svg-plus icon")) {
      img.src = "/path/to/svg-minus icon"
      img.alt = "Minimize Icon" 
      faqAnswer.style.maxHeight = "1000px" // Help with the transition
      faqAnswer.ariaHidden = "false" 
    } else {
      img.src = "/path/to/svg-plus icon"
      img.alt = "Expand Icon"
      faqAnswer.style.maxHeight = "0" // 
      faqAnswer.ariaHidden = "true" 
    }
  }

  faqQstnOne.addEventListener("click", () => updateFAQ(faqQstnOne))
  ... do the same thing for the other faq sections

If I had to do this project differently, I do want to experiment and see if this project is possible with only HTML and CSS.

What challenges did you encounter, and how did you overcome them?

I had initial issues with actually getting the transition for the expanding and minimizing of the answer section. What I first tried was to do transition: height 250ms but found that it wasn't transitioning. My solution to this was to actually use max-height then transition that instead.

What specific areas of your project would you like help with?

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!

What are you most proud of, and what would you do differently next time?

I like the media query that I used to change how the webpage looks on larger screen sizes.

@media screen and (min-width: 426px)  {

    main {
        min-height: 100vh; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
    
    .results {
        display: flex; 
        flex-direction: row; 
        justify-content: center; 
        background-color: white; 
        border-radius: 20px; 
        box-shadow: 5px 5px 5px #ccc; 
    }

    :is(.results__card, .results__scores) {
        max-width: 35ch; 
        width: 50%;  
        border-radius: 20px; 
    }

}

What challenges did you encounter, and how did you overcome them?

Initially, I started off the challenge with a Desktop-First Approach then try to work my way down to smaller screen sizes. However, I found that there were a lot more problems that I anticipated - particularly, with making sure that the components still look good without overflowing out of it's container. I found that switching to the Mobile-First approach then sizing up for bigger screen sizes became much more useful and helped me solve the problem.

What specific areas of your project would you like help with?

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.

What are you most proud of, and what would you do differently next time?

• Using CSS Flex to position the card component and then using Flex to do the layout for each section of the card.
• Responsiveness of the card without using media queries.

What challenges did you encounter, and how did you overcome them?

My challenges came from actually getting the box-shadow to fit the design of the card component. I did look at the MDN Web Docs for box shadow to see what the different values meant and how I could use them to create the shadow to the card.

What specific areas of your project would you like help with?

N/a

What are you most proud of, and what would you do differently next time?

I am most proud of the responsiveness of the QR Code Component. Initially, when I had it, the text or image would overflow outside of the card and really got me thinking as to how I could solve it. When I was able to solve, that feeling was great because I had made a component that looked good across different screen sizes without needing to use a media query.

What challenges did you encounter, and how did you overcome them?

My challenges came off with figuring out which semantic HTML elements to use and also how to import web fonts.

When it came to the HTML elements, I consulted the Mozilla Web Docs - HTML to see what attributes were widely supported and their use cases to help me decide which elements to use in my source code.

For web fonts, I decided to follow the documentation in the Google Fonts API support and used the link tag to import the font-family then create a CSS class to get the two font variants.

What specific areas of your project would you like help with?

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.