index.html - memory - Play Memory

index.html (2415B)
      1 <html lang="en">
      2 <head>
      3     <meta charset="UTF-8">
      4     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <title>Frontend demo</title>
      7 
      8     <style>
      9         body {font-family: Arial, Helvetica, sans-serif;}
     10         form {border: 3px solid #f1f1f1; text-align:center;}
     11         h2 { text-align:center; }
     12 
     13         input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; }
     14         button { background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 70%; }
     15         button:hover { opacity: 0.8; }
     16         .container { padding: 16px; }
     17         #result { font-size:2rem; text-align:center; }
     18     </style>
     19 </head>
     20 <body>
     21 
     22     <h2>Frontend demo 👋</h2>
     23 
     24     <p>Start in deze directory een nieuwe host binnen hetzelfde domein als waarop je de backend hebt draaien, maar op een andere poort (bijvoorbeeld <tt>php -S localhost:8080</tt>. Als je de frontend op een ander domein draait, of gewoon als bestand op je file-system opent, krijg je <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors">CORS-errors</a>.</p>
     25 
     26     <p>Deze pagina checkt de verbinding met de backend. Als je hieronder de datum van vandaag te zien krijgt, is de verbinding ok. Er wordt namelijk een call gedaan naar <tt>localhost:8000/frontend</tt>, die de datum van vandaag als json teruggeeft.</p>
     27 
     28     <p>Je kunt hetzelfde ook bereiken door op de knop hieronder te klikken. Check eventueel de console als je denkt dat er dingen niet goed gaan.</p>
     29         
     30     <form>
     31         <button id="btn" value="">Check de connectie</button>
     32     </form>
     33 
     34     <p id="result"></p>
     35     
     36 </body>
     37 
     38 <script>
     39 
     40     const check = () => {
     41         fetch('http://localhost:8000/frontend')
     42         .then( resp => resp.json() )
     43         .then( json => {
     44             console.log(json)
     45             let datum = new Date(json['date']).toLocaleDateString('NL-nl', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'} )
     46             document.getElementById('result').innerHTML = json['message']
     47             document.getElementById('result').innerHTML += `<br/>De huidige datum is ${datum}`
     48         })
     49     }
     50 
     51     check()
     52     document.getElementById('btn').addEventListener('click', c => check() )
     53 </script>
     54 </html>
	memory Play Memory
	Log \| Files \| Refs