All solutions

I've tried different things on this challenge, like proper folder structure for the react project. Although this project is small and I could just put all components inside the components folder, I decided to follow a more organized approach to the folder structure for this one. Also, I recently learned GSAP and tried using it for this challenge.

If you have any suggestion/feedback on how I can improve and reduce unnecessary code, please don't hesitate to comment. Thanks.

I didn't encounter any problems for this project tbh. I did change some of the designs like the button hover and the mobile navigation bar and that's pretty much it. I know using ReactJS for this challenge is a bit overkill but I'm still practicing so yeah. I'm currently trying out NextJs and Vite, and planning to use it for my future challenge here at FEM.

if you have any suggestions or feedbacks, don't go easy on me, It really helps. Thaaaanks <3

There's nothing special about this challenge, but I did enjoy it. I've already tried most of the components on this project using vanilla JavaScript; I just need to recreate them with ReactJS.

Like the "Accordion Component," for example, I've done it multiple times on my other projects, and what I've done differently is make the accordion as reusable as much as possible (I think LOL).

import { Accordion, AccordionItem } from './components/Accordion';

export default const Example = () => {
  return (
    <Accordion>
      <AccordionItem header="What is Bookmark?">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </AccordionItem>

      <AccordionItem header="How can I request a new browser?">
        Quisque eget luctus mi, vehicula mollis lorem. Proin fringilla
        vel erat quis sodales. Nam ex enim, eleifend venenatis lectus
        vitae, accumsan auctor mi.
      </AccordionItem>
    </Accordion>
  )
}

My accordion is heavily inspired from a library React-Accordion

I'm still new to ReactJS, and I'm not sure if I'm doing it correctly. If you have any suggestions or feedback on how I can improve and reduce unnecessary code, please don't hesitate to comment. Thanks.

After a couple of months of playing with React, this is my first project using it. I picked this challenge because I think this is a very good project to familiarize myself with the basics and react hooks. I also try how backend works so I use Firebase real-time database to save the tasks. I didn't add the drag and drop feature for now because I can't find a way to reorder data from the server without deleting the entire set of data and just re-uploading the updated set of data. If someday I find a solution to this, I'll add it to this project. And for styling, I use styled-components because I'm not a fan of CSS-in-JS or CSS modules.

If you have any suggestion/feedback on how I can improve and reduce unnecessary code, please don't hesitate to comment. Thanks.

Game logic is pretty easy tbh. What I find difficult is the animations, I'm not sure if it's better to just use CSS keyframes animation, but it works so yeah. Ill go back to this project someday to clean it up and try using keyframes instead of transitions.

If you have any suggestion/feedback on how I can improve and reduce unnecessary code, please don't hesitate to comment. Thanks.

I did go overboard on this project. I didn't use the provided svg background waves, instead, I built randomly generated waves using javascript. But other than that, this project is very simple, and the only Javascript needed is the form validation. I've already done a simple email validation from my previous FrontendMentor challenge(Base Apparel coming soon page) so I just copy and paste it.

For the randomly generated waves, this script is heavily inspired from a library: Wavyfy by peacepostman. And if you wanna try it, I recommend using Wavyfy instead of mine. Wavyfy has a lot more functionality and mine is a little messy

Also, I did consider users who turned off their animation on their device prefers-reduced-motion: reduce. If you do, it will only generate wave once. And if you are not sure if it's turned off, check the console. I leave a console.log() to see if it's ON or OFF.

If you guys have any suggestion, please don't hesitate to comment. Thaaaanks!

My English is bad. Sorry in advance.

A very simple and straight-forward landing page, nothing much to say but there's something that piqued my interest, The navigation bars inside the footer are arranged from top to bottom, then wrap to the left, instead of left to right, then wrap down.

My initial solution for this is to use flex -> column -> wrap, but to automatically wrap the elements, the the height of the parent element must be set. Tho this works, I still need to set a height or max-height on the parent element for each breakpoints.

But what I want is to auto-wrap the elements like in Flex without setting the height of the parent element. I know that Flex columns work fine, but I just want the height of the footer to be auto-adjusted.

I just want to ask the community if there's another way to do this.

