visuell-teller

2024-08-16 14:01:43 +02:00 · 2024-08-16 14:01:43 +02:00 · 859f8334d9
parent 83f69d397d
commit 859f8334d9
12 changed files with 140 additions and 74 deletions
--- a/eloquentjavascript/script.js
+++ b/eloquentjavascript/script.js
@ -25,16 +25,16 @@ for (let current = 20; ;current = current +1){
    }
 }

-switch (prompt("What is the weather like?")) {
-    case "rainy":
-      console.log("Remember to bring an umbrella.");
-      break;
-    case "sunny":
-      console.log("Dress lightly.");
-    case "cloudy":
-      console.log("Go outside.");
-      break;
-    default:
-      console.log("Unknown weather type!");
-      break;
-  }
+// switch (prompt("What is the weather like?")) {
+//     case "rainy":
+//       console.log("Remember to bring an umbrella.");
+//       break;
+//     case "sunny":
+//       console.log("Dress lightly.");
+//     case "cloudy":
+//       console.log("Go outside.");
+//       break;
+//     default:
+//       console.log("Unknown weather type!");
+//       break;
+//   }
--- a/index.html
+++ b/index.html
@ -22,7 +22,9 @@
        <div id="heading">Linker skolearbeid:</div>
        <ol>
            <li><a href="https://geokkjer.github.io/startit/intro_html">Intro HTML CSS Javascript</a></li>
+            <div id="heading">UKe 1</div>
            <li><a href="https://geokkjer.github.io/startit/team/oppgave1/index2.html">Team-oppgave uke 1.5</a></li>
+            <li><a href="https://geokkjer.github.io/startit/oppgaver/uke1/visuell-teller.html">Visuell teller</a></li>
        </ol>

        <div id="heading">Ekstra</div>
--- a/intro_html/index.html
+++ b/intro_html/index.html
@ -9,10 +9,10 @@
 </head>

 <body>
-    <button>Ingen Layout</button>
-    <button>Vertikal layout</button>
-    <button>Horisontal layout</button>
-    <button>Grid layout</button>
+    <button onclick="noLayout()">Ingen Layout</button>
+    <button onclick="vertLayout()">Vertikal layout</button>
+    <button onclick="horLayout()">Horisontal layout</button>
+    <button onclick="gridLayout()">Grid layout</button>

    <h1>Eksempel 1</h1>
    <div id="cards">
@ -20,10 +20,11 @@
            <div class="header green" onclick="green()">
                Verktøy
            </div>
+            <div class="innerCard" id="green"></div>
        </div>
    </div>
    <div class="card">
-        <div class="innerCard" id="inner">
+        <div class="innerCard" id="green">
        </div>
    </div>
    <div id="cards">
@ -34,72 +35,36 @@
        </div>
    </div>
    <div class="card">
-        <div class="innerCard" id="inner">
-            Vi bruker HTML til å definere et dokument.
-            <ul>
-                <li>Tagger for grunnleggende oppsett av en HTML-fil</li>
-                <li>Tagger for grunnleggende formatering av tekst</li>
-                <li><tt>&lt;div&gt;</tt></li>
-                <li><tt>&lt;input type="text"&gt;</tt></li>
-                <li><tt>&lt;button&gt;</tt></li>
-                <li><a href="https://www.w3schools.com/html/default.asp" target="_new">W3Schools HTML Tutorial</a>
-                </li>
-                <li><a href="https://www.w3schools.com/tags/default.asp" target="_new">W3Schools HTML Reference</a>
-                </li>
-            </ul>
+        <div class="innerCard" id="blue">
        </div>
    </div>
    <div id="cards">
        <div class="card">
-            <div class="header red">
+            <div class="header red" onclick="red()">
                CSS
            </div>
        </div>
    </div>
    <div class="card">
