16 |
23 |
17 |
22 | To-do List
18 |
19 |
20 |
21 |
27 |
28 |
29 | SIMPLE CALCULATOR
18 |
19 |
20 |
21 |
52 |
53 | | 23 | | 24 | | 25 | | 26 | |
| 29 | | 30 | | 31 | | 32 | |
| 35 | | 36 | | 37 | | 38 | |
| 41 | | 42 | | 43 | | 44 | |
| 47 | | 48 | | 49 | | 50 | |
54 | PLEASE TURN YOUR DEVICE
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/To-Do-App/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@600&display=swap');
2 | *{
3 | padding: 0;
4 | margin: 0;
5 | box-sizing: border-box;
6 | }
7 |
8 | body{
9 | font-family: 'Titillium Web', sans-serif;
10 | background-image: linear-gradient(to right, #062122f6, #ff5100ec);
11 | color: rgb(226, 186, 186);
12 | }
13 |
14 | .container{
15 | width: 1280px;
16 | margin: auto;
17 | }
18 |
19 | #header{
20 | display: flex;
21 | color:rgb(255, 127, 206);
22 | justify-content: space-between;
23 | align-items: center;
24 | flex-wrap: wrap;
25 | min-height: 70px;
26 | padding: 0 20px;
27 | }
28 |
29 | #header h2{font-size: 2rem;}
30 |
31 | .user_input{
32 | margin-top: 2px;
33 | width: 350px;
34 | text-align: center;
35 | }
36 |
37 | .user_input input{
38 | width: 75%;
39 | outline: none;
40 | padding: 8px;
41 | border: 1px solid rgba(32, 28, 30, 0.884);
42 | border-top-left-radius: 5px;
43 | border-bottom-left-radius: 5px;
44 | -webkit-transition: all 0.30s ease-in-out;
45 | -moz-transition: all 0.30s ease-in-out;
46 | -ms-transition: all 0.30s ease-in-out;
47 | -o-transition: all 0.30s ease-in-out;
48 | transition: all 0.30s ease-in-out;
49 | }
50 |
51 | .user_input input:focus{
52 | box-shadow: 0 0 5px #00c3ff;
53 | border: 1px solid #00eeff;
54 | }
55 |
56 | .user_input button{
57 | cursor: pointer;
58 | padding: 8px;
59 | width: fit-content;
60 | color: black;
61 | transition: 1s;
62 | outline: none;
63 | background-color: lightgray;
64 | border: 1px solid lightgray;
65 | border-top-right-radius: 5px;
66 | border-bottom-right-radius: 5px;
67 | }
68 |
69 | .user-input button:hover{
70 | background-color: transparent;
71 | color: white;
72 | }
73 |
74 | #to_do_list{
75 | width: 500px;
76 | margin: auto;
77 | }
78 |
79 | .item{
80 | display: flex;
81 | justify-content: space-between;
82 | width: 100%;
83 | height: auto;
84 | border-radius: 2px;
85 | padding: 1rem;
86 | color: #454545fa;
87 | margin-top:10px;
88 | font-size: 1rem;
89 | background-color: rgba(255, 255, 255, 0.61);
90 | border: 1px solid rgba(211, 211, 211, 0.616);
91 | text-transform: uppercase;
92 | -webkit-transition: all 0.30s ease-in-out;
93 | -moz-transition: all 0.30s ease-in-out;
94 | -ms-transition: all 0.30s ease-in-out;
95 | -o-transition: all 0.30s ease-in-out;
96 | transition: all 0.30s ease-in-out;
97 | }
98 |
99 | .item:hover{
100 | box-shadow: 0 0 20px #32cdcd;
101 | border: 1px solid #32aecd;
102 | }
103 |
104 | .item i{
105 | cursor: pointer;
106 | margin: 0 5px;
107 | }
108 |
109 | @media(max-width:1280px){
110 | .container{width: 100%;}
111 | }
112 |
113 | @media(max-width:768px){
114 | .container{width: 95%;}
115 |
116 | #header{
117 | padding: 20px;
118 | gap: 10px;
119 | align-items: center;
120 | flex-direction: column;
121 | }
122 |
123 | #header h2{margin: 10px 0;}
124 |
125 | .user_input{width: 100%;}
126 |
127 | #to_do_list{width: 100%;}
128 | }
129 |
130 | @media(max-width:480px){
131 | .user_input input{width: 74%;}
132 | }
133 |
134 | @media(max-width:320px){
135 | .user_input input{width: 60%;}
136 | }
137 |
--------------------------------------------------------------------------------
/Calculator/style.css:
--------------------------------------------------------------------------------
1 | body,
2 | html {
3 | padding: 0;
4 | margin: 0;
5 | display: flex;
6 | justify-content: center;
7 | color: #ecf0f1;
8 | background-color: rgb(255, 255, 255);
9 | font-family: 'Fjalla One', sans-serif;
10 | animation: fadein 1.5s;
11 | }
12 |
13 | @keyframes fadein {
14 | 0% {
15 | opacity: 0%;
16 | }
17 | 100% {
18 | opacity: 100%;
19 | }
20 | }
21 |
22 | h1 {
23 | font-size: 2.5rem;
24 | font-weight: 500;
25 | margin-bottom: 0;
26 | }
27 |
28 | input {
29 | background-color: rgba(255, 124, 1, 0.63);
30 | color: #000000;
31 | outline: none;
32 | text-align: right;
33 | border: none;
34 | font-size: 3rem;
35 | width: 78vw;
36 | margin-bottom: 0.5rem;
37 | border-radius: 0.5rem;
38 | padding: 0.5rem 1.5rem;
39 | -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
40 | -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
41 | box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
42 | }
43 |
44 | .container {
45 | margin: auto;
46 | text-align: center;
47 | position: absolute;
48 | top: 50%;
49 | left: 50%;
50 | transform: translate(-50%, -50%);
51 | }
52 |
53 | .calculator {
54 | padding: 0.25rem;
55 | display: inline-block;
56 | }
57 |
58 | table {
59 | margin: auto;
60 | }
61 |
62 | button {
63 | border: none;
64 | background-color: rgb(0, 217, 255);
65 | width: 20vw;
66 | height: 10vh;
67 | padding: 0.5rem 0;
68 | margin: 0.25vmax;
69 | font-size: 2rem;
70 | border-radius: 0.5rem;
71 | -moz-transition: all ease 0.5s;
72 | -webkit-transition: all 0.5s ease;
73 | transition: all 0.5s ease;
74 | -o-transition: all ease 0.5s;
75 | }
76 | button:active {
77 | transform: scale(0.95);
78 | /* Scaling button to 0.98 to its original size */
79 | box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
80 | /* Lowering the shadow */
81 | }
82 |
83 | button:hover {
84 | -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
85 | -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
86 | box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
87 | -moz-transition: all ease 0.5s;
88 | -webkit-transition: all 0.5s ease;
89 | transition: all 0.5s ease;
90 | -o-transition: all ease 0.5s;
91 | }
92 |
93 | a{
94 | outline: none;
95 | -moz-transition: all ease 0.5s;
96 | -webkit-transition: all 0.5s ease;
97 | transition: all 0.5s ease;
98 | -o-transition: all ease 0.5s;
99 | }
100 |
101 | a:hover{
102 | text-shadow: 0px 0px 10px rgba(241, 196, 15, 0.5);
103 | -moz-transition: all ease 0.5s;
104 | -webkit-transition: all 0.5s ease;
105 | transition: all 0.5s ease;
106 | -o-transition: all ease 0.5s;
107 | }
108 |
109 | #turn {
110 | display: none;
111 | z-index: 100;
112 | position: fixed;
113 | }
114 |
115 | @media (orientation: landscape) and (max-height: 500px) {
116 | #turn {
117 | width: 100vw;
118 | height: 100vh;
119 | display: flex;
120 | justify-content: center;
121 | align-items: center;
122 | font-size: 2rem;
123 | color: rgba(52, 73, 94, 1.0);
124 | background-color: rgba(236, 240, 241, 1.0);
125 | }
126 | }
127 |
--------------------------------------------------------------------------------
/Calculator/function.js:
--------------------------------------------------------------------------------
1 |
2 | document.getElementById("answer").readOnly = true; //set this attribute in Html file
3 | let screen = document.getElementById("answer");
4 | buttons = document.querySelectorAll("button");
5 | let screenValue = "";
6 | for (item of buttons) {
7 | item.addEventListener("click", (e) => {
8 | buttonText = e.target.innerText;
9 | if (buttonText == "X") {
10 | buttonText = "*";
11 | screenValue += buttonText;
12 | screen.value = screenValue;
13 | } else if (buttonText == "C") {
14 | screenValue = "";
15 | screen.value = screenValue;
16 | } else if (buttonText == "=") {
17 | checkForBracketMulti(); // automatically evaluates if no brackets
18 | } else {
19 | screenValue += buttonText;
20 | screen.value = screenValue;
21 | }
22 | });
23 | }
24 |
25 | document.addEventListener("keydown", function (event) {
26 | console.log(event.which);
27 | if (event.shiftKey == 57) {
28 | event.key = "(";
29 | } else if (event.shiftKey == 48) {
30 | event.key = ")";
31 | } else if (event.shiftKey == 53) {
32 | event.key = "%";
33 | }
34 | if (event.keyCode == 88) {
35 | screenValue += "*";
36 | screen.value = screenValue;
37 | }
38 | if (
39 | event.key <= 9 ||
40 | event.key == "+" ||
41 | event.key == "-" ||
42 | event.key == "*" ||
43 | event.key == "." ||
44 | event.key == "/" ||
45 | event.key == "%" ||
46 | event.key == "(" ||
47 | event.key == ")"
48 | ) {
49 | screenValue += event.key;
50 | screen.value = screenValue;
51 | }
52 | if (event.keyCode == 13 || event.keyCode == 187) {
53 | checkForBracketMulti(); // automatically evaluates if no brackets
54 | } else if (event.keyCode == 46) {
55 | screenValue = "";
56 | screen.value = screenValue;
57 | console.clear();
58 | } else if (event.keyCode == 8) {
59 | screenValue = screenValue.slice(0, -1);
60 | screen.value = screenValue;
61 | } else if (event.keyCode == 67) {
62 | screenValue = "";
63 | screen.value = screenValue;
64 | console.clear();
65 | } else if (event.keyCode == 82) {
66 | location.reload();
67 | }
68 | });
69 |
70 | window.onerror = function () {
71 | alert("PLEASE INPUT VALID EXPRESSION");
72 | screenValue = "";
73 | screen.value = screenValue;
74 | console.clear();
75 | };
76 |
77 | window.onBracketMultiplication = function () {
78 | screenValue = addStr(screen.value, screen.value.indexOf("("), "*");
79 | screen.value = eval(screenValue);
80 | };
81 |
82 | function addStr(str, index, stringToAdd) {
83 | return (
84 | str.substring(0, index) + stringToAdd + str.substring(index, str.length)
85 | );
86 | }
87 |
88 | function checkForBracketMulti() {
89 | // Check if there's a number directly infront of a bracket
90 | if (
91 | screen.value.includes("(") &&
92 | !isNaN(screen.value.charAt(screen.value.indexOf("(") - 1))
93 | ) {
94 | window.onBracketMultiplication();
95 | return;
96 | } else {
97 | screen.value = eval(screenValue);
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
/Tribute-Page/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Robert Downey
16 |American actor and producer
17 |
18 | 
20 | Timeline of Robert Downey
27 |
28 |
29 |
43 |
44 |
45 |
46 |
47 |
48 |