All solutions

Hello!

This was my first attempt at using Handlebars in a project outside of a tutorial! I definitely struggled to understand how to compile images properly- none of my images or icons are working. 😫 If anyone has any insight on how to get my images to display properly, I'd love to know! I am not sure if it's a handlebars issues, if I'm not using the correct paths, or if it's a webpack issue.

Additionally, why do I get all of those errors in the console? There's sort of 3 things I've noticed in there:

1. The yellow warnings are referring to a completely different repo, that DOESN'T have any bootstrap. Where am I trying to pull from a totally different directory? It doesn't have bootstrap, so I understand why those errors are appearing, but I don't where in the correct project I'm asking anything to find that interactive-rating-component directory.
2. The image errors (404s)- obviously because I'm not doing something correctly, the errors are popping up for images. I think if I figured that out, all of those errors would resolve themselves.
3. Why am I getting 404s for the app.js file and style.css file? Is that something related to webpack? I mean...the styles are loading as expected, the JavaScript I wrote in app.js is working as expected...?

Thanks for any advice or help!

Any suggestions on how to refactor and clean up my discounting functions would be super helpful! They feel a little rough, they're quite nested and do feel repetitive.

Feel free to comment on the PR if that's helpful or easier!

I mainly focused on getting the accordion to function the properly this time. I also used this site to make sure I was following WCAG guidelines for accordions.

Any thoughts or comments to help me with the positioning of the SVGs for larger screens? I messed with the viewBox attribute but still have issues with the final display.

How would I go about creating a time-out so that after a certain amount of time, the thank-you card would go back to display: hidden, and the rating card would come back? Would some sort of setTimeout go in the handleSubmit function?

Similarly, could I do something in that vein where the selected inputs eventually un-select, (maybe like a "reset" button) instead of always needing to select a different input?

I am struggling with the very last password validation. Here's my TS for the password validator:

password: this.formBuilder.control('',
    Validators.compose([
      Validators.required,
      Validators.minLength(8),
      Validators.maxLength(20),
    ])
)

I have 2 *ngIf statements: one to display if the password is left blank, and another to display if the password isn't within the range of the minLength and maxLength. I can only get the blank password *ngIf to work, while the minLength/maxLength won't work 😵‍💫 I cannot get the minLength or maxLength Angular validators to catch the password input, and display the accompanying message. Any thoughts on what I'm missing? Do I need an additional conditional beside having errors in minLength/maxLength & the input being touched/dirty?

<label for="password" name="password">
    <input required name="password" type="password" placeholder="Password" id="password" formControlName="password">
    <div class="error" *ngIf="signUpForm.get('password')!.touched && signUpForm.get('password')!.pristine">
        <img src="../../assets/icon-error.svg" alt="Error!"> 
        <span>Password cannot be empty</span>
    </div> 
    <div class="error" *ngIf="(signUpForm.get('password')!.hasError('minLength') || signUpForm.get('password')!.hasError('maxLength')) && (signUpForm.get('password')!.dirty || signUpForm.get('password')!.touched)">
        <img src="../../assets/icon-error.svg" alt="Error!"> 
        <span>Password must be between 8 and 20 characters.</span>
    </div> 
</label>

I'm not super happy with the functionality. I've been stuck on the validation.

1. If a user misses a field, they get an error. However, if they correct that error, I can't get the newly created element to disappear. Any help there?
2. Similar to my first question, I can't get the field border to change if the user fixes any errors. I can get the font color to change back correctly, but not the border.
3. Because I'm using createElement to get my error Icons & error spans, when they get created, they're bumping the rest of the form fields. Initially I had them all just visibility: hidden, changing to visibility: visible. How do I avoid the content bump?
4. Again, sort of going off the question above, if a user misses a field multiple times, the submit button keeps generating errors over and over again. How can I only allow errors to show up once?

Any feedback on how to improve the build is always welcome!

Hi all. I've been stuck on this FAQ project for quite some time. I finally figured out how to show the answers using vanilla JS (I'm still pretty new with it), and hide when I click on different questions, but I can't seem to get my original styles to revert after clicking off. I left some comments in my script file. I assume it's because of the for...of loop (this is also the first time I've used a for...of loop).

That said, I have a couple of questions/requests:

1. What should I have done differently to make sure those styles revert back? Would you be willing to explain it a little for me? Do I have to do some sort of break?
2. How do I get the answers to hide again if you click on the same question? I toyed with removeEventListener, but didn't really think that was the answer. Should I have put the event listener on the container instead of the question?
3. Why doesn't my "carrot" animation want to trigger? Does it need to be somewhere else, not included in the answer loop?

Thanks for any guidance!

When breaking things down for mobile, are there any best practices on how many media queries to do? Or are there better ways for me to build elements initially so the mobile designs come together faster?

In your CSS files (I haven't messed around with SASS enough to use it yet), where do you typically organize your media queries?

Any feedback is welcome!