fix styling (heights were messed up)
Gitea/calculator/pipeline/head This commit looks good
Details
Gitea/calculator/pipeline/head This commit looks good
Details
This commit is contained in:
parent
eea0ec1c62
commit
57a69a8e9c
103
src/App.css
103
src/App.css
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
|
@ -11,24 +9,26 @@
|
|||
src: url("DS-DIGIB.TTF");
|
||||
}
|
||||
|
||||
html{
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#calculator{
|
||||
width:550px;
|
||||
margin:auto;
|
||||
background: rgb(68,64,64);
|
||||
background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100%);
|
||||
#calculator {
|
||||
height: 800px;
|
||||
width: 550px;
|
||||
margin: auto;
|
||||
background: rgb(68, 64, 64);
|
||||
background: linear-gradient(351deg, rgba(68, 64, 64, 1) 0%, rgba(156, 150, 150, 1) 100%);
|
||||
padding: 1rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#calculator-content{
|
||||
#calculator-content {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
grid-template-rows: 1fr 1.6fr repeat(5,1fr);
|
||||
grid-template-areas:
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 1fr 1.6fr repeat(5, 1fr);
|
||||
grid-template-areas:
|
||||
"header header header header"
|
||||
"display display display display"
|
||||
"functions functions functions operators"
|
||||
|
|
@ -36,32 +36,32 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
|
|||
"numbers numbers numbers operators"
|
||||
"numbers numbers numbers operators"
|
||||
"numbers numbers numbers operators"
|
||||
;
|
||||
gap:1rem;
|
||||
;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
#calculator-content > header{
|
||||
#calculator-content>header {
|
||||
grid-area: header;
|
||||
align-self: center;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#calculator-content > header > h1{
|
||||
#calculator-content>header>h1 {
|
||||
font-size: 3rem;
|
||||
margin:0.5rem auto;
|
||||
margin: 0.5rem auto;
|
||||
color: aliceblue;
|
||||
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#display-container{
|
||||
#display-container {
|
||||
grid-area: display;
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
height:9rem;
|
||||
width:100%;
|
||||
height: 9rem;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 6fr 1fr;
|
||||
grid-template-areas:
|
||||
|
|
@ -71,105 +71,106 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
|
|||
;
|
||||
|
||||
|
||||
background: linear-gradient(351deg, rgba(15,93,53,1) 0%, rgba(194,228,185,1) 100%);
|
||||
font-family: 'VT323', monospace;
|
||||
background: linear-gradient(351deg, rgba(15, 93, 53, 1) 0%, rgba(194, 228, 185, 1) 100%);
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
padding:0.5rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0.5rem 0.5rem 2rem inset;
|
||||
}
|
||||
|
||||
.off{
|
||||
.off {
|
||||
filter: brightness(0.5);
|
||||
}
|
||||
.off > p{
|
||||
|
||||
.off>p {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#display-container > p {
|
||||
margin:auto 0;
|
||||
#display-container>p {
|
||||
margin: auto 0;
|
||||
text-align: right;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#display{
|
||||
#display {
|
||||
font-family: calculator;
|
||||
font-size: 6rem;
|
||||
font-size: 5rem;
|
||||
grid-area: main;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
#memory{
|
||||
#memory {
|
||||
grid-area: memory;
|
||||
align-self: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#operator{
|
||||
#operator {
|
||||
grid-area: operator;
|
||||
align-self: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.num-pad{
|
||||
.num-pad {
|
||||
grid-area: numbers;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
grid-template-rows: repeat(4,1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.operator-pad{
|
||||
.operator-pad {
|
||||
grid-area: operators;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3,1fr) 2fr;
|
||||
grid-template-rows: repeat(3, 1fr) 2fr;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.function-pad{
|
||||
.function-pad {
|
||||
grid-area: functions;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
button{
|
||||
background: linear-gradient(351deg, rgba(92,92,92,0.9) 0%, rgba(224,224,224,0.9) 100%);
|
||||
button {
|
||||
background: linear-gradient(351deg, rgba(92, 92, 92, 0.9) 0%, rgba(224, 224, 224, 0.9) 100%);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
|
||||
font-size: 3rem;
|
||||
place-self: stretch;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
.num-pad > button{
|
||||
.num-pad>button {
|
||||
background-color: lightblue;
|
||||
|
||||
}
|
||||
|
||||
.operator-pad > button{
|
||||
.operator-pad>button {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.function-pad > button{
|
||||
.function-pad>button {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#off{
|
||||
#off {
|
||||
background-color: #FF9B9B;
|
||||
}
|
||||
|
||||
#on{
|
||||
#on {
|
||||
background-color: #CBFFA9;
|
||||
}
|
||||
|
||||
#clear{
|
||||
#clear {
|
||||
background-color: #FFD6A5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,56 +18,56 @@ export default function Calculator(props) {
|
|||
}
|
||||
},
|
||||
|
||||
zero: function () {
|
||||
zero: function() {
|
||||
this.conc("0");
|
||||
},
|
||||
one: function () {
|
||||
one: function() {
|
||||
this.conc("1");
|
||||
},
|
||||
two: function () {
|
||||
two: function() {
|
||||
this.conc("2");
|
||||
},
|
||||
three: function () {
|
||||
three: function() {
|
||||
this.conc("3");
|
||||
},
|
||||
four: function () {
|
||||
four: function() {
|
||||
this.conc("4");
|
||||
},
|
||||
five: function () {
|
||||
five: function() {
|
||||
this.conc("5");
|
||||
},
|
||||
six: function () {
|
||||
six: function() {
|
||||
this.conc("6");
|
||||
},
|
||||
seven: function () {
|
||||
seven: function() {
|
||||
this.conc("7");
|
||||
},
|
||||
eight: function () {
|
||||
eight: function() {
|
||||
this.conc("8");
|
||||
},
|
||||
nine: function () {
|
||||
nine: function() {
|
||||
this.conc("9");
|
||||
},
|
||||
decimal: function () {
|
||||
decimal: function() {
|
||||
if (!/\./g.test(main)) {
|
||||
this.conc(".");
|
||||
}
|
||||
},
|
||||
|
||||
add: function () {
|
||||
add: function() {
|
||||
this.rcvOperator("add");
|
||||
},
|
||||
subtract: function () {
|
||||
subtract: function() {
|
||||
this.rcvOperator("subtract");
|
||||
},
|
||||
multiply: function () {
|
||||
multiply: function() {
|
||||
this.rcvOperator("multiply");
|
||||
},
|
||||
divide: function () {
|
||||
divide: function() {
|
||||
this.rcvOperator("divide");
|
||||
},
|
||||
|
||||
rcvOperator: function (operator) {
|
||||
rcvOperator: function(operator) {
|
||||
if (main === "-") {
|
||||
setMain("");
|
||||
} else if (main !== "") {
|
||||
|
|
@ -111,7 +111,7 @@ export default function Calculator(props) {
|
|||
setMemory("");
|
||||
setOperation("");
|
||||
},
|
||||
equals: function () {
|
||||
equals: function() {
|
||||
if (operation !== "" && main !== "") {
|
||||
setMain((prev) => {
|
||||
return this.calculate(prev, memory);
|
||||
|
|
@ -127,7 +127,7 @@ export default function Calculator(props) {
|
|||
setMemory("");
|
||||
setOperation("");
|
||||
},
|
||||
calculate: function (a, b) {
|
||||
calculate: function(a, b) {
|
||||
const string = this.operations[operation](
|
||||
parseFloat(a),
|
||||
parseFloat(b),
|
||||
|
|
@ -144,7 +144,7 @@ export default function Calculator(props) {
|
|||
<div id="calculator">
|
||||
<div id="calculator-content">
|
||||
<header>
|
||||
<h1>CALCULATOR - CI/CD EDITION</h1>
|
||||
<h1>CALCULATOR</h1>
|
||||
</header>
|
||||
<div id="display-container" className={on ? "on" : "off"}>
|
||||
<p id="memory">{memory}</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue