All solutions

Yeah I know I'm kinda lazy with the design, but I just wanted to try React Query out :D Project was really simple. I just wanna say that when I watched at this challenge 2-3 months ago I was scared of it, so believe in yourself - some hard work and progress comes by itself.

Feel free to feedback ❤

Hello, I've just completed this huge project. It took me almost a week to develop it's version with json data. I'm planning to develop it as fullstack, provide database and auth.

For now just check my code and try to explain me something:

1. What could I done better to make this code cleaner? Right now it looks like a lot of unnecessary code (just look at Redux slices, Modals and Modal's calling functions and constants).
2. What approach could I use to display sidebar differently? Right now I'm using state that updates the innerWidth of window, but it's inconvinient in Next.js.

Feel free to point out mistakes and give advices!

Thank you! ❤

Hello, I finally made it. This challenge gave me a lot of fun and helped me understand Context, Custom Hooks and more. But most of all, I finally understood TypeScript :D

Feel free to check out the code and tell me, what I can do to improve it.

Thank you!

Hello!

I build it very quickly, had no problem with styling or structure. JS logic wasn't too hard as well. I know I have to improve some bugs, but that is not the case.

I recently started to learn TypeScript. I made up my way through Max Schwarzmuller's course on Udemy, but this course is a mess for me rn, just theory, nothing besides. So I decided to make this app and give TS a try.

First of all - I can't see advantages of using it. I know that maybe this app is too small for seeing power of TS, but please tell me. What should I do to learn it? I need practical knowledge, not theory. I know what Types are, Generics, Decorators and so on... but where can I learn it by practice? I wish FreeCodeCamp had section with challenges about it.

BTW I had to change tsx files into jsx because I coudn't deploy it for some reason. I tried to compile tsx files into dist/.jsx but nothing worked. So another red flag for TS. I don't want to discriminate this language, because I really want to learn it, but for now it is masochism for me.

Do you have any tips or sources of knowledge for me? I need some projects to build with TypeScript. Anything.

Thank you ❤

Hi!

Check out my repo for documentation (which I'm still working with). There are still a lot of stuff to fix. For example take user at the top of the page when changing site via Router, hide Cart when going to Checkout, etc. But I'm incredibly proud of myself. Even 1 month ago if someone would ask me if I could do this challenge, I would LMAO and got back to finishing my JS roadmap... Now I'm at the end of the road of React Course and learnt a lot of things meanwhile. I want to say THANK YOU to Frontend Mentor founders and to community. Without you I couldn't make it ❤

Ofc feel free to read my code and point out mistakes (there is plenty of them). :D

Hello, check my solution and point out what I could've done better :)

I'm Developing in React for over a week and here's my results.

Feel free to check my README file in the repository to deepen inside my workflow.

Thank you!

Hello!

I finished my project and found a lot of fun and experience from it.

Only 3 questions appeared:

1. Is it OK to use fetch to get data from JSON file?

I met lot of errors which repaired on their own through the night. Found the solution to use import instead.

2. Is the way I segregate CSS OK?

3. How to make my page load faster? When you switch between sections it loads long at first, then loaded once, loads fast. Why?

Thanks for feedback!

FIXED AND DONE

Hi everyone!

I spent so many hours on this and I can't progress any further. Probably it's just a lack of knowledge or I don't understand some JS behaviours 😢

I designed it pretty fast, I have no problems with HTML and CSS, it's like breathing. Even if I don't know something I can google it easily. I made up my own idea of segregating and styling dark/light theme. Check it out and let me know if it is a proper way.

Then I programmed appearing text from Input on the list. Easy.

But when I tried to code delete buttons, my nightmare has started. I red, watched and tried 'normal' methods, array methods... Finally after 3hours I just coppied code from my previous 'Todo', which I was doing with one of the courses I watched. I tried to understand what I've just coppied, but Objects and Arrays are some black magic to me. I understand how to write them and which one is which, but I just can't use them by myself to code anything. I imagine that coding Completed, Active and All sections requires using 3 arrays, if I'm right... but how?

I wish I could learn this OOP in JS. But I can't find tutorials or courses that could explain to me in a way I can understand and remember...

This is my first solution in Intermediate level, but I can see now that it was too early for me 😢

If you have any sources of knowledge or some lessons I will appreciate your effort!

Thank you! ❤

EDIT #1: I fixed markAsCompleted function and now it adds class to each checked todo. I also implemented Clear Completed button logic, where it checks if todo-list has class named 'completed' and if it has, it should splice that todo from an array and render list without that todos. But... Check it out what is happening. I have no clue. I'm not even sure if renderTodoList() is appropiate function.

Hi!

2 things: 1. I didn't expect to have opportunity to practice fetch with this challenge. I'm sure I could do it better to avoid writing HTML structure render 4 times. Close it in a function or something. But I consider OOP as one of the hardest JS topics... 2. I used font-size: clamp(); on most problematic texts on the page, but it only helped avoid collapsing grid elements by ~100px (before using it, it started to collapse about 1200px width, now it starts about 1100px width) so I had to increase media query width from 600px to 1100px. Is there a better way to make grid elements responsive?

Anyway, this challenge gave me much practice and fun 😀

Feel free to point out mistakes and give some advice to OOP.

Thank you!

Hi there!

I had this project styled for a week and it was waiting for me to learn using API. And I didn't, because I still do. I still have to understand Promises and Callbacks...

If you have any advices (others than on this page :D) please share with me. You can also write what you could do better.

Thank you!

Hi, I finally learned how to use GitHub's commits and repos, so you can check entire version history :D I'm pretty impressed that I finished it without any 'I don't know what to do' moments. It isn't perfect and I'll always be pleased with your feedback what I could do better and how could I make my code even cleaner than it is.

Thank you!

Hi, I fixed some problems with the code. It's still not perfect but that is the road of progress :)

Thank you!

FIXED I just added window.location.reload() to Dismiss Message Button. But feel free to tell me how to do it better way :)

Hi, The design for mobile and desktop is finished (I know its messy but I made it quickly to submit the solution asap to get your help).

I've tried different methods and 3 of them has one of these issues:

1. The code works until I click "Dismiss Message". Then it behaves like script doesn't exist. (Now)
2. Dismiss button doesn't work at all with .addEventListener.
3. Code doesn't work at all.

I'm not sure about .innerHTML replacement. It looks like the code doesn't find 'js-dismiss-button class for querySelector. I don't know. Please help.

Thank you :)

