All solutions

Custom dictionary website. All feedback and criticism are welcome!

Hi all! Been a while since I last submitted a challenge, and I learned a lot the past few months! I decided to modify the challenge, so you will notice my design is slightly different. And I used styled-components because I had never used it before, so I wanted to have the experience!

For starters, I decided to remove the single play-audio button and added a smaller one with the phonetic writing and accent/origin between it. It also renders multiple buttons if there is more than one pronunciation provided. I also tried to add a small animation to the antonym/synonym buttons.

Another change I made, I added a new button right next to the search box, since we're dealing with fetching data, I decided to make so it will not fetch data as you type, as that can be troublesome. There's a way around it by memoizing but I still thought it was better this way, since it's how the other big dictionaries online did it.

One difficulty I've had was the typescript in the useDictionary context. I had to leave the useDictionaryContext() with any as I couldn't figure out what I did wrong.

Hey everyone!

This is my first project since I started learning React.js, so any form of feedback and/or criticism is more than welcome! I had a lot of fun building and learned a lot! React router dom is still something I'm struggling with, so I will focus on learning it a bit more before I move on to something else.

Currently an issue I'm having is that when if you click in a lot of countries, and then you try go back using the browser back button instead of the one I made, the page will not render unless you reload it, still trying to fix it.

If you think there's something I could'va done better, please do tell me so I can better improve myself. Thanks!

03/02/2024 edit: I decided to go back to this project and put everything I learned the past year into action. I converted the whole project to Typescript, and from SCSS to TailwindCSS. I also added loading skeleton, and improved the website performance by also taking accessibility into consideration

Thank you for checking out my challenge!

I learned quite a few things the past 2 months where I finally started learning JavaScript, so this is my very first JS project, be kind!

I actually remade this challenge three times! The first time I was struggling a lot, and there were quite a few bugs, then I gave up and started studying more, tried again, still struggled.. Then I started again yesterday and everything just clicked! Third time is a charm

CUSTOM DESGIN - My personal additions:

• I added a few new error messages for when a special character is used inside Name and Last Name.
• I learned and used regex in order to make the validation form for the Name, Last Name and Email.
• I added an eye icon when you type in the password so that you can see what you typed if you click on it.
• I added a small animation to the placeholder when you click in the input field, and because of that I removed the "email@example/com" that the design asked for.

Any and all feedback is welcome, thanks!

Any feedback is welcome

Somehow if I change to iPad view on Chrome it won't show the bottom of the page, cropping the content. But if I do it on firefox or resize the page on chrome it works perfectly fine, not sure what I can do to fix that or if it's a browser bug.

I don't understand what these HTML errors mean

Couldn't figure out the background to make it look like in the original, any feedback is welcome

Also changed the :hover a bit

I tried not to use <div>s but I'm not sure I used <article> and <section> correctly

I tried doing it with grid first but I couldn't get it right, so swapped to flexboxes which was a bit easier.

My code structure is a mess, I'm trying to improve on that.

Any feedback is welcome

I'm not sure using position and transform: translate-x() was the right approach to achieving the right layout, I'll definitly have a look at other people's solution cause I feel like I cheesed it with moving things around when I should have done in some other way?

This was harder than I thought, so any feedback is welcome

I tried again using the BEM format, I think I did it right ? Although I did not use a Modifier at all.

Also it was very hard to figure out a way to properly position the background since I never placed 2 backgrounds at once before.

Any feedback is welcome.

I tried to implement the BEM method but still not sure if that's how it works, so I'll keep working on that

I have no idea how to replicate the overlay color on top of the black and white image provided

The very first challenge I did but didn't submit.

My first challenge, I tried to add something new to practice using Media queries so I added a horizontal layout for phone users.

I'm not sure the way I used Media Query is good or if I should have written an idividual line for media query only.

I learned how to use ::before and ::after which is something I never really used so that was nice