Abbas Saad• 260
@AbbasSaad27
Submitted
Hi guys!! This is my first time completing a frontendmentor challenge using js. Had quite fun doing this challenge!! Any feedback would be really appreciated!
Oleh Tovkaniuk
@OlehTovkaniuk
All comments
- Oleh Tovkaniuk• 505
@OlehTovkaniuk
Posted
On mobile the main banner is closing view of the map. Also the application doesn't work in Opera or Brave since those browsers blocking it by adblockers
1 - Matthias• 235
@MatthiasSmith
Submitted
First time using styled components outside of a tutorial.
I added loading and error states for when the API is fetching and/or returns unsuccessfully.
Learned a lot about leaflet. And getting environment variables to work in a production environment. Guess I relied on dev-ops folks too much in the past. 😅
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
Did you have any issues with AdBlocker in Opera and Brave browsers??
0 - Alex• 360
@ByKyZo
Submitted
I tried to make the application more complete by adding an edit system, all feedback is appreciated! :D
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
I see you put some decent work in this challage. And even made functionality for data cashing in local storage. And all those animations. And feature for editing todos. Great efforts, great work!
1 - drallas• 375
@Drallas
Submitted
This is my 3rd newbie challenge submit and I enjoyed the process of hacking this card component together. Building such a 'simple' card component isn't easy for a 'Newbie' and it requires some time to think over before trying to do it properly.
Feedback would be welcome How is the responsive experience; what can / should I improve (*see Note)? I try to use BEM but still have doubt if i used it correctly Anything else that I missed or should improve.
Note: Related to BEM I recommend this video: https://www.youtube.com/watch?v=iyR6RXUZFQ8 it's quite good and explains it in visual detail.
Where I struggle is how should elements be named when there are multiple levels of nesting.
<div class="card__mid"> <div class="card__text"> <div class="card__name">Victor Crest <span> 26</span></div> <div class="card__location">London</div> </div> </div>Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
you could make width of your card block be "max-width", then it would look good at 350px screen resolution and lower
0 - Matthias• 235
@MatthiasSmith
Submitted
First time using styled components outside of a tutorial.
I added loading and error states for when the API is fetching and/or returns unsuccessfully.
Learned a lot about leaflet. And getting environment variables to work in a production environment. Guess I relied on dev-ops folks too much in the past. 😅
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
Are you aware that enviroment variable doesn't secure your API key? Here is discussion about this theme: https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app
1 - Karel Klečka• 160
@Klekar
Submitted
Any feedback is welcome. I noticed that at some resolutions the moving part of the counter makes slight (like 1px) move to the right for the duration of the animation (Opera browser), which I assume is side product of rendering "transform: rotateX()", is that correct? If so, is there an easy way to control/fix how it renders?
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
You've done some great job, Klekar. You've inspired me to try this challange though I think it won't be an easy nut for me.
0 - Arafat Arnob• 245
@Arnob-007
Submitted
Any suggestion on mobile drag & drop functionalities will be much appreciated.
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
As for me everything looks ok except that drag & drop doesn't work on mobile. But this is the way how Html drag and drop API work. You could use library Sortable for this purpose. It is really easy to connect and customize.
0 - Abhik• 4,840
@abhik-b
Submitted
I have used SortableJS for making drag n drop available for mobile devices Please provide a feedback on how I should improve this 🙏
If you are new to frontend mentor and you are struggling with this challenge then I have also created youtube video while creating this solution which can be used as a reference:https://youtu.be/lZE0Qydl4ko
* This video shows pure javascript way for drag n drop and also array sorting after drag n drop
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
Good job! There are some bugs but good work! I'll take some ideas from your solution, thank you Abhik
1 @JulianaOliveiraMelo
Submitted
Hello! 👋 My first challenge on FrontEnd Mentor 🥳🎉🍾 I'm still learning and all feadback ould be appreciated. Thanks 🤗
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
Wow, I like it. Text animation is cute. The container doesn't change it sizes when I click a dropdown. Though you have some adaptivity twerks at 1024x1366 resolution(iPad Pro resolution). You can fix it if you want 🙂.
3- Oleh Tovkaniuk• 505
@OlehTovkaniuk
Submitted
I had hard time with positioning background images of the first section - showcase block). Mobile view looks ok but desktop view is quite tricky on different resolutions. It is hard to position so these background images looks good on any desktop resolution. Still I'm not happy with the solution that I made because it is quite different from the design. I would be grateful for any help with this issue.
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
Also I would like to notice that the screenshot of the site in the design comparison somehow is not correct. Those buttons that were shown broken in the screenshot in real are looking correctly. You can see it by the link "PREVIEW SITE"
0 - Nejar• 60
@nejraw
Submitted
After doing some of the challenges I noticed I could do responsiveness better. So I took a mobile-first approach and this is what I came up with!
What do you think?
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
Good for you! And I stuck with background images of the first block :( Have no idea how to arrange everything so it looks good on all resolutions.
0 - Oleh Tovkaniuk• 505
@OlehTovkaniuk
Posted
I can't judge your code because I'm not into React and moreover Typescript. But I like what I see in terms of responsiveness.
0 - asouat• 230
@abdelmawlaSouat
Submitted
For the responsive design, you need to refresh the page..
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
Accordion works just fine. Have gotten the answers to drop down without shifting the entire list both up and down. How do you achieve this?
0 - Arturo Simon• 1,785
@artimys
Submitted
Any feedback is appreciated. Still trying to get the hang of animations
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
You've done it with flexbox and it appears clean.
1 - Dwight• 215
@SarsiPC
Submitted
10/26/20
Honest feedback/criticism is appreciated! Any suggestions on how I can improve this solution?
Credits: https://www.frontendmentor.io/solutions/faq-accordion-card-htmlcss-flexbox-js-Yjw1BKo4Q (JavaScript)
Update 10/27/20
- Removed
display:none;in the CSS and moved it directly to the answer divs in the index.html. This fixed the double clicking issue.
<div class="answer-div" style="display:none;">- Reduced opacity of the box shadow
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
This is kind of creative solution. I like the box animation. Also the main container's size aren't changing when I open the tabs which is good. Nice work.
1 - Removed
- Ariful Mowla• 255
@nokibrokes
Submitted
just tried to fit in both mobile and desktop devices. Feel free to comment if I need any improvement. Thanks :)
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
I would add some margin beneath all the main content. I would add a hover effect for the cards with scale effect etc. I highly suggest you to make mobile layout first - this will make the developing process much easier! More info (which have worked for me) about mobile first's benefits you can find here: https://www.youtube.com/watch?v=0ohtVzCSHqs
You have used scss variables - great. I like your css and html structure. classes names are clearly understandable. JS is clean, I like it.
Good luck in your development learning.
2 - Rafael Díaz García• 130
@RadigarHub
Submitted
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
Solid work. HTML structure is simple which is great.
0 - zeeshan ahmad• 20
@Zeeshanahmadkhanlodhi
Submitted
Oleh Tovkaniuk• 505@OlehTovkaniuk
Posted
Seems like you are using different font and colors. Review Readme document that was in the folder when you was downloading the project. There were information about fonts, colors etc.
0
