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