-        <div class="innerCard" id="inner">
-            Vi bruker CSS til å <i>style</i> et dokument, altså farger, fonter, utseende og lignende.
-            <ul>
-                <li><tt>background-color</tt></li>
-                <li><tt>color</tt></li>
-                <li><tt>padding</tt></li>
-                <li><tt>margin</tt></li>
-                <li><tt>border</tt></li>
-                <li><tt>text-align</tt></li>
-                <li><tt>font-size</tt></li>
-                <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_new">Flexbox</a></li>
-                <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_new">Grid</a></li>
-                <li><a href="https://www.w3schools.com/css/default.asp" target="_new">W3Schools CSS Tutorial</a>
-                </li>
-                <li><a href="https://www.w3schools.com/cssref/default.asp" target="_new">W3Schools CSS Reference</a>
-                </li>
-            </ul>
+        <div class="innerCard" id="red">   
        </div>
    </div>
    <div id="cards">
        <div class="card">
-            <div class="header yellow" onclick="openClose()">
+            <div class="header yellow" onclick="yellow()">
                JavaScript
            </div>
        </div>
        <div class="card">
-            <div class="innerCard" id="inner">
-                Det viktigste vi skal lære er programmeringsspråket JavaScript. Vi skal lære grunnleggende programmering
-                ved
-                å manipulere HTML- og CSS-kode på en nettside ved hjelp av JavaScript.
-                <ul>
-                    <li>Det finnes en W3Schools JavaScript Tutorial, men her anbefaler vi heller å følge kurset vårt på
-                        Moodle.</li>
-                    <li><a href="https://www.w3schools.com/jsref/default.asp" target="_new">W3Schools JavaScript
-                            Reference</a></li>
-
+            <div class="innerCard" id="yellow">
+              
                </ul>
            </div>
        </div>
    </div>
    <div id="cards">
        <div class="card">
-            <div class="header dark">
+            <div class="header dark" onclick="dark()">
                Hode, kropp og ben
            </div>
        </div>
--- a/intro_html/script.js
+++ b/intro_html/script.js
@ -1,10 +1,14 @@
 blankAll()
