All solutions

Hello! I have been working on this project to showcase my skills with the MERN stack.

I have added a personal client page and admin functions. Clients can apply for jobs, edit their profiles, while admins can edit job postings and manage users.

As I shown on the login page, please log in with the following credentials: email: '[email protected]' password: '123456'.

To try out the customer account, please either create your account or log in with the following credentials: email: '[email protected]' password: '123456'.

Any suggestions are welcome! Enjoy my "Devwired" app! 😊

I used splide.js for the sliders to make accessibility better, as the websites with sliders are normally known with bad accesibility.

I felt very hard to make sure the same slide is shown on the modal with enlarged photo. I used the splide.js's method .go() and 'sync()` to acheive this. I still see the weird behaivor the slide going back to previous one when I click next arrow on modal.

Another thing that I felt hard to achieve was breakpoints for different screensizes.

I would like to retry and make it full-stack when I use backend languages.

Any feedbacks are welcome.

Hello! I spent reasonable time on this project, as I first tried with Remix however framer motion does not work well with it, so I changed it to React and it finally worked correctly.

I added "id" to data.json file to make it easy to consume it in url. Using useLocation and useSearchParams gave me deeper understanding of React Router.

Considering accessibility, I also used the reducedMotion prop from framer motion.

• One thing that I could not acheiving was to set motion on <Link> tag. I want to know how people can acheive interactive link or button to animate, I guess I needed to enclose <Link> with <div>.

Any feedbacks are welcome.

This is my first time using TypeScript in a project. There weren't much types but I enjoyed using <Form> component package from Remix.

I added the following feature:

• show an error message when no rating has been selected.

I have a few questions;

• I used focus-within on .main__input-container and change label background color when it is focused. However, this made a selected rating button remain orange when hover over other rating.
• I am not sure my use of aria-live on error message is correct.

Any comments & feedbacks are welcome.

This is my first project using Remix.

I used location.reload() on eventhandler on dice button to generate the new slip, but is there any better ways?

Any feedbacks are welcome!

This was more challenging than expected...! I used firebase to store the data as the background, and build frontend with React.js. I enjoyed working with cloud database, it is my first full-stack app (after WP as backend).

• When I check the checkbox in the todo list, the checkbox in input field at the top is also checked. How can I fix this?

I appreciate if anyone could look into these issues.

I spend a lot of time to look into the details and make sure app works correct. I added extra features;

• loading message while fetching data
• error message when user is not found or input field is empty

I have a few questions / issues;

• I wanted to use react-router and useParams to get username from query and consume it in the result so that the url will be shown as http://domain/username, but I could not figure out how to do that on the same single page.

• I have error in my vs code terminal that Line 21:6: React Hook useEffect has a missing dependency: 'getUser'. Either include it or remove the dependency array, regarding UserResult.jsx file. I am not sure I am using useEffect correctlt with context files. I put "octocat" in getUser() function as argument to set it as default (initial value), but is it correct thing to do?

• error handling. I am not sure I am doing right for error shown when fetching data set in Github Context.jsx file.

I appreciate for any feedbacks, and help in those issues that I have.

Thanks for visiting my solution page. This time I practice react-router-dom v6 and made dummy children sites within it although this challenge is designated for a landing page. I have a issue;

• In "Our Creations" section, I set images as background-image of <li> element, so link is available only on the texts. This creates issue that I cannot click / focus entire image when I hover it. I tried to put paddings inside <Link> but it didn't work properly.

Hi there, thanks for visiting my solution page. This is my 2nd React challenge at FEM, it was tough using React rather than using only HTML and vanilla JavaScript...! I used custom hooks introduced in NetNinja tutorial and used context object. I may have been thinking in a overcomplicated way, so I'd like to know if there's any simpler solutions for this challenge. I have the following issues / questions that came up;

1. Accessibility

• In FrequencySelector.js file, I have three buttons (Daily, Weekly, and Monthly). I am not sure that I should use "aria-expanded" and "aria-controls" for this situation, as there are no expandable/collapsing elements. The button is kind of switches. I put "aria-expanded" however I could not use "aria-controls" because I was not sure where to put "id". If I have switched entire cards by pressing buttons, I could use aria-controls?
• I used ternary operator to toggle aria-expanded, but is there better way for this? (e.g. using useState like; const [ariaExpanded, setAriaExpanded] = useState("false"))

This issue has been solved by help with @AlexKMarshall !!

2. React & json-server

• In TaskList.js, I had to pull nested data current and previous from data.json file through json-server. I wanted to do that dynamically, for example;

<span className="main__task-current">
        {`stat.timeframes.${frequency}.current}hrs
