Skip to content

Commit 74e166e

Browse files
ERodiasERodias
committed
My homework is done-Rodias
1 parent 850873b commit 74e166e

3 files changed

Lines changed: 358 additions & 0 deletions

File tree

‎Week1/homework/Calculator/index.html‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" type= "text/css" href="style.css">
4+
</head>
5+
6+
<body>
7+
<h1>HTML Calculator</h1>
8+
<div id="calc-parent">
9+
<div class="row">
10+
<div class="column" id="calc-display-val">0</div>
11+
12+
</div>
13+
<div class="row">
14+
<div class="calc-btn column" id="calc-clear">AC</div>
15+
<div class="calc-btn column" id="calc-backspace">&#8676;</div>
16+
<div class="calc-btn calc-btn-operator column" id="calc-divide">&#247;</div>
17+
</div>
18+
<div class="row">
19+
<div class="calc-btn calc-btn-num column" id="calc-seven">7</div>
20+
<div class="calc-btn calc-btn-num column" id="calc-eight">8</div>
21+
<div class="calc-btn calc-btn-num column" id="calc-nine">9</div>
22+
<div class="calc-btn calc-btn-operator column" id="calc-multiply">x</div>
23+
24+
</div>
25+
<div class="row">
26+
<div class="calc-btn calc-btn-num column" id="calc-four">4</div>
27+
<div class="calc-btn calc-btn-num column" id="calc-five">5</div>
28+
<div class="calc-btn calc-btn-num column" id="calc-six">6</div>
29+
<div class="calc-btn calc-btn-operator column" id="calc-minus">-</div>
30+
</div>
31+
<div class="row">
32+
<div class="calc-btn calc-btn-num column" id="calc-one">1</div>
33+
<div class="calc-btn calc-btn-num column" id="calc-two">2</div>
34+
<div class="calc-btn calc-btn-num column" id="calc-three">3</div>
35+
<div class="calc-btn calc-btn-operator column" id="calc-plus">+</div>
36+
37+
</div>
38+
<div class="row">
39+
<div class="calc-btn calc-btn-num column" id="calc-zero">0</div>
40+
<div class="calc-btn column" id="calc-decimal">.</div>
41+
<div class="calc-btn calc-btn-operator column" id="calc-equals">=</div>
42+
</div>
43+
</div>
44+
45+
<script>
46+
var oneBtn = document.getElementById('calc-one');
47+
var twoBtn = document.getElementById('calc-two');
48+
var threeBtn = document.getElementById('calc-three');
49+
var fourBtn = document.getElementById('calc-four');
50+
var fiveBtn = document.getElementById('calc-five');
51+
var sixBtn = document.getElementById('calc-six');
52+
var sevenBtn = document.getElementById('calc-seven');
53+
var eightBtn = document.getElementById('calc-eight');
54+
var nineBtn = document.getElementById('calc-nine');
55+
var zeroBtn = document.getElementById('calc-zero');
56+
57+
var decimalBtn = document.getElementById('calc-decimal');
58+
var clearBtn = document.getElementById('calc-clear');
59+
var backspaceBtn = document.getElementById('calc-backspace');
60+
var displayValElement = document.getElementById('calc-display-val');
61+
62+
var displayVal='0';
63+
var pendingVal;
64+
var evalStringArray=[];
65+
66+
var calcNumBtns =document.getElementsByClassName('calc-btn-num');
67+
var calcOperatorBtns = document.getElementsByClassName('calc-btn-operator');
68+
69+
var updateDisplayVal= (clickObj) =>{
70+
var btnText=clickObj.target.innerText;
71+
72+
if(displayVal==='0')
73+
displayVal='';
74+
75+
displayVal+=btnText;
76+
displayValElement.innerText=displayVal;
77+
78+
}
79+
80+
var performOperation=(clickObj)=>{
81+
var operator=clickObj.target.innerText;
82+
83+
switch(operator) {
84+
case'+':
85+
pendingVal=displayVal;
86+
displayVal='0';
87+
displayValElement.innerText=displayVal;
88+
evalStringArray.push(pendingVal);
89+
evalStringArray.push('+');
90+
break;
91+
92+
case'-':
93+
pendingVal=displayVal;
94+
displayVal='0';
95+
displayValElement.innerText=displayVal;
96+
evalStringArray.push(pendingVal);
97+
evalStringArray.push('-');
98+
break;
99+
100+
case'x':
101+
pendingVal=displayVal;
102+
displayVal='0';
103+
displayValElement.innerText=displayVal;
104+
evalStringArray.push(pendingVal);
105+
evalStringArray.push('*');
106+
break
107+
case'÷':
108+
pendingVal=displayVal;
109+
displayVal='0';
110+
displayValElement.innerText=displayVal;
111+
evalStringArray.push(pendingVal);
112+
evalStringArray.push('/');
113+
break
114+
case'=':
115+
evalStringArray.push(displayVal);
116+
var evaluation=eval(evalStringArray.join(' '));
117+
displayVal=evaluation + '';
118+
displayValElement.innerText=displayVal;
119+
evalStringArray=[];
120+
break;
121+
default:
122+
break;
123+
}
124+
}
125+
126+
for (let i=0; i<calcNumBtns.length; i++){
127+
calcNumBtns[i].addEventListener('click', updateDisplayVal, false);
128+
}
129+
for (let i=0; i<calcOperatorBtns.length; i++){
130+
calcOperatorBtns[i].addEventListener('click', performOperation, false);
131+
}
132+
133+
clearBtn.onclick=()=>{
134+
displayVal='0';
135+
pendingVal=undefined;
136+
evalStringArray=[];
137+
displayValElement.innerHTML=displayVal;
138+
}
139+
backspaceBtn.onclick=()=>{
140+
let lengthOfDisplayVal=displayVal.length;
141+
displayVal=displayVal.slice(0,lengthOfDisplayVal-1);
142+
143+
if(displayVal==='')
144+
displayVal='0';
145+
displayValElement.innerText=displayVal;
146+
}
147+
decimalBtn.onclick=()=>{
148+
if(!displayVal.includes('.'))
149+
displayVal+='.';
150+
displayValElement.innerText=displayVal;
151+
}
152+
153+
</script>
154+
</body>
155+
</html>

