All solutions

For the Fylo dark theme landing page challenge project, I decided to use Next.js, to build the landing page. This project offered a valuable opportunity for me to become acquainted with Next.js, a technology I hadn't used previously.

The main challenge I encountered was structuring the layout of the landing page. Each section had distinct design requirements, making it quite challenging. To address this, I utilized Flexbox, a responsive layout mechanism, to ensure each section aligned properly, adapting to various screen sizes seamlessly. Although this approach required careful consideration and coding, it resulted in a well-organized and visually appealing design.

In terms of styling, Tailwind proved to be an invaluable asset. Its utility classes enabled me to quickly style components without the need to write extensive custom CSS. This accelerated the development process significantly, allowing me to focus more on functionality and responsiveness.

While I've managed to create a functional and visually appealing landing page (hopefully :D), there are certain areas in my code, particularly in the more complex layout sections, where I'm still seeking the best practices. I wonder if there are any optimization techniques or layout strategies that would enhance the overall performance and maintainability of the project. If you have any insights or suggestions about these aspects, I'd greatly appreciate your input.

This is my third challenge so far on Frontend Mentor, and my first challenge that requires JS, so my solution for the interactivity feature for this challenge is:

• Write a function that is responsible to generate a new "Thank you" feedback component using DOM API, called generateFeedbackReceivedComponent().
• Write a function that is responsible for "dynamic render". This function will first remove the children on the main container with the clearMainElementChildren() function, and then generate the new component with the generateFeedbackReceivedComponent() function. This function is called renderFeedbackReceivedComponent().
• Write a click event handler that listens to the event on the submit button. When the button is clicked, the event handler will run the renderFeedbackReceivedComponent().

It definitely works as I intended, but I want to know if there is a simpler way to solve this challenge. Another thing, if you take a look at the renderFeedbackReceivedComponent() part:

// ./helper.js

/* --some code-- */

export const renderFeedbackReceivedComponent = (rating) => {
  return clearMainElementChildren(() =>
    generateFeedbackReceivedComponent(rating)
  );
};

// ./index.js

/* --some code-- */

formElement.addEventListener("submit", (event) => {
  event.preventDefault();

  if (!rating.state) {
    window.alert("you must give rating");
    return;
  }

  renderFeedbackReceivedComponent(rating);
});

is this the way how you are supposed to write loosely coupled code?

All feedback is appreciated, regardless. Thanks!