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

testing react/next.js + some builtin methods in js

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-09-05 14:44:41 +02:00
parent 70dc40a0b9
commit 1262da454d
4 changed files with 131 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
react_test/app.js → MVC/kalender.html
View file

45
MVC/løkker.html Normal file
View file

@ -0,0 +1,45 @@
<!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>
<div id="app">
</div>
<script>
// Model
let maxNumber = 10;
// view
updateView();
function updateView() {
let lishtml = '';
for (let i = 1; i <= maxNumber; i++) {
lishtml += /*HTML*/ `
<li>${maxNumber} x ${i} = ${i * 10}</li>
`;
}
document.getElementById('app').innerHTML = /*HTML*/`
<h1>App</h1>
<input
style="font-size:300%;"
type="number" min="1" step="1" max="100";
oninput="maxNumber=this.valueAsNumber; updateView();"
value="${maxNumber}"
/>
<ul>
${lishtml}
</ul>
`;
}
</script>
</body>
</html>

76
MVC/numberPuzzle.html Normal file
View file

@ -0,0 +1,76 @@
<!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>
#app {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
}
#app>div {
border: 2px solid gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 300%;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
// model
let board = '7354 1286';
// view
updateView();
function updateView() {
document.getElementById('app').innerHTML =
createSquareHtml(0)
+ createSquareHtml(1)
+ createSquareHtml(2)
+ createSquareHtml(3)
+ createSquareHtml(4)
+ createSquareHtml(5)
+ createSquareHtml(6)
+ createSquareHtml(7)
+ createSquareHtml(8)
}
function createSquareHtml(index) {
return /*HTML*/`
<div onclick="swap(${index})">${board.charAt(index)}</div>
`;
}
// controller
function swap(index) {
let blankIndex = board.indexOf(' ');
if (!areNeighbours(index, blankIndex)) return;
let selectedNumber = board.charAt(index);
board = board.replace(' ', 'x');
board = board.replace(selectedNumber, ' ');
board = board.replace('x', selectedNumber);
updateView();
}
function areNeighbours(index1, index2) {
let rowIndex1 = Math.floor(index1 / 3);
let colIndex1 = index1 % 3;
let rowIndex2 = Math.floor(index2 / 3);
let colIndex2 = index2 % 3;
return (colIndex1 == colIndex2 && Math.abs(rowIndex2 - rowIndex1) == 1)
|| (rowIndex1 == rowIndex2 && Math.abs(colIndex1 - colIndex2) == 1);
}
</script>
</body>
</html>

13
react_test/tutorial/index.html
View file

@ -5,9 +5,16 @@
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx"> <script type="text/jsx">
const app = document.getElementById('app'); const domNode = document.getElementById('app');
const root = ReactDOM.createRoot(app);
root.render(<h1>Develop. Preview. Ship.</h1>) function Header() {
return (<h1>Develop. Preview. Ship.</h1>)
}
function HomePage() {
return <div></div>;
}
const root = ReactDOM.createRoot(domNode);
root.render(<Header />);
</script> </script>
</body> </body>
</html> </html>