Skip to content

Homework JS1-W1,W2,W3-Rodias #10

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
ERodias wants to merge 3 commits into
base: Efthymios-Rodias
Choose a base branch
from
Open

Homework JS1-W1,W2,W3-Rodias #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
74e166e
My homework is done-Rodias
ERodias Jan 16, 2020
a3a6600
finished project for homework week2,JS1
ERodias Jan 25, 2020
7f9ae36
Homework completed JS1,W3-Rodias
ERodias Feb 10, 2020
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
155 changes: 155 additions & 0 deletions Week1/homework/Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<html>
<head>
<link rel="stylesheet" type= "text/css" href="style.css">
</head>

<body>
<h1>HTML Calculator</h1>
<div id="calc-parent">
<div class="row">
<div class="column" id="calc-display-val">0</div>

</div>
<div class="row">
<div class="calc-btn column" id="calc-clear">AC</div>
<div class="calc-btn column" id="calc-backspace">&#8676;</div>
<div class="calc-btn calc-btn-operator column" id="calc-divide">&#247;</div>
</div>
<div class="row">
<div class="calc-btn calc-btn-num column" id="calc-seven">7</div>
<div class="calc-btn calc-btn-num column" id="calc-eight">8</div>
<div class="calc-btn calc-btn-num column" id="calc-nine">9</div>
<div class="calc-btn calc-btn-operator column" id="calc-multiply">x</div>

</div>
<div class="row">
<div class="calc-btn calc-btn-num column" id="calc-four">4</div>
<div class="calc-btn calc-btn-num column" id="calc-five">5</div>
<div class="calc-btn calc-btn-num column" id="calc-six">6</div>
<div class="calc-btn calc-btn-operator column" id="calc-minus">-</div>
</div>
<div class="row">
<div class="calc-btn calc-btn-num column" id="calc-one">1</div>
<div class="calc-btn calc-btn-num column" id="calc-two">2</div>
<div class="calc-btn calc-btn-num column" id="calc-three">3</div>
<div class="calc-btn calc-btn-operator column" id="calc-plus">+</div>

</div>
<div class="row">
<div class="calc-btn calc-btn-num column" id="calc-zero">0</div>
<div class="calc-btn column" id="calc-decimal">.</div>
<div class="calc-btn calc-btn-operator column" id="calc-equals">=</div>
</div>
</div>

<script>
var oneBtn = document.getElementById('calc-one');
var twoBtn = document.getElementById('calc-two');
var threeBtn = document.getElementById('calc-three');
var fourBtn = document.getElementById('calc-four');
var fiveBtn = document.getElementById('calc-five');
var sixBtn = document.getElementById('calc-six');
var sevenBtn = document.getElementById('calc-seven');
var eightBtn = document.getElementById('calc-eight');
var nineBtn = document.getElementById('calc-nine');
var zeroBtn = document.getElementById('calc-zero');

var decimalBtn = document.getElementById('calc-decimal');
var clearBtn = document.getElementById('calc-clear');
var backspaceBtn = document.getElementById('calc-backspace');
var displayValElement = document.getElementById('calc-display-val');

var displayVal='0';
var pendingVal;
var evalStringArray=[];

var calcNumBtns =document.getElementsByClassName('calc-btn-num');
var calcOperatorBtns = document.getElementsByClassName('calc-btn-operator');

var updateDisplayVal= (clickObj) =>{
var btnText=clickObj.target.innerText;

if(displayVal==='0')
displayVal='';

displayVal+=btnText;
displayValElement.innerText=displayVal;

}

var performOperation=(clickObj)=>{
var operator=clickObj.target.innerText;

switch(operator) {
case'+':
pendingVal=displayVal;
displayVal='0';
displayValElement.innerText=displayVal;
evalStringArray.push(pendingVal);
evalStringArray.push('+');
break;

case'-':
pendingVal=displayVal;
displayVal='0';
displayValElement.innerText=displayVal;
evalStringArray.push(pendingVal);
evalStringArray.push('-');
break;

case'x':
pendingVal=displayVal;
displayVal='0';
displayValElement.innerText=displayVal;
evalStringArray.push(pendingVal);
evalStringArray.push('*');
break
case'÷':
pendingVal=displayVal;
displayVal='0';
displayValElement.innerText=displayVal;
evalStringArray.push(pendingVal);
evalStringArray.push('/');
break
case'=':
evalStringArray.push(displayVal);
var evaluation=eval(evalStringArray.join(' '));
displayVal=evaluation + '';
displayValElement.innerText=displayVal;
evalStringArray=[];
break;
default:
break;
}
}

for (let i=0; i<calcNumBtns.length; i++){
calcNumBtns[i].addEventListener('click', updateDisplayVal, false);
}
for (let i=0; i<calcOperatorBtns.length; i++){
calcOperatorBtns[i].addEventListener('click', performOperation, false);
}

clearBtn.onclick=()=>{
displayVal='0';
pendingVal=undefined;
evalStringArray=[];
displayValElement.innerHTML=displayVal;
}
backspaceBtn.onclick=()=>{
let lengthOfDisplayVal=displayVal.length;
displayVal=displayVal.slice(0,lengthOfDisplayVal-1);

if(displayVal==='')
displayVal='0';
displayValElement.innerText=displayVal;
}
decimalBtn.onclick=()=>{
if(!displayVal.includes('.'))
displayVal+='.';
displayValElement.innerText=displayVal;
}

