@TrEv0rRrRr
Latest solutions
Multipage and responsive Room website (react, typescript, tailwind)
#motion#react#tailwind-css#typescript#viteSubmitted 6 months agoComplete Insure website (React, Framer-motion, Tailwind)
#react#tailwind-css#typescript#vite#motionSubmitted 6 months agoMulti-step form with React and Motion
#react#tailwind-css#typescript#vite#motionSubmitted 7 months agoResponsive and interactive e-commerce product page
#react#tailwind-css#vite#typescriptSubmitted 8 months ago
Latest comments
- @Pdave-dcn
Hey friend, congrats on completing this challenge! While testing your solution, I noticed that you didn't consider the possibility that the user might not select none of the available plans and still able to send the form. The congratulation message will still appear. I think it's a big issue because if there's no valid info in the form, why allow the user to send it?
- @Tsuna21182@Pdave-dcn
Hey! Nice work on completing this challenge, i actually did it myself a few months ago. You've done a solid job, but I think there’s some room for improvement, especially in the UI.
For example, on desktop, the todo (container) could be a bit larger for better readability. Also, centering the todo text looks a little off, it might feel more natural if it were left-aligned instead. Another thing: adding a new todo by pressing Enter would make the experience smoother, rather than relying solely on a button click.
I also took a look at your GitHub and checked out your useTodoHook. It’s well-structured, but it seems to be handling too many responsibilities at once. A cleaner approach would be to split concerns. One hook for managing the task list (CRUD operations), another for filtering logic, and maybe a final one to bring everything together (useTodoHook). This would make your code more maintainable, testable, and reusable.
Overall, you’re on the right track! Keep it up!
Marked as helpful - @Cybercore-xWhat are you most proud of, and what would you do differently next time?
I really has some struggle on CSS and most definitely on JavaScript, as am still learning it took me a while to get as close as possible to the main Challege design to the best of my abilities.
What challenges did you encounter, and how did you overcome them?Well most of the hard part was CSS and JavaScript, and I tried and use everything I knew to come as close as possible to the main Challege design.
What specific areas of your project would you like help with?CSS but mostly JavaScript
@Pdave-dcnHey there! I noticed you only have the mobile version of the app. looks like you used a mobile-first approach for this challenge, which is great! To adapt it for desktop you could structure the app like the following:
<body> <div class="calculator__wrapper"> <div class="form__wrapper"> <form action=""> **contents here** </form> </div> <div class="display__section"> **contents here** </div> </div> </body>Then in CSS, you could use the following:
@media screen and (max-width: 1024px) { .calculator__wrapper{ display: flex; } .form__wrapper, .display__section{ flex: 1; } } - @GaMeSDSTWhat challenges did you encounter, and how did you overcome them?
I have a very annoying problem with Leaflet where it wouldn't change the map on re-render saying that it already initliazied which makes since so i tried to remove it using leaflet itself to try and get a clean solution but after reading the documents and trying for a while i gave up and ended up doing it the dirty way (dom Manipulation) i literally removed the element from the dom then inserted another one and re-initliazed the map again
What specific areas of your project would you like help with?a way for changing the map in leaflet easily
@Pdave-dcnThe problem is that you didn't use the React-specific version of Leaflet. You should have installed Leaflet as a dependency by typing
npm install leaflet react-leafletin the terminal, and then configured the map accordingly.import "leaflet/dist/leaflet.css"; import L from "leaflet"; // Fix marker icons import markerIcon from "leaflet/dist/images/marker-icon.png"; import markerIconRetina from "leaflet/dist/images/marker-icon-2x.png"; import markerShadow from "leaflet/dist/images/marker-shadow.png"; // Define the default marker icon configuration const DefaultIcon = L.icon({ iconUrl: markerIcon, // Path to the default marker icon iconRetinaUrl: markerIconRetina, // Path to the high-resolution marker icon shadowUrl: markerShadow, // Path to the marker shadow iconSize: [25, 41], // Size of the icon [width, height] iconAnchor: [12, 41], // Anchor point for the icon (where it attaches to the map) }); // Apply the default icon to all markers L.Marker.prototype.options.icon = DefaultIcon; // Main map component const MapComponent = () => { return ( <MapContainer // Set the default center of the map (latitude, longitude) // Modify these coordinates to change the starting location center={[51.505, -0.09]} // Example: London coordinates zoom={13} // Adjust zoom level (higher = more zoomed in) style={{ height: "100vh", width: "100%" }} // Adjust the map's height and width > {/* Add the map tiles */} <TileLayer // OpenStreetMap tile URL (you can replace this with other providers like Google Maps or Mapbox) url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" // Attribution to the map data provider (modify or remove if using a custom tile provider) attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' /> {/* Add a marker to the map */} <Marker position={[51.505, -0.09]} // Marker position [latitude, longitude] // Modify these coordinates to place the marker at a specific location > {/* Popup that appears when clicking on the marker */} <Popup> A default marker popup! {/* Customize this text to display specific information */} </Popup> </Marker> </MapContainer> ); }; export default MapComponent;Hope that help!
Marked as helpful - @thedanielkingWhat are you most proud of, and what would you do differently next time?
Im proud that I could come up with the solutions by myself.
What challenges did you encounter, and how did you overcome them?I had challenges in giving the selected link to be active and also waiting to press "enter" as the event listener;
What specific areas of your project would you like help with?More on code refractoring and also, when reset button is clicked, how to rest the bill to 0 and also the number of people to 0;
@Pdave-dcnTo clear the input fields when the reset button is pressed, you could implement the following:
const resetBtn = document.querySelector('.reset-btn'); const inputBill = document.querySelector('.input-bill'); const inputPeople = document.querySelector('.input-people'); resetBtn.addEventListener('click', () => { inputBill.value = ''; inputPeople.value = ''; }); - @thedanielkingWhat are you most proud of, and what would you do differently next time?
Im proud that I could come up with the solutions by myself.
What challenges did you encounter, and how did you overcome them?I had challenges in giving the selected link to be active and also waiting to press "enter" as the event listener;
What specific areas of your project would you like help with?More on code refractoring and also, when reset button is clicked, how to rest the bill to 0 and also the number of people to 0;
@Pdave-dcnGreat job, friend. I have some suggestions for you. I think the app dimension is too small, so it would be better to increase it. Also, setting the initial value of inputs to zero in your code is not ideal. Instead of this
<input type="text" value="0" id="bill">, try this<input type="text" placeholder="0" id="bill">.Marked as helpful