</span>

However, it didn't work. Is there any methods to make "frequency" dynamic?

• Should I map through <button> elements in FrequencySelctor.js? I could not figure out how, but I had feeling that I may have been able to.

There's so many questions but I hope someone can kindly help me.

Hi, thanks for visiting this solution page. This is my first time building with React other than code along at tutorials. This project is probably not good to practice React, but I wanted to try from newbie challenges. I hope the methods are correct. This app should fully accessible and focusable. I am looking forward to hearing any feedbacks or comments especially from someone who is familiar with React.

Hi there, thanks for visiting my solution. I added animation to main hero image and card and make all interactive elements accessible and focusable, including svg icons.

I still have to improve the following items;

• The overlap of phone image and the card is not beautiful. I don't want to change the size of phone image by display size so much.
• The animation is working but they start from translateY(0) position and move to the designated position at last. I don't want to let it happen but I could not figure out.

Any other feedbacks are welcome.

This is my first premium challenge! Any feedbacks are appreciated 😊

This is called "slider" but there are only 2 slides involving background images and positioning, so I toggled the entire design by the control button. I did not use the common looping solution for slider/carousel in JS, but I would like to know the best solution for it.

• Other thing that I could improve was box-shadow between 2 arrows in the button... How can I get rid of?

Any other feedbacks are welcome 🎉.

I tried to support assistive technologies♿ as much as possible.

• All interactive elements can be accessible by keyboard focus.
• I tried to tackle "keyboard trap" to avoid focusing elements on original page when opening the modals, however I could not achieve by solution. Could someone give me a good advice on it? 🙏

Here is the functions of this website;

• Bookmark button should be toggle.
• The target value, backers and the progress bar should be updated upon every donation.
• Select Reward button and Continue button should be disabled when amount left gets 0. - I still have an issue on changing the container to get lower opacity.
• Amounts left on main page and modal should be updated upon each donation.
• By pressing Escape key, modal should be closed.
• By clicking modal's overlay, modal should be closed.

I am now focusing on WAI-ARIA and the coding on JavaScript. Any suggestions and feedbacks are welcome!

Hello forks, I looked into details and used Sass first time on frontend mentor 🙂

I appreciate if you could also give me constructive feedbacks on Sass styles and WAI ARIA 😊

This was tough challenge in terms of positioning everything. I added behaviours with mediaquery in JS.

Any feedbacks are welcome 😎

Fixed a few issues on 1 Aug.

I don't know why the height at 1440px is larger than the design. I feel like I finally figured out email validation by JS. Any suggestions are welcome! 😋

I felt comfortable to build this layout in short hours, now I want to try bigger project. Any feedbacks are welcome!

Redone this project after feedbacks for 1st challenge. Any feedbacks/improvements are welcome.

I have done this project with validity state in JS. I appreciate if you suggest any easier and cleaner solutions to show error messages and icons. Any other feedbacks are also welcome.

I set 2 break points to make the cards look better. Any feedbacks are welcome!

Any feedbacks are welcome.

This is second challenge after CSS did not work for toggle button. However my JS also does not work... Any suggestions are welcome!

Hi, I tried to achieve the price change only with CSS and the solution should work, however it didn't work. Can somebody help especially why.header__checkbox:checked ~ * .plan__price--monthly and .header__checkbox:checked ~ * .plan__price--annual do not work.

I also found it difficult to achieve this by javascript.

Also any comments are welcome on HTML semantics and other stylings.

I need your help! 😂