Skip to content
OverviewSolutions
44
Comments
44

Nneoma Njoku

@SatellitePeaceNigeria1,210 points

I love front end development and i am currently on a journey of self learning the essential skills i need to be a good front end engineer.

I’m currently learning...

Javascript and React.js

Latest solutions

View more solutions

Latest comments

  • Nneoma Njoku•1,210
    @SatellitePeacePosted over 2 years ago

    Hello @dogukan0055 congrats on completing this project

    Your project looks great on the big screen but it is not responsive

    • To make your work responsive you have to change the direction of your cards and ratings to column because it is not possible for them to fit in a small screen as a row`
    #comments{
display: flex;
flex-direction: column;
    justify-content: center;
    align-items: center;
}


@media (min-width:800px) {
#comments{

flex-direction: row;

}
}

    Also, do the same for your header section

    • Also using a mobile-first approach which I used in the example above makes it easier for you to create a responsive site

    • Lastly, your CSS is very disorganized which makes it difficult to navigate

    • Your CSS code should have an order like this

    • Google fonts

    • reset CSS

    • root

    • body/ html

    • general styles (for example you may decide that all your p will have the same color so instead of repeating the colour you can do something like this p{ color: #fff; })

    • nav

    • header-

    • main

    • section

    • footer

    • media queries

    I Hope This Helps

    0
  • Nneoma Njoku•1,210
    @SatellitePeacePosted over 2 years ago

    `Hello @Fakemilaz your card looks nice

    • min-height specifies the minimum height the body of your content should have

    • adding min-height to your body tag ensures that the length of your entire content shows and if your content length is more than 100vh the user will be able to scroll to see the entire content

    • For you to center your card with flex you have to add a height or min-height, you also need to add the justify-content property in addition to the align-items property

    • this is to ensure that your card is centered both horizontally and vertically

    • Also add a margin to the body so that the card will have some space from the body in a smaller screen

    • like the example below

    
body {
    background: hsl(212, 45%, 89%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem,
}
    • Also when you add a max-width you should also add a width of 100% so that in screen sizes below 375px your card will adjust and still look good

    .container { max-width: 375px; width:100% margin: 0 auto; }

    
Overall you used flex, and margins properly 

- Do not use px for font-size use rem or em units instead

I Hope This Helps
    0
  • Nneoma Njoku•1,210
    @SatellitePeacePosted over 2 years ago

    Hello @gabilucuta nice job

    here is a tip on how to get the value from the custom input

    Since the custom is a form input what you want to get is the value of your input

    so you need to add an input event listener to it so that whatever you input you can get the value

    example

      customTipPercent.addEventListener("input", () => {
 console.log(  customTipPercent.value)// to see the value of the custom input
// the rest of your code goes here
}
````

I hope this helps
    Marked as helpful
    0
  • Nneoma Njoku•1,210
    @SatellitePeacePosted over 2 years ago

    Hello @Deepanshu-5288 congrats on completing this project

    There are a number of ways you can import your JSON data to your js and use it without having to copy the whole file into your js

    The most straightforward is async/await

    where you use an asynchronous function to fetch the data and return a promise

    so do something like this

    const url = "data.json"

async function myimport(){
const response = await fetch(url);
const data = await response.json();
console.log(data)// do this to ensure that the data has been brought in

// The rest of your code
}
````

I hope this helps
    1
  • Nneoma Njoku•1,210
    @SatellitePeacePosted over 2 years ago

    hello @01Chloe nice job i particularly like the tweaks you made to the project

    On screens > 960px the card looks ok, but on larger screen the contents of the cards are overflowing

    • So here is my suggestions instead of using grid throughout, you can use a combination of grid and flexbox

    • in your main container you can have two sections one for the cards and one for the user.

    Display the main container to flex and give the user section a flex-basis of 23%

    • Then you can place all your cards in the second section and use the grid to create columns

    EXAMPLE

    main {
  max-width: 1200px;
  width: 100%;
  display: flex;
  column-gap: 2rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

sectionOne{
  max-width: 20rem;
  width: 100%;
  flex-basis: 23%;
}

sectionTwo{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  place-items: center;
}

//the above is for desktop first if you want a mobile-first do 

sectionTwo{
  display: grid;
  grid-template-columns1fr;
  gap: 1.5rem;
  place-items: center;
}
 - this means you don't need a grid-template-row

    • Also avoid giving heights to your card container just give them padding and allow the content to determine the height, this will help prevent overflow

    • Finally, instead of using JS to change the background color of the active button you can use the CSS focus() pseudo class so

    button:focus{
   background-color: #444;
}

Then you can then use the active class only for the first button because it has to be on focus when the page loads

so

````
btnWeek.addEventListener('click', () => {
   boxWeek.forEach(month => {
         day.classList.remove('hide');
     });
});

btnMonth.addEventListener('click', () => {
     boxMonth.forEach(month => {
        day.classList.remove('hide');
     });
});
````

I hope this helps
    Marked as helpful
    1
  • Nneoma Njoku•1,210
    @SatellitePeacePosted over 2 years ago

    Hello @AustinKing5

    Your code looks good except for the fact that it is not responsive

    *** to answer your question ***

    • A clean code is basically, a scalable, maintainable, readable, and easy-to-understand code

    • So yes writing a clean code means writing a code that others can read

    • clean code does not always mean shortcodes, if writing short code means you have to cut corners and use certain hacks then don't write shorter codes because it will make your code difficult to read, understand and maintain

    • However, if refactoring your code to be shorter follows best practices and does not involve hacks and cutting corners then by all means write shorter codes

    • I tried to see why your site is not responsive but I could not access your GitHub so either the link is incorrect or the repo is set to private

    I hope these explanations help

    1
View more comments