geir/startit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-08 09:04:57 +02:00
parent eadcb52ee2
commit 3161c30714
15 changed files with 254 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
MDN/index.html Normal file
View file

4
default.nix Normal file
View file

@ -0,0 +1,4 @@
{ pkgs, configs, ... }:
{
}

BIN
intro html/img/body1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
intro html/img/body2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
intro html/img/body3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
intro html/img/head1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
intro html/img/head2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
intro html/img/head3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
intro html/img/legs1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
intro html/img/legs2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
intro html/img/legs3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

124
intro html/index.html Normal file
View file

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=x, initial-scale=1.0">
</head>
<body>
<button>Ingen Layout</button>
<button>Vertikal layout</button>
<button>Horisontal layout</button>
<button>Grid layout</button>
<h1>Eksempel 1</h1>
Hva heter du?<input type="text">
<div>
Verktøy
</div>
<div>
De to viktigste verktøyene vi skal bruke er disse:
<ul>
<li>
Koderedigeringsprogrammet <a href="https://code.visualstudio.com/">Visual Studio Code</a>
<br>
Vi skal bruke noen <i>extensions</i>:
<ul>
<li>JavaScript-booster</li>
<li>es6-string-html</li>
<li>live-server</li>
<li>live-share</li>
</ul>
</li>
<li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li>
</ul>
</div>
<div>
HTML
</div>
<div>
<div>
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>
</div>
<div>
CSS
</div>
<div>
<div>
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>
</div>
<div>
<div>
JavaScript
</div>
<div>
<div>
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>
</div>
</div>
</div>
<div>
<div>
Hode, kropp og ben
</div>
<div>
<div id="head" class="bodyPart">
<button onclick="selectHead4()">◀</button>
<img src="img/head1.png">
<button onclick="selectHead2()">▶</button>
</div>
<div id="body" class="bodyPart">
<button onclick="selectBody4()">◀</button>
<img src="img/body1.png">
<button onclick="selectBody2()">▶</button>
</div>
<div id="legs" class="bodyPart">
<button onclick="selectLegs4()">◀</button>
<img src="img/legs1.png">
<button onclick="selectLegs2()">▶</button>
</div>
</div>
</div>
</body>
</html>

42
oppgave/index.html Normal file
View file

@ -0,0 +1,42 @@
<!doctype html>
<html>
<head>
<title>Startit</title>
<meta charset=utf-8/>
<style>
h1 {
color: blue;
}
div {
color: blue;
background-color: lightblue;
padding: 10px;
margin: 10px;
border: solid green 2px;
}
.selected {
border: dashed orange 5px;
}
</style>
</head>
<body>
<h1 id="overskrift" class="selected">Hello World !</h1>
<div onclick="heiPåDeg(this)">ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div onclick="heiPåDeg(this)" class="selected">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl.
</div>
<div onclick="heiPåDeg(this)">Trykk her</div>
<script>
var teller = 0;
function heiPåDeg(tagElement) {
teller++;
tagElement.innerHTML = 'x';
document.getElmentById('overskrift'.innerHTML =
'Du har trykket ' + teller + ' ganger';
}
</script>
</body>
</html>

73
oppgave/oppgave.html Normal file
View file

@ -0,0 +1,73 @@
<!doctype html>
<html>
<head>
<title>Opptaksoppgave</title>
<style>
div {
color: blue;
background-color: lightblue;
padding: 10px;
margin: 10px;
border: solid green 2px;
width: 30px;
height: 30x;
float: left;
}
div.førstPåLinja {
clear: left;
}
</style>
</head>
<div id="r1k1" onclick="trykk(this, 'r1k2','r2k1', 'r2k1', 'r2k1')">7</div>
<div id="r1k2" onclick="trykk(this, 'r1k1','r1k3', 'r2k2', 'r2k2')">1</div>
<div id="r1k3" onclick="trykk(this, 'r1k2','r2k3', 'r2k3', 'r2k3')">2</div>
<div id="r2k1" class="førstPåLinja" onclick="trykk(this, 'r2k2','r1k1', 'r3k1', 'r3k1')">5</div>
<div id="r2k2" onclick="trykk(this, 'r2k1','r1k2', 'r2k3', 'r3k2')"></div>
<div id="r2k3" onclick="trykk(this, 'r2k2','r1k3', 'r3k3', 'r3k3')">3</div>
<div id="r3k1" class="førstPåLinja" onclick="trykk(this, 'r2k1','r3k2', 'r3k2', 'r3k2')">8</div>
<div id="r3k2" onclick="trykk(this, 'r3k1','r2k2', 'r3k3', 'r3k3')">4</div>
<div id="r3k3" onclick="trykk(this, 'r3k2','r2k3', 'r2k3', 'r2k3')">6</div>
<button id="riktig" onclick="test(this)">sjekk her</button>
<script>
function trykk(tagElement, alt1, alt2, alt3, alt4) {
if(document.getElementById(alt1).innerHTML == '') {
document.getElementById(alt1).innerHTML = tagElement.innerHTML;
tagElement.innerHTML = '';
}
if(document.getElementById(alt2).innerHTML == '') {
document.getElementById(alt2).innerHTML = tagElement.innerHTML;
tagElement.innerHTML = '';
}
if(document.getElementById(alt3).innerHTML == '') {
document.getElementById(alt3).innerHTML = tagElement.innerHTML;
tagElement.innerHTML = '';
}
if(document.getElementById(alt4).innerHTML == '') {
document.getElementById(alt4).innerHTML = tagElement.innerHTML;
tagElement.innerHTML = '';
}
}
function test() {
var array = ['r1k1', 'r1k2', 'r1k3', 'r2k1', 'r2k2', 'r2k3', 'r3k1', 'r3k2', 'r3k3'].map(id => document.getElementById(id).innerHTML);
let svar = [1,2,3,4,5,6,7,8,''];
if (array.toString() == svar.toString()) {
alert('Hurra!!');
}
else {
alert('Sjekk consolen')
console.log(array === svar);
console.log(array);
console.log(svar);
}
}
</script>
</body>
</html>

11
test.html Normal file
View file

@ -0,0 +1,11 @@
<!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>
</body>
</html>