Simple form fields, countries with regex & list

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",

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"
   }
 }

src/assets/style.css

@@ -0,0 +1,3 @@
+input {
+  display: block;
+}

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);