From 9778f1aa1e1e79cad9168575fb4418fe3ccca5bb Mon Sep 17 00:00:00 2001
From: NetMan <13informatyka14@gmail.com>
Date: Tue, 20 Feb 2024 22:06:13 +0100
Subject: [PATCH] Simple form fields, countries with regex & list

---
 package-lock.json    | 14 +++++++++++
 package.json         |  6 ++++-
 src/assets/style.css |  3 +++
 src/main.js          | 58 +++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/style.css

diff --git a/package-lock.json b/package-lock.json
index 85e90bf..b39ec25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
       "name": "odin-webpack-template",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "countries-list": "^3.0.6",
+        "normalize.css": "^8.0.1"
+      },
       "devDependencies": {
         "css-loader": "^6.10.0",
         "eslint": "^8.56.0",
@@ -1488,6 +1492,11 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
+    "node_modules/countries-list": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/countries-list/-/countries-list-3.0.6.tgz",
+      "integrity": "sha512-BCJODHTSRMIxS0W80NZw8bC7x6/WS8Tf4FdtFrEbW0FONBbqTAzOrKNG06UEMgLGxOZpOJddiVEdCztKLpmPxA=="
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -4326,6 +4335,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
diff --git a/package.json b/package.json
index 12c61b0..6956194 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --progress --config webpack.prod.js",
-    "dev": "webpack-dev-server --progress --config webpack.dev.js",
+    "dev": "webpack-dev-server --progress --config webpack.dev.js --open",
     "lint": "eslint --fix --ext .js,.jsx,.vue src"
   },
   "keywords": [],
@@ -25,5 +25,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.10.0"
+  },
+  "dependencies": {
+    "countries-list": "^3.0.6",
+    "normalize.css": "^8.0.1"
   }
 }
diff --git a/src/assets/style.css b/src/assets/style.css
new file mode 100644
index 0000000..74bbbc0
--- /dev/null
+++ b/src/assets/style.css
@@ -0,0 +1,3 @@
+input {
+  display: block;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 355f4df..0d159f4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,59 @@
+import { countries } from "countries-list";
+import "./assets/style.css";
+import "normalize.css";
+
 const app = document.querySelector("#app");
 
-app.append("Template: Hello, World!");
+const form = document.createElement("form");
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+});
+
+const emailInput = document.createElement("input");
+emailInput.type = "email";
+
+const countryInput = document.createElement("input");
+countryInput.setAttribute("list", "countries-list");
+
+const countriesList = document.createElement("datalist");
+countriesList.id = "countries-list";
+
+let pattern = "";
+
+Object.values(countries).forEach((country) => {
+  const optionInList = document.createElement("option");
+  optionInList.textContent = country.name;
+  countriesList.appendChild(optionInList);
+  [...country.name].forEach((letter) => {
+    pattern += `[${letter.toUpperCase() + letter.toLowerCase()}]`;
+  });
+  pattern += "|";
+});
+
+pattern = pattern.substring(0, pattern.length - 1); // remove "|" at the end to avoid empty match
+
+countryInput.pattern = pattern;
+
+const zipInput = document.createElement("input");
+
+const passwordInput = document.createElement("input");
+
+const passwordConfirmInput = document.createElement("input");
+
+const submitBtn = document.createElement("button");
+submitBtn.type = "submit";
+submitBtn.textContent = "Submit";
+
+document.addEventListener("DOMContentLoaded", () => {});
+
+form.append(
+  emailInput,
+  countryInput,
+  countriesList,
+  zipInput,
+  passwordInput,
+  passwordConfirmInput,
+  submitBtn,
+);
+
+app.appendChild(form);