Completed JSL01

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README1.md

@@ -0,0 +1,17 @@
+# JSL01: Syntax-Engine Interaction
+# Introduction
+The task was to build a virtual pet adoption website, but use a JavaScript function to take a string as input and validate if it follows a specific syntax.
+
+# Elements Included
+Function declaration, local variables, validation logic, result element, and HTML output.
+
+# Reflections
+# Areas of Mastery
+**Code Readability and Organization:** I believe I was able to present well-structured code with clear variable names (petInput, regex, isValid, resultElement) and the comments enhanced readability.
+**DOM Manipulation:** Using document.getElementById() to access and manipulate HTML elements shows proficiency in DOM (Document Object Model) manipulation, which is essential for interactive web development.
+
+# Challenges Faced
+Using regular expressions (regex) to define a pattern for syntax validation was something I found particularly challenging, even with the cheatsheet, it took awhile for me to grasp.
+
+# Overall Learning Experience
+This project was a great introduction into learning how to interact with the Document Object Model (DOM) in JavaScript. As well as providing practical exposure to accessing and manipulating HTML elements dynamically using JavaScript.

index.css

@@ -37,11 +37,21 @@ button:hover {
 }
 
 .valid {
-    color: #008000;
+    background-color: #008000;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-left: 5px;
+    display: inline-block;
 }
 
 .invalid {
-    color: #ff4500;
+    background-color: #ff4500;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-left: 5px;
+    display: inline-block;
 }
 
 .emoji {

script.js

@@ -1,12 +1,13 @@
 function validateSyntax() {
-    let input = document.getElementById('petInput').value;
+    let petInput = document.getElementById('petInput').value.trim();
+    let regex = /^pet_\d*[a-zA-Z]+$/;
+    let isValid = regex.test(petInput);
     // Validation logic goes here
-    let result = ''; // Placeholder for validation result
+    let resultElement = document.getElementById("result"); // Placeholder for validation result
 
-    // TODO: Write your validation logic here
-        // Check if input starts with 'pet_' and followed by alphanumeric characters
-
-            document.getElementById('result').innerText = result;
+    if (isValid) {
+        resultElement.innerHTML = "Valid Syntax. <span class='valid'></span>";
+    } else {
+        resultElement.innerHTML = "Invalid Syntax. <span class='invalid'></span>";
+    }
 }
-
-