Skip to content

Commit fe5807d

Browse files
HypertextAssassin0273HypertextAssassin0273
authored
Add files via upload
0 parents  commit fe5807d

28 files changed

+3293
-0
lines changed

‎arithmetic-calculator.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="shortcut icon" type="image/x-icon" href="assets/icons/arithmetic-calculator.ico">
6+
<link rel="stylesheet" href="css/arithmetic-calculator.css">
7+
<title>Arithmetic Calculator | HTML-CSS-JavaScript</title>
8+
</head>
9+
<body>
10+
<section id="frame">
11+
<h2>Arithmetic Calculator</h2>
12+
<section id="answer">
13+
<h1 id="result"><h1>
14+
</section>
15+
16+
<input type="number" name="number1" id="number1" placeholder=" first value"></input>
17+
<input type="number" name="number2" id="number2" placeholder=" second value"></input>
18+
<br>
19+
<button onclick="clickButton1()">+</button>
20+
<button onclick="clickButton2()">-</button>
21+
<button onclick="clickButton3()">/</button>
22+
<button onclick="clickButton4()">x</button>
23+
</section>
24+
<script src="js/arithmetic-calculator.js"></script>
25+
</body>
26+
</html>

‎assets/icons/arithmetic-calculator.ico

1.12 KB
Binary file not shown.

‎assets/icons/flappy-bug.ico

1.12 KB
Binary file not shown.

‎assets/icons/main-menu.ico

1.12 KB
Binary file not shown.

‎assets/icons/rigley-escape.ico

1.12 KB
Binary file not shown.

‎assets/images/calculator.gif

1.05 MB
Loading

‎assets/images/jumping-bug.gif

399 KB
Loading

‎assets/images/lazy-bug.gif

1.35 MB
Loading

‎assets/images/portfolio2.jpg

248 KB
Loading

‎assets/images/portfolio4.jpg

228 KB
Loading

‎assets/images/portfolio9.jpg

218 KB
Loading

‎assets/logos/calculator.png

15.6 KB
Loading

‎assets/logos/contoller.png

1.92 KB
Loading

‎assets/logos/devcamp.png

21.5 KB
Loading

‎assets/logos/dropbox.png

3.5 KB
Loading

‎assets/logos/edutechional.png

23 KB
Loading

‎assets/logos/shop-hacker.png

19.1 KB
Loading

‎css/arithmetic-calculator.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
-moz-box-sizing: border-box;
5+
-webkit-box-sizing: border-box;
6+
box-sizing: border-box;
7+
}
8+
9+
section#frame {
10+
background: transparent;
11+
padding: 0.5% 1%;
12+
text-align: center;
13+
}
14+
15+
#answer {
16+
text-align: center;
17+
width: 100%;
18+
height: 20px;
19+
background: white;
20+
border-radius: 30px;
21+
}
22+
23+
button {
24+
width: 24.235%;
25+
border-radius: 30px;
26+
border: none;
27+
background: pink;
28+
color: white;
29+
height: 30px;
30+
}
31+
32+
input {
33+
margin: 15px 0;
34+
width: 49.451%;
35+
height: 30px;
36+
border-radius: 30px;
37+
position: relative;
38+
border: none;
39+
}
40+
41+
body {
42+
background: linear-gradient(#4389a2, #5c258d);
43+
background-size: cover;
44+
height: 800px;
45+
padding: 0 36%;
46+
}
47+
48+
h2 {
49+
color: white;
50+
margin-bottom: 15px;
51+
margin-top: 100px;
52+
}

‎css/flappy-bug.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background-color: black;
3+
}

‎css/main-menu.css

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
body {
2+
font-family: "Lato", sans-serif;
3+
margin: 0px;
4+
}
5+
6+
.container {
7+
display: grid;
8+
grid-template-columns: 1fr;
9+
}
10+
11+
.top-wrapper {
12+
display: flex;
13+
justify-content: space-between;
14+
padding: 20px;
15+
margin: auto;
16+
}
17+
18+
.portfolio-items-wrapper {
19+
display: grid;
20+
grid-template-columns: 1fr 1fr 1fr;
21+
}
22+
23+
.portfolio-item-wrapper {
24+
position: relative;
25+
}
26+
27+
.portfolio-img-background {
28+
background-size: cover;
29+
background-position: center;
30+
background-repeat: no-repeat;
31+
height: 350px;
32+
width: 100%;
33+
}
34+
35+
.img-text-wrapper {
36+
position: absolute;
37+
top: 0;
38+
display: flex;
39+
flex-direction: column;
40+
justify-content: center;
41+
align-items: center;
42+
height: 100%;
43+
text-align: center;
44+
padding-left: 100px;
45+
padding-right: 100px;
46+
}
47+
48+
.img-text-wrapper .subtitle {
49+
transition: 1s;
50+
color: transparent;
51+
}
52+
53+
.image-blur {
54+
transition: 1s;
55+
filter: brightness(10%);
56+
}
57+
58+
.img-text-wrapper:hover .subtitle {
59+
color: lightseagreen;
60+
font-weight: 600;
61+
}
62+
63+
.logo-wrapper img {
64+
width: 50%;
65+
margin-bottom: 20px;
66+
}
67+
68+
.two-column-wrapper {
69+
display: grid;
70+
grid-template-columns: 1fr 1fr;
71+
}
72+
73+
.profile-image-wrapper img {
74+
width: 100%;
75+
}
76+
77+
.profile-content-wrapper {
78+
padding: 30px;
79+
}
80+
81+
.profile-content-wrapper h1 {
82+
color: lightseagreen;
83+
}

