All solutions

• About the project itslef i didn't find anything difficult. A little thing i had struggle with was with CORS error with the API but i solved using a proxy

• i took this project mostly to practice new knowledges about typescript and unit testing so i was focused on that instead of styling wich was easier. So the areas im most unsure of are my typing and tests

• This project in particular wasnt any challenging for me, i used it to practice my styles in css and html, the javascript was pretty simple, some validations, some listeners.
• The only thing im unsure is if it would be easier to use FormData instead of doing all using listeners and managing the event.target

What did you find difficult while building the project?

• What i found most difficult of this project was to understand how dates work in Vanilla JavaScript

Wich areas of your code are you unsure of?

• Im unsure of the way that i handled th dates, but someone told me that i could use in a next time a librarie called Moments

• This is the first React project that i try all by myself. So the thing i found the most difficult was to manage the re-renders i had some problems but overall it was fun and simple to use. Also i dont know yet wich way is the best to apply css using react because i thought it workd exlusively with the css that you import in each component but if two tags have the same class even if you use different .css to apply the styles it uses both of em.
• Also i find difficult to correct implement the svgs
• Im unsure in the css and class naming because is the first time i do it with react and got a little bit confused at some point
• I want to know if its better to make an unique css file with all the components in it or separate the css

What did you find difficult while building the project?

Maybe the thing i found the most difficult was to use the map API or correctly manage the styles

The thing i found most difficult was to mix the event listeners with the data obtained using the API. At first, i couldnt stablish correctly the order of the calls of the functions but finally made it.

Im unsure on the way i acomplished the thing i just said, the order of the calls, i would like to know if there is a better way to do this challenge, maybe using promises or something. I used async / await

The most difficult feature was to find a way to change the data in the card. The problem was to fill the thing with zeros if there is no value yet.

Also the space between each 4 group of numbers was difficult to put. I wanted to put the same space in the input field but couldnt make it, ill try later bc at the time i dont know how to do it.

What did you find difficult while building the project? The most difficult for me was the CSS. I can easily get the colors, spaces and basic layout to work as the image suggest, but what i found the most difficult was the interaction of the different components, at some point i couldnt get them to not overlap each other, finally i come with a solution but it was the thing that take me the most time of thinking.

The JS take me some time but was time of doing, not much thinking because i came up with solutions faster than with the other challenges.

Which areas of your code are you unsure of?

Like in most of the Challenges im unsure of the css bc i'm still new and dont know if there is a better way or like a standard to create layouts and prevent them to overlap or content overflowing, etc.

SIDENOTES: i add a new feature. When you click a single notification it changes between read and unread and that changes the number on top.

Also im planning to add all notifications dinamicaly using JS simulating an API that provides those notifications by creating a class and hardcoding in the JS the info of each notification. Thats why i have img and anchor elements empty because im thinking of a general structure for a notification where every notifications have the same elements but depending of the type of the notification it will change its spacing disposition

UPDATE: I subbmited the solution 1 day ago, today i made a new feature that create the html element of each notification by using a class and creating the instances of each notification, then if the notification had atributes like message for example the structure of the html changes depending on wich atributes it has.

I did that to simulate an API, in the future my idea is to actually use an API that gives me those atributes i harcoded in the instances

What did you find difficult while building the project?

What i find the most difficult was to understand an html event in JS different than click. In this case blur event.

Which areas of your code are you unsure of? Maybe im unsure on the way i handled the structure of the form using boxes inside of it

Made with CSS GRID. The thing i fount the most difficult was to correctly make the layout in a decent amount of time, i already practiced some of the properties so i already knew what to do but the devil is in the details so in order to make it look as same as possible i took more time changing some properties.

Maybe im insure in the way i work with the css, should i create less classes? so i can reuse parts of code? Is it escalable?

im trying to use BEM naming, but im unsure if im doing it correctly

What did you find difficult while building the project? What i found most difficult during the project was the JavaScript funcionality, i decided myself to try making the Q&A dynamic by simulating a database using js classes creating the objects with their own properties. That made the JS a bit more difficult, but i remember the way i've done that before, handling the events separate identifying each click and opening the answer i needed. Also i needed to change the styles of the title and the Q&A container so it fits the content and changing the color of the title After that the next problem was that if the user open all the questions it overlaps outside the container, so i created a logic that closes the other questions when you try to open a new one and it helped me to create the same logic to remove the styles added when you clicked a question. In the CSS i had some problems with the images, i handled it by using position absolute, z index and a new propertie y googled called clip-path so that way i can create like a clip mask (like in illustrator).

Which areas of your code are you unsure of? The areas im most unsure is the JS and some of the CSS. In the JavaScript im unsure of the way i readed many elements from the html i think there must be a way to do it better. In the CSS, im not a big fan of using position absolute, i dont know why but i think it seems like cheating, like if i couldn't use that in the real life projects because of the complexity of it. Also i had some troubles to create like a clip mask in two of the images. At some point i used overflow:hidden, but it hid the @ box too, i was too lazy to remove it from the container because i think i would have to change the css grid by doing that, so i searched another solution and find the css propertie clip-path.

Do you have any questions about best practices? it is a good practice to use position absolute when necessary? if not, why? what other solutions should i search for?

What did you find difficult while building the project? I tried to build the layour using CSS GRID, was my first time using that instead of margins, it took me a while but finally i made it. Also what i find most difficult was to remind the concepts i learned before of JavaScript.

Which areas of your code are you unsure of? I would like to know if there is a better way to handle the radio inputs with the labels to hide the inputs

What did you find difficult while building the project?

The thing i found the most difficult was to hide and show the eye image on top of the NFT main image, at first i tried to figure out by myself but had to look up for a css propertie that could help me. I found the CSS propertie vissibility that help me, also i had to combine in the same CSS rule the selector of the container with a hover and the eye image inside of it so that way i can make it appear again when i hover it

Do you have any questions about best practices?

How could i have done the show/hide feature better with only CSS and HTML? i made it using :

.eye{visibility:hidden}
.container:hover img{visibility:visible}

is there a way to do it better? im starting to learn HTML and CSS basics so i dont know REACT yet im in the basis of JS so far