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

2024-09-05 14:44:41 +02:00 · 2024-09-05 14:44:41 +02:00 · 1262da454d
parent 70dc40a0b9
commit 1262da454d
4 changed files with 131 additions and 3 deletions
--- a/MVC/kalender.html
+++ b/MVC/kalender.html
--- a/MVC/løkker.html
+++ b/MVC/løkker.html
@ -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>
--- a/MVC/numberPuzzle.html
+++ b/MVC/numberPuzzle.html
@ -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>
--- a/react_test/tutorial/index.html
+++ b/react_test/tutorial/index.html
@ -5,9 +5,16 @@
    <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 type="text/jsx">
-        const app = document.getElementById('app');
-        const root = ReactDOM.createRoot(app);
-        root.render(<h1>Develop. Preview. Ship.</h1>)
+        const domNode = document.getElementById('app');
+
+        function Header() {
+            return (<h1>Develop. Preview. Ship.</h1>)
+        }
+        function HomePage() {
+            return <div></div>;
+        } 
+        const root = ReactDOM.createRoot(domNode);
+        root.render(<Header />);
    </script>
  </body>
 </html>