All solutions

What challenges did you encounter, and how did you overcome them?

Making parent element change its css based on its children's (for ex input elem's) css state. So for making input's parent change ots border when input is checked/valid, we can do this .mortTypeInputHolder:has(input[type="radio"]:checked)

Making radio button of different color. Had to search a lot to find a way to make radio button look like as in design (with different color and behavior). Finally found a way to do it. Works like charm, and can be modified as per needs. This is how:

  appearance: none;
  width: 15px;
  height: 15px;
  padding: 3px;
  background-clip: content-box;
  border: 1.5px solid var(--slate700);
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 10px;

What are you most proud of, and what would you do differently next time?

Implemented using React router - no page reloads for each link click! Thought would take lots of time, but was a breeze actually.

Also changing css variables using js was new and I feel the possiblities are endless with css-variables and js combo - We can change anything, apply styles to many (even ALL ) elements with just a click. Its cool.

What challenges did you encounter, and how did you overcome them?

flex box related issues. I was trying to make site responsive without using media queries, and spent a lot of time. But media query is made for a reason, and finally used it. took less than 10 mins to make it responsive actually. Right tool for the right job they say. Lesson learned.

Also in previous projects, for changing the border color of inputs when they are in focus I used to change accent-color property. But because this project requires both light and dark view, the limitations of that approach came forth. Then I got to know that there is a property called outline which handles that. Good to know!

What specific areas of your project would you like help with?

No help required for now. I believe all things are done. Thanks

What are you most proud of, and what would you do differently next time?

Making it work without installing node js is what I am very proud of. for small projects I think this way is much much better, else we end up updating index.js and App.js files over and over for different projects, many times mixing functions thinking its there in this project when in reality vs code is showing it from other files. This keeps it clean and only that folder needs to be uploaded to github

What challenges did you encounter, and how did you overcome them?

Did not wanted another node modules folder (its pretty big) so explored ways of loading library over cdn and implemented it. That was challenging to understand at first, but now that I understood I think I went inot many off tangents when solution was simple.

What specific areas of your project would you like help with?

Responsive design. I defined two components - one desktop and other mobile, for responsiveness. Need help in figuring way to make elements change their order based on mobile size, in that same code (instead if defining seperate components. That adds to much duplication)

What are you most proud of, and what would you do differently next time?

Made using react, proud of that.

For error handling I tried using different things form internet (installing many packages, trying different things out) but they were quite a hassle. Instead made my own validation function, using already provided validity flags by vanilla js and it works perfectly without hassle.

Also got to know how to use css to affect parent when child has some behavior.

For example, say we have div->div->input. now if we wanted outermost div to change border-color when input:valid and when input:invalid. For this we can use div:has(input:valid) or div:has(input:checked) to now change border for outermost div. Pretty cool actually

What challenges did you encounter, and how did you overcome them?

I had made the error handling using css (which worked correctly, showing error for invalid input, hiding error when input is valid using :valid and :invalid selecors) but had to use js ultimately as I could not do anything using css for following problem

• first load, errors would be showns as :invalid selector kicks in for empty input too

So had to use js functions to handle errors eventually

What are you most proud of, and what would you do differently next time?

I could have done the implementation by directly defining in html file and adding classes and work would be done.

What I did was rendered entire html part using vanilla js functions, so that you throw any json data to it and it will work.

That includes zero and 1st level comments, user comment box on click of reply button (which is positioned where required i.e. for zero level comment, clicking reply adds userComment box in zero level, and clicking reply on 1st level comment brings userComment in 1st level ).

Proud of this I believe.

Also I defined work in beginning with estimated times for each part. Turns out it took almost only that amount of time (except the delete modal part....took long time to figure out how to make background darken when modal comes)

What challenges did you encounter, and how did you overcome them?

Delete modal (which requires whole background to darken) was something I never did, and took long time to figure out how to do it on my own. Now that I did it, next time would be pretty easy.

Using vanilla js was a challenge in itself. Though I enjoyed it, and feel much under control than say any framework as i am directly communicating with browser.

What specific areas of your project would you like help with?

JS wise - none

CSS wise - feedback appreciated on what could be better.

Help me by figuring out how to make profile icons line up with the vertical bar. For different screen sizes, it offsets. Maybe that.