‎Week1/homework/Calculator/style.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
2+
3+
body {
4+
font-family: 'Roboto', sans-serif;
5+
-webkit-touch-callout: none; /* iOS Safari */
6+
-webkit-user-select: none; /* Safari */
7+
-khtml-user-select: none; /* Konqueror HTML */
8+
-moz-user-select: none; /* Old versions of Firefox */
9+
-ms-user-select: none; /* Internet Explorer/Edge */
10+
user-select: none; /* Non-prefixed version, currently
11+
supported by Chrome, Opera and Firefox */
12+
13+
}
14+
15+
.calc-btn {
16+
background-color: silver;
17+
color: black;
18+
width:25px;
19+
height:45px;
20+
border:1px solid gray;
21+
text-align: center;
22+
cursor:pointer;
23+
font-size:32px;
24+
font-weight:100;
25+
padding-top:3px;
26+
}
27+
28+
.calc-btn:hover {
29+
background-color: orange;
30+
}
31+
32+
.row{
33+
display: table;
34+
table-layout: fixed;
35+
width: 200px;
36+
}
37+
.column{
38+
display:table-cell;
39+
}
40+
41+
#calc-zero{
42+
width:52.666666667px;
43+
border-radius:0 0 0 7px;
44+
}
45+
#calc-clear{
46+
width:52.666666667px;
47+
}
48+
49+
#calc-display-val{
50+
height:80px;
51+
color:white;
52+
text-align:right;
53+
border-left: 1px solid grey;
54+
border-right: 1px solid grey;
55+
border-top: 1px solid grey;
56+
font-size:48px;
57+
background-color: #383838;
58+
overflow: hidden;
59+
white-space: nowrap;
60+
padding:12px;
61+
border-radius:7px 7px 0 0;
62+
}
63+
64+
.calc-btn-operator{
65+
background-color: orange;
66+
color:white;
67+
}
68+
h1{
69+
text-align:center;
70+
margin-top:50px;
71+
}
72+
#calc-equals {
73+
border-radius: 0 0 7px 0;
74+
}
75+
76+
#calc-parent{
77+
margin-left: calc(50% - 100px);
78+
}
79+
80+

