Skip to content
OverviewSolutions
23
Comments
5
Eduard Ionescu
@EduardIonescu

All comments

  • Eduard Ionescu•510
    @EduardIonescuPosted almost 2 years ago

    Hi, to center it you can give your body element the following css:

    body{
  min-height: 100vh; /* Makes sure your page is 100% of the view height*/
  width: 100vw; 
  display: flex;
  justify-content: center; /* Aligns horizontally*/
  align-items: center; /* Aligns vertically */ 
}

    Another thing you could improve is: try to use <main></main> as your main container instead of <div class="Container"></div>. It won't change the how your code runs, but it's the standard html semantic.

    I hope it helped and good luck coding!

    Marked as helpful
    2
  • NizarMjr•390
    @NizarMjrSubmitted almost 2 years ago

    This project focus in an importants points , it makes you deal with many parts like Layout, responsive as well as javascript part ... Really it's an interesting project i like it I have problem i could'nt fix it : when i navigate to other page i need dobble click to active the white border under its name ,How can i fix it Your feedback are welcom

    space tourism

    1
    Eduard Ionescu•510
    @EduardIonescuPosted almost 2 years ago

    Hi, your solution doesn't work because everytime you go to another page, it triggers a re-render, and since you have the navbar inside each page, it re-renders too. But you can try using useLocation to implement it in a simple way. I used something like:

    import { useLocation } from 'react-router-dom'
import Link from "whatever";
export default function Navbar(){
  const location= useLocation();
  return (<Link to="/destination" className=`${location.pathname == "/destination" && "link-active"}`>...</Link>) 
}
    • Here location.pathname will return your route so basically if you're in the Destination page it will return '/destination' and if that is the case, then the condition will be true and return "active-link" as the className . Therefore if you are on the page that matches the respective link's address, the link will be the only one active so you don't have to worry about onClick events.
    • I honestly used useRouter from nextjs, but it should be the same as useLocation in react-router.

    Alternatively, you could probably keep it the way you did it if you create a layout with the navbar that doesn't change when the page changes, but am not sure about it.

    I hope this helped and good luck debugging it haha!

    Marked as helpful
    1
  • VNenad93•80
    @VNenad93Submitted almost 2 years ago

    Hello!

    Simple app made with React, Tailwind and Vite.

    Code is cluttered unfortunately, i would be very thankful if anybody could help me with a better solution on how to Re-render data in the App function. How can i useState better?

    Thanks in advance!

    Time Tracking App made with React, Vite and Tailwind

    1
    Eduard Ionescu•510
    @EduardIonescuPosted almost 2 years ago

    Hi,

    I think you've overcomplicated the problem here a little bit haha. I'd say it would be better to save the data in your state and then just map and filter the data you want to show in your App.jsx. That means you could probably refactor the daily, weekly and monthly functions into one single function.

    You can also set the daily/weekly/monthly values in a useState in App.jsx and then do something like this(make sure you change the values of the radio inputs to be all lowercase in order to get the right keys from the data):

    const [data, setData] = useState(Data); // normally you'd have to fetch it in a useEffect, but this works too, I think.
const [timeframe, setTimeframe] = useState("weekly"); //change this on click in Profile
const getTimeframe = {
	daily: "Yesterday",
	weekly: "Last Week",
	monthly: "Last Month",
};

return (
// ...previousCode

data.map((d, index) =>{
   return <Card  last={getTimeframe[timeframe]} 
                    key={index} 
                    name={d.title} 
                    current={d.timeframes[timeframe].current} 
                    previous={d.timeframes[timeframe].previous} />
}))
)

    I haven't tested this but you can try to refactor to something similar to this. Another thing I've noticed is that you haven't implemented the hover effects on <Card />.

    I hope this is not too long and helps you in some way haha

    Marked as helpful
    1
  • VNenad93•80
    @VNenad93Submitted almost 2 years ago

    Greetings!

    First submit on the Frontend Mentor website, feedback is needed :)

    In this challenge I used the following: -React -Vite -TailwindCSS

    Had problems with the container placement, and opted for a quick fix with a div in between.

    Had lots of fun and learned a lot!

    API Quotes generator using React/Vite/TailwindCSS

    1
    Eduard Ionescu•510
    @EduardIonescuPosted almost 2 years ago

    Hi, nice job on the project.

    You can give your section container these properties:

    display: flex;
justify-content: center;
align-items: center;

    I'm not used to Tailwind so you'll have to figure out how to implement them there, but this is what I usually do to center an element. Your idea with the div is pretty creative, but doesn't work on smaller screens.

    I hope this helped!

    Marked as helpful
    0
  • Eduard Ionescu•510
    @EduardIonescuPosted almost 2 years ago

    Hi, nice attempt at trying to solve the challenge!

    The webpage works great when you only have 1 as the number of people.

    The issues I'm seeing are:

    totalAmount.innerHTML = $ ${parseFloat(num1*num2).toFixed(2)}; - You should try and divide the bill by the amount of people, that way you get how much each individual has to pay. Also try something like `( billValue + (billValue * tipPercentage) ) / numberOfPeople . This way the total bill includes the tip and is divided by how many people the user inputs. The same goes for the tip amount, you get it right but then you multiply it by the number of people instead of dividing.

    If you have any other questions, let me know and I hope this helps!

    0