As always, feel free to comment any suggestion/tips. Thaaanks!

Just practicing my CSS layout skill. I realized from my previous challenges that I was too focused on learning Javascript that I was neglecting some basic knowledge. I'm still planning to do more of these kinds of challenges until I'm comfortable with my skills.

If you have any suggestion, feedbacks and tips, don't go easy on me. It really helps. Thaaaaanks.

On first glance, this challenge looks pretty simple and easy. I struggle a lot, especially with illustrations, because most of them have extra white spaces and overflows on their parent element. I haven't done this kind of design before, I thought that the assets given to the developer are already fixed and all we have to do is to put the images in the right places. I really underestimated this challenge.

Overall, I enjoyed and learned a lot from this challenge, and I'm planning to do more of these kinds of challenges.

Please feel free to tell me your thoughts about my solution.. THAAAANKS

Instead of changing the text of every timecard, what I have done is just create a new card element and append it inside the container. By doing this, I can simply add a new activity, such as Sleep, to the data.json file, and it will automatically add a new card inside the html; while I still need to add a new card theme for background color and for the icon, I believe this is easier than modifying the html file everytime Ill add new activity.

I actually struggle more with CSS than with Javascript but overall this is a fun project and I enjoy it.

If you have any suggestions or feedback, please leave a comment down below. It really helps. Thanks

Although this is my first project with data fetching, I'm not new to javascript promises, so this project is not that hard to complete. Also the project design is very simple, there's almost no difference between the desktop and mobile view.

I didn't go overboard with the loading, because I feel like toomuch animation will not suit the simple design of this project (naah, I'm just not that good at thinking up beautiful design LOL). I just set the max-width of the <div class="advice"> to 0 while waiting for the data. I also set a minimum of 1 second loading time because sometimes the data is fetched so fast.

BTW, I did consider fetch error, so if you wanna see the error message just enter this on the console "link=''" and click the button. I declare the link variable globally for easy testing.

If you have suggestions or feedback about my solution, please comment below. It really helps me to improve my codes. Thanks

I really enjoyed doing this challenge.

I use Javascript Promise for form validation. At first, I planned to write a simple function that returns true if there are no invalid inputs, but the problem is that after running this function, I'll need to add another if-statement inside the submit event to check if the function returns true. And I think that's a redundant code.

With Promise, I could just resolve it and pass the form data, or reject it and pass the invalid inputs and prevent the form from submitting. Tho this project prevents the default form submit even if there's an invalid input. I had intended to create reusable form validation, and I believe this is an excellent example of why using Promise is better than my initial solution.

I'm not sure if I did everything correctly, so if you have any suggestions, don't go easy on me, It really helps. Thaaaanks <3

This is actually my first time building a website with a theme selector. At first, I was planning to use solely SCSS. While this solution works fine, doing so will double the CSS, so I guess sticking to CSS Custom Properties is more efficient. If you guys have any suggestion, please don't hesitate to comment. Thaaaanks

I've made the dropdown nav behave differently on desktop and mobile. On desktop, only one dropdown can be open at a time while on mobile it can be open simultaneously. But I think my JS can still be improved. Check it out and feel free to comment any feedbacks, Thanks.

While I'm building this project I came across an article about SCSS Style Guides. Reading this article, I learned a bunch of things to make my SCSS files more manageable and readable. I struggled and took me a while to complete this challenge, but this article really helped me. I don't know if I did it correctly, but I'm still happy I learned something new.

Any feedback/suggestion on how I can improve my codes is very much appreciated.

Is there a CSS method for getting the actual height of fully expanded element? I tried to use max-height but the transition looks delayed. Btw my accordion can only expand one item at a time, so I just use javascript scrollHeight property get the actual height.

Did I correctly and efficiently use SASS @ rules to dynamically style background color for each cards? Im new to this and just trying out. Any suggestion to improve my codes?

Is it cheating to hide the thankyou card under the first card and just remove the first card after submitting the form? Any suggestion to improve my code is very much appreciated.

This is actually my 2nd attempt for this challenge. I'm not satisfied with the first one and restart the challenge. LoL

All feedback is welcome.