All solutions

Hi FEM community, I actually finished this a while back but haven't posted the solution yet, so here it is!

This was a very straightforward landing page, but this took me a lot of time; it might even be the one project I've spent the most time on so far. The positioning of the elements was challenging as usual, but the most difficult and time-consuming task was trying to understand some of the design choices (such as having two very similar sans-serif fonts, and then where they get used in the text was not as apparent as I thought). Anyway, at least I now learned how I can position elements off the page and have it be responsive! I'm just glad it's over and we can all move on with life 😅

Very minimal animation here (or much of anything really) since I just wanted to focus on the important parts of the CSS, which is messier than usual as I wanted to try to structure it the way similar to what Kevin Powell did in his latest tutorial series. I also wanted to bring in some CUBE CSS since Kevin did that also. In short, a lot of experimenting, not too much organizing and therefore will clean up and refactor later.

As always, please feel free to let me know whether something isn't working the way it should. Thank you everyone!

This is my first intermediate project, and I only built this because I already made a calculator app a while ago. Since I've been seeing a number of calculator solutions in my feed, I wanted to see whether I can reuse my old one in this challenge. I ended up rewriting almost all the JS except the event listeners, but this was a really good practice in writing JS classes!

This calculator can be used with the key pad as well, and also I structured the calculator keys in my HTML in a way where a user can use the tab key if they don't want to use the numpad. The tab functionality somewhat mirrors what my Windows calculator is doing, so I think that's alright for now!

I kept the design's initial value in my calculator, but I will probably remove it later after the screenshot is taken. The only thing I need to figure out later is how to change the screenshot browser's settings and keep it in dark mode, so if anyone's got any ideas please let me know 😆

To build this, I used the calculator by Web Dev Simplified's Kyle as my blueprint; his Vanilla JS calculator is probably the best I've seen so far, so if anyone is interested, do check out his work! Also, I aim to add a second display above the main one for showing the first operand, so hopefully that's coming soon!

Please let me know if there's anything that's broken or not working the way it should. Thank you!

I took on the extra bonus challenge of wiring everything up without Javascript, and this needed some creative ways to solve the problem of keeping the inputs as siblings to the plan/card elements so that the price information can be changed. This means I can't have the radio inputs nested at all in any containers. I also didn't want to resort to using a checkbox after reading Sara Soueidan's post on building accessible/inclusive toggle switches. Lastly, I wanted to make sure there's some transition between the values so that it's obvious to the user that something is different; even though I could reuse my code from the previous challenge, this also took some time to figure out. I think everything looks and works fine, and hopefully the semantic HTML won't cause issues, but I prefer using Javascript in the future.

I've been wanting to build a slider because one of the recent tutorials from Kevin Powell features an FEM page with a slider. The most challenging part wasn't building the actual slider but positioning all the SVGs and to make sure they can be viewed optimally while still maintaining a good distance/relation with the surrounding elements. It's also interesting that one of the requirements is to use arrow keys for the slider because I've read that for a screen reader user, it's best to have users use the tab key for navigation and not so much the arrow keys. I did come across some insightful articles on the challenges of building an accessible slider/carousel, and I do hope to work on this some more later. I also hope to put in some opacity transition later on, but I think on the whole, everything works for now, and I think this was a good attempt in building a slider that can be accessible.

Do let me know if something isn't working as it should. Happy testing!

I built another version of this challenge with React and wanted to try building one with plain JS, as the React version was more for practicing React again and I felt quite rusty, so the code wasn't as DRY as it could be. I also wanted to practice writing cleaner CSS since I have a bad habit of testing out a bunch of declarations and then seeing which one works. Plus there were other features I wanted to add but didn't get to (such as accessibility features and link simulation), and so I wanted to see if I can do that in just JS without React.

I started by building out a small version on CodePen to practice skills I used in the last project, and then I reworked the existing HTML and some of the Sass from the React project. It took me quite a while mainly due to trying to put in new code while cleaning up my old code at the same time; this ended up being quite a good exercise in seeing what to do when you need to work with existing code and how to add new things without breaking it. I also tried to use less of CUBE CSS and BEM (or rather, a modified simplified version of my limited understanding of both).

The biggest takeaway I had was, it's a good idea to use CodePen as a draft area to test things out first, and also to think seriously whether the CSS I wanted to write is really needed before writing it!

Please feel free to let me know if anything is not working as it should be. Thank you all! 🙂

Just a quick project to practice grid and CUBE CSS!

At first I built this with the goal of just making it function as intended, but I later felt to challenge myself to make this a more inclusive app with better accessibility, which meant I opted to use radio inputs for the tip percentages instead of just buttons and also to make the tab button work with the inputs. This took me a really long time because the biggest challenge was in how to group a visually hidden radio input with a text input (i.e., the custom text input) and work out all the logic with :focus, :checked, etc., and also how to make everything work smoothly when tabbing. Because of this, writing out the CSS and HTML was actually a lot harder than the JS, since I needed to figure out how to use the hidden custom radio button to affect the styling of the text input. I think it's pretty close to completion after some major updates, just need to clean and refactor, and do a tad more with the tabindex😌

I found @sedcakmak's solution to be an excellent reference when I was trying to make improvements to my code, so shoutout to her 🙂

Would love to hear some input from the accessibility experts out there or any user really!

Haven't built anything with React for a while so I wanted to use this challenge to brush up on some skills as well as to check out Vite.js. Took some time to build the dropdown navs as I decided to try out [aria-pressed="false"] as a toggler, which turned out well I think.

This was more of a practice for me to test out CUBE CSS a bit further and also to see how much boilerplate code I can write out without using a previous template. Got it done fairly quickly, so hopefully everything works!

There is the first project where I tried using CUBE CSS (with some BEM thrown in as well). Maybe it would have been better if I had done this in a smaller project first, but nevertheless I'm pleased with how things turned out overall, and I learned a whole bunch of new useful things in the process.

Just updated this challenge with error handling and also accessibility functions. I also added a loading screen animation with a slight delay added. Quite like the end result, hope the tabbing works on other screens as well!

I'd be interested to know what the others use in their HTML for the clickable/interactive components (e.g., the timeframe selectors and ellipsis) in such a dashboard component, and I wonder what's the best practice for accessibility in this case

Just updated my solution as I realized that I had mistaken the highlighted bar to be the day with the largest amount, when in fact it should be the current day (as in, in real life). I also made the component responsive even at smaller sizes instead of just having two fixed widths; this normally is not so hard to do since content tend to be filling up the container, but in this content here is smaller than the container. To make sure the container doesn't collapse, I used the responsiveness of flex-wrap to ensure it would be at the size I need.

Just changed this to have it use the details/summary tags, still need to do a huge cleanup and change the units!