-function blankAll(){
-    document.getElementById('inner').innerHTML = '';
+function blankAll() {
+    document.getElementById('green').innerHTML = '';
+    document.getElementById('blue').innerHTML = '';
+    document.getElementById('red').innerHTML = '';
+    document.getElementById('yellow').innerHTML = '';
+
 }
 function green() {
    blankAll();
-    document.getElementById('inner').innerHTML = /*HTML*/ `
+    document.getElementById('green').innerHTML = /*HTML*/ `
    De to viktigste verktøyene vi skal bruke er disse:
    <ul>
        <li>
@ -22,8 +26,66 @@ function green() {
    </ul>`;
 }
 function blue() {
-
+    blankAll();
+    document.getElementById('blue').innerHTML = /*HTML*/ `
+    Vi bruker HTML til å definere et dokument.
+            <ul>
+                <li>Tagger for grunnleggende oppsett av en HTML-fil</li>
+                <li>Tagger for grunnleggende formatering av tekst</li>
+                <li><tt>&lt;div&gt;</tt></li>
+                <li><tt>&lt;input type="text"&gt;</tt></li>
+                <li><tt>&lt;button&gt;</tt></li>
+                <li><a href="https://www.w3schools.com/html/default.asp" target="_new">W3Schools HTML Tutorial</a>
+                </li>
+                <li><a href="https://www.w3schools.com/tags/default.asp" target="_new">W3Schools HTML Reference</a>
+                </li>
+            </ul>
+            `;
 }
 function red() {
-    
+    blankAll();
+    document.getElementById('red').innerHTML = /*HTML*/ `
+    Vi bruker CSS til å <i>style</i> et dokument, altså farger, fonter, utseende og lignende.
+    <ul>
+        <li><tt>background-color</tt></li>
+        <li><tt>color</tt></li>
+        <li><tt>padding</tt></li>
+        <li><tt>margin</tt></li>
+        <li><tt>border</tt></li>
+        <li><tt>text-align</tt></li>
+        <li><tt>font-size</tt></li>
+        <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_new">Flexbox</a></li>
+        <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_new">Grid</a></li>
+        <li><a href="https://www.w3schools.com/css/default.asp" target="_new">W3Schools CSS Tutorial</a>
+        </li>
+        <li><a href="https://www.w3schools.com/cssref/default.asp" target="_new">W3Schools CSS Reference</a>
+        </li>
+    </ul>
+    `;
+}
+function yellow() {
+    blankAll();
+    document.getElementById('yellow').innerHTML = /*HTML*/ `
+    Det viktigste vi skal lære er programmeringsspråket JavaScript. Vi skal lære grunnleggende programmering
+    ved
+    å manipulere HTML- og CSS-kode på en nettside ved hjelp av JavaScript.
+    <ul>
+        <li>Det finnes en W3Schools JavaScript Tutorial, men her anbefaler vi heller å følge kurset vårt på
+            Moodle.</li>
+        <li><a href="https://www.w3schools.com/jsref/default.asp" target="_new">W3Schools JavaScript
+                Reference</a></li>
+    </ul>`;
+}
+function dark() {
+    document.getElementById('dark').innerHTML = /*HTML*/ `
+    <div id="head" class="bodyPart">
+                <button onclick="selectHead4()">◀</button>
+                <img src="img/head1.png">
+                <button onclick="selectHead2()">▶</button>
+            </div>
+        `;
+}
+function selectHead(){
+
+
 }
--- a/intro_html/style.css
+++ b/intro_html/style.css
@ -10,7 +10,7 @@ body {
 }

 .innerCard {
-    padding: 10px;
+    padding: 1px;
 }

 .header {
--- a/intro_js/betale.html
+++ b/intro_js/betale.html
@ -8,6 +8,7 @@
 </head>
 <style>
    #app {
+        background-color: aqua;
        display: grid;
    }
 </style>
--- a/intro_js/funksjoner_med_parameter.html
+++ b/intro_js/funksjoner_med_parameter.html
@ -14,7 +14,6 @@
 </head>

 <body>
-    <input type="text">color
    <div id="minDiv">
        Hallo innerHTML
    </div>
--- a/intro_js/index.html
+++ b/intro_js/index.html
@ -11,15 +11,21 @@
    <div id="app">
    </div>
    <script>
-        add('green', 500, "Det", 'div');
-        add('red', 250, "var", 'h3');
-        add('blue', 600, "en", 'li');
+        let count = 0;
+
+        add('green', 500, "Det", 'span');
+        add('red', 250, "var", 'div');
+        add('blue', 600, "en", 'div');
        add('rgb(200, 200, 42)', 500, "gang", 'span');
        
        function add(color, size, word, tagName) {
+            count++;
            let existingHtml = document.getElementById('app').innerHTML;
            let newHtml =  /*HTML*/ `
-            <${tagName} style="color:${color}; font-size: ${size}%;">${word}</${tagName}>
+            <${tagName} style="color:${color}; font-size: ${size}%;">
+                ${word}
+                ${count}
+            </${tagName}>
            `;
            document.getElementById('app').innerHTML = existingHtml + newHtml ;
        }
--- a/intro_js/variablerN4m1.html
+++ b/intro_js/variablerN4m1.html
@ -7,8 +7,9 @@
 </head>
 <body>
    <div id="output"></div><br>
-    <button onclick="setNum16(16)">Set Number to 16</button>
-    <button onclick="setNum47(47)">Set Number to 47</button>
+    <button onclick="setNum(16)">Set Number to 16</button>
+    <button onclick="setNum(47)">Set Number to 47</button>
+    <button onclick="increaseNum()">Increase number by 1</button>
    <br><br>

    <script>
@ -19,6 +20,10 @@
            numToShow = selectedNum;
            outputDiv.innerHTML = numToShow;
        }
+        function increaseNum(){
+            numToShow++;
+            outputDiv.innerHTML = numToShow;
+        }
        
    </script>
 </body>
--- a/oppgaver/uke1/intro-oppgave.html
+++ b/oppgaver/uke1/intro-oppgave.html
--- a/oppgaver/uke1/visuell-teller.html
+++ b/oppgaver/uke1/visuell-teller.html
@ -0,0 +1,26 @@
+<!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="countUp()">tell oppover</button>
+    <button onclick="conutDown()">tell nedover</button>
+    <div id="tall">0</div>
+
+    <script>
+        let count = 0;
+        function countUp() {
+            ++count;
+            document.getElementById('tall').innerHTML = count;
+        }
+        function conutDown(){
+            --count;
+            document.getElementById('tall').innerHTML = count;
+        }
+
+    </script>
+</body>
+</html>
--- a/oppgaver/visuell-teller.html
+++ b/oppgaver/visuell-teller.html