I don't know if I used position: absolute right, because of high top and left values and because I don't know how to make the cube not overflowing with other images overflowing :( I'm also not sure about my js. It works but is it effective?

Thank you!

My first JS project on my own.

Feel free to point out mistakes and what I could do better :)

Thank you! EDIT:** Why in mobile version selected buttons doesn’t change color? I have this style in general.css so it should.

Feel free to check out my code and point mistakes out :)

I'm a little frustrated. In every, even the simplest one project, I meet issues.

1. How to make the card right in the middle? Using Display Flex and Justify-Content on body works OK, but Align Items doesn't. I don't think that I must use margin-top.
2. Why my image doesn't fit to main? Logically when I set its height to 100% it should cover the white box (main) but it doesn't. Everytime I have no problems with mobile design, but as soon as I swap to desktop it changes to a nightmare. I know what to do in theory but it just doesn't work.

Thanks for help.

Simple project but problems still appears... Why 'align-items: center' doesn't align entire card vertically? I had to add additional div named 'flexbox' to align it horizontally, but I don't know why applying Flexbox to .main didn't do the same.

Thank you!

Hi, looks like I've done it, but I'm sure that position absolute technique that I used here is not the best solution. When you resize the page in desktop view you can see the consequences. What could I've done better?

Thank you!

I'm pretty happy with it, but I can't fully understand something: 1. [FIXED] How to make site look nice when zooming in and out?

2. Why 'object-fit' didn't work on desktop version?

• I had to set up the height manually.

Thank you!

Hello, When I was building this project I met 2 issues:

• [FIXED] How to style site for mobile device, when I can't fold my page more than 440px wide?
• Is there a way to position paragraphs automatically with flexbox without using too much margin properties?

Feel free to check out my code and point out things I could do better, because I feel that I used too much code.

Thanks!