Skip to content

Commit 0fc680c

Browse files
bilgedemirkayabilgedemirkaya
committed
lecture5
1 parent aab0302 commit 0fc680c

14 files changed

Lines changed: 286 additions & 0 deletions

File tree

‎newversion-2020/lecture5/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"git.ignoreLimitWarning": true
3+
}

‎newversion-2020/lecture5/colors.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Hello</title>
6+
<script src="colors.js"></script>
7+
</head>
8+
<body>
9+
<h1 id=hello>hello</h1>
10+
<!-- you can store information inside of button attribute like this
11+
<button data-color:red> Red </button> -->
12+
13+
<button id="red">Red</button>
14+
<button id="blue">Blue</button>
15+
<button id="green">Green</button>
16+
</body>
17+
</html>

‎newversion-2020/lecture5/colors.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// you can design this code better
2+
document.addEventListener("DOMContentLoaded",function(){
3+
document.querySelector('#red').onclick = function(){
4+
document.querySelector('#hello').style.color = 'red';
5+
}
6+
document.querySelector('#green').onclick = function(){
7+
document.querySelector('#hello').style.color = 'green';
8+
}
9+
document.querySelector('#blue').onclick = function(){
10+
document.querySelector('#hello').style.color = 'blue';
11+
}
12+
13+
});
14+
/* alternate way to do this:
15+
document.addEventListener("DOMContentLoaded",function(){
16+
document.querySelectorAll('button').ForEach(function(button)) {
17+
button.onclick = function(){
18+
document.QuerySelector('#hello').style.color = button.dataset.color;
19+
}
20+
}
21+
}
22+
23+
*/
24+
//dataset.color takes the button access its data set
25+
// instead of calling function you can also do:
26+
// ForEach(button => {
27+
// () =>

‎newversion-2020/lecture5/counter.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Counter</title>
6+
<script src="counter.js"></script>
7+
</head>
8+
<body>
9+
<h1>0</h1>
10+
<button>Count</button>
11+
</body>
12+
</html>

‎newversion-2020/lecture5/counter.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
if (!localStorage.getItem('counter')){
3+
localStorage.setItem('counter',0);
4+
}
5+
// now we will use localstorage instead of variable let counter = 0;
6+
function count() {
7+
counter = localStorage.getItem('counter');
8+
counter++;
9+
document.querySelector('h1').innerHTML = counter;
10+
localStorage.setItem('counter',counter); //save the lst value of counter
11+
//if (counter % 10 === 0)
12+
//{
13+
// alert ( f{"count is now {counter}" ) this is how we would do this in python
14+
// alert(`Count is now ${counter}`) //template literal, ${ } means plug in a variable here
15+
//}
16+
}
17+
18+
// document.querySelector('button').onclick = count;
19+
// I am not actually calling the function if i call it i would do count(), but I am setting litterally equal to the function itself
20+
21+
// It is not going to work bcs js code looking for button but body of the page hasnt finished loading yet.
22+
//I can add an event listener to the document itself
23+
24+
document.addEventListener('DOMContentLoaded',function(){
25+
//so now when refresh the page, it'll go back to value that remembered not 0, bcs h1 was 0 in html code.
26+
document.querySelector('h1').innerHTML =localStorage.getItem('counter');
27+
document.querySelector('button').onclick = count;
28+
29+
// run this function every 1000 miliseconds
30+
//setInterval(count,1000);
31+
});
32+
/* It says, wait until the all the content in the page is loaded, then run this function, so now we will able to find the button
33+
So now I am able to seperate all of my js code from the html, you can move js to seperate file
34+
To do this: in the head <script src='counter.js'></cript> */
35+
36+
/* Now our code doesnt store any information. There is a way to remembering information for later use, Now js allows us to do smth called
37+
local storage. Its a way for us to store info inside of the users web browser
38+
39+
Local storage is gonna give access to two key functions that we will use to manipulate this local storage:
40+
1) localstorage.getItem(key)
41+
2) localstorage.setItem(key,value)
42+
*/

‎newversion-2020/lecture5/currency.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Currency</title>
6+
<script src="currency.js"></script>
7+
</head>
8+
<body>
9+
<form>
10+
<input id="currency" type="text" placeholder="Currency">
11+
<input id="submit" type="submit" value="Convert">
12+
</form>
13+
<div id="result">
14+
</div>
15+
</body>
16+
</html>

‎newversion-2020/lecture5/currency.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
document.addEventListener("DOMContentLoaded",() => {
2+
3+
document.querySelector("form").onsubmit = () => {
4+
5+
// fetch is going to do web request,ang get back Http response from that page
6+
fetch('https://api.exchangeratesapi.io/latest?base=USD')
7+
8+
// what fetch is going to give us is a promise.It means that smth is going to back but it may not come back immediately
9+
//.then means what should i do when the promises is come back
10+
.then(response => {
11+
return response.json(); // convert response to json format
12+
} )
13+
14+
// if you have a function that takes smth and returning smth else, you can simplify the coding :
15+
// .then(response => response.json())
16+
17+
.then(data => {
18+
// console.log(data) -- print it out to terminal
19+
20+
// what user typed in the form
21+
const currency = document.querySelector('#currency').value.toUpperCase();
22+
const rate = data.rates[currency]; // I cant do data.rates.currency bcs currency is a variable
23+
if (rate !== undefined ) {
24+
document.querySelector('#result').innerHTML = `1 USD is equal to ${rate.toFixed(3)} ${currency}.`; // round it to 3 decimal point
25+
}
26+
else{
27+
document.querySelector('#result').innerHTML="No such a currency rate";
28+
}
29+
})
30+
//If something goes wrong taking the API data, give a error message
31+
.catch(error => {
32+
console.log('Error',error);
33+
})
34+
35+
return false; // we dont actually trying to submit the form, we"ll handle it locally.
36+
}
37+
})

‎newversion-2020/lecture5/dropdown.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Hello</title>
6+
<script src="dropdown.js"></script>
7+
</head>
8+
<body>
9+
<h1 id="hello"> hello </h1>
10+
<select>
11+
<option value="Red">Red</option>
12+
<option value="Blue">Blue</option>
13+
<option value="Green">Green</option>
14+
</select>
15+
</body>
16+
</html>

‎newversion-2020/lecture5/dropdown.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// you can design this code better
2+
document.addEventListener("DOMContentLoaded",function(){
3+
document.querySelector("select").onchange = function(){
4+
document.querySelector("#hello").style.color = this.value;
5+
}
6+
});
7+
/* Events:
8+
onclick
9+
onmouseover
10+
onkeydown -- keyboard event
11+
onkeyup -- keyboard event
12+
onload
13+
onblur
14+
*/

‎newversion-2020/lecture5/form.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Form</title>
6+
7+
<script>
8+
document.addEventListener('DOMContentLoaded',function(){
9+
document.querySelector('form').onsubmit = function() {
10+
const name = document.querySelector('#name').value;
11+
alert(`Hello ${name}`);
12+
}
13+
});
14+
</script>
15+
</head>
16+
<body>
17+
<h1>hello</h1>
18+
<form>
19+
<input autofocus id="name" placeholder="Name" type="text">
20+
<input type="submit">
21+
</form>
22+
</body>
23+
</html>

0 commit comments

Comments
 (0)