add extra desc

mubaraqwahab · Oct 8, 2023 · fcba614 · fcba614
1 parent db59be1
commit fcba614
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 93 deletions.
diff --git a/11-ip-address-tracker-master/index.html b/11-ip-address-tracker-master/index.html
@@ -21,7 +21,7 @@
 		<div class="pt-7 pb-[8.5rem] bg-[url(images/pattern-bg.png)]">
 			<div class="container">
 				<h1 class="text-2xl text-white font-medium mb-7 tracking-wide leading-tight">IP Address Tracker</h1>
-				<form class="flex text-left mb-6">
+				<form class="flex text-left mb-6" novalidate>
 					<div class="relative flex-grow">
 						<!--
 						`[&:focus+label]` in the classes below is equivalent to the selector: `input:focus + label`
@@ -45,6 +45,7 @@ <h1 class="text-2xl text-white font-medium mb-7 tracking-wide leading-tight">IP
 						<svg xmlns="http://www.w3.org/2000/svg" width="11" height="14"><path fill="none" stroke="#FFF" stroke-width="3" d="M2 1l6 6-6 6" /></svg>
 					</button>
 				</form>
+				<output id="form-error"></output>
 			</div>
 		</div>
 
@@ -118,14 +119,27 @@ <h1 class="text-2xl text-white font-medium mb-7 tracking-wide leading-tight">IP
 			}
 
 			getIPInfoAndMap();
-			// getIPInfoAndMap("24.38.249.217");
 
 			const form = document.querySelector("form");
+			const formError = document.getElementById("form-error");
+			let formState = "idle";
 
 			form.addEventListener("submit", (e) => {
 				e.preventDefault();
-				const ipAddress = /** @type {string} */ (new FormData(form).get("query"));
-				getIPInfoAndMap(ipAddress);
+
+				if (formState === "idle") {
+					formState = "submitting";
+					console.log(formState);
+					const ipAddress = /** @type {string} */ (new FormData(form).get("query"));
+					getIPInfoAndMap(ipAddress)
+						.then(() => {
+							formState = "idle";
+						})
+						.catch((err) => {
+							console.error(err);
+							formError.textContent = "Failed to track IP address. Please try again.";
+						});
+				}
 			});
 		</script>
 	</body>

diff --git a/11-ip-address-tracker-master/main.css b/11-ip-address-tracker-master/main.css
@@ -5,7 +5,7 @@
 @layer base {
 	/* TODO */
 	:focus {
-		@apply outline-none ring-4 ring-gray-very-dark ring-opacity-90 z-50;
+		@apply outline-none ring-2 ring-gray-very-dark ring-opacity-90 z-50;
 	}
 }
 

diff --git a/11-ip-address-tracker-master/output.css b/11-ip-address-tracker-master/output.css
@@ -417,7 +417,7 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-color: hsl(0 0% 17% / var(--tw-ring-opacity));
   --tw-ring-opacity: 0.9;
@@ -622,34 +622,18 @@ video {
   left: 1.5rem;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
 .right-6 {
   right: 1.5rem;
 }
 
-.z-10 {
-  z-index: 10;
-}
-
-.z-30 {
-  z-index: 30;
-}
-
-.z-\[1000\] {
-  z-index: 1000;
+.top-1\/2 {
+  top: 50%;
 }
 
 .z-\[2000\] {
   z-index: 2000;
 }
 
-.z-\[200\] {
-  z-index: 200;
-}
-
 .mb-7 {
   margin-bottom: 1.75rem;
 }
@@ -662,30 +646,14 @@ video {
   margin-top: -8.5rem;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
-.-mb-20 {
-  margin-bottom: -5rem;
-}
-
-.-mb-\[calc\(100\%-8\.5rem\)\] {
-  margin-bottom: calc(calc(100% - 8.5rem) * -1);
-}
-
-.-mb-\[50rem\] {
-  margin-bottom: -50rem;
-}
-
-.-mb-\[calc\(310px-8\.5rem\)\] {
-  margin-bottom: calc(calc(310px - 8.5rem) * -1);
-}
-
 .-mb-\[calc\(var\(--dl-container-height\)-8\.5rem\)\] {
   margin-bottom: calc(calc(var(--dl-container-height) - 8.5rem) * -1);
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -698,26 +666,6 @@ video {
   display: none;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
-.h-\[calc\(1\.375\*1em\)\] {
-  height: calc(1.375 * 1em);
-}
-
-.h-16 {
-  height: 4rem;
-}
-
-.h-\[1\.375\*1em\] {
-  height: 1.375*1em;
-}
-
-.h-\[35vh\] {
-  height: 35vh;
-}
-
 .min-h-screen {
   min-height: 100vh;
 }
@@ -730,14 +678,6 @@ video {
   width: 100%;
 }
 
-.w-\[calc\(100\%-1\.5rem\*2\)\] {
-  width: calc(100% - 1.5rem * 2);
-}
-
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .flex-grow {
   flex-grow: 1;
 }
@@ -888,27 +828,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.\[\&\:focus\+label\]\:pointer-events-none:focus+label {
-  pointer-events: none;
-}
-
-.\[\&\:focus\+label\]\:text-\[\#f00\]:focus+label {
-  --tw-text-opacity: 1;
-  color: rgb(255 0 0 / var(--tw-text-opacity));
-}
-
-.\[\&\:focus\+label\]\:opacity-0:focus+label {
-  opacity: 0;
-}
-
-.\[\&\:-moz-placeholder-shown\+label\]\:opacity-0:-moz-placeholder-shown+label {
-  opacity: 0;
-}
-
-.\[\&\:placeholder-shown\+label\]\:opacity-0:placeholder-shown+label {
-  opacity: 0;
-}
-
 .\[\&\:not\(\:-moz-placeholder-shown\)\+label\]\:opacity-0:not(:-moz-placeholder-shown)+label {
   opacity: 0;
 }

diff --git a/index.html b/index.html
@@ -92,6 +92,10 @@ <h1>Frontend Mentor Challenges</h1>
 				<a href="https://www.frontendmentor.io/">Frontend Mentor</a> helps you improve your frontend development skills
 				by translating UI designs into working code.
 			</p>
+			<p>
+				I use various technologies in my solutions, including Tailwind CSS, TypeScript, XState and Rollup, and I try to
+				make them responsive, accessible and robust.
+			</p>
 			<ul>
 				<li>
 					<a id="01" href="01-article-preview-component-master/">Article Preview Component</a>