From d9522bae627bfc652a892b71ee00f49c588169e2 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 12 Mar 2024 16:46:25 +0200 Subject: [PATCH 1/8] Added a README.md file and worked on figuring out the functionality of validating the input. --- README1.md | 0 script.js | 13 ++++++++----- 2 files changed, 8 insertions(+), 5 deletions(-) create mode 100644 README1.md diff --git a/README1.md b/README1.md new file mode 100644 index 0000000..e69de29 diff --git a/script.js b/script.js index ce4cd50..19c08af 100644 --- a/script.js +++ b/script.js @@ -4,9 +4,12 @@ function validateSyntax() { let 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; + // Check if input starts with 'pet_' and followed by alphanumeric characters + if (input) { + input = (^ 'pet_[a-zA-Z0-9]$); + let result = "Valid Syntax " + } else { + let result = "Invalid Syntax" + } + document.getElementById('result').innerText = result; } - - From ce06d13965f573044f4c0c084d583ee6aeefa7f9 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 12 Mar 2024 21:25:31 +0200 Subject: [PATCH 2/8] Included the regex to match the requirements --- script.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 19c08af..6ec127e 100644 --- a/script.js +++ b/script.js @@ -5,11 +5,10 @@ function validateSyntax() { // TODO: Write your validation logic here // Check if input starts with 'pet_' and followed by alphanumeric characters - if (input) { - input = (^ 'pet_[a-zA-Z0-9]$); - let result = "Valid Syntax " + if (/^pet_\[a-zA-Z0-9]+$/.test(input)) { + result = "Valid Syntax" } else { - let result = "Invalid Syntax" + result = "Invalid Syntax" } document.getElementById('result').innerText = result; } From 58f0fa38cb84e8ec8366eecef1a8ad42d48665e5 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Tue, 12 Mar 2024 21:54:24 +0200 Subject: [PATCH 3/8] Corrected my code. --- script.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/script.js b/script.js index 6ec127e..def56a6 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,4 @@ -function validateSyntax() { +/* function validateSyntax() { let input = document.getElementById('petInput').value; // Validation logic goes here let result = ''; // Placeholder for validation result @@ -6,9 +6,23 @@ function validateSyntax() { // TODO: Write your validation logic here // Check if input starts with 'pet_' and followed by alphanumeric characters if (/^pet_\[a-zA-Z0-9]+$/.test(input)) { - result = "Valid Syntax" + resultElement.innerHTML = "Valid Syntax." + '●'; } else { - result = "Invalid Syntax" + resultElement.innerHTML = "Invalid Syntax" + '●'; } document.getElementById('result').innerText = result; } +*/ +function validateSyntax() { + let petInput = document.getElementById('petInput').value.trim(); + let regex = /^pet_\d*[a-zA-Z]+$/; + let isValid = regex.test(petInput); + // Validation logic goes here + let resultElement = document.getElementById("result"); // Placeholder for validation result + + if (isValid) { + resultElement.innerHTML = "Valid Syntax." + '●'; + } else { + resultElement.innerHTML = "Invalid Syntax." + '●'; + } +} From 46a05f999f2cf13192d7a0faf2b36383b2647173 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Wed, 13 Mar 2024 14:59:56 +0200 Subject: [PATCH 4/8] Managed to get the styling for the cricles correct --- index.css | 14 ++++++++++++-- script.js | 19 ++----------------- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/index.css b/index.css index 7028001..f32c4c8 100644 --- a/index.css +++ b/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 { diff --git a/script.js b/script.js index def56a6..258393a 100644 --- a/script.js +++ b/script.js @@ -1,18 +1,3 @@ -/* function validateSyntax() { - let input = document.getElementById('petInput').value; - // Validation logic goes here - let result = ''; // Placeholder for validation result - - // TODO: Write your validation logic here - // Check if input starts with 'pet_' and followed by alphanumeric characters - if (/^pet_\[a-zA-Z0-9]+$/.test(input)) { - resultElement.innerHTML = "Valid Syntax." + '●'; - } else { - resultElement.innerHTML = "Invalid Syntax" + '●'; - } - document.getElementById('result').innerText = result; -} -*/ function validateSyntax() { let petInput = document.getElementById('petInput').value.trim(); let regex = /^pet_\d*[a-zA-Z]+$/; @@ -21,8 +6,8 @@ function validateSyntax() { let resultElement = document.getElementById("result"); // Placeholder for validation result if (isValid) { - resultElement.innerHTML = "Valid Syntax." + '●'; + resultElement.innerHTML = "Valid Syntax. "; } else { - resultElement.innerHTML = "Invalid Syntax." + '●'; + resultElement.innerHTML = "Invalid Syntax. "; } } From b616db6d124ade6a9ee2ca10134643eb3ddeed30 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Fri, 15 Mar 2024 09:30:31 +0200 Subject: [PATCH 5/8] Started the intro for my README.md --- .vscode/settings.json | 3 +++ README1.md | 12 ++++++++++++ 2 files changed, 15 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README1.md b/README1.md index e69de29..4a4dcf3 100644 --- a/README1.md +++ b/README1.md @@ -0,0 +1,12 @@ +# 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 + +# Reflections +# Areas of Mastery + +# Challenges Faced + +# Overall Learning Experience \ No newline at end of file From f2bff16bb998629f0ab9af670a5dff5a3d1bdd0b Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Fri, 15 Mar 2024 09:46:18 +0200 Subject: [PATCH 6/8] Completed elements section of README.md --- README1.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README1.md b/README1.md index 4a4dcf3..eea933b 100644 --- a/README1.md +++ b/README1.md @@ -3,6 +3,7 @@ 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 From 2483d1a45d874829fab78879858cc27b5a47b7fd Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Fri, 15 Mar 2024 09:59:36 +0200 Subject: [PATCH 7/8] Completed updating README.md --- README1.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README1.md b/README1.md index eea933b..9c7f9c7 100644 --- a/README1.md +++ b/README1.md @@ -7,7 +7,11 @@ Function declaration, local variables, validation logic, result element, and HTM # 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 \ No newline at end of file +# 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. \ No newline at end of file From a315a993ca54cb6292546e9b0ff7acde85bbbdf6 Mon Sep 17 00:00:00 2001 From: Otlotleng Majuja Date: Fri, 15 Mar 2024 10:52:44 +0200 Subject: [PATCH 8/8] Deleted instruction README.md --- README.md | 33 --------------------------------- 1 file changed, 33 deletions(-) delete mode 100644 README.md diff --git a/README.md b/README.md deleted file mode 100644 index 5977a02..0000000 --- a/README.md +++ /dev/null @@ -1,33 +0,0 @@ -# [JSL01] Submission: Syntax-Engine Interaction Challenge - -You will: -1. Use the Starter Code Repo, -2. Code your solution, -3. Commit changes to your repo -3. Submit GitHub Repo Link to LMS [JSL01] Submission Project Tab - -Imagine you are building a virtual pet adoption website, and you need to create a JavaScript function that checks if the user has entered valid pet adoption details. Write a function that takes a string as input and validates if it follows a specific syntax, such as starting with "pet_" followed by a combination of letters and numbers. If the input follows the syntax, return "Valid Syntax," otherwise, return "Invalid Syntax." - -![alt text](jsl_01_final_result.gif) - -## Challenge Instructions -1. In the script.js file, complete the validateSyntax function to check if the input string starts with "pet_" and is followed by a combination of letters and numbers. -2. If the input follows the correct syntax, set result to "Valid Syntax." Otherwise, set it to "Invalid Syntax." -3. Test your function by entering different strings in the input box and clicking the validate button. - -## How to Test -- Run the index.html challenge in a browser. -- Enter different pet adoption details in the input box and click the validate button to see the results. -- Make sure your solution works for a variety of inputs. -- Open the console and debug your code until there are no errors. - -## Instructions for Running the Code -1. Save the HTML, CSS, and JavaScript files in a folder. -2. Open the folder in VSCode. -3. Right-click on index.html and open with a browser (use Live Server if available). -4. Modify the script.js file to correct the syntax errors and save the file. -5. Refresh your browser to view the changes. - -This challenge helps students practice basic string manipulation and validation in JavaScript, along with simple DOM manipulation to create an interactive and user-friendly interface. - -Check out the practice challenges on Scrimba here: https://scrimba.com/playlist/pqPae6ZH7 \ No newline at end of file