Skip to content
OverviewSolutions
3
Comments
6
Mehmet Akif AKKUŞ
@mehmetakifakkus

All comments

  • Caramello•180
    @BuzzFizzerSubmitted over 1 year ago

    console.log("Hello Programmers"),

    Even though this project posed some challenges for me, I thoroughly enjoyed working on it, so much so that I took extra time to add additional features.

    Technologies Used:

    Extra Features:

    • Pagination: Added the ability to limit results per page, and a page navgation strip to allow easy movement between pages.
    • Sorting: Added the ability to sort countries based on name and population in an ascending or descending fashion.
    • Animation: Used a combination of AutoAnimate, transitions, and animations to create as smooth experience when traversing the page. This includes moving between result pages, changing website theme, when items are moved, shown or hidden, or when hovering over items.

    Difficulties Encountered:

    • Route Transitions: I have used Vue's transition component to animate the route transitions a few times in the past, but unfortunately, it didn't work for me on this project for some reason. (I'll look into it further and update this project if I find anything)

    If you have any suggestions on how I can improve my code, I would greatly appreciate it if you could leave a comment. Thank you in advance. (✿◠‿◠)

    REST Countries API with color theme switcher

    3
    Mehmet Akif AKKUŞ•170
    @mehmetakifakkusPosted over 1 year ago

    Congratulations for completing this challenge!

    I loved what you added as additional features, I especially will give AutoAnimate a chance in one of my future projects.

    • In my project I added storing the latest search value and filter value when you visit the country detail and go back to the main page. It uses URL search params. You may think adding this as a feature. link if you want to visit
    1
  • Kian•230
    @ikianmSubmitted over 1 year ago

    Hello there, I have just finished this project using Next/React Js with Type Script. The project is fully responsive so feel free to check it out. any comments would be appreciated.

    Responsive Rest Countries API with theme switcher

    1
    Mehmet Akif AKKUŞ•170
    @mehmetakifakkusPosted over 1 year ago

    Congratulations for completing this challenge!

    I have investigated your code a bit and tried your development on your link you have shared. And I list my advice here down below:

    1. As far as I have seen search feature is case sensitive. That means we can not see Arabia when we search for ara. So, you can make both the search criteria and the country name lower case and use string.contains after
    2. After countries filtered, we can not set it back to all regions or cancel the selected filter. This is a useful feature and we may not want to refresh the page since we may have an active search keyword

    You either probably add these later or you missed somehow, these are some points to note.

    Thank you for your efforts!

    0
  • Elvis Josué•190
    @iElvisJosueSubmitted over 1 year ago

    All buttons work, feel free to press them! 😝

    1.- Can someone explain to me how the paths work in fecth?

    For example: On my local server I can use this path './data.json' but on github pages it gives me an error, what would be the problem and its solution? 🤔

    2.- Can someone give me optimization tips?

    For example: On the computer the times are fine, but on cell phones it is super slow! That frustrates me, I'm really new to consuming API's, your help would be great! 😫

    Countries API with Dark Mode

    1
    Mehmet Akif AKKUŞ•170
    @mehmetakifakkusPosted over 1 year ago

    Hey, congratulations for completing the challenge 👏

    I have investigated your code on your github page. And I list my advice here down below:

    • I definitely advise you to choose a frontend library such as React.js or Vue.js. They help you to manage html elements and also style. React's main focus is making everything component wise. It also makes management the code easy.
    • Another thing is that you can use fetch API to fetch data from endpoints of https://restcountries.com/ instead of use of static data.json. Another problem is using data in data.json is that it might be outdated. Fetching data guaranties that you have the up-to-date data all the time.
    Marked as helpful
    1
  • sauverpro•40
    @sauverproSubmitted over 1 year ago

    this challenge was very intensive I found many difficult bugs and I tried to solve them

    Responsive Country App

    1
    Mehmet Akif AKKUŞ•170
    @mehmetakifakkusPosted over 1 year ago

    Congratulations for completing this challenge!

    Your solution has all the functionality with correct results. But I have some comments regarding to the challenge, especially for the visual part:

    • Visually, it is better to imitate the same design as much as possible. You can compare the design and your solution in the DESIGN COMPARISON section of the this challenge's page.
    • Hover effect when hover the card is nice, -I can also add this in my own project- But one note about card is that card height is not the same so they seem not good visually. That would be perfect of you make them the same height. In your .country-card css class, you can add height: 360px as an attribute, then they will be the same height
    • For card layout you can use css grids, and you can specify number of grids according to the screen width. For instance, in your div contains your cards, for screen width greater then 768px, you can create 2 columns, then similarly, after 1024px you can have 3 grids:
    @media (min-width: 768px)
.grid-container{
    grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 1024px)
.grid-container{
    grid-template-columns: repeat(3,minmax(0,1fr));
}

    Thank you for your nice project and happy coding!

    0
  • PatrickLee22•170
    @PatrickLee22Submitted over 1 year ago

    What drew me towards taking this challenge was the opportunity to practice my skills to eventually get confident enough to build a social media clone project. I do not think I am there yet as I am still learning new things about frontend development.

    I did struggle to decide if I should/should not use the State hook to record the reply data for each Comment component.

    Any feedback would be greatly appreciated.

    Interactive Comment Section w/ Typescript & React

    1
    Mehmet Akif AKKUŞ•170
    @mehmetakifakkusPosted over 1 year ago

    Congratulations finishing this task,

    I will divide my comments into 2 parts namely visually and functionally.

    Visual comments:

    • For the comment-card class on your css file, you can make mode padding from top and bottom by typing this: padding: 25px 20px. It will put more spaces to the top and bottom, and it will be much similar to the design.

    • Instead of making score board centered, according to the design all of them seem starting from the top, so you can change your css .comment-card as this: align-items: baseline;

    • For your send button inner text color (it is black rn.), you can style in your .adder-send class by adding color attribute: color: white

    • You can also add hover effect as pointer in your .edit-button span class: cursor:pointer

    Functionality and code All functionalities are working perfectly, but I have some advice for your code base.

    •           createdAt={items.createdAt}
          score={items.score}
          user={items.user}
          replies={items.replies}```

    instead of passing parameters separately, you can only sent items as comment, then you can destructure it in the child component const {score, user, replies} = comment

    • Another useful thing I can say is that you can use Context API to centralize storage and use whenever you need it.

    Take care and happy coding

    Marked as helpful
    1
  • Gideon Obiasor•80
    @DrPlainSubmitted over 1 year ago

    Edited my solution to implement all required functionalities. Is there any functionality that is not implemented?

    React, tailwindcss, API

    1
    Mehmet Akif AKKUŞ•170
    @mehmetakifakkusPosted over 1 year ago

    Hey Gideon, I like your project, but here are some marks to revisit on your project.

    1. It seems that details page is not created. You can create details page for the country clicked.
    2. It seems that search filter does not work. You can add the feature that allows user to type and show the countries that fulfills the searching criteria.
    0