‎css/rigley-escape.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background-color: black;
3+
}

‎flappy-bug.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="shortcut icon" type="image/x-icon" href="assets/icons/flappy-bug.ico">
6+
<link rel="stylesheet" href="css/flappy-bug.css">
7+
<title>Flappy Bug | HTML-CSS-JavaScript</title>
8+
</head>
9+
<body>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.22.0/phaser.min.js"></script>
11+
<script src="js/flappy-bug.js"></script>
12+
</body>
13+
</html>

‎index.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang='en'>
3+
4+
<head>
5+
<meta charset='UTF-8'>
6+
<link rel="shortcut icon" type="image/x-icon" href="assets/icons/main-menu.ico">
7+
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
8+
<link rel="stylesheet" href="css/main-menu.css">
9+
<title>Main Menu | HTML-CSS-JavaScript</title>
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div class="top-wrapper">
15+
<b>MAIN MENU</b>
16+
</div>
17+
18+
<div class="content-wrapper">
19+
<div class="portfolio-items-wrapper">
20+
21+
<div class="portfolio-item-wrapper" onclick='location.href = "arithmetic-calculator.html";'>
22+
<div class="portfolio-img-background" style="background-image:url(assets/images/calculator.gif)"></div>
23+
<div class="img-text-wrapper">
24+
<div class="logo-wrapper">
25+
<img src="assets/logos/dropbox.png" alt="">
26+
</div>
27+
28+
<div class="subtitle">Arithmetic Calculator</div>
29+
</div>
30+
</div>
31+
32+
<div class="portfolio-item-wrapper" onclick='location.href = "flappy-bug.html";'>
33+
<div class="portfolio-img-background" style="background-image:url(assets/images/lazy-bug.gif)"></div>
34+
<div class="img-text-wrapper">
35+
<div class="logo-wrapper">
36+
<img src="assets/logos/contoller.png" alt="">
37+
</div>
38+
39+
<div class="subtitle">Flappy Bug Game</div>
40+
</div>
41+
</div>
42+
43+
<div class="portfolio-item-wrapper" onclick='location.href = "rigley-escape.html";'>
44+
<div class="portfolio-img-background" style="background-image:url(assets/images/jumping-bug.gif)"></div>
45+
<div class="img-text-wrapper">
46+
<div class="logo-wrapper">
47+
<img src="assets/logos/contoller.png" alt="">
48+
</div>
49+
50+
<div class="subtitle">Rigley Escape Game</div>
51+
</div>
52+
</div>
53+
54+
</div>
55+
</div>
56+
</div>
57+
58+
</body>
59+
60+
<script src="js/main-menu.js"></script>
61+
62+
</html>

‎js/arithmetic-calculator.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const calculator = function (a, operator, b) {
2+
switch (operator) {
3+
case "+":
4+
return a + b;
5+
case "-":
6+
return a - b;
7+
case "/":
8+
return a / b;
9+
case "*":
10+
return a * b;
11+
}
12+
};
13+
14+
function clickButton1() {
15+
document.getElementById("result").innerHTML = calculator(
16+
+document.getElementById("number1").value,
17+
"+",
18+
+document.getElementById("number2").value
19+
);
20+
document.getElementById("number2").value = "";
21+
document.getElementById("number1").value = "";
22+
}
23+
24+
function clickButton2() {
25+
document.getElementById("result").innerHTML = calculator(
26+
+document.getElementById("number1").value,
27+
"-",
28+
+document.getElementById("number2").value
29+
);
30+
document.getElementById("number2").value = "";
31+
document.getElementById("number1").value = "";
32+
}
33+
34+
function clickButton3() {
35+
document.getElementById("result").innerHTML = calculator(
36+
+document.getElementById("number1").value,
37+
"/",
38+
+document.getElementById("number2").value
39+
);
40+
document.getElementById("number2").value = "";
41+
document.getElementById("number1").value = "";
42+
}
43+
44+
function clickButton4() {
45+
document.getElementById("result").innerHTML = calculator(
46+
+document.getElementById("number1").value,
47+
"*",
48+
+document.getElementById("number2").value
49+
);
50+
document.getElementById("number2").value = "";
51+
document.getElementById("number1").value = "";
52+
}
53+
54+
/********Calculator Test*********/
55+
// console.log(calculator(5, "*", 10));

0 commit comments

Comments
 (0)