All solutions

Checking out Next js with TypeScript. Mult-page website with a great look and feel. Very exciting project to work on.

Hey all! Uploading my solution to the age calculator project. I used react, typescript and tailwind. Come check it out!

Hey all! Check out my solution to this challenge.

Hey everyone! This is my first advanced challenge submission. I think there are a few improvements to be made but overall I'm happy with what I have so far. Please let me know what you think!

I really like how the rock, paper, scissors buttons were designed. It took me awhile to create them myself and I learned a lot from those alone.

One more thing: I had to learn how to center overflow text on a single line. I forgot the stack overflow thread but this was the solution.

// TailwindCSS
<p className="text-center -ml-[100%] -mr-[100%]">Centered text</p>

// CSS
text-align: center;
margin-left: -100%;
margin-right: -100%;

Hey everyone! I finally finished this challenge and I'm super excited about it. I added a footer to the project just to make it more like a complete website. Let me know what you think!

Something I learned was how to force the last item in a flex container to the next row. My code is below (using TailwindCSS classes).

<div className="flex flex-wrap">
     <div className="min-w-full">
          // Displayed on first line
     </div>
     <div className="min-w-full">
          // Displayed on first line
     </div>
     <div className="min-w-full">
          // Displayed on second line
     </div>
</div>

Next, I plan on connecting this to a database and make it a full MERN stack application. I'll probably refactor my code and add Redux as well.

Part of me wishes the dimensions were given in the free version but part of me is okay with not having them. When developing real-life products, you don't have a design with dimensions so not having them here is identical.

This is my favorite project so far! It uses JavaScript but at a Junior level. The JS that is needed is needed in almost every application too. Makes this a great interview project in my opinion.

My first build was solid but I encountered a display issue on mobile in landscape. I was declaring the parent div height equal to 100vh but the child div was taller. This caused the background color to not be set for the full screen when scrolling to the bottom or past the initial view. I moved the background color to the body element and changed the parent div to have a minimum height of 100vh.

I also noticed that the style guide didn't include the width of the component or other styles like paddings and margins.