From 66beabaa145db04eef0fbf66f983088b761f4602 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Sun, 2 Jun 2024 22:09:44 +0530 Subject: [PATCH 1/7] Create Readme.md --- .../Advanced/Markdown-Previewer/Readme.md | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md diff --git a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md new file mode 100644 index 00000000..4e24e660 --- /dev/null +++ b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md @@ -0,0 +1,80 @@ +

đŸ’Ĩ Markdown Previewer đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) + + + + + + + + + + + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+ +

Build a web application where users can write Markdown text in a textarea, and see the rendered HTML preview live as they type

+
+ + + + +## :zap: How to run it? 🕹ī¸ + + +

To run this project locally, follow these steps: + +- Fork this repository. +- Clone the forked repository. +- Open index.html in your web browser to start your culinary exploration. + +

+ + + + +## :zap: Screenshots 📸 + + +![FoodRecipe](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/main/Vanilla-JS-Projects/Basic/Food-Recipe-Finder/screenshot.webp) + + + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Amruta Jayanti đŸ‘Ļ

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

From adc7338771547defd2b58078f57ce57f027eca9f Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Sun, 2 Jun 2024 22:12:55 +0530 Subject: [PATCH 2/7] Add files via upload --- .../Markdown-Previewer/Screenshot.webp | Bin 0 -> 6836 bytes .../Advanced/Markdown-Previewer/index.html | 21 ++++++++++++ .../Advanced/Markdown-Previewer/script.js | 30 +++++++++++++++++ .../Advanced/Markdown-Previewer/styles.css | 31 ++++++++++++++++++ 4 files changed, 82 insertions(+) create mode 100644 Vanilla-JS-Projects/Advanced/Markdown-Previewer/Screenshot.webp create mode 100644 Vanilla-JS-Projects/Advanced/Markdown-Previewer/index.html create mode 100644 Vanilla-JS-Projects/Advanced/Markdown-Previewer/script.js create mode 100644 Vanilla-JS-Projects/Advanced/Markdown-Previewer/styles.css diff --git a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Screenshot.webp b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Screenshot.webp new file mode 100644 index 0000000000000000000000000000000000000000..4304c7ef1043c7cb4ecb5a91f6501f09590a273d GIT binary patch literal 6836 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 kl}ttHL%_`I)alA + + + + + + Markdown Previewer + + + +
+ +
+
+ + + + + + + diff --git a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/script.js b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/script.js new file mode 100644 index 00000000..0e5cda65 --- /dev/null +++ b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/script.js @@ -0,0 +1,30 @@ +document.addEventListener('DOMContentLoaded', function() { + const markdownInput = document.getElementById('markdown-input'); + const preview = document.getElementById('preview'); + + + function renderMarkdown(markdown) { +const lines = markdown.split('\n'); +let html = ''; +lines.forEach(line => { + const match = line.match(/^#+\s*(.*)$/); + if (match) { + const level = match[0].split('#').length - 1; + const text = match[1].trim(); + + html += `${text}`; + } +}); + +return html; +} + + + + +function updatePreview() +{ + preview.innerHTML = renderMarkdown(markdownInput.value); +} + markdownInput.addEventListener('input', updatePreview); + }); \ No newline at end of file diff --git a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/styles.css b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/styles.css new file mode 100644 index 00000000..b22b865b --- /dev/null +++ b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/styles.css @@ -0,0 +1,31 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +.container { + display: flex; + justify-content: space-around; + align-items: flex-start; + margin-top: 50px; +} + +textarea { + width: 45%; + height: 400px; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 5px; +} + +#preview { + width: 45%; + height: 400px; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 5px; + overflow-y: auto; +} \ No newline at end of file From f2da5b1aaed9bacb8c0674d39296094232a96507 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Sun, 2 Jun 2024 22:14:30 +0530 Subject: [PATCH 3/7] Update Readme.md --- Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md index 4e24e660..dca33b07 100644 --- a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md +++ b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md @@ -55,7 +55,7 @@ ## :zap: Screenshots 📸 -![FoodRecipe](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/main/Vanilla-JS-Projects/Basic/Food-Recipe-Finder/screenshot.webp) +![MarkdownPreviewer](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/MarkDown/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Screenshot.webp) From a360cf05fa70c34f4886b16d36c09f5d24cc3d70 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Mon, 3 Jun 2024 12:21:32 +0530 Subject: [PATCH 4/7] Update index.html --- Vanilla-JS-Projects/Advanced/Markdown-Previewer/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/index.html b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/index.html index 9ee813a1..1812b572 100644 --- a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/index.html +++ b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/index.html @@ -5,6 +5,8 @@ Markdown Previewer + + From 856e45ecab053e951f154e468d7de32353774057 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Mon, 3 Jun 2024 12:21:57 +0530 Subject: [PATCH 5/7] Update script.js --- .../Advanced/Markdown-Previewer/script.js | 35 +++++-------------- 1 file changed, 9 insertions(+), 26 deletions(-) diff --git a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/script.js b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/script.js index 0e5cda65..a8f388d2 100644 --- a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/script.js +++ b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/script.js @@ -1,30 +1,13 @@ + document.addEventListener('DOMContentLoaded', function() { - const markdownInput = document.getElementById('markdown-input'); - const preview = document.getElementById('preview'); + const markdownInput = document.getElementById('markdown-input'); + const preview = document.getElementById('preview'); - - function renderMarkdown(markdown) { -const lines = markdown.split('\n'); -let html = ''; -lines.forEach(line => { - const match = line.match(/^#+\s*(.*)$/); - if (match) { - const level = match[0].split('#').length - 1; - const text = match[1].trim(); - - html += `${text}`; + function updatePreview() { + // Sanitize and render markdown + const sanitizedHtml = DOMPurify.sanitize(marked.parse(markdownInput.value)); + preview.innerHTML = sanitizedHtml; } -}); - -return html; -} - - - -function updatePreview() -{ - preview.innerHTML = renderMarkdown(markdownInput.value); -} - markdownInput.addEventListener('input', updatePreview); - }); \ No newline at end of file + markdownInput.addEventListener('input', updatePreview); +}); From c658e73792d5211776e0b432ff9d8bce1904ccb9 Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Mon, 3 Jun 2024 12:22:56 +0530 Subject: [PATCH 6/7] Rename Screenshot.webp to screenshot.webp --- .../{Screenshot.webp => screenshot.webp} | Bin 1 file changed, 0 insertions(+), 0 deletions(-) rename Vanilla-JS-Projects/Advanced/Markdown-Previewer/{Screenshot.webp => screenshot.webp} (100%) diff --git a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Screenshot.webp b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/screenshot.webp similarity index 100% rename from Vanilla-JS-Projects/Advanced/Markdown-Previewer/Screenshot.webp rename to Vanilla-JS-Projects/Advanced/Markdown-Previewer/screenshot.webp From d79180ef2981b927ec2faeced0db7e3a9736791f Mon Sep 17 00:00:00 2001 From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com> Date: Mon, 3 Jun 2024 19:29:43 +0530 Subject: [PATCH 7/7] Update Readme.md --- Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md index dca33b07..596c649c 100644 --- a/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md +++ b/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Readme.md @@ -55,8 +55,7 @@ ## :zap: Screenshots 📸 -![MarkdownPreviewer](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/MarkDown/Vanilla-JS-Projects/Advanced/Markdown-Previewer/Screenshot.webp) - +![MarkdownPreviewer](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/MarkDown/Vanilla-JS-Projects/Advanced/Markdown-Previewer/screenshot.webp)