All solutions

I am still quite new to React and Tailwind CSS so pardon me that there are some bugs in this solution, especially the CSS (tailwind) parts - which could have been more easily resolved if I am using plain CSS and Javascript. Nevertheless, the whole point here is for me to learn and practice using React and Tailwind CSS.

Please let me know if you know how to solve the bugs. Thanks!

Though there isn't any re-design for this challenge, I took a lil' time to refactor my code and I am pretty happy with the organization so far.

• The social media data is consolidated into a JSON file
• HTML elements, and also the value for the total number of followers, are dynamically generated using javascript array methods like map and reduce, as well as expressions like ternary operators.
• I also created a helper.js file to contain common functions such as the function to format numbers more than 9999 to __k

Even though this organization may be a little overkill for such a challenge, I thought it trains me to write more maintainable and 'DRY' code starting from even the simplest challenges.

Submitted my 30th challenge! This is one of my major design overhaul attempts in Frontend Mentor. While it is far from a working full-stack e-commerce app, I really spent quite an amount of effort to make the product page look as close as possible to commercial standards - with a header, footer, etc. There are also some additional elements like the review section.

The design inspiration, pictures, and even written content are taken from various existing commercial websites like Nike, Under Armour, Skullcandy, and Unsplash.

Meanwhile, also marks one of my last challenges using vanilla JS. I realize a vanilla JS-based code gets more complex and inefficient to maintain as the project grows bigger and more complex. So, I am learning React and backend stuff and hopefully, come back with better stuff.

This challenge was completed with:

• dark and light theme toggle
• the ability to switch users that also comes with a tiny bit of animation
• pop-up alerts when users try to send an empty response or vote more than once
• sync data with localStorage for any CRUD operations

Due to this challenge's multiple state management requirements, I used a lot of function declarations, instead of function expressions, which I understand is not ideal. Also, there still might be some bugs lying around. Nevertheless, I had fun drilling my Javascript skills.

Tic tac toe game challenge with difficulty levels added for single-player game mode completed!

I also added background audio for this game with an audio toggle on-and-off button. However, the audio may take a few seconds to come through due to the browser settings. The js code definitely can be improved a lot further. Welcome to receive any feedback.

I took a long time to complete this challenge and had loads of bug fixes but I am still glad that I finished it. I am building this as a front-end app first. There are still some more bugs to be fixed which I will come back to fix in the future.

The hardest part was the naming of the file when you add a new untitled document and making sure that the data/content between the live editor, localStorage, and HTML values all synced together.

Most of the features are working, at least on my side, with the only exception that the movement of the side nav bar isn't smooth. I love to hear from anyone that has a solution to that.

In terms of re-design, this is my favorite so far. Again, I don't own 100% of the design's originality. Design references are linked in my repository. Though I like the redesign, I am not really sure about my HTML code. Although the whole thing kinda works, I am not sure if some of the HTML structure is inevitable because of the design + media query requirements. There are a lot of divs within divs or elements within divs...felt like it can be done better. Please advise if there are any improvements or mistakes that I have made.

P.S. This design looks better in the mobile version.

This is my first time doing a loading page. I don't own 100% of the design's originality. I took design references and combined/adapted them from different sources (references listed under my README.md file). I just want to learn how to integrate some of these components/animations into my solution. The hovering transition for the login and register buttons is somehow not very smooth. Not sure if it is because the CSS conflicts with Bootstrap's default settings.

Another API challenge completed! This is much tougher than the advice API generator app challenge because of the number of errors or conditions to check for, against each user's GitHub data.

Unlike the advice API, this GitHub API requires an authentication key thus for security reasons (because I have not learned enough about the backend side), I have removed my auth. key temporarily so the search will not work on your side. Technically, with .gitignore, you can hide your key but any script that is stored on the client side instead of the server side, with a link to a key, is still not very safe. Thus, if you want to test the code, you gotta get your own auth key from GitHub and add it to a config.js file.

Nevertheless, the light and dark toggle and the media queries should still work. I will come back to modify it once I learn the backend side.

Cheers!

I had fun learning about horizontal scrolling animation and applied it to this challenge. As such, there are some slight design changes from the original.

The only issue I had in this challenge was the navbar part for the mobile version. Although it is not a requirement for this challenge, I added it for practice. Previously, I have been relying on Bootstrap to do up a navbar. Somehow, the dropdown formatting didn't work when I tried to do it without Bootstrap.

Feel free to give any feedback.

Firstly, in this challenge, I did a design overhaul with a dark theme. The card front and back are done largely using HTML and CSS to practice my CSS skills, instead of importing the default images. I am still struggling a little with the mobile & tablet versions thus they will be a work in progress.

I started learning jQuery so this is my first attempt using jQuery for the logic part. It took me longer than expected because of the syntax differences between jQuery and Javascript but I am glad I made it through.

Feel free to give any feedback.

While this challenge may seem simple at first glance, I decided to give myself the challenge to use very minimal HTML and instead transfer the information to a JSON file and use mainly plain javascript to calculate the number of unread notifications and iterate through the different states and conditions, thus making this notification page a little more dynamic. The if/else block in the for loop as well as sequencing was a little tricky for me but I am glad everything worked out in the end.

While some of the steps may seem counter-intuitive e.g. time, in this case, is static, the main purpose of approaching this challenge this way is to build my foundation for building webpages and applications with APIs and backend technologies like node.js later.

Lastly, inspired by some of the developers on this platform, I decided to do a little redesign too.

Feel free to give any feedback.