From c8446d5c93dd750554504f3357c8922491e3d5fd Mon Sep 17 00:00:00 2001
From: Geir Okkenhaug Jerstad <geir@geokkjer.eu>
Date: Mon, 19 Aug 2024 13:36:00 +0200
Subject: [PATCH] variables and functions

---
 eloquentjavascript/functions.js               |  3 +
 eloquentjavascript/loopingatriangle.html      | 22 +++++
 .../{script.js => test_script.js}             |  0
 intro_js/bakgrunnsfarge.html                  | 89 +++++++++++++++++++
 intro_js/stoppeklokke.html                    | 39 ++++++++
 intro_js/variablerN4m1_2.html                 | 24 +++++
 6 files changed, 177 insertions(+)
 create mode 100644 eloquentjavascript/functions.js
 create mode 100644 eloquentjavascript/loopingatriangle.html
 rename eloquentjavascript/{script.js => test_script.js} (100%)
 create mode 100644 intro_js/bakgrunnsfarge.html
 create mode 100644 intro_js/stoppeklokke.html
 create mode 100644 intro_js/variablerN4m1_2.html
diff --git a/eloquentjavascript/functions.js b/eloquentjavascript/functions.js
new file mode 100644
index 0000000..0a7b887
--- /dev/null
+++ b/eloquentjavascript/functions.js
@@ -0,0 +1,3 @@
+const square = function(x) {
+    return x * x;
+}
\ No newline at end of file
diff --git a/eloquentjavascript/loopingatriangle.html b/eloquentjavascript/loopingatriangle.html
new file mode 100644
index 0000000..0a6db78
--- /dev/null
+++ b/eloquentjavascript/loopingatriangle.html
@@ -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>
\ No newline at end of file
diff --git a/eloquentjavascript/script.js b/eloquentjavascript/test_script.js
similarity index 100%
rename from eloquentjavascript/script.js
rename to eloquentjavascript/test_script.js
diff --git a/intro_js/bakgrunnsfarge.html b/intro_js/bakgrunnsfarge.html
new file mode 100644
index 0000000..447c9c6
--- /dev/null
+++ b/intro_js/bakgrunnsfarge.html
@@ -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>
\ No newline at end of file
diff --git a/intro_js/stoppeklokke.html b/intro_js/stoppeklokke.html
new file mode 100644
index 0000000..a1c0b71
--- /dev/null
+++ b/intro_js/stoppeklokke.html
@@ -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>
\ No newline at end of file
diff --git a/intro_js/variablerN4m1_2.html b/intro_js/variablerN4m1_2.html
new file mode 100644
index 0000000..4154ae4
--- /dev/null
+++ b/intro_js/variablerN4m1_2.html
@@ -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>
\ No newline at end of file
