variables and functions
This commit is contained in:
parent
20fbf34ec8
commit
c8446d5c93
3
eloquentjavascript/functions.js
Normal file
3
eloquentjavascript/functions.js
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
const square = function(x) {
|
||||||
|
return x * x;
|
||||||
|
}
|
||||||
22
eloquentjavascript/loopingatriangle.html
Normal file
22
eloquentjavascript/loopingatriangle.html
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button onclick="start()">start</button>
|
||||||
|
<div id="triangle"><ul>#</ul></div>
|
||||||
|
<script>
|
||||||
|
let triangle = "#";
|
||||||
|
function start(){
|
||||||
|
triangle += "#"
|
||||||
|
document.getElementById('triangle').innerHTML += `<ul>${triangle}</ul>`
|
||||||
|
if (document.getElementById('triangle').innerHTML.length() == 5) {
|
||||||
|
console.log('Nice');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
89
intro_js/bakgrunnsfarge.html
Normal file
89
intro_js/bakgrunnsfarge.html
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Bytting av bakgrunnsfarge på nettleser</title>
|
||||||
|
<style>
|
||||||
|
div.bg {
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
border: solid black 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green-bg {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-bg {
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-bg {
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white-text {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="page">
|
||||||
|
<h2 id="title">Class List</h2>
|
||||||
|
|
||||||
|
<div id="farge1" class="green-bg" onclick="getColor1()">farge1</div>
|
||||||
|
<div id="farge2" class="blue-bg" onclick="getColor2()">farge2</div>
|
||||||
|
<div id="farge3" class="red-bg" onclick="getcolor3()">farge3</div>
|
||||||
|
|
||||||
|
<button onclick="changeBgColor()">Forandre hele bakgrunnen</button>
|
||||||
|
|
||||||
|
<div id="box-1" class="bg" onclick="setColor1()"></div>
|
||||||
|
<div id="box-2" class="bg" onclick="setColor2()"></div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
//let bgColor = document.getElementsByClassName();
|
||||||
|
var farge;
|
||||||
|
|
||||||
|
console.log(farge1, farge2, farge3);
|
||||||
|
function getColor1() {
|
||||||
|
farge = document.getElementById('farge1').className;
|
||||||
|
}
|
||||||
|
function getColor2() {
|
||||||
|
farge = document.getElementById('farge2').className;
|
||||||
|
console.log(farge)
|
||||||
|
}
|
||||||
|
function getcolor3() {
|
||||||
|
farge = document.getElementById('farge3').className;
|
||||||
|
console.log(farge)
|
||||||
|
}
|
||||||
|
function setColor1() {
|
||||||
|
document.getElementById('box-1').classList.add(farge);
|
||||||
|
console.log(farge)
|
||||||
|
}
|
||||||
|
function setColor2() {
|
||||||
|
document.getElementById('box-2').classList.add(farge);
|
||||||
|
console.log(farge)
|
||||||
|
}
|
||||||
|
function changeBgColor() {
|
||||||
|
document.getElementById('page').classList.add(farge);
|
||||||
|
}
|
||||||
|
|
||||||
|
// paragraph.classList.add('bold', 'red-bg', 'big-font');
|
||||||
|
// paragraph.classList.remove('bold');
|
||||||
|
// paragraph.classList.replace('big-font', 'white-text');
|
||||||
|
|
||||||
|
// paragraph.classList.toggle('red-bg');
|
||||||
|
// paragraph.classList.toggle('red-bg');
|
||||||
|
// console.log(paragraph.classList.contains('red-bg'));
|
||||||
|
// console.log(paragraph.classList);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
39
intro_js/stoppeklokke.html
Normal file
39
intro_js/stoppeklokke.html
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page">
|
||||||
|
<div id="header">Stoppeklokke</div>
|
||||||
|
<div id="buttons">
|
||||||
|
<button onclick="myTimer()">Start</button>
|
||||||
|
<button onclick="stopTimer()">Stopp</button>
|
||||||
|
<button onclick="resetTimer()">Rundetid</button>
|
||||||
|
</div>
|
||||||
|
<div id="time"></div><br>
|
||||||
|
<div id="round"></div><br>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
let time = 1;
|
||||||
|
function myTimer() {
|
||||||
|
setInterval(counter,1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function counter() {
|
||||||
|
document.getElementById('time').innerHTML = time;
|
||||||
|
++time;
|
||||||
|
}
|
||||||
|
function resetTimer() {
|
||||||
|
document.getElementById('round').innerHTML += `<li>${time -1} sekunder</li`;
|
||||||
|
clearInterval(time)
|
||||||
|
time = 0;
|
||||||
|
}
|
||||||
|
function stopTimer(){
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
intro_js/variablerN4m1_2.html
Normal file
24
intro_js/variablerN4m1_2.html
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Let & var scopes</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
function testScopes() {
|
||||||
|
var hello = "Var hello";
|
||||||
|
let hello2 = "Let Hello";
|
||||||
|
console.log(hello,hello2);
|
||||||
|
{
|
||||||
|
var yo = "Var yo i obj";
|
||||||
|
let yo2 = "Let yo i obj";
|
||||||
|
console.log(yo, yo2);
|
||||||
|
}
|
||||||
|
console.log(yo);
|
||||||
|
}
|
||||||
|
testScopes();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue