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

visuell-teller

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-16 14:01:43 +02:00
parent 83f69d397d
commit 859f8334d9
12 changed files with 140 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
eloquentjavascript/script.js
View file

@ -25,16 +25,16 @@ for (let current = 20; ;current = current +1){
} }
} }
switch (prompt("What is the weather like?")) { // switch (prompt("What is the weather like?")) {
case "rainy": // case "rainy":
console.log("Remember to bring an umbrella."); // console.log("Remember to bring an umbrella.");
break; // break;
case "sunny": // case "sunny":
console.log("Dress lightly."); // console.log("Dress lightly.");
case "cloudy": // case "cloudy":
console.log("Go outside."); // console.log("Go outside.");
break; // break;
default: // default:
console.log("Unknown weather type!"); // console.log("Unknown weather type!");
break; // break;
} // }

2
index.html
View file

@ -22,7 +22,9 @@
<div id="heading">Linker skolearbeid:</div> <div id="heading">Linker skolearbeid:</div>
<ol> <ol>
<li><a href="https://geokkjer.github.io/startit/intro_html">Intro HTML CSS Javascript</a></li> <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/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> </ol>
<div id="heading">Ekstra</div> <div id="heading">Ekstra</div>

59
intro_html/index.html
View file

@ -9,10 +9,10 @@
</head> </head>
<body> <body>
<button>Ingen Layout</button> <button onclick="noLayout()">Ingen Layout</button>
<button>Vertikal layout</button> <button onclick="vertLayout()">Vertikal layout</button>
<button>Horisontal layout</button> <button onclick="horLayout()">Horisontal layout</button>
<button>Grid layout</button> <button onclick="gridLayout()">Grid layout</button>
<h1>Eksempel 1</h1> <h1>Eksempel 1</h1>
<div id="cards"> <div id="cards">
@ -20,10 +20,11 @@
<div class="header green" onclick="green()"> <div class="header green" onclick="green()">
Verktøy Verktøy
</div> </div>
<div class="innerCard" id="green"></div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="innerCard" id="inner"> <div class="innerCard" id="green">
</div> </div>
</div> </div>
<div id="cards"> <div id="cards">
@ -34,64 +35,28 @@
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="innerCard" id="inner"> <div class="innerCard" id="blue">
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> </div>
<div id="cards"> <div id="cards">
<div class="card"> <div class="card">
<div class="header red"> <div class="header red" onclick="red()">
CSS CSS
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="innerCard" id="inner"> <div class="innerCard" id="red">
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>
<div id="cards"> <div id="cards">
<div class="card"> <div class="card">
<div class="header yellow" onclick="openClose()"> <div class="header yellow" onclick="yellow()">
JavaScript JavaScript
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="innerCard" id="inner"> <div class="innerCard" id="yellow">
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> </ul>
</div> </div>
@ -99,7 +64,7 @@
</div> </div>
<div id="cards"> <div id="cards">
<div class="card"> <div class="card">
<div class="header dark"> <div class="header dark" onclick="dark()">
Hode, kropp og ben Hode, kropp og ben
</div> </div>
</div> </div>

70
intro_html/script.js
View file

@ -1,10 +1,14 @@
blankAll() blankAll()
function blankAll(){ function blankAll() {
document.getElementById('inner').innerHTML = ''; document.getElementById('green').innerHTML = '';
document.getElementById('blue').innerHTML = '';
document.getElementById('red').innerHTML = '';
document.getElementById('yellow').innerHTML = '';
} }
function green() { function green() {
blankAll(); blankAll();
document.getElementById('inner').innerHTML = /*HTML*/ ` document.getElementById('green').innerHTML = /*HTML*/ `
De to viktigste verktøyene vi skal bruke er disse: De to viktigste verktøyene vi skal bruke er disse:
<ul> <ul>
<li> <li>
@ -22,8 +26,66 @@ function green() {
</ul>`; </ul>`;
} }
function blue() { 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() { 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(){
} }

2
intro_html/style.css
View file

@ -10,7 +10,7 @@ body {
} }
.innerCard { .innerCard {
padding: 10px; padding: 1px;
} }
.header { .header {

1
intro_js/betale.html
View file

@ -8,6 +8,7 @@
</head> </head>
<style> <style>
#app { #app {
background-color: aqua;
display: grid; display: grid;
} }
</style> </style>

1
intro_js/funksjoner_med_parameter.html
View file

@ -14,7 +14,6 @@
</head> </head>
<body> <body>
<input type="text">color
<div id="minDiv"> <div id="minDiv">
Hallo innerHTML Hallo innerHTML
</div> </div>

14
intro_js/index.html
View file

@ -11,15 +11,21 @@
<div id="app"> <div id="app">
</div> </div>
<script> <script>
add('green', 500, "Det", 'div'); let count = 0;
add('red', 250, "var", 'h3');
add('blue', 600, "en", 'li'); add('green', 500, "Det", 'span');
add('red', 250, "var", 'div');
add('blue', 600, "en", 'div');
add('rgb(200, 200, 42)', 500, "gang", 'span'); add('rgb(200, 200, 42)', 500, "gang", 'span');
function add(color, size, word, tagName) { function add(color, size, word, tagName) {
count++;
let existingHtml = document.getElementById('app').innerHTML; let existingHtml = document.getElementById('app').innerHTML;
let newHtml = /*HTML*/ ` 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 ; document.getElementById('app').innerHTML = existingHtml + newHtml ;
} }

9
intro_js/variablerN4m1.html
View file

@ -7,8 +7,9 @@
</head> </head>
<body> <body>
<div id="output"></div><br> <div id="output"></div><br>
<button onclick="setNum16(16)">Set Number to 16</button> <button onclick="setNum(16)">Set Number to 16</button>
<button onclick="setNum47(47)">Set Number to 47</button> <button onclick="setNum(47)">Set Number to 47</button>
<button onclick="increaseNum()">Increase number by 1</button>
<br><br> <br><br>
<script> <script>
@ -19,6 +20,10 @@
numToShow = selectedNum; numToShow = selectedNum;
outputDiv.innerHTML = numToShow; outputDiv.innerHTML = numToShow;
} }
function increaseNum(){
numToShow++;
outputDiv.innerHTML = numToShow;
}
</script> </script>
</body> </body>

0
oppgaver/intro-oppgave.html → oppgaver/uke1/intro-oppgave.html
View file

26
oppgaver/uke1/visuell-teller.html Normal file
View file

@ -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>

0
oppgaver/visuell-teller.html
View file