adding the contact page - Day 4

Author: blackd44

components/mouse/index.js

@@ -41,50 +41,47 @@ const Mouse = () => {
     }, [])
 
     useEffect(() => {
-        if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
-
-            cursor.current.style.borderWidth = `2px`
-            const a = document.querySelectorAll('a')
-            a.forEach(el => {
-                el.addEventListener("mouseenter", event => {
-                    cursor.current.style.width = cssVar('--cursor-hover-size')
-                    cursor.current.style.height = cssVar('--cursor-hover-size')
-                    cursor.current.style.color = cssVar('--color-active-2')
-                })
-                el.addEventListener("mouseleave", event => {
-                    cursor.current.style.width = cssVar('--cursor-size')
-                    cursor.current.style.height = cssVar('--cursor-size')
-                    cursor.current.style.color = 'inherit'
-                })
+        cursor.current.style.borderWidth = `2px`
+        const a = document.querySelectorAll('a')
+        a.forEach(el => {
+            el.addEventListener("mouseenter", event => {
+                cursor.current.style.width = cssVar('--cursor-hover-size')
+                cursor.current.style.height = cssVar('--cursor-hover-size')
+                cursor.current.style.color = cssVar('--color-active-2')
+            })
+            el.addEventListener("mouseleave", event => {
+                cursor.current.style.width = cssVar('--cursor-size')
+                cursor.current.style.height = cssVar('--cursor-size')
+                cursor.current.style.color = 'inherit'
             })
+        })
 
-            //back filter
-            const filters = document.querySelectorAll('[data-cursor-filter]')
-            filters.forEach(el => {
-                el.style.cursor = "none"
-                el.addEventListener("mouseenter", event => {
-                    cursor.current.style.backdropFilter = el.dataset.cursorFilter
-                    cursor.current.style.borderWidth = 0
-                })
-                el.addEventListener("mouseleave", event => {
-                    cursor.current.style.backdropFilter = ''
-                    cursor.current.style.borderWidth = `2px`
-                })
+        //back filter
+        const filters = document.querySelectorAll('[data-cursor-filter]')
+        filters.forEach(el => {
+            el.style.cursor = "none"
+            el.addEventListener("mouseenter", event => {
+                cursor.current.style.backdropFilter = el.dataset.cursorFilter
+                cursor.current.style.borderWidth = 0
+            })
+            el.addEventListener("mouseleave", event => {
+                cursor.current.style.backdropFilter = ''
+                cursor.current.style.borderWidth = `2px`
             })
+        })
 
-            //size
-            const sizes = document.querySelectorAll('[data-cursor-size]')
-            sizes.forEach(el => {
-                el.addEventListener("mouseenter", event => {
-                    cursor.current.style.width = el.dataset.cursorSize
-                    cursor.current.style.height = el.dataset.cursorSize
-                })
-                el.addEventListener("mouseleave", event => {
-                    cursor.current.style.width = cssVar('--cursor-size')
-                    cursor.current.style.height = cssVar('--cursor-size')
-                })
+        //size
+        const sizes = document.querySelectorAll('[data-cursor-size]')
+        sizes.forEach(el => {
+            el.addEventListener("mouseenter", event => {
+                cursor.current.style.width = el.dataset.cursorSize
+                cursor.current.style.height = el.dataset.cursorSize
+            })
+            el.addEventListener("mouseleave", event => {
+                cursor.current.style.width = cssVar('--cursor-size')
+                cursor.current.style.height = cssVar('--cursor-size')
             })
-        }
+        })
         return () => { }
 
     }, [path])

pages/contact/index.js

@@ -1,7 +1,30 @@
 import Head from "next/head";
+import { useMemo, useState } from "react";
 import Content from "../../components/content";
 
 const Contacts = () => {
+    const [message, setMessage] = useState({
+        fullName: '',
+        email: '',
+        body: '',
+    })
+
+    const changed = (e) => {
+        setMessage(prev => ({ ...prev, [e.target.name]: e.target.value }))
+    }
+
+    const addMessage = (e) => {
+        e.preventDefault()
+
+        console.log(message)
+
+        /*
+        const inputs = e.target.querySelectorAll('input, textarea')
+        inputs.forEach(el => {
+            el.value = ''
+        })
+        */
+    }
     return (
         <>
             <Head>
@@ -10,26 +33,26 @@ const Contacts = () => {
             <Content type="links">
                 <h3><span data-cursor-filter="invert(1)" data-cursor-size="50px">Message me </span></h3>
                 <div>
-                    <form>
+                    <form onSubmit={addMessage}>
                         <div>
                             <label>
                                 <span>Full Name</span>
-                                <input type='text' required />
+                                <input type='text' name="fullName" onChange={changed} defaultValue={message.fullName} required />
                             </label>
                         </div>
                         <div>
                             <label>
                                 <span>Email</span>
-                                <input type='email' required />
+                                <input type='email' name="email" onChange={changed} defaultValue={message.email} required />
                             </label>
                         </div>
                         <div>
                             <label>
                                 <span>Message</span>
-                                <textarea onChange={(e) => {
+                                <textarea name="body" onChange={(e) => {
                                     e.target.style.height = e.target.scrollHeight + "px"
-                                }
-                                } required />
+                                    changed(e)
+                                }} defaultValue={message.body} required />
                             </label>
                         </div>
                         <button data-cursor-filter="invert(1)" data-cursor-size="40px">Send Message</button>

styles/globals.scss

@@ -542,26 +542,32 @@ footer {
 }
 
 .cursor {
-  @include flexCenter;
-  position: fixed;
-  z-index: 10;
-  border-radius: 50%;
-  pointer-events: none;
-  border: 2px solid currentColor;
-  border-width: 0;
-  translate: -100px -100px;
-  top: 0;
-  left: 0;
-
-  >div {
-    position: absolute;
-    width: var(--cursor-size);
-    height: var(--cursor-size);
-    backdrop-filter: var(--cursor-filter);
-    border-radius: inherit;
-    border: inherit;
-    transition: var(--fast-transition-speed) ease;
-    //border: 2px solid var(--color-bright);
+  display: none;
+}
+
+@media (hover: hover) {
+  .cursor {
+    @include flexCenter;
+    position: fixed;
+    z-index: 10;
+    border-radius: 50%;
+    pointer-events: none;
+    border: 2px solid currentColor;
+    border-width: 0;
+    translate: -100px -100px;
+    top: 0;
+    left: 0;
+
+    >div {
+      position: absolute;
+      width: var(--cursor-size);
+      height: var(--cursor-size);
+      backdrop-filter: var(--cursor-filter);
+      border-radius: inherit;
+      border: inherit;
+      transition: var(--fast-transition-speed) ease;
+      //border: 2px solid var(--color-bright);
+    }
   }
 }