Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • José Mama• 150

    @codesByJose

    Submitted

    What are you most proud of, and what would you do differently next time?

    im so proud that my javascript skills have improved!! im feeling like a god already!!!!!!.. for sometime now i have had some issues with mobile responsiveness but i continued to do it by now i already know how to get the mobile to be responsive and im super proud of all of this.. this is my best work yet and i am looking forward to so much more.

    What challenges did you encounter, and how did you overcome them?

    had some little stress with java script. yes but over came it. im still looking forward to learning diverse ways of implementing java script.

    What specific areas of your project would you like help with?

    all feedbacks are welcomed

    Responsive Newsletter

    1

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    Congratulations on completing this challenge, good job.

    In terms of design, you did well, only issue is that you didn't add any padding to the input element and the website isn't responsive for smaller screens as well as the design is a different.

    For functionality I like that you actually have a separate page for the success element, most people(including myself) used a framework and state to replace the whole container. But there is one issue on that side, the email you have is static and I believe that it should match whatever email that is entered into the input field. So what I suggest is that you find a way to send the email entered from the first page to the second one, and what better way to do so that htmlQueryParams and what makes it even easier on your side is when you did this:

    <form action='success.html' id='form'>

    This makes that when you submit your form it will go directly to that page and pass any information entered into your form to the success page through htmlQueryParams, but one small detail you missed out was to actually include a name property in your input field so thats how data is passed and thats why its good to have a name property. So your new code should now be:

     <input placeholder="[email protected]" id="email" name="email">

    and then you can just use URLQueryParams to get the email property and the use it to replace the default email that you have there.

    const queryString = window.location.search
