All solutions

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

I learned the most about how to style inputs, in particular the slider input. The biggest challenge I have faced from a lot of these is changing the default style of form elements. It hasn't really been too bad before, but the slider really killed me this time. There are seemingly a million different ways to create a custom slider, and almost none of them are intuitive or have any integration with the browser's native styling. I probably spent about 3 hours trying to figure it out before eventually finding a solution that works across multiple browsers and isn't too complicated.

The next challenge was generating the password. This wasn't too bad, and I already had an idea to go about it based on a previous project I had worked on. My previous project was a word-guess game, and I programmaticly generated a keyboard with letters for buttons to chose a letter to guess. I didn't want to create an array of all the letters, so I just use character codes instead. The same idea worked here, and I simply made several functions to add certain sets of characters within a range of character codes based on the checkbox that was selected.

One of the bigger challenges was creating the password evaluator. This wasn't actually quite as bad as styling the slider, but it was still quite challenging. At first I thought about using a Regex query, as I am already a bit familiar with Regex, but that didn't work as I realized I would need to give multiple ratings. After doing some research and seeing what other people have done for similar problems, I realized it would actually be best to create a score system. I still used Regex for this, but I was able to make much simpler queries, and simply add points to a total score based on how each mini-evalutation was rated. I then total up the points, and set the label and meter based on that.

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

I feel as though I need to focus on problem-solving a bit more. Admittedly, I had to do a lot of research and Googling to find a lot of solutions for each problem I had. Maybe this is normal, and I do like the results I have, but I feel as though I could have put more time and effort into finding solutions on my own first.

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

Since I personally lack experience in working with forms more often, this challenge helped me a lot in getting the hang of them more. In particular with using them in JavaScript. I had some other personal projects I made before that involved checkboxes, but it had been a while since then, and this challenge was a good way to get back into it.

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

I had some issues with calculating the tip, which is ironic because I thought that would have been the easy part. The issue was that I kept misunderstanding how numbers and floats were cast in JavaScript, and I made a lot of my if-statements too complicated. I ended up with a bit of a simpler solution, however this made me miss working with TypeScript more.

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

I decided to change things up in a few different ways for this project.

The first thing I did differently was that I did not use the images completely as they were. I noticed that the images given all had preset colors, based on the background color of its category. I didn't think this was very flexible if the user wanted a new background color or a different image, so I configured images to use a combination of CSS filters so that they instead dark the area of the background they are on. This allows them to be a tint of the background, like their original color, while allowing it to be flexible enough to use any image on any background while keeping it looking good.

The second thing I did was add more properties to the JSON data. This was mostly so that I could utilize this information for how I setup my JavaScript.

For my JavaScript, I wanted to create a system that was expandable. I also tried to keep my code concise by splitting it into 5 main files:

• fetchData.js is just to get data from my .json file
• categoryCard.js is a class that helps me model my categoryCard objects
• categoryCardsManager.js reads the data from fetchData.js and instantiates a the categoryCards, and puts them into an object that is exported
• elementMaker.js is just used to create an HTML element to append to the main document, however it is used as a property for each categoryCard
• main.js is where I setup the buttons and begin appending the card elements to the main page

I think the way this is setup is nice, because each categoryCard contains the information for its own element, which is appended to the main page. This makes it easy to change the info on everything at once, as my function for updating info is based on the categoryCard class, which also has its own info from the JSON file it was made from.

This means that in my main file, I can just loop over my primary list of time cards, and call their functions to update. This was easy to do as there are only 3 buttons (daily, weekly, monthly) which just changes the hours and labels to match the information already given in the JSON file.

The design works well too. Since I am using grid, having more than 6 items actually doesn't look too bad, as they simply wrap down to the next row, leaving everything else perfectly fine. Mobile works fine too as it just makes the column longer.

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

This project was fine for the most part. I learned a lot about styling forms and setting up displays for errors.

The biggest challenge I had was actually self-inflicted, as I wanted the elements to move across the screen as a transition from submitting your email to having the success message. Before this point, everything was styled and working fine, but in order to get the transition to work I had to change everything to absolute positioning. I'm sure there was a better way to handle this, but this was just how I figured it out. One of the major issues with this is the fact that the major sections are no longer easily centered on the screen, and I had to use some magic numbers to get them to look right. It also messed up the views from desktop to mobile, which required some more magic numbers to get to look right on mobile view.

