All solutions

I thought this was a very good challenge in that I didn't go in 100% sure how I was going to implement this. Mainly I was wondering how to handle the validation and I hope I didn't go overboard, especially on the card number. I wonder if I'm better off just letting the user input the number without a space or not.

I added my own little touch to the form submission and I'm proud of the animation I made. The way I did this was creating keyframe animations in the css and then adding them in the javascript using the style property during the submit event if the form is valid.

I'm going to refactor this code in some way. Maybe use some helper functions? I'm open to feedback

#UPDATE If you try to put in a visa/mastercard/discover, the logo will now appear in the input and on the top right corner of the front card.

Happy coding!

Matt

Hi Everyone,

Happy New Year!

I'm finishing the new year strong building this game. I would really like some feedback on this one. I'm proud that I did this with very little help as my goal was to test myself and really figure things out on my own.

The way I decided to try and handle the javascript was to create a sequence of functions utilizing the steps provided in the description. Each of these functions utilize a setTimeout so the steps appear in order. In order to switch the screens, I had toggle functionality with inactive and active classes and created new elements based on the id I selected from the buttons(paper, rock, scissors). Selected the computer choice from an array and then compared them as needed.

I ran into two issues:

With the play again button, I did a page reload while holding the score in localStorage. Normally I would reset the values but I couldn't handle the new elements created through the setPlayersChoice and setComputerChoice functions.

In production, I had to redo the routing on my images on those created elements and submitting it without rendering the triangle.

If anyone can give me tips for the future, I greatly appreciate it.

Happy new year and happy coding!

Matt

Here it is... my first advanced solution!

I'm feeling very proud of myself for how far I've come and I am very grateful to Frontend Mentor for helping me throughout my coding journey!

I'd like to improve the style of the cards and wonder how I can get them to stay consistent when filtered out

The dropdown menu gave me problems and I just used a react bootstrap template for the styling. As far as the functionality goes, I was struggling to filter out the countries properly since the filter method kept slicing the original array I was using to render the countries. In the end, I figured out how to render them using the useEffect hook although I don't know if its the best way to do it.

Please leave feedback!

Happy coding!

--Matt

Made with html/css/javascript, the basics. The calculator logic went fine in my opinion but I got stuck with the toggle, as I didn't really know how to handle a 3 way switch like that. Learn something new everyday. I think I handled it in a bit of an weird way. I just turned off the opacity on the non active buttons since using display none and hiding it took them off the page and turned it back on depending on which button is active. Let me know if there's another way to do this. Also, I see now I have mobile problems. I've been practicing alot of javascript and I think I lost a step in my css fundamentals. The reset and equal buttons both gave me alot of problems. I appreciate all feedback.

Thanks!

Matt

Fun challenge. I'd really like to get better at writing cleaner code. Couple of questions:

1. What is the proper way to render images in React from a JSON file?
2. How should I have went about filtering out the tags on the bar?(I have code commented out on the filteringbar.js of my components folder)

It was fun to learn tailwind and otherwise a great challenge!

-Matt

Largest project I've done as of yet. I don't mean to be negative but I'm not proud here. I have some issues on the design end and can't seem to render the images right. I usually don't like to post things unless I think it's perfect but I figured this is practice and I can learn from my mistakes. I was shopping for a new animation library and found framer-motion and I really enjoy using it so far! As always, please give constructive criticism.

Thanks,

Matt

//UPDATED SOLUTION

Fixed the design but still having trouble with the images. On the destination/crew page, you have to click twice to get the right image and the technology images wont change at all. I really want to put this in my portfolio because I've wanted to do this challenge forever, so the help is much appreciated. Thanks!

// FINISHED

Fixed the images by using the ternary operator to switch the images. Dont know why I had so much trouble but glad something worked

Cool new challenge! Did this with vanilla javascript. As always, if you have any suggestions please feel free to share.

Thanks,

Matt

Wow..,

Not your average todo list thats for sure! Took me a week to get it to where I at least feel comfortable putting it up. Feel free to leave feedback!

Thanks,

Matt

This was a real challenge for me. I'm happy with the way this turned out. However, I know my javascript needs major refactoring. Looking for suggestions on the best ways to do that. Thanks!

-Matt

So, this is the first time I've ever used CSS grid on my own. It may not be my best work when I submit this. Are there better practices that I could have implemented on the grid? Also, I have a feeling when I submit this, it's going to be too large. If thats the case, how should I set the size of this grid?

Starting to learn how to build things mobile first and what was uncomfortable at the beginning is becoming more and more my preferred way to do it. I'm happy to hear more opinions about mobile-first vs desktop first as I'm always open to learning.

This is my first coding project in about 3 months and I feel a little rusty. Since I went split screen on my mac airbook I decided to build mobile first. Would love to see how I did and please point out if I'm missing any fundamentals!

Thanks,

Matt

This was a fun one! A way I'd like to improve this for when I press a tip button, for the tip to increment as I change either the bill or person input. I think I should've used react to hold the values of the buttons into a state, but this still works. I'm looking for any sort of feedback on things I may have missed!

Happy Coding -Matt

Moving on up in the world and attempting my first intermediate challenge! The javascript required to do this challenge is new to me and I'm sure its full of flaws so please feel free to let me know what I should improve upon.

(Revised version)This is my first solution in a while. This one had some tricky parts and I have questions for the community.

(Fixed)-How can I make the toggle transition smoother? I want to make the dark/light modes transition and not just switch immediately.

(Fixed)-I struggled with the top border gradient. Is there a way to tap into the border-top-image?

Would like opinions on the animations!

Happy coding everybody :)

-Matt

I could use help on the javascript for this. My approach was going to be to change the innerHTML when the checkbox became inactive, but it did not work and it all went downhill from there. I ended up spending the next couple of hours trying to fix it and decided it wasn't worth the hassle. I figured I would submit what I got and seek help. Any suggestions?

Heres my first solution using javascript. A couple of things that I got stuck on.

-The hover states for the button -Getting the radius for the clip path.

Also, I really want to improve my javascript. I know this challenge didnt have much of it but if somebody can see if I'm using the best practices and provide feedback, much appreciated

-Matt

Any feedback is greatly appreciated!

On mobile, how to I format the star ratings?

Revised version. Still open to any feedback.