Skip to content

Commit

Permalink
Add Counter component with:
Browse files Browse the repository at this point in the history
- Increment and decrement buttons for count
- Input field for setting a custom increment value
- "Add" button to increment count by the custom value
- designed the interface
  • Loading branch information
ajmalfaris11 committed Nov 9, 2024
1 parent 7c3f4ac commit 4eff846
Showing 1 changed file with 61 additions and 0 deletions.
61 changes: 61 additions & 0 deletions src/App/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
.App {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
}

.counter {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color:#FF5722 ;
gap: 40px;
}

.counter h1 {
font-size: 100px;
}

.counter button {
border-radius: 12px;
background-color: #FF5722;
font-size: 48px;
font-weight: bold;
color: white;
width: 75px;
height: 75px;
}

.input-container {
background-color: #FF5722;
width: 350px;
display: flex;
justify-content: center;
height: 50px;
border-radius: 12px;
padding: 5px;
}

.input-container input {
width: 80%;
background-color: #FF5722;
border: none;
color: white;
font-size: 24px;
font-weight: bold;
}

.input-container button {
width: 20%;
outline: none;
background-color: #FF5722;
border: none;
color: white;
font-size: 24px;
font-weight: bold;

}

0 comments on commit 4eff846

Please # to comment.