visuell-teller
This commit is contained in:
parent
83f69d397d
commit
859f8334d9
12 changed files with 140 additions and 74 deletions
|
|
@ -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><div></tt></li>
|
||||
<li><tt><input type="text"></tt></li>
|
||||
<li><tt><button></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>
|
||||
|
|
|
|||
|
|
@ -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><div></tt></li>
|
||||
<li><tt><input type="text"></tt></li>
|
||||
<li><tt><button></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(){
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ body {
|
|||
}
|
||||
|
||||
.innerCard {
|
||||
padding: 10px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue