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

team oppgave

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-14 14:52:08 +02:00
parent 79b0cd3da4
commit efb60f2471
9 changed files with 239 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

49
intro_html/css.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
}
div.page{
height: 100vh;
display: grid;
grid-template-areas: "header header """"";
}
div.header {
background-color: aquamarine;
grid-area: header;
}
div.menu {
background-color: brown;
grid-area: menu;
}
div.mainContent {
background-color: coral;
grid-area: mainContent;
}
div.footer {
background-color: crimson;
grid-area: footer;
}
</style>
</head>
<body>
<div class="page">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="mainContent">MainContent</div>
<div class="footer">Footer</div>
</div>
</body>
</html>

31
intro_html/index.html
View file

@ -15,43 +15,26 @@
<button>Grid layout</button>
<h1>Eksempel 1</h1>
<div id="tekstDiv">Start Tekst Her</div>
<button onclick="oppdaterTekst()">Trykk på knappen for å oppdatere tekst</button>
<div id="cards">
<div class="card">
<div class="header green">
<div class="header green" onclick="green()">
Verktøy
</div>
</div>
</div>
<div class="card">
<div class="innerCard">
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 class="innerCard" id="inner">
</div>
</div>
<div id="cards">
<div class="card">
<div class="header blue">
<div class="header blue" onclick="blue()">
HTML
</div>
</div>
</div>
<div class="card">
<div class="innerCard">
<div class="innerCard" id="inner">
Vi bruker HTML til å definere et dokument.
<ul>
<li>Tagger for grunnleggende oppsett av en HTML-fil</li>
@ -74,7 +57,7 @@
</div>
</div>
<div class="card">
<div class="innerCard">
<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>
@ -95,12 +78,12 @@
</div>
<div id="cards">
<div class="card">
<div class="header yellow">
<div class="header yellow" onclick="openClose()">
JavaScript
</div>
</div>
<div class="card">
<div class="innerCard">
<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.

30
intro_html/script.js
View file

@ -1,3 +1,29 @@
function oppdaterTekst() {
document.getElementById('tekstDiv').innerHTML = 'Ny tekst nå som knappen er trykket på';
blankAll()
function blankAll(){
document.getElementById('inner').innerHTML = '';
}
function green() {
blankAll();
document.getElementById('inner').innerHTML = /*HTML*/ `
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>`;
}
function blue() {
}
function red() {
}