Overall I cannot say I am particularly proud of the solution I made, but it looks well enough so long as the format doesn't change too much. I would like to invest in researching better solutions for transitioning elements around like that in the future.

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

This challenge was difficult in that I was not sure how to transition the share buttons from the mobile layout to a desktop layout. Once more, I have started from the mobile view, however I feel as though it would have been quite a challenge going from either layout to another.

It was a challenge because it is hard to decide how to manage the pop-up. Starting in either view is easy, as you simply base it off the parent that it may be nested under, but the location changes completely once in the other view. One solution I was thinking of was to simply have two of these, and just disable one when the layout changes. Having two of those to update seemed counter-productive, though, so I tried to keep it to juse a single one.

I was also considering using JavaScript to move the element around, as to base it on another parent per layout. That probably would have worked, but seemed overkill for this simpler project.

What I ended up doing was giving the element an absolute position, and just manually tweaking the location until it was centered where I wanted it to be. This solution does not feel great to me, as any layout change will end up messing it up, however the card has a set with at the desktop, and the mobile view is fine because it is contained within its parent anyway.

I cannot say I am really proud of the solution I came up with, but I felt as though it was the simplest to implement without going overkill on JavaScript or creating duplicate elements.

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

Most of what I used in this project was stuff I have already known. Some new things I tried was how changing the color of the buttons on their hover and active states using filters, instead of hard-coded colors. There was also a version number in the buttons that was a slight tint of the background of each button. I thought it would save some lines of code if I just had the tint dynamically change based on the background, instead of having to manually enter a tint value. I did this by using mix-blend-mode for the text, which was something I didn't know about until this project. Using overlay with a 75% opacity really helped with this effect.

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

I feel like I used a lot more CSS than what may have been necessary. I tried to go for a mobile-first approach again, and started with the smallest screen size design. The transition from that to tablet was actually quite easy, but from tablet to desktop became more of a challenge.

The hardest part for me was turning the single image of the circles in the header. In mobile and tablet it was quite simple, but then it splits into two different images that surround the text in desktop mode. The hard part for me was creating the transition from tablet to desktop, and then managing the look of the split images while keeping it compatible with the tablet and mobile mode. I feel like I got a working solution that looks good, but I don't know if my implementation is very effecient.

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

Using CSS grid as a whole was quite a challenge for me. I feel more confident in using it after this project, but I struggled still to figure it out here. I also tried using BEM style of naming my classes, but I feel as though I fell quite short here. I think I need to do more research on BEM to utilize it better.

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

The biggest challenge for me was moving from the mobile layout to the desktop layout. I started out with the mobile view, which was pretty easy. The desktop view, however, was more challenging. The difficult part was that I did not want to modify the mobile layout too much. My solution for this was to simply change my display from flexbox to grid using a media query. That seems to have worked pretty well, but then my next challenge was actually using grid. I am more used to flexbox, and grid is still quite a bit difficult for me to grasp right now. I did some research and watched some videos about it and seemed to have found a solution that works, but I still feel like I need to learn more to understand it better.

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

I feel confident that I used the correct semantic HTML for this project.

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

Styling lists and tables was difficult, as I am not used to styling those often. Lists were particularly difficult because of the marker styling. The challenge was also sneaky because the default font style for the ordered lists numbers was actually changed.

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

I would like to think I kept the HTML pretty basic, which made the CSS more maintainable. However, this was a pretty basic page and was easier to keep simple anyway.

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

I had some trouble with the list, as I used an unordered list for my list of links. The problem was that there was always some padding to the left of the links, probably from the bullet that comes with them. Despite having the list-style as none, the padding was still there. I was able to fix it by changing them to display: flex, but that feels more like a workaround than a real solution.

This was also my first project where I didn't have access to the Figma files, so I had to eyeball a lot of the padding, margins, and corner roundness values.

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

I am not sure what else I would do differently next time, as all I used was basic CSS and HTML.

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

It was difficult to find out what the challenge asked for when it said "try not to use media queries." I had a hard time figuring that out, and ended up using media queries anyway.

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

I would like to know more about solutions not using media queries for changing the font size at different screen sizes.