diff --git a/HTML Syntax Generator/index.html b/HTML Syntax Generator/index.html new file mode 100644 index 00000000..46b93cdb --- /dev/null +++ b/HTML Syntax Generator/index.html @@ -0,0 +1,33 @@ + + + + + + HTML Syntax Generator + + + +
+

HTML Syntax Generator

+
+

Select an HTML Tag

+ +
+
+

Syntax

+ 
+        
+
+
+
+

Example

+
+ +
+
+
+ + + diff --git a/HTML Syntax Generator/manifest.json b/HTML Syntax Generator/manifest.json new file mode 100644 index 00000000..79c91c14 --- /dev/null +++ b/HTML Syntax Generator/manifest.json @@ -0,0 +1,11 @@ +{ + "manifest_version": 3, + "name": "HTML Syntax Generator", + "version": "1.0", + "description": "Generates basic HTML syntax for selected tags", + "action": { + "default_popup": "index.html" + }, + "permissions": [] + } + \ No newline at end of file diff --git a/HTML Syntax Generator/script.js b/HTML Syntax Generator/script.js new file mode 100644 index 00000000..e1fed096 --- /dev/null +++ b/HTML Syntax Generator/script.js @@ -0,0 +1,26 @@ +document.addEventListener('DOMContentLoaded', () => { + fetch('tags.json') + .then(response => response.json()) + .then(tags => { + const dropdown = document.getElementById('htmlTagDropdown'); + const syntaxDisplay = document.getElementById('syntaxDisplay'); + const exampleDisplay = document.getElementById('exampleDisplay'); + + tags.forEach(tag => { + const option = document.createElement('option'); + option.value = tag.name; + option.textContent = tag.name; + dropdown.appendChild(option); + }); + + dropdown.addEventListener('change', (event) => { + const selectedTag = event.target.value; + const tagInfo = tags.find(tag => tag.name === selectedTag); + if (tagInfo) { + syntaxDisplay.textContent = tagInfo.syntax; + exampleDisplay.innerHTML = tagInfo.example; + } + }); + }); + }); + \ No newline at end of file diff --git a/HTML Syntax Generator/tags.json b/HTML Syntax Generator/tags.json new file mode 100644 index 00000000..7571a3c6 --- /dev/null +++ b/HTML Syntax Generator/tags.json @@ -0,0 +1,138 @@ +[ + { + "name": "a", + "syntax": "Link Text", + "example": "Visit Example" + }, + { + "name": "abbr", + "syntax": "Abbreviation", + "example": "HTML" + }, + { + "name": "address", + "syntax": "
Contact Information
", + "example": "
123 Main St, Anytown, USA
" + }, + { + "name": "article", + "syntax": "
Article Content
", + "example": "

Article Title

Article content goes here.

" + }, + { + "name": "aside", + "syntax": "", + "example": "" + }, + { + "name": "audio", + "syntax": "", + "example": "" + }, + { + "name": "b", + "syntax": "Bold Text", + "example": "This text is bold" + }, + { + "name": "blockquote", + "syntax": "
Quote Content
", + "example": "
This is a quote.
" + }, + { + "name": "button", + "syntax": "", + "example": "" + }, + { + "name": "canvas", + "syntax": "", + "example": "" + }, + { + "name": "caption", + "syntax": "
Caption Text
", + "example": "
Table Title
Header
Data
" + }, + { + "name": "cite", + "syntax": "Citation Text", + "example": "The Great Gatsby" + }, + { + "name": "code", + "syntax": "Code Snippet", + "example": "console.log('Hello, world!');" + }, + { + "name": "colgroup", + "syntax": "
", + "example": "
DataData
" + }, + { + "name": "datalist", + "syntax": "", + "example": "" + }, + { + "name": "dd", + "syntax": "
Description Text
", + "example": "
Term
Description
" + }, + { + "name": "details", + "syntax": "
Summary TextDetails Content
", + "example": "
More Info

Here are the details.

" + }, + { + "name": "dfn", + "syntax": "Definition Term", + "example": "

HTML is the standard markup language for creating web pages.

" + }, + { + "name": "div", + "syntax": "
Division Content
", + "example": "

This is a division.

" + }, + { + "name": "dl", + "syntax": "
Term
Description
", + "example": "
HTML
HyperText Markup Language
" + }, + { + "name": "dt", + "syntax": "
Term
", + "example": "
Term
Description
" + }, + { + "name": "em", + "syntax": "Emphasized Text", + "example": "This text is emphasized" + }, + { + "name": "embed", + "syntax": "", + "example": "" + }, + { + "name": "fieldset", + "syntax": "
Legend TextFieldset Content
", + "example": "
Personal Information
" + }, + { + "name": "figcaption", + "syntax": "
Caption Text
", + "example": "
\"Image\"
Image Caption
" + }, + { + "name": "figure", + "syntax": "
Figure Content
", + "example": "
\"Image\"
Image Caption
" + }, + { + "name": "footer", + "syntax": "", + "example": "" + } + +] \ No newline at end of file