</script>
</body>
</html>
80 changes: 80 additions & 0 deletions Week1/homework/Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:100');

body {
font-family: 'Roboto', sans-serif;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */

}

.calc-btn {
background-color: silver;
color: black;
width:25px;
height:45px;
border:1px solid gray;
text-align: center;
cursor:pointer;
font-size:32px;
font-weight:100;
padding-top:3px;
}

.calc-btn:hover {
background-color: orange;
}

.row{
display: table;
table-layout: fixed;
width: 200px;
}
.column{
display:table-cell;
}

#calc-zero{
width:52.666666667px;
border-radius:0 0 0 7px;
}
#calc-clear{
width:52.666666667px;
}

#calc-display-val{
height:80px;
color:white;
text-align:right;
border-left: 1px solid grey;
border-right: 1px solid grey;
border-top: 1px solid grey;
font-size:48px;
background-color: #383838;
overflow: hidden;
white-space: nowrap;
padding:12px;
border-radius:7px 7px 0 0;
}

.calc-btn-operator{
background-color: orange;
color:white;
}
h1{
text-align:center;
margin-top:50px;
}
#calc-equals {
border-radius: 0 0 7px 0;
}

#calc-parent{
margin-left: calc(50% - 100px);
}


123 changes: 123 additions & 0 deletions Week1/homework/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
// ------------------Exercise 1 (Hello world!)--------------------------------
var str="use strict";

var eng="Hello world!";
var indo="Halo dunia!"; // Indonesian
var ita="Ciao mondo!"; // Italian
var spn="Hola mundo!"; // Spanish
var gre="Γεια σου κόσμε!"; //Greek
var fra="Bonjour le monde!"; // French
var latin="Salve mundi!"; //Latin
var dan="Hej Verden!"; //Danish
var ger="Hallo Welt!"; //German
var port="Olá Mundo!"; //Portuguese

console.log(eng)
console.log(indo)
console.log(ita)
console.log(spn)
console.log(gre)
console.log(fra)
console.log(latin)
console.log(dan)
console.log(ger)
console.log(port)

//---------------------Exercise 2(Error debugging)------------------------------

// It needs double-quotes before and after the phrase.
console.log("I'm awesome");

//----------------- ---Exercise 3 (Log the number)-----------------------------

var numberX;
console.log ("numberX may be a number from 1 to 10");
console.log(numberX);
var numberX=5;
console.log ("numberX may be an integer");
console.log(numberX);

//---------------------Exercise 4 (Log the string)----------------------------
var myString="Efthymios Rodias";
console.log("This string may be a name");
console.log(myString);
var myString="E. Rodias";
console.log ("This should be a shortcut of a name");
console.log(myString);

//---------------------Exercise 5(Round a nummber and log it)-------------------
var z=7.25;
console.log(z);
var a=8;
console.log(a);
if (a>z){
var hNew=a;
console.log(a);
}

//---------------------Exercise 6(Log an array of animals)-------------------
var items=[];
console.log("I have no idea what is inside this array");
console.log(items);
var favAnimals=["Dog", "Horse", "Tiger"];
console.log(favAnimals);
favAnimals.push("Piglet");
console.log(favAnimals);

//---------------------Exercise 7(Log the length of a string)-------------------
var mySentence="Programming is so interesting!";
var sentLength=mySentence.length;
console.log(sentLength);

//---------------------Exercise 8(Type checker)--------------------------------
let name="Takis";
let surname="Patatakis";
let person= {firstName:"Roula", lastName:"Sakoula"};
let personDetails={age:50, gender:"female"};
console.log(typeof name);
console.log(typeof personDetails);

if (typeof name==typeof surname ) {
console.log("name and surname are the SAME TYPE");
}

if (typeof name==typeof person) {
console.log("");
}
console.log("name and person are not the same type");

if (typeof name==typeof personDetails) {
console.log("");
}
console.log("name and personDetails are not the same type");

if (typeof surname==typeof person) {
console.log("");
}
console.log("surname and person are not the same type");
if (typeof surname==typeof personDetails) {
console.log("");
}
console.log("surname and personDetails are not the same type")
if (typeof person==typeof personDetails) {
console.log("person and personDetails are the SAME TYPE")
}

//---------------------Exercise 9 (Log the remainder)--------------------------------
//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.
//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.
//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.

//---------------------Exercise 10 (Compare arrays)--------------------------------
var Array1=[5, "ciao", 25, 4];
var Array2=[1,"hola",6,75,"bye", 8,11];
var Arr1length=Array1.length;
var Arr2length=Array2.length;
console.log("The length of the 1st array is " + Arr1length);
console.log("The length of the 2nd array is " + Arr2length);
if (Arr1length==Arr2length){
console.log("They are the same")
}
if (Arr1length!==Arr2length){
console.log("Two different sizes")
}
Empty file added Week2/homework/JS Exercises/index.html
View file
Open in desktop
Empty file.
Loading