All solutions

Builded with React, TypeScript and SCSS

• semantic
• accessible
• RWD
• Drag and Drop functionality with react-sortablejs
• dark and light themes
• subtle and eye-pleasing animations

Any feedback appreciate.

Build with React & Sass

I strongly focused on building semantically correct and accessible site. Site loads with user locale language, if translation for that language doesn't exist then English is as default. Handle a lot of edge cases. I added Advanced Searching Options and More Info to the design. Everything is integrated, so you can combine multiple search options at once. Page has multiple loading states.

Advanced Searching Options:

• possibility of choose multiple regions
• sorting alphabetically or by population
• show countries based on independence status or landlocked status or UN Member status or traffic
• Searching text is wrapped in <mark> element and it has its own background-color to distinct searching phrase.

More Info Tab:

• displays more information
• displays in modal Google Map with country location or <img> with coat of arms of the country

Used Frameworks:

• React
• SASS

Used Libraries:

• axios (for fetching data)
• i18next (for translations)
• downshift (for accessible region select element)

Build with React & SASS.

Used libraries:

• date-fns
• react-textarea-autosize

Any feedback appreciate.

Work both for IPv4 and IPv6

I used:

• ipapi API
• Leaflet Map
• ipaddr.js to validate IP address
• some custom regex for input text value
• loading states

• React
• SASS
• semantic HTML
• accessibility
• BEM

Handle edge cases and formatting inputs text

Any feedback appreciate.

Second project with React and first with React & SASS.

• React
• SASS
• BEM
• semantic HTML
• accessibility
• SwiperJS on testimonials
• animations on scrolling

Any feedback appreciate.

My first project with React.

• React
• BEM
• Semantic HTML
• Accessibility
• Animations On Scrolling

Any feedback appreciate.

• semantic HTML
• accessibility
• Drag and Drop functionality by SortableJS
• themes based on user preferences
• todos, todos order and theme saved on localStorage

• API
• SASS
• semantic HTML
• accessibility
• LocalStorage
• smooth animations with AOS library
• handle edge cases

• SASS
• BEM
• semantic HTML
• accessibility
• smooth animations on scrolling with AOS library.

If you've done this challenge, let me know how long it took you to complete it. Any feedback appreciate.

Carousel and lightbox build with SwiperJS. Smooth swiping images by clicking, swiping, arrows buttons, arrows keys, touching. Possibility of zooming image in lightbox or mobile version of page. In image carousel are used data-hash thanks to which the order of viewing photos is saved in the history. Shopping cart is updating in every time when the product is added. Accessibility by attributes: aria, role, tabindex, disabled, etc.

Any feedback apprecaite.

Any feedback appreciate.

I added touch events for swiping.

Any feedback appreciate.

• Accessibility by aria attributes and disabled states.
• Semantic HTML.
• Very nice and smooth animation of all elements both of backwards and forwards.
• Custom inputs and scrollbar.
• Text (amount collected, donors, amount of left etc.) of all elements is loading based on values in data attributes.
• All disabled states are loading based on values in data attributes

I spend much more time on this than I thought but I accomplished this and managed to make a fully customizable range input for all browsers. Thumb size, color, img etc. or slider size, color, shadows etc. can be very easily changed.

Range input customizes the price and size of the package.

Fully scalable both for desktop and mobile version. Aria attributes and disabled states.

I have problem with custom tip. I set dataset value for input change but when I want to calculate tip with custom value there's error:

Uncaught TypeError: Cannot read properties of null (reading 'dataset')

I did my best. As not even a junior I think I did good job. I used clamp so it is fully scallable based on screen size. Theme is based on user's prefers-color-scheme and also it's saved in the browser. There is some edge cases bugs. I added some functionality to prevent from pressing multiple times operation character or comma.

I would be glad for any feedback regarding my: -BEM in SASS -use of attributes aria, disabled role etc. Is it correct for accesibillity? -folder structure and naming -any other feedback

Also is this challenge really intermediate level?

I'll appreciate any feedback.

I edited a little bit json file and added few things. Everything is fetching from that file: account balance, total spending in month, percentage difference and all values for every day. Based on fetching data bar in the chart with the biggest value is always max height and all other bars are scaled to that one based on their values so the data can change all the time without affecting. Every bar and label with $ are ::before and ::after elements. Also I added focus states for them.

Any feedback about some easier or more clear way to do that I'll appreciate.

I was trying do something more than just simple expanded list on click etc. So I create some functions with purpose to do:

• When we click on the "features" or "company" it should expand
• When it's expanded and we click anywhere besides expanded container it should collapse ( and it's partially work, because when we click it's collapsing but in the different way that I wanted. It's collapsing if we click anywhere but "features" if it's expanded or "company" if it's expanded and we can't click on any list element because it's also collapsing container. We can tab through list element though and after clicking enter key in any list element it's properly collapsing). It should work only in desktop view, in mobile view if we expand element and close menu and then again open menu, expanded element should be expanded
• On the mobile view menu slides smoothly in both ways (here is the same problem like above. Menu is properly expanding but we can only tab through list element)
• Mobile menu can be closed by clicking close btn or anywhere besides menu
• When screen changing from desktop view to mobile and reverse, all elements return to their default states (to avoid situation when we open menu in the mobile view and then resize screen to desktop view)
• All elements that have aria-hidden toggle states whether element is visible in the screen or not

I think problem is caused by handleSlides() in function handleDefaultStates() but I don't know how to fix it.

Do you know why it's that and how to fix it? And also do you know whether I correctly use aria attributes and whether my HTML is semantic correctly? Is that a good thing that I used <details> element for expanded menu? And also did I correctly extracted function into another functions is JS files or maybe that was unnecessary? I'd be glad for any feedback and help.

I'll appreciate any feedback. Site populates data from json file that I created. We can click in any notification in the page and mark/unmark as a read. And also if we accidentally click on person name or group and so we won't mark/unmark notification. I'd would be glad for any feedback about semantic HTML and all aria elements.

Any feedback about how to write proper SASS with BEM and what's wrong with my styles. Any other comments, also kindly welcome.