From fe367f4fdad2aa332768f7ec568f5eb358398773 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 10 Dec 2021 23:31:26 +0100
Subject: [PATCH] Add DOM and JavaScript resources

---
 .../100-syntax-and-basic-constructs.md               | 10 +++++++++-
 .../103-javascript/101-learn-dom-manipulation.md     | 12 +++++++++++-
 .../100-frontend/content/103-javascript/readme.md    |  1 +
 public/project/frontend.json                         |  2 +-
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md b/content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md
index 4f1bd63aa..f8708aa41 100644
--- a/content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md
+++ b/content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md
@@ -1 +1,9 @@
-# Syntax and basic constructs
\ No newline at end of file
+# JavaScript
+
+JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md b/content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md
index 78cca86a2..563aa6e44 100644
--- a/content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md
+++ b/content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md
@@ -1 +1,11 @@
-# Learn dom manipulation
\ No newline at end of file
+# DOM Manipulation
+
+The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/'>What is the DOM?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/js_htmldom.asp'>JavaScript HTML DOM</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.javascripttutorial.net/javascript-dom/'>JavaScript DOM</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7Tok22qxPzQ'>What is DOM, Shadow DOM and Virtual DOM?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=0ik6X4DJKCc'>JavaScript DOM Crash Course</BadgeLink>
+
diff --git a/content/roadmaps/100-frontend/content/103-javascript/readme.md b/content/roadmaps/100-frontend/content/103-javascript/readme.md
index c414d4ebc..f8708aa41 100644
--- a/content/roadmaps/100-frontend/content/103-javascript/readme.md
+++ b/content/roadmaps/100-frontend/content/103-javascript/readme.md
@@ -2,6 +2,7 @@
 
 JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
 
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
diff --git a/public/project/frontend.json b/public/project/frontend.json
index 19d96b99c..36c0c76e3 100644
--- a/public/project/frontend.json
+++ b/public/project/frontend.json
@@ -6138,7 +6138,7 @@
           "x": "160",
           "y": "1108",
           "properties": {
-            "controlName": "package-managers"
+            "controlName": "100-package-managers"
           },
           "children": {
             "controls": {