Making a counter using flex-box

HTML-CSS
1

I am trying to 1 make the buttons bigger 2 change the font size for both the h1 and the buttons I have tried a few things but nothing seems to be working?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Counter</title>
</head>
<body>
    <main>
        <div class="container">
          <h1>Counter</h1>
          <span id="value">0</span>
          <div class="button-container">
              <button class="btn decrease">decrease</button>
              <button class="btn rest">rest</button>
              <button class="btn increase">increase</button>
            
          </div>
       </div>
</main>
    <script src="javascript.js"></script>
</body>
</html>


*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
display: flex;
background-color: beige;
flex-direction: column;
justify-content: center;
align-items: center;
height: 930px;
};


h1 {
font-size: 2em;

} 

span {
    font-size: 10em;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#value {

};

.button-container {
 
}

.decrease {
  
};

.rest {

};

.increase {

};

Counter

2

There are a couple of things going on here:

FIRST: There are a lot of Unnecessary Semi colons after the curly braces
ie. };

.decrease {
  
};

.rest {

};

THE ANALYSE FUNCTION ON CODEPEN CAN HELP YOU FIND ERRORS LIKE THIS:
Screenshot 2022-03-25 8.58.52 PM

Screenshot 2022-03-25 8.58.17 PM

This will solve some of the problem.

3

SECOND: This selection of <button class> needs to be modified, by removing the space between words. There cannot be space in-between the words of <class> or <id> tags:

BEFORE:

<button class="btn decrease">decrease</button>
<button class="btn rest">rest</button>
<button class="btn increase">increase</button>

AFTER:

 <button class="btn-decrease">decrease</button>
 <button class="btn-rest">rest</button>
 <button class="btn-increase">increase</button>
4

THIRD: The CSS Class selectors have to be renamed:

BEFORE:


.decrease {
}
.rest {
}
.increase {
}

AFTER:


.btn-decrease {
}
.btn-rest {
}
.btn-increase {
}

Screenshot 2022-03-25 9.26.37 PM

5

Thank you for replying to me so quickly I’m still new to this and hope to be a pro at this one day and also help people like you have helped me, so thank you very much for taking time out of your day.

6

Basically, Everyone on here can do something to help someone else out, even if they are new. I’m sure there are many Questions on here that you could help other people with. There are probably many things that you have already learned, that others are struggling with.

I would Suggest that you start now…And not wait until you are proficient.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.