‎Week1/homework/main.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
// ------------------Exercise 1 (Hello world!)--------------------------------
2+
var str="use strict";
3+
4+
var eng="Hello world!";
5+
var indo="Halo dunia!"; // Indonesian
6+
var ita="Ciao mondo!"; // Italian
7+
var spn="Hola mundo!"; // Spanish
8+
var gre="Γεια σου κόσμε!"; //Greek
9+
var fra="Bonjour le monde!"; // French
10+
var latin="Salve mundi!"; //Latin
11+
var dan="Hej Verden!"; //Danish
12+
var ger="Hallo Welt!"; //German
13+
var port="Olá Mundo!"; //Portuguese
14+
15+
console.log(eng)
16+
console.log(indo)
17+
console.log(ita)
18+
console.log(spn)
19+
console.log(gre)
20+
console.log(fra)
21+
console.log(latin)
22+
console.log(dan)
23+
console.log(ger)
24+
console.log(port)
25+
26+
//---------------------Exercise 2(Error debugging)------------------------------
27+
28+
// It needs double-quotes before and after the phrase.
29+
console.log("I'm awesome");
30+
31+
//----------------- ---Exercise 3 (Log the number)-----------------------------
32+
33+
var numberX;
34+
console.log ("numberX may be a number from 1 to 10");
35+
console.log(numberX);
36+
var numberX=5;
37+
console.log ("numberX may be an integer");
38+
console.log(numberX);
39+
40+
//---------------------Exercise 4 (Log the string)----------------------------
41+
var myString="Efthymios Rodias";
42+
console.log("This string may be a name");
43+
console.log(myString);
44+
var myString="E. Rodias";
45+
console.log ("This should be a shortcut of a name");
46+
console.log(myString);
47+
48+
//---------------------Exercise 5(Round a nummber and log it)-------------------
49+
var z=7.25;
50+
console.log(z);
51+
var a=8;
52+
console.log(a);
53+
if (a>z){
54+
var hNew=a;
55+
console.log(a);
56+
}
57+
58+
//---------------------Exercise 6(Log an array of animals)-------------------
59+
var items=[];
60+
console.log("I have no idea what is inside this array");
61+
console.log(items);
62+
var favAnimals=["Dog", "Horse", "Tiger"];
63+
console.log(favAnimals);
64+
favAnimals.push("Piglet");
65+
console.log(favAnimals);
66+
67+
//---------------------Exercise 7(Log the length of a string)-------------------
68+
var mySentence="Programming is so interesting!";
69+
var sentLength=mySentence.length;
70+
console.log(sentLength);
71+
72+
//---------------------Exercise 8(Type checker)--------------------------------
73+
let name="Takis";
74+
let surname="Patatakis";
75+
let person= {firstName:"Roula", lastName:"Sakoula"};
76+
let personDetails={age:50, gender:"female"};
77+
console.log(typeof name);
78+
console.log(typeof personDetails);
79+
80+
if (typeof name==typeof surname ) {
81+
console.log("name and surname are the SAME TYPE");
82+
}
83+
84+
if (typeof name==typeof person) {
85+
console.log("");
86+
}
87+
console.log("name and person are not the same type");
88+
89+
if (typeof name==typeof personDetails) {
90+
console.log("");
91+
}
92+
console.log("name and personDetails are not the same type");
93+
94+
if (typeof surname==typeof person) {
95+
console.log("");
96+
}
97+
console.log("surname and person are not the same type");
98+
if (typeof surname==typeof personDetails) {
99+
console.log("");
100+
}
101+
console.log("surname and personDetails are not the same type")
102+
if (typeof person==typeof personDetails) {
103+
console.log("person and personDetails are the SAME TYPE")
104+
}
105+
106+
//---------------------Exercise 9 (Log the remainder)--------------------------------
107+
//1. The solution of x=7 and x=x%3, will be 1, because if we devide 7 by 2 will have 3 and remainder 1.
108+
//2. The solution of y=21 and y=y%4, will be 1, because 4 can be subtracted 5 times from 21 and give us remainder 1.
109+
//3. The solution of z=13 and y=y%2, will be 1, because 2 can be subtracted 6 times from 13 and give us remainder 1.
110+
111+
//---------------------Exercise 10 (Compare arrays)--------------------------------
112+
var Array1=[5, "ciao", 25, 4];
113+
var Array2=[1,"hola",6,75,"bye", 8,11];
114+
var Arr1length=Array1.length;
115+
var Arr2length=Array2.length;
116+
console.log("The length of the 1st array is " + Arr1length);
117+
console.log("The length of the 2nd array is " + Arr2length);
118+
if (Arr1length==Arr2length){
119+
console.log("They are the same")
120+
}
121+
if (Arr1length!==Arr2length){
122+
console.log("Two different sizes")
123+
}

0 commit comments

Comments
 (0)