handleSubmitDaysAfterNow

Author: Farshad SepehrAra

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "miscfeat",
         "noopener",
         "noreferrer",
         "samplereact",

app/miscfeat/page.js

@@ -3,22 +3,28 @@
 import { useState } from 'react';
 
 export default function MiscFeat() {
-    const [days, setDays] = useState('');
+    const [days, setDays] = useState(0);
+    const [daysAfterNow, setDaysAfterNow] = useState('');
 
     function handleDaysChange(e) {
         setDays(e.target.value);
     }
 
-    async function handleSubmit(e) {
+    async function handleSubmitDaysAfterNow(e) {
         e.preventDefault();
+        const rsp = await fetch(`/api/miscfeat/daysAfterNow?days=${days}`);
+        const res = await rsp.json()
+        setDaysAfterNow(new Date(res.theTime).toString());
     }
 
     return (
         <main className="flex min-h-screen flex-col items-center justify-between p-24">
-            <form onSubmit={handleSubmit} className="grid grid-cols-[1fr_3fr] gap-4">
+            <form onSubmit={handleSubmitDaysAfterNow} className="grid grid-cols-[1fr_3fr] gap-4 place-items-center justify-items-stretch">
                 <label htmlFor='txtDays'>Days:</label>
                 <input id='txtDays' type="text" value={days} onChange={handleDaysChange} />
                 <button className="col-start-2 py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Days After Now</button>
+                <label htmlFor='txtDaysAfterNow'>Result:</label>
+                <input type="text" id='txtDaysAfterNow' value={daysAfterNow} readOnly />
             </form>
         </main>
     )