From 40f082d9263cbf08e65431e1844f98e80204709a Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Thu, 16 Mar 2023 14:12:49 +0800
Subject: [PATCH] Update README

Include interactive code samples from Codepen.
---
 README.md    | 58 +++++++++++++++++++++++++++++++++++++---------------
 package.json |  2 +-
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index c22a653..325eaa1 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
-<header style="text-align: center; line-height: 1">
-  <h1 style="margin: 0">
+<header align="center" style="text-align: center !important; line-height: 1 !important; border: 0 !important;">
+  <h1 style="margin: 0 !important;">
     <img src="https://raw.githubusercontent.com/TheoryOfNekomata/formxtra/master/docs/assets/formxtra.svg" alt="formxtra"/>
   </h1>
-  <h2 style="margin: 0">
+  <h2 style="margin: 0 !important;">
     The companion for Web forms!
   </h2>
-  <p style="font-size: 125%">
+  <p style="font-size: 125% !important">
     Extract and set form values through the DOM&mdash;no frameworks required!
   </p>
   <p>
@@ -13,7 +13,7 @@
   </p>
 </header>
 
-## Installation
+## Installation and Sources
 
 The package can be found on:
 
@@ -21,6 +21,9 @@ The package can be found on:
 - [npm](https://npmjs.com/package/@theoryofnekomata/formxtra)
 - [GitHub Package Registry](https://github.com/TheoryOfNekomata/formxtra/packages/793279)
 
+The package sources can be found on the [main Modal Code repository](https://code.modal.sh/TheoryOfNekomata/formxtra)
+with an [active GitHub mirror](https://github.com/TheoryOfNekomata/formxtra).
+
 ## Usage
 
 1. Lay out your input elements (all valid input types supported including `<select>` and `<textarea>`) then bind them
@@ -37,12 +40,19 @@ The package can be found on:
 
 ### Example
 
+Interactive code samples can be found on Codepen:
+
+* [Vanilla JS usage](https://codepen.io/theoryofnekomata/pen/xxajmvJ)
+* [React integration](https://codepen.io/theoryofnekomata/pen/RwYyvZN)
+* [Vue integration](https://codepen.io/theoryofnekomata/pen/gOdzqzM)
+* [Solid integration](https://codepen.io/theoryofnekomata/pen/QWVrYem)
+
 For an example form:
 
 ```html
 <form id="loginForm" aria-label="Login Form">
   <button id="autofill" type="button">
-    Autofill login form (username: admin)
+    Autofill login form (username: admin, remember: true)
   </button>
   
   <hr />
@@ -81,9 +91,7 @@ Use the library as follows (code is in TypeScript, but can work with JavaScript
 ```typescript
 import { getFormValues, setFormValues } from '@theoryofnekomata/formxtra';
 
-// This is the only query we need. On libraries like React, we can easily get form elements when we
-// attach submit event listeners.
-const form: HTMLFormElement = document.getElementById('form');
+const form: HTMLFormElement = document.getElementById('loginForm');
 
 const processResponse = async (response: Response) => {
   const result = await response.json();
@@ -91,7 +99,7 @@ const processResponse = async (response: Response) => {
   alert(`Welcome ${result.user}!`);
 };
 
-// Best use case is with event handlers
+// Use formxtra in event handlers
 form.addEventListener('submit', async e => {
   const {
     currentTarget: thisForm,
@@ -115,7 +123,10 @@ form.addEventListener('submit', async e => {
 
   if (response.ok) {
     processResponse(response);
+    return;
   }
+  
+  alert('Invalid login!');
 });
 
 // You can use fomrxtra directly with elements as long as they are bound to a form.
@@ -126,15 +137,28 @@ autofillButton.addEventListener('click', e => {
 });
 ```
 
-There are utility functions exported alongside `getFormValues()` and `setFormValues()`. You may want to use namespace
-import with this library, i.e. `import * as formxtra from '@theoryofnekomata/formxtra'`.
+### API
+
+These are all the exported methods in the library:
+
+```typescript
+import {
+  getFormValues,
+  setFormValues,
+  getValue,
+  isElementValueIncludedInFormSubmit,
+  isFieldElement,
+} from '@theoryofnekomata/formxtra';
+```
 
-See the [documentation folder](./docs) for more details.
+One would usually need only the `getFormValues()` and `setFormValues()` functions, however if the utility functions are
+needed, the proper usages are documented via TSDoc comments.
 
-## Tests
+## Additional Information
 
-The library has been tested on the static DOM using JSDOM, and the real dynamic DOM using Cypress.
+The library has been tested on the static DOM using JSDOM, and the real dynamic DOM using Cypress. This is to guarantee
+compatibility across environments.
 
-## License
+See the [documentation folder](./docs) for more details on this library.
 
-[MIT](./LICENSE)
+The sources are under the [MIT license](./LICENSE).
diff --git a/package.json b/package.json
index 710afdb..2743680 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theoryofnekomata/formxtra",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "files": [
     "dist",
     "src"