2024-08-29 10:33:18 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2024-08-30 10:34:25 +02:00
|
|
|
|
2024-08-29 10:33:18 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-08-30 10:34:25 +02:00
|
|
|
<title>Document</title>
|
2024-08-29 10:33:18 +02:00
|
|
|
</head>
|
2024-08-30 10:34:25 +02:00
|
|
|
|
2024-08-29 10:33:18 +02:00
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
2024-08-30 10:34:25 +02:00
|
|
|
|
2024-08-29 10:33:18 +02:00
|
|
|
</div>
|
|
|
|
|
<script>
|
2024-08-30 10:34:25 +02:00
|
|
|
// Model
|
|
|
|
|
let aName;
|
|
|
|
|
let number;
|
|
|
|
|
let fontFamily;
|
|
|
|
|
let fontSize;
|
|
|
|
|
let isDarkMode = false;
|
|
|
|
|
|
2024-08-29 10:33:18 +02:00
|
|
|
// view
|
|
|
|
|
updateView()
|
2024-08-30 10:34:25 +02:00
|
|
|
function updateView() {
|
|
|
|
|
document.getElementById('app').innerHTML = /*HTML*/ `
|
|
|
|
|
<p>Hei ${aName ?? 'på deg!'}</p>
|
|
|
|
|
Navn:<br>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
oninput="aName=this.value"
|
|
|
|
|
value="${aName ?? ''}"/>
|
|
|
|
|
|
|
|
|
|
Tall:<br>
|
|
|
|
|
<input
|
|
|
|
|
type="range"
|
|
|
|
|
min="1"
|
|
|
|
|
max="100"
|
|
|
|
|
step="1"
|
|
|
|
|
oninput="number=this.valueAsNumber"
|
|
|
|
|
value ="${number ?? ''}">${number ?? ''}
|
|
|
|
|
<br>
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
oninput="isDarkMode=this.checked"
|
|
|
|
|
${isDarkMode ? 'checked' : ''}
|
|
|
|
|
>
|
|
|
|
|
Dark Mode:
|
|
|
|
|
<br>
|
|
|
|
|
<button onclick="selectFont('helvetica')">Font A</button>
|
|
|
|
|
<button onclick="selectFont('courier')">Font B</button>
|
|
|
|
|
<br>
|
|
|
|
|
<button
|
|
|
|
|
onclick="register()">Registrer</button><br>
|
|
|
|
|
<b>Font-størrelse</b><br>
|
|
|
|
|
Normal
|
|
|
|
|
<input
|
|
|
|
|
type="radio"
|
|
|
|
|
name="fontSize"
|
|
|
|
|
oninput="fontSize='100%'"
|
|
|
|
|
${fontSize == '100%' ? 'checked' : ''}
|
|
|
|
|
/><br>
|
|
|
|
|
50%
|
|
|
|
|
<input
|
|
|
|
|
type="radio"
|
|
|
|
|
name="fontSize"
|
|
|
|
|
oninput="fontSize='50%'"
|
|
|
|
|
${fontSize == '50%' ? 'checked' : ''}
|
|
|
|
|
/> <br>
|
|
|
|
|
200%
|
|
|
|
|
<input
|
|
|
|
|
type="radio"
|
|
|
|
|
name="fontSize"
|
|
|
|
|
oninput="fontSize='200%'"
|
|
|
|
|
${fontSize == '200%' ? 'checked' : ''}
|
|
|
|
|
><br>
|
2024-08-29 10:33:18 +02:00
|
|
|
`;
|
2024-08-30 10:34:25 +02:00
|
|
|
let bodyStyle = document.body.style;
|
2024-09-02 09:06:12 +02:00
|
|
|
bodyStyle.fontFamily = fontFamily ?? 'serif';
|
2024-08-30 10:34:25 +02:00
|
|
|
if (isDarkMode){
|
|
|
|
|
bodyStyle.background = 'black';
|
|
|
|
|
bodyStyle.color = 'white';
|
|
|
|
|
} else {
|
|
|
|
|
bodyStyle.background = 'white';
|
|
|
|
|
bodyStyle.color = 'black';
|
2024-08-29 10:33:18 +02:00
|
|
|
};
|
2024-09-02 09:06:12 +02:00
|
|
|
|
2024-08-30 10:34:25 +02:00
|
|
|
bodyStyle.fontSize = fontSize;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Controller
|
|
|
|
|
function register() {
|
|
|
|
|
updateView();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function selectFont(newFontFamily){
|
|
|
|
|
fontFamily = newFontFamily;
|
|
|
|
|
updateView()
|
2024-08-29 10:33:18 +02:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2024-08-30 10:34:25 +02:00
|
|
|
|
2024-08-29 10:33:18 +02:00
|
|
|
</html>
|
