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

dag 3 commit 2

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-09 12:28:40 +02:00
parent 06bd2966ca
commit a666d86ed6
1 changed files with 77 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
intro html/js.html
View file

@ -4,7 +4,33 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>JS Intro</title>
<style>
.header {
background-color: black;
color: beige;
border: solid red 1px;
text-align: center;
font-size: x-large;
padding: 10px;
}
div.color1 {
background-color: bisque;
color: black;
}
div.color2 {
background-color: brown;
color: lightblue;
}
div.card {
background-color: grey;
color: blueviolet;
width: 300px;
}
</style>
</head> </head>
<body> <body>
@ -20,11 +46,58 @@
<li>Åpne og Lukke</li> <li>Åpne og Lukke</li>
<li>Velge hode</li> <li>Velge hode</li>
</ol> </ol>
<div id="geirsTagg">(tom)</div> <div class="card">
<button onclick="newText()">Trykk her</button> <div class="header color1" onclick="newText()"><b>Overskrift A</b>
</div>
<div id="tag1"></div>
</div>
<div class="card">
<div class="header color2" onclick="noClick()"><b>Overskrift B</b></div>
<div id="tag2"></div>
</div>
<h3>Bla opp og ned</h3>
<div style="display: flex;" id="numbersAndButtons">
</div>
<script> <script>
showNumber1();
function newText() { function newText() {
document.getElementById('geirsTagg').innerHTML = 'Ny tekst' blankAll();
document.getElementById('tag1').innerHTML = /*HTML*/ `
<h1>Ny tekst 1</h1>`;
}
function noClick() {
blankAll();
document.getElementById('tag2').innerHTML = '<h2>Ikke trykk</h2>'
}
function blankAll() {
document.getElementById('tag1').innerHTML = '';
document.getElementById('tag2').innerHTML = '';
}
function showNumber1() {
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
<button onclick="showNumber4">◀</button>
<div style="width: 40px; text-align: center;">1</div>
<button onclick="showNumber2">▶</button>
`;
function showNumber2() {
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
<button onclick="showNumber1">◀</button>
<div style="width: 40px; text-align: center;">2</div>
<button onclick="showNumber3">▶</button>
`;
function showNumber3() {
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
<button onclick="showNumber2">◀</button>
<div style="width: 40px; text-align: center;">3</div>
<button onclick="showNumber4">▶</button>
`;
function showNumber4() {
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
<button onclick="showNumber3">◀</button>
<div style="width: 40px; text-align: center;">1</div>
<button onclick="showNumber1">▶</button>
`;
} }
</script> </script>
</body> </body>