Skip to content

Calculator JS evening #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gee92 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Calculator JS evening #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions standard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="calc.css">

</head>

<body>

<div class="container">
<h1> Standard | <a href="scientific.html"> Scientific</a> </h1>

<input type="text" name="display">

<div>
<button class="frow"> (</button>
<button class="frow"> ) </button>
<button class="frow"> % </button>
<button class="frow"> AC </button>

</div>
<div>
<button class="srow"> 7</button>
<button class="srow"> 8</button>
<button class="srow"> 9</button>
<button class="srow"> /</button>

</div>

<div>
<button class="trow"> 4 </button>
<button class="trow"> 5 </button>
<button class="trow"> 6 </button>
<button class="trow"> * </button>

</div>

<div>
<button class="trow"> 1</button>
<button class="trow"> 2</button>
<button class="trow"> 3</button>
<button class="trow"> -</button>

</div>

<div>
<button class="btm"> 0</button>
<button class="btm"> .</button>
<button class="btm"> +</button>
<button style="background-color:rgba(152, 55, 231, 0.486);" class="btm"> =</button>

</div>
</div>
</div>
</div>
</div>
</body>
</html>
64 changes: 64 additions & 0 deletions calc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
.container{
border: rgba(145, 104, 155, 0.548);
border-style: solid;
background-color: rgb(131, 179, 171);
position: absolute;
background-size: cover;

}


h1{
font-size: 1em;
color: white ;
}
a:hover{
Copy link
Copy Markdown

@kburd kburd Nov 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wasn't required but nice additional touch!

color: teal;
}
input {
width: 98%;
height: 35px;

}


body{
text-align: center;
}


button{
background-color: lightgray;
text-align: center;
display: inline-block;
height: 35px;
width: 90px;


}

button:hover {
background-color: grey;
}

.frow{
Copy link
Copy Markdown

@kburd kburd Nov 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of these row selectors have the same styling. Create one selector and use it throughout your HTML (-1)

font-size: large;


}
.srow{
font-size: large;


}

.trow{
font-size: large;
}


.btm{
font-size: large;
height: 70px;

}
79 changes: 79 additions & 0 deletions scientific.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<Html>
<head>

<link rel="stylesheet" href="calc.css">
</head>
<body>

<div >

<div class="container">

<h1> Scientific | <a href="standard.html"> Standard</a> </h1>

<input type="text" class="Scientific" name="display">
Copy link
Copy Markdown

@kburd kburd Nov 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inputs should always go in a form (-2)


<div>
<button class="frow"> rad</button>
<button class="frow"> Deg </button>
<button class="frow"> x! </button>
<button class="frow"> (</button>
<button class="frow"> ) </button>
<button class="frow"> % </button>
<button class="frow"> AC </button>

</div>
<div>
<button class="srow"> In</button>
<button class="srow"> sin</button>
<button class="srow"> In</button>
<button class="srow"> 7</button>
<button class="srow"> 8</button>
<button class="srow"> 9</button>
<button class="srow"> /</button>


</div>

<div>
<button class="trow"> &#8719; </button>
<button class="trow"> cos </button>
<button class="trow"> log </button>
<button class="trow"> 4 </button>
<button class="trow"> 5 </button>
<button class="trow"> 6 </button>
<button class="srow"> x </button>

</div>

<div>
<button class="4row"> e</button>
Copy link
Copy Markdown

@kburd kburd Nov 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see the 4row styling (-1)

<button class="4row"> tan</button>
<button class="4row"> &radic; </button>
<button class="4row"> 1</button>
<button class="4row"> 2</button>
<button class="4row"> 3</button>
<button class="4row"> -</button>

</div>

<div>
<button class="btm"> Ans</button>
<button class="btm"> EXP</button>
<button class="btm"> Xy</button>
<button class="btm"> 0</button>
<button class="btm"> .</button>
<button class="btm"> +</button>
<button style="background-color:rgba(152, 55, 231, 0.486);" class="btm"> =</button>

</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>

</Html>
Copy link
Copy Markdown

@kburd kburd Nov 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor styling issues, make sure indentation is consistent (-1)

95% Nice work!