const params = new URLSearchParams(queryString)
const email = params.get('email')

    And ofcourse you can do some extra checks to make sure everything is good like using the .has method to make sure it exists and you can reuse your isEmail function to make sure its actually good and if not show some kind of error message.

    All the best.

    0
  • Dylan Heslop• 620

    @dylan-dot-c

    Submitted

    What are you most proud of, and what would you do differently next time?

    Been a while I've done something in vanilla JS, so its always a good feeling going back to basics

    What challenges did you encounter, and how did you overcome them?

    Was planning on using vue, but it seems to have some compatability issues with Leaflet so I just went with vanilla js.

    What specific areas of your project would you like help with?

    Would like to have to review on my coding style and what can be done better.

    Responsive IP Address Tracker done with Vanilla JS

    2

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    Thanks a lot for the review🙏🙏, with reviews like these I'll definitely look forward to uploading more challenges and such. Also at first the code was all over the place so I had to take a break and came back to write some sensible code.

    Anyways, for the DOM and the elements object part I was actually planning to do something smart that will kinda prevent me from doing it explicitly for each element, I was thinking about like a for loop and join the properties by the keys but I didn't bother to do so.

    For the second part, I didn't realize the window.onload was unnecessary since I used the defer, cause I knew the defer was for like after the main content will load, so that makes the window.onload a little bit redundant and I guess I was using it mainly as a driver function so I'll replace it with a main() like most programming languages.

    For the 3rd part, it seems I was too lazy to do so but that's for that😅, error handling is important 😁.

    About the API keys I'm aware that having them anywhere in your frontend code will allow them to be discoverable and thereby used maliciously by others. It seems the recommended approach would be to store my APIkey on a backend/server then I would let the backend make the request for me and just send the data back that I need. Also seeing that this APIkey isn't linked to my Credit Card or any confidential data, I guess it's ok if it gets discovered. Even GitGuardian notified me about a confidential leak in my code when I pushed to GitHub.

    Overall thanks for the review hopefully I can give you the same in depth review for your challenges.

    Thanks again

    0
  • Muhammad Zohaib• 190

    @zohaibxJackie

    Submitted

    What are you most proud of, and what would you do differently next time?

    In this project I am proud of two things:

    • Number one is the dark theme switches
    • Number two is using Restful API

    In this project, I have used an efficient way to make a button that switches between light and dark theme. Most of the time, we use JavaScript for things which are possible by simple HTML and CSS. So, in this project, you will see a light and dark theme toggle button. I have not used any JavaScript for this. I simply used ``````, then on the by using checked pseudo-selector, I was able to switch between themes. You can see my code in GitHub and let me know if you need any help.

    What challenges did you encounter, and how did you overcome them?

    The challenge for me was, "How to get information from API and asynchronously save it in a variable, and how to send it to a neighbor component?". This was because I usually make different components to separate the code for reusability purpose.

    How I overcome it?

    Someone suggested to use context API. But I came up with a better solution. I transferred that data to the parent component and then transferred it to the child component. This helped me a lot because another challenge was that how to get the information of a country when someone clicks on the country info cart on the homepage. The solution was again simple. I just had to get the name of the country and then send the API to get the information about the country and show it using a same component.

    You can refer to my code to see a detailed version.

    What specific areas of your project would you like help with?

    Honestly, I got it covered 😁.

    REST Countries API with color theme switcher solution

    2

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    Well done, overall it's a good solution and design is good.

    What i realized is that the website might not be too accessible, the countryCards are not focusable by keyboard tabbing so you can only tab upto the dropdown list. It seems you might need to use an anchor tag to fix that issue.

    Also in terms of routing I see you used '/search-result' for showing the extra details of a country, but I think you could have used dynamic routing so that each country has its own unique link. I think that doing so would also make it perfect to include the anchor tags.

    I also realized that when you changed the regions, the cards are no longer clickable, idk why that's so and I wasnt able to inspect your code because you might have uploaded the incorrect github repo url(Rock Papaer Scissors).

    In terms of the search feature, you made it so only when the user types in the full spelling of the country can they actually find it, so what if I can spell the country im looking for? I don't remember if it was required but for my solution when you type it changes realtime for all the countries that matches the user's search query. So they wont have to have the full name of the country.

    Another issue is that when you have opened the extra details of the country, you should also make the border countries navigable so when a user clicks on it, they can get instantly directed to that countries page.

    Finally for the mobile design for the countries details page, it seems like you just centered align everything there so you could also fix that up.

    Overall this was a good effort and you did well attempting it.

    Have a great day.

    0
  • coder-abdo• 280

    @coder-abdo

    Submitted

    What are you most proud of, and what would you do differently next time?

    passing props from child to parent and passing a v-model data in a proper way next time I will use tailwind instead of plain CSS.

    What challenges did you encounter, and how did you overcome them?

    the main challenge is that I used Vue to handle everything I needed to pass a v-model or two-way data binding so I searched and found that I needed to pass the binding value and the handler emit for a click handler and passed the props easily.

    What specific areas of your project would you like help with?

    I don't think there is any issue with my solution but if someone finds any trouble or issue don't hesitate and let's discuss.

    newsletter signup with success message

    1

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    Hey there! Your the first person I found using vue here, I recently just started with it(I'm tired of react), anyways your solution is good but one issue I have is the desing inconsistencies that are there. Mainly speaking about how the image is a bit too long and the lack of extra padding on the buttons and input elements.

    Anyways on the functional side, you should actually have the confirmation email entered by the user here: <strong>[email protected].</strong> and not that default one. Other than those issues this is a great attempt.

    You can vue mine here(built with react): My Solution

    Marked as helpful

    0
  • Justin Levy• 100

    @justinsane

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud of the design and how close it resembles the original.

    I would employ a system to make it easier to transform the 'large screen' version to a 'small screen' version. This process took me quite a bit.

    What challenges did you encounter, and how did you overcome them?

    I had a challenging time reformatting the large screen design to small screen. I'm going to search out a system or method to make this easier.

    What specific areas of your project would you like help with?

    Ways or tips to simplify the design process for both small and large screens.

    Product Preview Card - React & Tailwind CSS

    2

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    Oh hello there... heard you wanted a better process of turning larger screen designs into smaller one, well... I dont know if this count, but I always(since recently) go for mobile-first solutions(mobile-first desktop-last), they prove to be more efficient from what I have been through so far and I actually like it.

    1
  • JaceLee• 240

    @jaceleedev

    Submitted

    What are you most proud of, and what would you do differently next time?

    I felt a great sense of satisfaction when I accurately implemented the responsive layout using CSS grid. However, I didn't solely rely on grid; I used flexbox for smaller components within the card, such as buttons. I'm particularly pleased with how I combined these two approaches to complete the project.

    What challenges did you encounter, and how did you overcome them?

    I grappled with whether to implement the mobile or desktop screen first. My conclusion is that generally, a desktop-first approach is better. It seems much easier to scale down from a larger screen to a smaller one than to expand from a small screen to a larger one. However, depending on the nature and circumstances of the project, a mobile-first approach might be more suitable in some cases.

    What specific areas of your project would you like help with?

    I would be grateful for any tips or insights others have gained while working on this challenge.

    Product Preview Card Component with Next.js, Tailwind CSS

    1

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    This is a great attempt, well done.

    As it comes to mobile-first or desktop-first, I normally did desktop first because it was what I used to, that I stumbled upon a challenge that I did desktop first and when I was doing the mobile version I almost cried... Since then I always go for mobile-first, as for my reason its better to do from small to large and not vice versa, also that mobile looks better on desktop compared to desktop on mobile(silly reason). For me doing mobile first help me make better layouts.

    Also another thing I find interesting, that is your logic for swapping Images, I recently discovered the <picture></picture> element in html, but that helps with swapping images automatically based on the viewport and im not sure but I checked on StackOverflow and it seems NextJs now supports it, so you should still be able to use the NextImage component for that.

    Disclaimer: I haven't completed this challenge as yet.

    Marked as helpful

    1
  • P
    eestaniel• 610

    @eestaniel

    Submitted

    What are you most proud of, and what would you do differently next time?

    Navigating Framer Motion for the first time was quite an experience. It was challenging but definitely rewarding to see the animations take shape. There’s still much to learn about customizing animations to enhance the app's functionality

    What challenges did you encounter, and how did you overcome them?

    Next time, I'd delve deeper into making the images and flexbox layouts more responsive. This project showed me there's room for improvement in handling fluid transitions and layout changes. I did the best I could with the current knowledge, but there's definitely a need for a more structured approach to responsiveness right from the start.

    Remix and Framer Motion

    2

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    Also it would be great if you could check out my multi-step form solution, I used framer motion there, but not alot, just for like sliding between steps of the form.

    0
  • P
    eestaniel• 610

    @eestaniel

    Submitted

    What are you most proud of, and what would you do differently next time?

    Navigating Framer Motion for the first time was quite an experience. It was challenging but definitely rewarding to see the animations take shape. There’s still much to learn about customizing animations to enhance the app's functionality

    What challenges did you encounter, and how did you overcome them?

    Next time, I'd delve deeper into making the images and flexbox layouts more responsive. This project showed me there's room for improvement in handling fluid transitions and layout changes. I did the best I could with the current knowledge, but there's definitely a need for a more structured approach to responsiveness right from the start.

    Remix and Framer Motion

    2

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    Hey, nice code I'm a react guy but im experimenting with Vue for the time being. One thing I realized about your solution is that it might not be too accessible, what I mean is that from a keyboard POV only the confirm order button is focusable by tabbing other than that, nothing else. I had the same issue on my end and I realized I had a bad habbit of making every functional element a div instead of a button, when I used buttons all of my clickable/functional elements are now focusable through my keyboard. So i guess that could be a thing you could look at if you wanna.

    Also I think it would be nice/cool if we could compare our codes and our component compositions along with our state management solutions, but let me know what you think.

    Marked as helpful

    1
  • Solomon Obanijesu Philip• 1,200

    @Hackerbot24

    Submitted

    What are you most proud of, and what would you do differently next time?

    I AM PROUD OF COMPLETING MY FIRST FRONTENDMENTOR CHANLLAGE. SO VERY PROUD

    What challenges did you encounter, and how did you overcome them?

    ONE OF THE CHALLENGE I ENCOUNTER WAS IMPLEMENTING THE CART FUNCTIONALITY, BUT I HAD TO GO THROUGH MY STUDIES AGAIN TO GET IT, EVEN THOUGH IT TAKES ME DAYS

    What specific areas of your project would you like help with?

    I THINK NO ONE IS AN HIGH LANDER I AM OPEN TO LEARNING

    HTML5 ,CSS3, JAVASCRIPT, RESPONSIVE WEB DESIGN, UI/UX DESIGN PRINCIPLE

    1

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    There is a lot I can say about this but let's start with well done, although the design isn't quite how it should look, the functionality ain't too bad either. I don't need to talk much about design wise as you would have the designs file, but I need to know why you didn't get to follow the design created. Anyways in terms of code now, you used the thumbnail photos which are low resolution so the images looks really blurry and pixelated, the thumbnails should only be used on the confirm order model nowhere else and so you know HTML has an inbuilt tag that's made for changing pictures based on screen sizes thats the <picture> element used with srcsets and img tag so that images can change naturally due to screen sizes. There is still so much you can improve upon and id gladly offer my help if you chose to accept it.

    Marked as helpful

    0
  • Dylan Heslop• 620

    @dylan-dot-c

    Posted

    Hey well done, A for effort but there is still a lot of things that must be done for this challenge to be fully completed. Firstly the data should be fetched from an external API to generate the list of all the countries in the world not just 8 of them. Then the user should be able to click on each country to see more details like capital and bordering countries. Also there should be a search feature where the user can search for a country instead of scrolling down a whole list of them. There should be a dark mode. There should also be a filter by region as well. If you would like help I would be glad to offer some to you when we are both available. All the best.

    Marked as helpful

    0
  • Dylan Heslop• 620

    @dylan-dot-c

    Posted

    You did well, great job. Just a few things to find tune the design like the card padding, I think you can use a single padding for the entire card that will cover the image and the details, also the learning button can be redesigned as well.

    0
  • Mohamed• 320

    @ameencoding

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am very exited to use APIs, and I am looking forward to build more with APIs.

    What challenges did you encounter, and how did you overcome them?

    Nothing.

    Advice Generator App

    1

    Dylan Heslop• 620

    @dylan-dot-c

    Posted

    Well done, the design isn't 100% perfect but that's ok, what you could improve is maybe use a button to represent the generator button so that screen readers can notice it and it can be focusable with a keyboard. Other than that everything is good. Well done

    0