From 2a1d38fbe06d7ba63f7b97061379379fa7eed363 Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Tue, 3 Aug 2021 16:12:40 +0200 Subject: [PATCH 01/14] added jason --- .vscode/settings.json | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..7a73a41b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file From 61ddb429180333a4ed9557f33b95bd2b40677e07 Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Tue, 3 Aug 2021 16:15:48 +0200 Subject: [PATCH 02/14] created all files --- LICENSE => .vscode/LICENSE | 0 README.md => .vscode/README.md | 0 Vanilla JS.js | 0 index.html | 0 jQuery.js | 0 5 files changed, 0 insertions(+), 0 deletions(-) rename LICENSE => .vscode/LICENSE (100%) rename README.md => .vscode/README.md (100%) create mode 100644 Vanilla JS.js create mode 100644 index.html create mode 100644 jQuery.js diff --git a/LICENSE b/.vscode/LICENSE similarity index 100% rename from LICENSE rename to .vscode/LICENSE diff --git a/README.md b/.vscode/README.md similarity index 100% rename from README.md rename to .vscode/README.md diff --git a/Vanilla JS.js b/Vanilla JS.js new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b diff --git a/jQuery.js b/jQuery.js new file mode 100644 index 00000000..e69de29b From d3b02fb3383e0b4675cbc9d0b6f1aac90acdadeb Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Wed, 4 Aug 2021 10:02:25 +0200 Subject: [PATCH 03/14] structured a few things on CSS and HTML --- .vscode/settings.json | 1 + index.html | 69 +++++++++++++++++++++++++++++++++++++++++++ styles.css | 59 ++++++++++++++++++++++++++++++++++++ 3 files changed, 129 insertions(+) create mode 100644 styles.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 7a73a41b..6f3a2913 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,2 +1,3 @@ { + "liveServer.settings.port": 5501 } \ No newline at end of file diff --git a/index.html b/index.html index e69de29b..0b6fa149 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,69 @@ + + + + + + + + JQUERY AND JAVASCRIPT CHEAT SHEET + + + + +
+ +

jQuery and Javascript Cheat Sheet

+
by Marcel Durgante
+
+
+
+
    +
  • When the HTML document has been loaded and you can manipulate it with JavaScript
    • +
  • Clicked
    • +
  • Double clicked
    • +
  • Keyboard
    • +
  • When the user moves the mouse cursor
    • +
  • Text input, value
    • +
  • When an image is loaded
    • +
  • When an image fails to load
    • +
  • Submitted
    • +
  • Select: Option change
    • +
  • Mouse over
    • +
  • Checkbox: checked or unchecked
    • +
  • When a ul list item is clicked, show the item that was clicked
    • + +
+
    +
  • Create
    • +
  • Remove
    • +
  • Append
    • +
  • Prepend
    • +
  • Create and add an HTML after another element
    • +
  • Create and add an HTML before another element
    • +
  • Clone
    • +
  • Add a class
    • +
  • Remove a class
    • +
  • Toggle a class
    • +
  • Add a disabled attribute
    • +
  • Remove the disabled attribute
    • +
  • Set a data-src attribute
    • +
  • Remove the data-src attribute
    • +
  • Hide (display: none)
    • +
  • Show (display: block)
    • +
  • Fade in
    • +
  • Fade out
    • +
  • Iterate a collection of elements
    • +
  • Get the parent element
    • +
  • Get the collection of children
    • +
+ + +
+ +
+
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..585a56fc --- /dev/null +++ b/styles.css @@ -0,0 +1,59 @@ +@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + min-height: 100vh; + max-width: 100%; +} + +header { + display: grid; + grid-template-columns: 30% 70%; + grid-template-rows: 80% 20%; + background-color: rgb(114, 131, 146); + font-size: 1.5rem; + color: white; + padding: 1rem; + justify-self: center; + align-items: center; +} + +.logo { + margin-left: 1.5rem; + font-size: 3rem; + padding: none; + +} + +h1 { + margin-left: 9rem; +} + +.logo__info { + font-size: 1.3rem; + padding: none; + margin-left: 1.5rem; + margin-bottom: 1rem; +} + +.nav__list { + display: inline-block; + list-style: none; + text-decoration: none; +} + +.nav__list li { + display: inline-block; + padding: 1.8rem; + margin-right: 2rem; + +} \ No newline at end of file From 23750613055f9701ede9473e42fcba2ac558ce0b Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Wed, 4 Aug 2021 10:23:51 +0200 Subject: [PATCH 04/14] perfected HTML --- index.html | 101 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 57 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index 0b6fa149..119ab0da 100644 --- a/index.html +++ b/index.html @@ -15,52 +15,65 @@

jQuery and Javascript Cheat Sheet

by Marcel Durgante
-
-
-
    -
  • When the HTML document has been loaded and you can manipulate it with JavaScript
    • -
  • Clicked
    • -
  • Double clicked
    • -
  • Keyboard
    • -
  • When the user moves the mouse cursor
    • -
  • Text input, value
    • -
  • When an image is loaded
    • -
  • When an image fails to load
    • -
  • Submitted
    • -
  • Select: Option change
    • -
  • Mouse over
    • -
  • Checkbox: checked or unchecked
    • -
  • When a ul list item is clicked, show the item that was clicked
    • - +
    +
    +

    Functions

    +
      +
    • Create an HTML element
      • +
    • Remove an HTML element
      • +
    • Append an HTML element
      • +
    • Prepend an HTML element
      • +
    • Create and add HTML element after an element
      • +
    • Create and add HTML element before an element
      • +
    • Clone an HTML element
      • +
    • Add class to HTML item
      • +
    • Remove class to HTML item
      • +
    • Toggle class of HTML item
      • +
    • Add disabled attribute to HTML button
      • +
    • Remove disabled attribute of HTML button
      • +
    • Set data-src attribute to img element
      • +
    • Remove data-src attribute of img element
      • +
    • Hide HTML element on click (display: none)
      • +
    • Show HTML element on click (display: block)
      • +
    • Fade in HTML element with jQuery
      • +
    • Fade out HTML element with jQuery
      • +
    • Animate item after 2s from initial page load
    -
      -
    • Create
      • -
    • Remove
      • -
    • Append
      • -
    • Prepend
      • -
    • Create and add an HTML after another element
      • -
    • Create and add an HTML before another element
      • -
    • Clone
      • -
    • Add a class
      • -
    • Remove a class
      • -
    • Toggle a class
      • -
    • Add a disabled attribute
      • -
    • Remove the disabled attribute
      • -
    • Set a data-src attribute
      • -
    • Remove the data-src attribute
      • -
    • Hide (display: none)
      • -
    • Show (display: block)
      • -
    • Fade in
      • -
    • Fade out
      • -
    • Iterate a collection of elements
      • -
    • Get the parent element
      • -
    • Get the collection of children
      • +
    +
    +

    Selectors

    +
      +
    • Iterate collection of elements
      • +
    • Get parent element of certain element
      • +
    • Get collection of children of certain element
      • +
    • Get all elements that have a certain class
      • +
    • Get item by id
      • +
    • Get all elements that have a certain class and property
      • +
    • Get selected option of a select element
      • +
    • Change attribute of a first element
      • +
    • Show value of a first input on the page
      • +
    • Remove all items from a specific selector
    - - -
- -
+ +
+

Events

+
    +
  • HTML document has been loaded
    • +
  • HTML item clicked
    • +
  • HTML item double clicked
    • +
  • Checkbox checked or unchecked
    • +
  • Select element option changed
    • +
  • Text value on input is changed
    • +
  • Form submitted
    • +
  • Key is pressed on keyboard
    • +
  • Mouse positioned over element
    • +
  • Mouse cursor's being moved
    • +
  • Image loaded
    • +
  • Image fail to load
    • +
  • Show the clicked item of an UL list
    • +
+
+
From 0c6eaec75d83fac861966fb763010d09d70074f9 Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Thu, 5 Aug 2021 01:43:06 +0200 Subject: [PATCH 05/14] started Modal + changes to HTML and CSS --- Vanilla JS.js | 0 index.html | 149 +++++++++++++++++++++++--------------------- script.js | 29 +++++++++ styles.css | 168 +++++++++++++++++++++++++++++++++++++++----------- 4 files changed, 240 insertions(+), 106 deletions(-) delete mode 100644 Vanilla JS.js create mode 100644 script.js diff --git a/Vanilla JS.js b/Vanilla JS.js deleted file mode 100644 index e69de29b..00000000 diff --git a/index.html b/index.html index 119ab0da..30801ca6 100644 --- a/index.html +++ b/index.html @@ -1,82 +1,91 @@ - - + JQUERY AND JAVASCRIPT CHEAT SHEET - - -
- -

jQuery and Javascript Cheat Sheet

-
by Marcel Durgante
-
-
-
-

Functions

-
    -
  • Create an HTML element
    • -
  • Remove an HTML element
    • -
  • Append an HTML element
    • -
  • Prepend an HTML element
    • -
  • Create and add HTML element after an element
    • -
  • Create and add HTML element before an element
    • -
  • Clone an HTML element
    • -
  • Add class to HTML item
    • -
  • Remove class to HTML item
    • -
  • Toggle class of HTML item
    • -
  • Add disabled attribute to HTML button
    • -
  • Remove disabled attribute of HTML button
    • -
  • Set data-src attribute to img element
    • -
  • Remove data-src attribute of img element
    • -
  • Hide HTML element on click (display: none)
    • -
  • Show HTML element on click (display: block)
    • -
  • Fade in HTML element with jQuery
    • -
  • Fade out HTML element with jQuery
    • -
  • Animate item after 2s from initial page load
    • -
+ + + + +
+
+ +

jQuery and Javascript Cheat Sheet

+
by Marcel Durgante
-
-

Selectors

-
    -
  • Iterate collection of elements
    • -
  • Get parent element of certain element
    • -
  • Get collection of children of certain element
    • -
  • Get all elements that have a certain class
    • -
  • Get item by id
    • -
  • Get all elements that have a certain class and property
    • -
  • Get selected option of a select element
    • -
  • Change attribute of a first element
    • -
  • Show value of a first input on the page
    • -
  • Remove all items from a specific selector
    • -
+
+
+
+

Functions

+
    +
  • Create an HTML element
    • +
  • Remove an HTML element
    • +
  • Append an HTML element
    • +
  • Prepend an HTML element
    • +
  • Create and add HTML element after an element
    • +
  • Create and add HTML element before an element
    • +
  • Clone an HTML element
    • +
  • Add class to HTML item
    • +
  • Remove class to HTML item
    • +
  • Toggle class of HTML item
    • +
  • Add disabled attribute to HTML button
    • +
  • Remove disabled attribute of HTML button
    • +
  • Set data-src attribute to img element
    • +
  • Remove data-src attribute of img element
    • +
  • Hide HTML element on click (display: none)
    • +
  • Show HTML element on click (display: block)
    • +
  • Fade in HTML element with jQuery
    • +
  • Fade out HTML element with jQuery
    • +
  • Animate item after 2s from initial page load
    • +
-
-

Events

-
    -
  • HTML document has been loaded
    • -
  • HTML item clicked
    • -
  • HTML item double clicked
    • -
  • Checkbox checked or unchecked
    • -
  • Select element option changed
    • -
  • Text value on input is changed
    • -
  • Form submitted
    • -
  • Key is pressed on keyboard
    • -
  • Mouse positioned over element
    • -
  • Mouse cursor's being moved
    • -
  • Image loaded
    • -
  • Image fail to load
    • -
  • Show the clicked item of an UL list
    • -
+
+

Selectors

+
    +
  • Iterate collection of elements
    • +
  • Get parent element of certain element
    • +
  • Get collection of children of certain element
    • +
  • Get all elements that have a certain class
    • +
  • Get item by id
    • +
  • Get all elements that have a certain class and property
    • +
  • Get selected option of a select element
    • +
  • Change attribute of a first element
    • +
  • Show value of a first input on the page
    • +
  • Remove all items from a specific selector
    • +
-
-
- - +
+

Events

+
    +
  • HTML document has been loaded
    • +
  • HTML item clicked
    • +
  • HTML item double clicked
    • +
  • Checkbox checked or unchecked
    • +
  • Select element option changed
    • +
  • Text value on input is changed
    • +
  • Form submitted
    • +
  • Key is pressed on keyboard
    • +
  • Mouse positioned over element
    • +
  • Mouse cursor's being moved
    • +
  • Image loaded
    • +
  • Image fail to load
    • +
  • Show the clicked item of an UL list
    • +
+
+
+
+

Copyright © 2021 MOceanHi Ltd. All rights reserved.

+
+ - - \ No newline at end of file +
+
+ X +

Modal main text

+
+
+ diff --git a/script.js b/script.js new file mode 100644 index 00000000..1640342b --- /dev/null +++ b/script.js @@ -0,0 +1,29 @@ +let targetItems = document.querySelectorAll(".ul-action--list"); +let clickedItem; +let modalClose = document.querySelector("#close"); +let modalContainer = document.querySelector("#modal"); +let tagBody = document.querySelector(".body") + + + +/* FUNCTION OPEN MODAL WHEN LI IS CLICKED IDENTIFYING WHICH LI ID WAS CLICKED ALSO */ + +targetItems.forEach(element => { + element.addEventListener('click', (e)=> { + if (e.target !== e.currentTarget) { + modalContainer.style.display = "block"; + clickedItem = e.target.id; + + } else if (e.target == e.currentTarget) { + return null; + } + e.stopPropagation; + }); +}); + +/* FUNCTION CLOSE MODAL */ + +modalClose.addEventListener("click", (e) => { + modalContainer.style.display = "none"; + +}); diff --git a/styles.css b/styles.css index 585a56fc..a97eea55 100644 --- a/styles.css +++ b/styles.css @@ -1,59 +1,155 @@ @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; } -html { - font-size: 62.5%; +:root { + --black: black; + --white: white; + --color1: rgb(120, 212, 212); + --color2: rgb(233, 124, 233); + --color3: rgb(109, 192, 127); } body { - min-height: 100vh; - max-width: 100%; + min-height: 100vh; + max-width: 100%; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto auto auto; + background-color: var(--black); } -header { - display: grid; - grid-template-columns: 30% 70%; - grid-template-rows: 80% 20%; - background-color: rgb(114, 131, 146); - font-size: 1.5rem; - color: white; - padding: 1rem; - justify-self: center; - align-items: center; +main { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 2; + grid-row-end: 3; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); } -.logo { - margin-left: 1.5rem; - font-size: 3rem; - padding: none; +@media (min-width: 900px) { + main { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1200px) { + main { + grid-template-columns: repeat(3, 1fr); + } +} +ul { + margin-bottom: 3rem; + width: fit-content; +} + +li { + font-size: 1.2rem; + list-style: none; + margin-left: 4rem; + margin-bottom: 1rem; + cursor: pointer; } h1 { - margin-left: 9rem; + font-size: 3rem; + margin-left: 5rem; +} + +h2 { + text-align: center; + margin: 3rem 3rem; +} + +footer { + grid-area: 3 / 1 / span 1 / span 3; + color: var(--white); + font-size: 1rem; + letter-spacing: 0.5rem; + text-align: center; + align-self: center; + padding: 1rem; +} + +.header-container { + grid-area: 1 / 1 / span 1 / span 3; + background-color: var(--black); +} + +.header-container--inner { + display: grid; + align-items: center; + grid-template-columns: 30% 70%; + color: var(--white); + padding: 1rem; } -.logo__info { - font-size: 1.3rem; - padding: none; - margin-left: 1.5rem; - margin-bottom: 1rem; +.logo { + font-size: 3rem; + margin-left: 1.3rem; +} + +.logo-info { + font-size: 1rem; + margin-left: 1.3rem; +} + +.functions-container { + background-color: var(--color1); +} + +.selectors-container { + background-color: var(--color2); } -.nav__list { - display: inline-block; - list-style: none; - text-decoration: none; +.events-container { + background-color: var(--color3); } -.nav__list li { - display: inline-block; - padding: 1.8rem; - margin-right: 2rem; +/* MODAL */ -} \ No newline at end of file +/* The Modal (background) */ +.modal-main--container { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: auto; /* Sit on top */ + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgba(0, 0, 0, 0.8); +} + +/* Modal Content/Box */ +.modal-content { + background-color: #fefefe; + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 70rem; /* Could be more or less, depending on screen size */ + height: 40rem; +} + +/* The Close Button */ +.modal-close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.modal-close:hover, +.modal-close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} From 3ad5bc2b9305c21e8e052cd610f14bd470bd5683 Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Thu, 5 Aug 2021 01:46:06 +0200 Subject: [PATCH 06/14] Delete jQuery.js --- jQuery.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 jQuery.js diff --git a/jQuery.js b/jQuery.js deleted file mode 100644 index e69de29b..00000000 From 17c513e0e01833c48cd5c9d748be98f477c7016d Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Thu, 5 Aug 2021 09:18:27 +0200 Subject: [PATCH 07/14] last changes on HTML, CSS and the modal --- index.html | 6 +++--- styles.css | 49 +++++++++++++++++++++++++++++++++---------------- 2 files changed, 36 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 30801ca6..633c1a14 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,8 @@ JQUERY AND JAVASCRIPT CHEAT SHEET + - @@ -84,8 +84,8 @@

Copyright © 2021 MOceanHi Ltd. All rights reserved.

- X -

Modal main text

+ +

TEXT TEST HERE

diff --git a/styles.css b/styles.css index a97eea55..ed2d78e6 100644 --- a/styles.css +++ b/styles.css @@ -8,8 +8,11 @@ } :root { - --black: black; - --white: white; + --black: rgb(0, 0, 0); + --white: rgb(255, 255, 255); + --red: rgb(218, 49, 49); + --grey: rgb(150, 150, 150); + --light-black: rgb(27, 27, 27); --color1: rgb(120, 212, 212); --color2: rgb(233, 124, 233); --color3: rgb(109, 192, 127); @@ -58,7 +61,17 @@ li { cursor: pointer; } +li:hover { + font-size: 1.25rem; + font-weight: bold; + color: var(--light-black); +} + h1 { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 3; font-size: 3rem; margin-left: 5rem; } @@ -70,7 +83,7 @@ h2 { footer { grid-area: 3 / 1 / span 1 / span 3; - color: var(--white); + color: var(--grey); font-size: 1rem; letter-spacing: 0.5rem; text-align: center; @@ -78,6 +91,10 @@ footer { padding: 1rem; } +i { + color: var(--black); +} + .header-container { grid-area: 1 / 1 / span 1 / span 3; background-color: var(--black); @@ -87,7 +104,7 @@ footer { display: grid; align-items: center; grid-template-columns: 30% 70%; - color: var(--white); + color: var(--grey); padding: 1rem; } @@ -115,7 +132,7 @@ footer { /* MODAL */ -/* The Modal (background) */ +/* MODAL (BACKGROUND */ .modal-main--container { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ @@ -125,23 +142,23 @@ footer { transform: translate(-50%, -50%); width: 100%; /* Full width */ height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgba(0, 0, 0, 0.8); + overflow: hidden; /* Enable scroll if needed */ + background-color: rgba(0, 0, 0, 0.6); } -/* Modal Content/Box */ +/* MODAL CONTENT/BOX */ .modal-content { - background-color: #fefefe; - margin: 15% auto; /* 15% from the top and centered */ - padding: 20px; - border: 1px solid #888; + background-color: var(--white); + margin: 12% auto; /* 15% from the top and centered */ + padding: 1rem; + border: 1px solid var(--black); width: 70rem; /* Could be more or less, depending on screen size */ height: 40rem; } -/* The Close Button */ +/* CLOSE BUTTON */ .modal-close { - color: #aaa; + color: var(--grey); float: right; font-size: 28px; font-weight: bold; @@ -149,7 +166,7 @@ footer { .modal-close:hover, .modal-close:focus { - color: black; - text-decoration: none; cursor: pointer; + color: var(--red); + } From 93312b5521f51f3a123403f628b75c72e2bd2cb1 Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Fri, 6 Aug 2021 17:24:51 +0200 Subject: [PATCH 08/14] trying to style select js or jq modal buttons --- index.html | 146 ++++++++++++++++++++++-------------------- script.js | 4 +- styles.css | 182 ++++++++++++++++++++++++++++++++++++----------------- 3 files changed, 204 insertions(+), 128 deletions(-) diff --git a/index.html b/index.html index 633c1a14..a2d56087 100644 --- a/index.html +++ b/index.html @@ -1,91 +1,101 @@ - + + + JQUERY AND JAVASCRIPT CHEAT SHEET - - - - -
+ + + +
- -

jQuery and Javascript Cheat Sheet

-
by Marcel Durgante
+ +

jQuery and Javascript Cheat Sheet

+
by Marcel Durgante
-
-
+
+
-

Functions

-
    -
  • Create an HTML element
    • -
  • Remove an HTML element
    • -
  • Append an HTML element
    • -
  • Prepend an HTML element
    • -
  • Create and add HTML element after an element
    • -
  • Create and add HTML element before an element
    • -
  • Clone an HTML element
    • -
  • Add class to HTML item
    • -
  • Remove class to HTML item
    • -
  • Toggle class of HTML item
    • -
  • Add disabled attribute to HTML button
    • -
  • Remove disabled attribute of HTML button
    • -
  • Set data-src attribute to img element
    • -
  • Remove data-src attribute of img element
    • -
  • Hide HTML element on click (display: none)
    • -
  • Show HTML element on click (display: block)
    • -
  • Fade in HTML element with jQuery
    • -
  • Fade out HTML element with jQuery
    • -
  • Animate item after 2s from initial page load
    • -
+

Functions

+
    +
  • Create an HTML element
    • +
  • Remove an HTML element
    • +
  • Append an HTML element
    • +
  • Prepend an HTML element
    • +
  • Create and add HTML element after an element
    • +
  • Create and add HTML element before an element
    • +
  • Clone an HTML element
    • +
  • Add class to HTML item
    • +
  • Remove class to HTML item
    • +
  • Toggle class of HTML item
    • +
  • Add disabled attribute to HTML button
    • +
  • Remove disabled attribute of HTML button
    • +
  • Set data-src attribute to img element
    • +
  • Remove data-src attribute of img element
    • +
  • Hide HTML element on click (display: none)
    • +
  • Show HTML element on click (display: block)
    • +
  • Fade in HTML element with jQuery
    • +
  • Fade out HTML element with jQuery
    • +
  • Animate item after 2s from initial page load
    • +
-

Selectors

-
    -
  • Iterate collection of elements
    • -
  • Get parent element of certain element
    • -
  • Get collection of children of certain element
    • -
  • Get all elements that have a certain class
    • -
  • Get item by id
    • -
  • Get all elements that have a certain class and property
    • -
  • Get selected option of a select element
    • -
  • Change attribute of a first element
    • -
  • Show value of a first input on the page
    • -
  • Remove all items from a specific selector
    • -
+

Selectors

+
    +
  • Iterate collection of elements
    • +
  • Get parent element of certain element
    • +
  • Get collection of children of certain element
    • +
  • Get all elements that have a certain class
    • +
  • Get item by id
    • +
  • Get all elements that have a certain class and property
    • +
  • Get selected option of a select element
    • +
  • Change attribute of a first element
    • +
  • Show value of a first input on the page
    • +
  • Remove all items from a specific selector
    • +
-

Events

-
    -
  • HTML document has been loaded
    • -
  • HTML item clicked
    • -
  • HTML item double clicked
    • -
  • Checkbox checked or unchecked
    • -
  • Select element option changed
    • -
  • Text value on input is changed
    • -
  • Form submitted
    • -
  • Key is pressed on keyboard
    • -
  • Mouse positioned over element
    • -
  • Mouse cursor's being moved
    • -
  • Image loaded
    • -
  • Image fail to load
    • -
  • Show the clicked item of an UL list
    • -
+

Events

+
    +
  • HTML document has been loaded
    • +
  • HTML item clicked
    • +
  • HTML item double clicked
    • +
  • Checkbox checked or unchecked
    • +
  • Select element option changed
    • +
  • Text value on input is changed
    • +
  • Form submitted
    • +
  • Key is pressed on keyboard
    • +
  • Mouse positioned over element
    • +
  • Mouse cursor's being moved
    • +
  • Image loaded
    • +
  • Image fail to load
    • +
  • Show the clicked item of an UL list
    • +

Copyright © 2021 MOceanHi Ltd. All rights reserved.

- -
-
- -

TEXT TEST HERE

+
+
+ +
+ + + + +
+
- + + \ No newline at end of file diff --git a/script.js b/script.js index 1640342b..7261a0ea 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,7 @@ let targetItems = document.querySelectorAll(".ul-action--list"); let clickedItem; -let modalClose = document.querySelector("#close"); -let modalContainer = document.querySelector("#modal"); +let modalClose = document.querySelector(".btn-modal--close"); +let modalContainer = document.querySelector("#modal-bg"); let tagBody = document.querySelector(".body") diff --git a/styles.css b/styles.css index ed2d78e6..da04ffcd 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,3 @@ -@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); - * { margin: 0; padding: 0; @@ -9,62 +7,48 @@ :root { --black: rgb(0, 0, 0); + --black-rgba--06: rgba(0, 0, 0, 0.6); + --black-rgba--026: rgba(0, 0, 0, 0.26); + --black-rgba--054: rgba(0, 0, 0, 0.54); + --charcoal-rgba--012: rgba(70, 70, 70, 0.12); --white: rgb(255, 255, 255); - --red: rgb(218, 49, 49); + --white-rgba--055: rgba(255, 255, 255, 0.55); + --grey-light: rgb(252, 252, 252); + --grey-medium: rgba(209, 209, 209); --grey: rgb(150, 150, 150); - --light-black: rgb(27, 27, 27); + --grey-dark-very: rgb(44, 44, 44); + --red: rgb(218, 49, 49); + --black-light: rgb(27, 27, 27); --color1: rgb(120, 212, 212); --color2: rgb(233, 124, 233); --color3: rgb(109, 192, 127); } body { - min-height: 100vh; - max-width: 100%; + height: 100vh; + width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; background-color: var(--black); } -main { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 2; - grid-row-end: 3; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); -} - -@media (min-width: 900px) { - main { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 1200px) { - main { - grid-template-columns: repeat(3, 1fr); - } -} - ul { margin-bottom: 3rem; - width: fit-content; } li { - font-size: 1.2rem; + font-size: 0.9rem; list-style: none; + margin-top: 0.8rem; margin-left: 4rem; - margin-bottom: 1rem; cursor: pointer; } li:hover { - font-size: 1.25rem; - font-weight: bold; - color: var(--light-black); + font-size: 0.95rem; + font-weight: bold; + color: var(--black-light); } h1 { @@ -72,27 +56,49 @@ h1 { grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; - font-size: 3rem; + font-size: 2rem; margin-left: 5rem; } h2 { text-align: center; - margin: 3rem 3rem; + margin: 2rem 2rem; } footer { grid-area: 3 / 1 / span 1 / span 3; color: var(--grey); - font-size: 1rem; + font-size: 0.5rem; letter-spacing: 0.5rem; text-align: center; align-self: center; - padding: 1rem; + padding: 0.5rem; } i { - color: var(--black); + color: var(--black); +} + +.main-container { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 2; + grid-row-end: 3; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); + min-height: 43rem; +} + +@media (min-width: 900px) { + .main-container { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1200px) { + .main-container { + grid-template-columns: repeat(3, 1fr); + } } .header-container { @@ -109,7 +115,7 @@ i { } .logo { - font-size: 3rem; + font-size: 2rem; margin-left: 1.3rem; } @@ -120,20 +126,27 @@ i { .functions-container { background-color: var(--color1); + border-radius: 10px; + margin: 0.3rem; } .selectors-container { background-color: var(--color2); + border-radius: 10px; + margin: 0.3rem; } .events-container { background-color: var(--color3); + border-radius: 10px; + margin: 0.3rem; } /* MODAL */ -/* MODAL (BACKGROUND */ -.modal-main--container { +/* MODAL (BACKGROUND) */ + +.modal-bg--container { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: auto; /* Sit on top */ @@ -143,30 +156,83 @@ i { width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Enable scroll if needed */ - background-color: rgba(0, 0, 0, 0.6); + background-color: var(--black-rgba--06); } /* MODAL CONTENT/BOX */ -.modal-content { - background-color: var(--white); + +.modal-content--container { + position: relative; + background-color: var(--grey-light); + box-shadow: 0 0 0.5rem 0 var(--grey-medium); margin: 12% auto; /* 15% from the top and centered */ - padding: 1rem; - border: 1px solid var(--black); - width: 70rem; /* Could be more or less, depending on screen size */ - height: 40rem; + width: 50rem; /* Could be more or less, depending on screen size */ + height: 30rem; } -/* CLOSE BUTTON */ -.modal-close { - color: var(--grey); - float: right; - font-size: 28px; - font-weight: bold; +/* MODAL CLOSE BUTTON */ + +.btn-modal--close { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + border: none; + background-color: var(--white); + height: 24px; + width: 24px; + border-radius: 50%; } -.modal-close:hover, -.modal-close:focus { - cursor: pointer; - color: var(--red); +/* MODAL CLOSE MATERIAL ICON */ + +.material-icons.md-dark.md-inactive { + color: var(--black-rgba--026); +} +.material-icons.md-dark.md-inactive:hover, +.material-icons.md-dark.md-inactive:focus { + color: var(--black-rgba--054); } + +/* MODAL SELECT OPTIONS JS JQUERY */ + +.modal-select--container { + background-color: var(--white); + height: 100px; + width: 480px; + box-shadow: + inset -10px -10px 15px yellow, + inset 10px 10px 15px green; + display: flex; + align-items: center; + justify-content: space-around; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: 50px; + +} + +.btn1, .btn2 { + display: none; +} + +label { + font-family: "Poppins", sans-serif; + font-size: 27px; + padding: 15px 35px; + font-weight: 600; + color: blue; + border-radius: 35px; + background-color: red +} + +.btn1, .btn2:checked + label:checked { + box-shadow: + inset -10px -10px 15px yellow, + inset 10px 10px 15px green; +} \ No newline at end of file From ad0f117e0de967ef175fb51a3484caf99a4c3846 Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Sun, 8 Aug 2021 05:40:57 +0200 Subject: [PATCH 09/14] Finished the modal content buttons. I have created tow input radio type "buttons" to switch between JS or jQuery --- index.html | 8 ++---- styles.css | 82 +++++++++++++++++++++++++++++++----------------------- 2 files changed, 50 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index a2d56087..57b1b0b6 100644 --- a/index.html +++ b/index.html @@ -87,14 +87,12 @@

Copyright © 2021 MOceanHi Ltd. All rights reserved.

+ - + -
- +
D1
diff --git a/styles.css b/styles.css index da04ffcd..21eb6b04 100644 --- a/styles.css +++ b/styles.css @@ -144,7 +144,7 @@ i { /* MODAL */ -/* MODAL (BACKGROUND) */ +/* modal (background) */ .modal-bg--container { display: none; /* Hidden by default */ @@ -159,22 +159,24 @@ i { background-color: var(--black-rgba--06); } -/* MODAL CONTENT/BOX */ +/* modal content/box */ .modal-content--container { + display: grid; + grid-template-rows: 80px 100%; position: relative; background-color: var(--grey-light); box-shadow: 0 0 0.5rem 0 var(--grey-medium); margin: 12% auto; /* 15% from the top and centered */ width: 50rem; /* Could be more or less, depending on screen size */ height: 30rem; + border: none; } -/* MODAL CLOSE BUTTON */ +/* modal close button */ .btn-modal--close { position: absolute; - top: 0; right: 0; transform: translate(50%, -50%); border: none; @@ -182,9 +184,10 @@ i { height: 24px; width: 24px; border-radius: 50%; + } -/* MODAL CLOSE MATERIAL ICON */ +/* modal close material */ .material-icons.md-dark.md-inactive { color: var(--black-rgba--026); @@ -195,44 +198,53 @@ i { color: var(--black-rgba--054); } -/* MODAL SELECT OPTIONS JS JQUERY */ +/* modal select options JS JQuery */ .modal-select--container { - background-color: var(--white); - height: 100px; - width: 480px; - box-shadow: - inset -10px -10px 15px yellow, - inset 10px 10px 15px green; + + height: 80px; + width: 100%; display: flex; align-items: center; justify-content: space-around; - position: absolute; - margin: auto; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: 50px; - + position: relative; + overflow: hidden; } -.btn1, .btn2 { +.modal-input--select { display: none; } + label { - font-family: "Poppins", sans-serif; - font-size: 27px; - padding: 15px 35px; - font-weight: 600; - color: blue; - border-radius: 35px; - background-color: red -} - -.btn1, .btn2:checked + label:checked { - box-shadow: - inset -10px -10px 15px yellow, - inset 10px 10px 15px green; -} \ No newline at end of file + font-family: "Poppins", sans-serif; + font-size: 20px; + margin-top: 0; + padding: 225px 35px; + width: 50%; + font-weight: 600; + color: var(--grey-dark-very); + background-color: var(--white); + text-align: center; + justify-self: center; + border: none; + + +} + +input:checked + label { + font-size: 20px; + background-color: var(--grey-dark-very); + color: var(--white); +} + + +/* MODAL SCREENS JS and JQUERY ON SELECTION */ + +.div-screen--js { + background-color: var(--grey-dark-very); + border: none; +} + + + From 03b6fb2ec5ae0d5cb7969f5ac4258406e3b19d4d Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Sun, 8 Aug 2021 16:24:10 +0200 Subject: [PATCH 10/14] finishing up adjusts in modal --- index.html | 10 +++---- script.js | 86 +++++++++++++++++++++++++++++++++++++++++++++--------- styles.css | 43 ++++++++++++++------------- 3 files changed, 99 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 57b1b0b6..dd764313 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,6 @@ -
@@ -82,18 +81,19 @@

Events

Copyright © 2021 MOceanHi Ltd. All rights reserved.

+
- + - +
-
D1
+
JAVASCRIPT
+
JQUERY
- \ No newline at end of file diff --git a/script.js b/script.js index 7261a0ea..8519c87b 100644 --- a/script.js +++ b/script.js @@ -1,29 +1,87 @@ let targetItems = document.querySelectorAll(".ul-action--list"); -let clickedItem; let modalClose = document.querySelector(".btn-modal--close"); let modalContainer = document.querySelector("#modal-bg"); -let tagBody = document.querySelector(".body") +let tagBody = document.querySelector(".body"); +let selectJsBtn = document.querySelector("#btn1"); +let selectJqBtn = document.querySelector("#btn2"); +let screenJs = document.querySelector("#screenJS"); +let screenJq = document.querySelector("#screenJQ"); +var clickedItem; +/* UL LI ITEMS */ +let action1; /* FUNCTION OPEN MODAL WHEN LI IS CLICKED IDENTIFYING WHICH LI ID WAS CLICKED ALSO */ -targetItems.forEach(element => { - element.addEventListener('click', (e)=> { - if (e.target !== e.currentTarget) { - modalContainer.style.display = "block"; - clickedItem = e.target.id; - - } else if (e.target == e.currentTarget) { - return null; - } - e.stopPropagation; - }); +targetItems.forEach((element) => { + element.addEventListener("click", (e) => { + if (e.target !== e.currentTarget) { + modalContainer.style.display = "block"; + clickedItem = e.target.id; + examples(); + } else if (e.target == e.currentTarget) { + modalContainer.style.display = "none"; + } + e.stopPropagation; + }); }); -/* FUNCTION CLOSE MODAL */ +/* FUNCTION CLOSE MODAL USING CLOSE ICON */ modalClose.addEventListener("click", (e) => { modalContainer.style.display = "none"; +}); + +/* FUNCTION DISPLAY SELECTED JAVASCRIPT OR JQUERY SCREEN IN MODAL */ +selectJsBtn.addEventListener("click", () => { + screenJs.style.display = "block"; + screenJq.style.display = "none"; }); + +selectJqBtn.addEventListener("click", () => { + screenJs.style.display = "none"; + screenJq.style.display = "block"; +}); + +/* JS EXAMPLES */ + +function examples() { + switch (clickedItem) { + case "act1": + screenJs.textContent = "Hello world"; + screenJq.textContent = "Hello Marcel"; + break; + + case "act2": + screenJs.textContent = "Hello Marcel"; + break; + + default: + screenJs.textContent = "That is not optionan option"; + break; + } + return clickedItem; +} + +("Create an HTML element"); + +("Remove an HTML element"); +("Append an HTML element"); +("Prepend an HTML element"); +("Create and add HTML element after an element"); +("Create and add HTML element before an element"); +("Clone an HTML element"); +("Add class to HTML item"); +("Remove class to HTML item"); +("Toggle class of HTML item"); +("Add disabled attribute to HTML button"); +("Remove disabled attribute of HTML button"); +("Set data-src attribute to img element"); +("Remove data-src attribute of img element"); +("Hide HTML element on click (display: none)"); +("Show HTML element on click (display: block)"); +("Fade in HTML element with jQuery"); +("Fade out HTML element with jQuery"); +("Animate item after 2s from initial page load"); diff --git a/styles.css b/styles.css index 21eb6b04..44cb0e73 100644 --- a/styles.css +++ b/styles.css @@ -166,11 +166,9 @@ i { grid-template-rows: 80px 100%; position: relative; background-color: var(--grey-light); - box-shadow: 0 0 0.5rem 0 var(--grey-medium); margin: 12% auto; /* 15% from the top and centered */ width: 50rem; /* Could be more or less, depending on screen size */ height: 30rem; - border: none; } /* modal close button */ @@ -184,7 +182,6 @@ i { height: 24px; width: 24px; border-radius: 50%; - } /* modal close material */ @@ -201,50 +198,54 @@ i { /* modal select options JS JQuery */ .modal-select--container { - - height: 80px; + height: 50px; width: 100%; display: flex; align-items: center; justify-content: space-around; position: relative; - overflow: hidden; + overflow-y: hidden; } .modal-input--select { display: none; } - label { font-family: "Poppins", sans-serif; font-size: 20px; margin-top: 0; - padding: 225px 35px; + padding: 30px 35px; + height: 80px; width: 50%; font-weight: 600; - color: var(--grey-dark-very); - background-color: var(--white); text-align: center; justify-self: center; - border: none; - - + overflow-y: hidden; } -input:checked + label { - font-size: 20px; - background-color: var(--grey-dark-very); - color: var(--white); +#labelJS { + background-color: var(--grey-dark-very); + color: var(--white); } +#labelJQ { + color: var(--grey-dark-very); + background-color: var(--grey-light); +} /* MODAL SCREENS JS and JQUERY ON SELECTION */ .div-screen--js { - background-color: var(--grey-dark-very); - border: none; + display: none; + background-color: var(--grey-dark-very); + padding-left: 5px; + color: var(--white); } - - +.div-screen--jq { + display: none; + background-color: var(--grey-light); + padding-top: 5px; + padding-left: 5px; +} From 2b0bb58d08600f41486714b0a4e873b0c15b97e4 Mon Sep 17 00:00:00 2001 From: MarcelDurgante Date: Sun, 8 Aug 2021 18:28:31 +0200 Subject: [PATCH 11/14] fixed the Modal buttons, started to add contente do modal --- script.js | 38 +++++++++++++++++++++++++++++++++++--- styles.css | 2 +- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 8519c87b..cdfeb4f0 100644 --- a/script.js +++ b/script.js @@ -6,6 +6,7 @@ let selectJsBtn = document.querySelector("#btn1"); let selectJqBtn = document.querySelector("#btn2"); let screenJs = document.querySelector("#screenJS"); let screenJq = document.querySelector("#screenJQ"); +let contentContainer = document.querySelector(".modal-content--container"); var clickedItem; /* UL LI ITEMS */ @@ -29,10 +30,18 @@ targetItems.forEach((element) => { /* FUNCTION CLOSE MODAL USING CLOSE ICON */ -modalClose.addEventListener("click", (e) => { +modalClose.addEventListener("click", () => { modalContainer.style.display = "none"; }); +/* modalContainer.addEventListener('click', () => { + if (e.target == contentContainer) { + return null; + } else { + modalContainer.style.display = "none" + } +}); */ + /* FUNCTION DISPLAY SELECTED JAVASCRIPT OR JQUERY SCREEN IN MODAL */ selectJsBtn.addEventListener("click", () => { @@ -50,12 +59,35 @@ selectJqBtn.addEventListener("click", () => { function examples() { switch (clickedItem) { case "act1": - screenJs.textContent = "Hello world"; - screenJq.textContent = "Hello Marcel"; + screenJs.innerHTML = `

+      <script>
+      const paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+
+      const element = document.getElementById("div1"); 
+      element.appendChild(para); 
+      </script>
+      
+
`; + + let btn1 = document.createElement("button"); + btn1.textContent = "Click me!"; + screenJs.appendChild(btn1); + + btn1.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = "This is a new paragraph"; + + screenJs.appendChild(paragraph); + }); + + screenJq.textContent = `$("container").append($("
", {id: "foo", "class": "a"}));`; // first selector (container) is the one I want things appended to. The second is what I am creating and appending + break; case "act2": screenJs.textContent = "Hello Marcel"; + break; default: diff --git a/styles.css b/styles.css index 44cb0e73..d7e662ff 100644 --- a/styles.css +++ b/styles.css @@ -163,7 +163,7 @@ i { .modal-content--container { display: grid; - grid-template-rows: 80px 100%; + grid-template-rows: 50px 100%; position: relative; background-color: var(--grey-light); margin: 12% auto; /* 15% from the top and centered */ From f8b8816c4683a953a5e2547647ef4a2545d8e466 Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Mon, 9 Aug 2021 09:44:09 +0200 Subject: [PATCH 12/14] started to add the examples in the modal --- index.html | 1 + script.js | 1340 +++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 1327 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index dd764313..bd68f669 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ + JQUERY AND JAVASCRIPT CHEAT SHEET diff --git a/script.js b/script.js index cdfeb4f0..59bb6524 100644 --- a/script.js +++ b/script.js @@ -54,48 +54,1360 @@ selectJqBtn.addEventListener("click", () => { screenJq.style.display = "block"; }); -/* JS EXAMPLES */ +/* JS AND JQ 42 EXAMPLES FOR EACH (to inject in its screens respectvely) */ function examples() { switch (clickedItem) { case "act1": screenJs.innerHTML = `

       <script>
-      const paragraph = document.createElement("p"); 
+      let paragraph = document.createElement("p"); 
       paragraph.textContent = "This is a new paragraph"; 
-
-      const element = document.getElementById("div1"); 
-      element.appendChild(para); 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
       </script>
`; - let btn1 = document.createElement("button"); btn1.textContent = "Click me!"; screenJs.appendChild(btn1); - btn1.addEventListener("click", () => { const paragraph = document.createElement("p"); - paragraph.textContent = "This is a new paragraph"; + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn1 = $(''); + $btn1.appendTo($(screenJq)); + $btn1.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + + break; + case "act2": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn2 = document.createElement("button"); + btn2.textContent = "Click me!"; + screenJs.appendChild(btn2); + btn2.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; screenJs.appendChild(paragraph); }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn2 = $(''); + $btn2.appendTo($(screenJq)); + $btn2.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; - screenJq.textContent = `$("container").append($("
", {id: "foo", "class": "a"}));`; // first selector (container) is the one I want things appended to. The second is what I am creating and appending + case "act3": + screenJs.innerHTML = `

+        <script>
+        let paragraph = document.createElement("p"); 
+        paragraph.textContent = "This is a new paragraph"; 
+        let element = document.getElementById("#foo");
+        element.appendChild(pararagraph); 
+        </script>
+        
+
`; + let btn3 = document.createElement("button"); + btn3.textContent = "Click me!"; + screenJs.appendChild(btn3); + btn3.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn3 = $(''); + $btn3.appendTo($(screenJq)); + $btn3.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act4": + screenJs.innerHTML = `

+          <script>
+          let paragraph = document.createElement("p"); 
+          paragraph.textContent = "This is a new paragraph"; 
+          let element = document.getElementById("#foo");
+          element.appendChild(pararagraph); 
+          </script>
+          
+
`; + let btn4 = document.createElement("button"); + btn4.textContent = "Click me!"; + screenJs.appendChild(btn4); + btn4.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn4 = $(''); + $btn4.appendTo($(screenJq)); + $btn4.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + case "act5": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn5 = document.createElement("button"); + btn5.textContent = "Click me!"; + screenJs.appendChild(btn5); + btn5.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn5 = $(''); + $btn5.appendTo($(screenJq)); + $btn5.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); break; - case "act2": - screenJs.textContent = "Hello Marcel"; + case "act6": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn6 = document.createElement("button"); + btn6.textContent = "Click me!"; + screenJs.appendChild(btn6); + btn6.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn6 = $(''); + $btn6.appendTo($(screenJq)); + $btn6.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act7": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn7 = document.createElement("button"); + btn7.textContent = "Click me!"; + screenJs.appendChild(btn7); + btn7.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn7 = $(''); + $btn7.appendTo($(screenJq)); + $btn7.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act8": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn8 = document.createElement("button"); + btn8.textContent = "Click me!"; + screenJs.appendChild(btn8); + btn8.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn8 = $(''); + $btn8.appendTo($(screenJq)); + $btn8.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act9": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn9 = document.createElement("button"); + btn9.textContent = "Click me!"; + screenJs.appendChild(btn9); + btn9.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn9 = $(''); + $btn9.appendTo($(screenJq)); + $btn9.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act10": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn10 = document.createElement("button"); + btn10.textContent = "Click me!"; + screenJs.appendChild(btn10); + btn10.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn10 = $(''); + $btn10.appendTo($(screenJq)); + $btn10.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act11": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn11 = document.createElement("button"); + btn11.textContent = "Click me!"; + screenJs.appendChild(btn11); + btn11.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn11 = $(''); + $btn11.appendTo($(screenJq)); + $btn11.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act12": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn12 = document.createElement("button"); + btn12.textContent = "Click me!"; + screenJs.appendChild(btn12); + btn12.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn12 = $(''); + $btn12.appendTo($(screenJq)); + $btn12.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act13": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn14 = document.createElement("button"); + btn13.textContent = "Click me!"; + screenJs.appendChild(btn13); + btn13.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn13 = $(''); + $btn13.appendTo($(screenJq)); + $btn13.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act14": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn14= document.createElement("button"); + btn14.textContent = "Click me!"; + screenJs.appendChild(btn14); + btn14.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn14 = $(''); + $btn14.appendTo($(screenJq)); + $btn14.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act15": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn15 = document.createElement("button"); + btn15.textContent = "Click me!"; + screenJs.appendChild(btn15); + btn15.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn15 = $(''); + $btn15.appendTo($(screenJq)); + $btn15.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act16": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn16 = document.createElement("button"); + btn16.textContent = "Click me!"; + screenJs.appendChild(btn16); + btn16.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn16 = $(''); + $btn16.appendTo($(screenJq)); + $btn16.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act17": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn17 = document.createElement("button"); + btn17.textContent = "Click me!"; + screenJs.appendChild(btn17); + btn17.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn17 = $(''); + $btn17.appendTo($(screenJq)); + $btn17.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act18": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn18 = document.createElement("button"); + btn18.textContent = "Click me!"; + screenJs.appendChild(btn18); + btn18.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn18 = $(''); + $btn18.appendTo($(screenJq)); + $btn18.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act19": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn19 = document.createElement("button"); + btn19.textContent = "Click me!"; + screenJs.appendChild(btn19); + btn19.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn19 = $(''); + $btn19.appendTo($(screenJq)); + $btn19.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + case "act20": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn20 = document.createElement("button"); + btn20.textContent = "Click me!"; + screenJs.appendChild(btn20); + btn20.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn20 = $(''); + $btn20.appendTo($(screenJq)); + $btn20.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act21": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn21 = document.createElement("button"); + btn21.textContent = "Click me!"; + screenJs.appendChild(btn21); + btn21.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn21 = $(''); + $btn21.appendTo($(screenJq)); + $btn21.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act22": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn22 = document.createElement("button"); + btn22.textContent = "Click me!"; + screenJs.appendChild(btn22); + btn22.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn22 = $(''); + $btn22.appendTo($(screenJq)); + $btn22.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act23": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn23 = document.createElement("button"); + btn23.textContent = "Click me!"; + screenJs.appendChild(btn23); + btn23.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn23 = $(''); + $btn23.appendTo($(screenJq)); + $btn23.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act24": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn24 = document.createElement("button"); + btn24.textContent = "Click me!"; + screenJs.appendChild(btn24); + btn24.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn24 = $(''); + $btn24.appendTo($(screenJq)); + $btn24.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act25": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn25 = document.createElement("button"); + btn25.textContent = "Click me!"; + screenJs.appendChild(btn25); + btn25.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn25 = $(''); + $btn25.appendTo($(screenJq)); + $btn25.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act26": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn26 = document.createElement("button"); + btn26.textContent = "Click me!"; + screenJs.appendChild(btn26); + btn26.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn26 = $(''); + $btn26.appendTo($(screenJq)); + $btn26.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act27": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn27 = document.createElement("button"); + btn27.textContent = "Click me!"; + screenJs.appendChild(btn27); + btn27.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn27 = $(''); + $btn27.appendTo($(screenJq)); + $btn27.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act28": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn28 = document.createElement("button"); + btn28.textContent = "Click me!"; + screenJs.appendChild(btn28); + btn28.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn28 = $(''); + $btn28.appendTo($(screenJq)); + $btn28.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act29": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn29 = document.createElement("button"); + btn29.textContent = "Click me!"; + screenJs.appendChild(btn29); + btn29.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn29 = $(''); + $btn29.appendTo($(screenJq)); + $btn29.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act30": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn30 = document.createElement("button"); + btn30.textContent = "Click me!"; + screenJs.appendChild(btn30); + btn30.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn30 = $(''); + $btn30.appendTo($(screenJq)); + $btn30.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act31": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn31 = document.createElement("button"); + btn31.textContent = "Click me!"; + screenJs.appendChild(btn31); + btn31.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn31 = $(''); + $btn31.appendTo($(screenJq)); + $btn31.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act32": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn32 = document.createElement("button"); + btn32.textContent = "Click me!"; + screenJs.appendChild(btn32); + btn32.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn32 = $(''); + $btn32.appendTo($(screenJq)); + $btn32.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act33": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn2 = document.createElement("button"); + btn2.textContent = "Click me!"; + screenJs.appendChild(btn2); + btn2.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn2 = $(''); + $btn2.appendTo($(screenJq)); + $btn2.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act34": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn34 = document.createElement("button"); + btn34.textContent = "Click me!"; + screenJs.appendChild(btn34); + btn34.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn34 = $(''); + $btn34.appendTo($(screenJq)); + $btn34.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act35": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn35 = document.createElement("button"); + btn35.textContent = "Click me!"; + screenJs.appendChild(btn35); + btn35.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn35 = $(''); + $btn35.appendTo($(screenJq)); + $btn35.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act36": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn36 = document.createElement("button"); + btn36.textContent = "Click me!"; + screenJs.appendChild(btn36); + btn36.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn36 = $(''); + $btn36.appendTo($(screenJq)); + $btn36.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act37": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn37 = document.createElement("button"); + btn37.textContent = "Click me!"; + screenJs.appendChild(btn37); + btn37.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn37 = $(''); + $btn37.appendTo($(screenJq)); + $btn37.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act38": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn38 = document.createElement("button"); + btn38.textContent = "Click me!"; + screenJs.appendChild(btn38); + btn38.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn38 = $(''); + $btn38.appendTo($(screenJq)); + $btn38.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act39": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn39 = document.createElement("button"); + btn39.textContent = "Click me!"; + screenJs.appendChild(btn39); + btn39.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn39 = $(''); + $btn39.appendTo($(screenJq)); + $btn39.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act40": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn40 = document.createElement("button"); + btn40.textContent = "Click me!"; + screenJs.appendChild(btn40); + btn40.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn40 = $(''); + $btn40.appendTo($(screenJq)); + $btn40.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act41": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn41 = document.createElement("button"); + btn41.textContent = "Click me!"; + screenJs.appendChild(btn41); + btn41.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn41 = $(''); + $btn41.appendTo($(screenJq)); + $btn41.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); + break; + + case "act42": + screenJs.innerHTML = `

+      <script>
+      let paragraph = document.createElement("p"); 
+      paragraph.textContent = "This is a new paragraph"; 
+      let element = document.getElementById("#foo");
+      element.appendChild(pararagraph); 
+      </script>
+      
+
`; + let btn42 = document.createElement("button"); + btn42.textContent = "Click me!"; + screenJs.appendChild(btn42); + btn42.addEventListener("click", () => { + const paragraph = document.createElement("p"); + paragraph.textContent = + "This is a new paragraph.! You have just created a new element using Javascript."; + screenJs.appendChild(paragraph); + }); + screenJq.textContent = ''; + screenJq.textContent = `$('container').append($('

This is a new paragraph! You have just created a new element using Javascript.

)';`; + let $btn42 = $(''); + $btn42.appendTo($(screenJq)); + $btn42.on("click", () => { + $(screenJq).append( + $( + "

This is a new paragraph! You have just created a new element using Javascript.

" + ) + ); + }); break; default: - screenJs.textContent = "That is not optionan option"; break; - } + }; return clickedItem; -} +}; ("Create an HTML element"); From 5dd5dd7705eb0c33208409ad8a581608e9af7530 Mon Sep 17 00:00:00 2001 From: Marcel Durgante Date: Mon, 9 Aug 2021 18:56:10 +0200 Subject: [PATCH 13/14] Started adding more JS and JQuery examples to the modal js and jq secreens respectvely --- index.html | 8 +- script.js | 1344 ++-------------------------------------------------- 2 files changed, 36 insertions(+), 1316 deletions(-) diff --git a/index.html b/index.html index bd68f669..621148b7 100644 --- a/index.html +++ b/index.html @@ -88,10 +88,10 @@

Copyright © 2021 MOceanHi Ltd. All rights reserved.

- - - - + + + +
JAVASCRIPT
JQUERY
diff --git a/script.js b/script.js index 59bb6524..87376222 100644 --- a/script.js +++ b/script.js @@ -2,8 +2,8 @@ let targetItems = document.querySelectorAll(".ul-action--list"); let modalClose = document.querySelector(".btn-modal--close"); let modalContainer = document.querySelector("#modal-bg"); let tagBody = document.querySelector(".body"); -let selectJsBtn = document.querySelector("#btn1"); -let selectJqBtn = document.querySelector("#btn2"); +let selectJsBtn = document.querySelector("#btnJS1"); +let selectJqBtn = document.querySelector("#btnJQ1"); let screenJs = document.querySelector("#screenJS"); let screenJq = document.querySelector("#screenJQ"); let contentContainer = document.querySelector(".modal-content--container"); @@ -28,19 +28,20 @@ targetItems.forEach((element) => { }); }); + /* FUNCTION CLOSE MODAL USING CLOSE ICON */ modalClose.addEventListener("click", () => { modalContainer.style.display = "none"; }); -/* modalContainer.addEventListener('click', () => { - if (e.target == contentContainer) { - return null; - } else { +/* FUNCTION CLOSE MODAL CLIKING IN THE BACKGROUND */ + +document.addEventListener('click', (e) => { + if (e.target == modalContainer) { modalContainer.style.display = "none" } -}); */ +}); /* FUNCTION DISPLAY SELECTED JAVASCRIPT OR JQUERY SCREEN IN MODAL */ @@ -59,10 +60,12 @@ selectJqBtn.addEventListener("click", () => { function examples() { switch (clickedItem) { case "act1": + screenJq.textContent = ""; + screenJs.innerHTIML = ""; screenJs.innerHTML = `

       <script>
       let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
+      paragraph.textContent = "Hi, I am a new paragraph"; 
       let element = document.getElementById("#foo");
       element.appendChild(pararagraph); 
       </script>
@@ -74,10 +77,10 @@ function examples() {
       btn1.addEventListener("click", () => {
         const paragraph = document.createElement("p");
         paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
+          "This is a new paragraph you have just created a new element using Javascript.";
         screenJs.appendChild(paragraph);
       });
-      screenJq.textContent = '';
+
       screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
       let $btn1 = $('');
       $btn1.appendTo($(screenJq));
@@ -91,1323 +94,40 @@ function examples() {
 
       break;
 
+
     case "act2":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
+      screenJq.textContent = "";
+      screenJs.innerHTIML = "";
+      screenJs.innerHTML = `
<script>let removedElement = document.getElementById("foo");removedElement.remove();</script>
`;
       let btn2 = document.createElement("button");
-      btn2.textContent = "Click me!";
+      btn2.textContent = "Click me to remove paragraph!";
       screenJs.appendChild(btn2);
+      const paragraph = document.createElement("p");
+      paragraph.textContent = "This is the paragraph you will remove using Javascript.";
+      screenJs.appendChild(paragraph);
       btn2.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
+        paragraph.remove();
       });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn2 = $('');
+
+      screenJq.textContent = `$("#foo").remove();`;
+      let $btn2 = $(
+        ''
+      );
       $btn2.appendTo($(screenJq));
+      $(screenJq).append($("
This is a paragraph you will remove using jQuery
"));
       $btn2.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act3":
-        screenJs.innerHTML = `

-        <script>
-        let paragraph = document.createElement("p"); 
-        paragraph.textContent = "This is a new paragraph"; 
-        let element = document.getElementById("#foo");
-        element.appendChild(pararagraph); 
-        </script>
-        
-        
`;
-        let btn3 = document.createElement("button");
-        btn3.textContent = "Click me!";
-        screenJs.appendChild(btn3);
-        btn3.addEventListener("click", () => {
-          const paragraph = document.createElement("p");
-          paragraph.textContent =
-            "This is a new paragraph.! You have just created a new element using Javascript.";
-          screenJs.appendChild(paragraph);
-        });
-        screenJq.textContent = '';
-        screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-        let $btn3 = $('');
-        $btn3.appendTo($(screenJq));
-        $btn3.on("click", () => {
-          $(screenJq).append(
-            $(
-              "
This is a new paragraph! You have just created a new element using Javascript.
"
-            )
-          );
-        });
-        break;
-  
-        case "act4":
-          screenJs.innerHTML = `

-          <script>
-          let paragraph = document.createElement("p"); 
-          paragraph.textContent = "This is a new paragraph"; 
-          let element = document.getElementById("#foo");
-          element.appendChild(pararagraph); 
-          </script>
-          
-          
`;
-          let btn4 = document.createElement("button");
-          btn4.textContent = "Click me!";
-          screenJs.appendChild(btn4);
-          btn4.addEventListener("click", () => {
-            const paragraph = document.createElement("p");
-            paragraph.textContent =
-              "This is a new paragraph.! You have just created a new element using Javascript.";
-            screenJs.appendChild(paragraph);
-          });
-          screenJq.textContent = '';
-          screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-          let $btn4 = $('');
-          $btn4.appendTo($(screenJq));
-          $btn4.on("click", () => {
-            $(screenJq).append(
-              $(
-                "
This is a new paragraph! You have just created a new element using Javascript.
"
-              )
-            );
-          });
-          break;
-
-          case "act5":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn5 = document.createElement("button");
-      btn5.textContent = "Click me!";
-      screenJs.appendChild(btn5);
-      btn5.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn5 = $('');
-      $btn5.appendTo($(screenJq));
-      $btn5.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act6":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn6 = document.createElement("button");
-      btn6.textContent = "Click me!";
-      screenJs.appendChild(btn6);
-      btn6.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn6 = $('');
-      $btn6.appendTo($(screenJq));
-      $btn6.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act7":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn7 = document.createElement("button");
-      btn7.textContent = "Click me!";
-      screenJs.appendChild(btn7);
-      btn7.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn7 = $('');
-      $btn7.appendTo($(screenJq));
-      $btn7.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act8":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn8 = document.createElement("button");
-      btn8.textContent = "Click me!";
-      screenJs.appendChild(btn8);
-      btn8.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn8 = $('');
-      $btn8.appendTo($(screenJq));
-      $btn8.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act9":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn9 = document.createElement("button");
-      btn9.textContent = "Click me!";
-      screenJs.appendChild(btn9);
-      btn9.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn9 = $('');
-      $btn9.appendTo($(screenJq));
-      $btn9.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act10":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn10 = document.createElement("button");
-      btn10.textContent = "Click me!";
-      screenJs.appendChild(btn10);
-      btn10.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn10 = $('');
-      $btn10.appendTo($(screenJq));
-      $btn10.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act11":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn11 = document.createElement("button");
-      btn11.textContent = "Click me!";
-      screenJs.appendChild(btn11);
-      btn11.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn11 = $('');
-      $btn11.appendTo($(screenJq));
-      $btn11.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
+        $('p').remove('');
       });
       break;
 
-      case "act12":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn12 = document.createElement("button");
-      btn12.textContent = "Click me!";
-      screenJs.appendChild(btn12);
-      btn12.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn12 = $('');
-      $btn12.appendTo($(screenJq));
-      $btn12.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
 
-      case "act13":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn14 = document.createElement("button");
-      btn13.textContent = "Click me!";
-      screenJs.appendChild(btn13);
-      btn13.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn13 = $('');
-      $btn13.appendTo($(screenJq));
-      $btn13.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
 
-      case "act14":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn14= document.createElement("button");
-      btn14.textContent = "Click me!";
-      screenJs.appendChild(btn14);
-      btn14.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn14 = $('');
-      $btn14.appendTo($(screenJq));
-      $btn14.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
 
-      case "act15":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn15 = document.createElement("button");
-      btn15.textContent = "Click me!";
-      screenJs.appendChild(btn15);
-      btn15.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn15 = $('');
-      $btn15.appendTo($(screenJq));
-      $btn15.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
 
-      case "act16":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn16 = document.createElement("button");
-      btn16.textContent = "Click me!";
-      screenJs.appendChild(btn16);
-      btn16.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn16 = $('');
-      $btn16.appendTo($(screenJq));
-      $btn16.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act17":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn17 = document.createElement("button");
-      btn17.textContent = "Click me!";
-      screenJs.appendChild(btn17);
-      btn17.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn17 = $('');
-      $btn17.appendTo($(screenJq));
-      $btn17.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act18":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn18 = document.createElement("button");
-      btn18.textContent = "Click me!";
-      screenJs.appendChild(btn18);
-      btn18.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn18 = $('');
-      $btn18.appendTo($(screenJq));
-      $btn18.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act19":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn19 = document.createElement("button");
-      btn19.textContent = "Click me!";
-      screenJs.appendChild(btn19);
-      btn19.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn19 = $('');
-      $btn19.appendTo($(screenJq));
-      $btn19.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act20":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn20 = document.createElement("button");
-      btn20.textContent = "Click me!";
-      screenJs.appendChild(btn20);
-      btn20.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn20 = $('');
-      $btn20.appendTo($(screenJq));
-      $btn20.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act21":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn21 = document.createElement("button");
-      btn21.textContent = "Click me!";
-      screenJs.appendChild(btn21);
-      btn21.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn21 = $('');
-      $btn21.appendTo($(screenJq));
-      $btn21.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act22":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn22 = document.createElement("button");
-      btn22.textContent = "Click me!";
-      screenJs.appendChild(btn22);
-      btn22.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn22 = $('');
-      $btn22.appendTo($(screenJq));
-      $btn22.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act23":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn23 = document.createElement("button");
-      btn23.textContent = "Click me!";
-      screenJs.appendChild(btn23);
-      btn23.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn23 = $('');
-      $btn23.appendTo($(screenJq));
-      $btn23.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act24":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn24 = document.createElement("button");
-      btn24.textContent = "Click me!";
-      screenJs.appendChild(btn24);
-      btn24.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn24 = $('');
-      $btn24.appendTo($(screenJq));
-      $btn24.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act25":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn25 = document.createElement("button");
-      btn25.textContent = "Click me!";
-      screenJs.appendChild(btn25);
-      btn25.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn25 = $('');
-      $btn25.appendTo($(screenJq));
-      $btn25.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act26":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn26 = document.createElement("button");
-      btn26.textContent = "Click me!";
-      screenJs.appendChild(btn26);
-      btn26.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn26 = $('');
-      $btn26.appendTo($(screenJq));
-      $btn26.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act27":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn27 = document.createElement("button");
-      btn27.textContent = "Click me!";
-      screenJs.appendChild(btn27);
-      btn27.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn27 = $('');
-      $btn27.appendTo($(screenJq));
-      $btn27.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act28":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn28 = document.createElement("button");
-      btn28.textContent = "Click me!";
-      screenJs.appendChild(btn28);
-      btn28.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn28 = $('');
-      $btn28.appendTo($(screenJq));
-      $btn28.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act29":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn29 = document.createElement("button");
-      btn29.textContent = "Click me!";
-      screenJs.appendChild(btn29);
-      btn29.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn29 = $('');
-      $btn29.appendTo($(screenJq));
-      $btn29.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act30":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn30 = document.createElement("button");
-      btn30.textContent = "Click me!";
-      screenJs.appendChild(btn30);
-      btn30.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn30 = $('');
-      $btn30.appendTo($(screenJq));
-      $btn30.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act31":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn31 = document.createElement("button");
-      btn31.textContent = "Click me!";
-      screenJs.appendChild(btn31);
-      btn31.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn31 = $('');
-      $btn31.appendTo($(screenJq));
-      $btn31.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act32":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn32 = document.createElement("button");
-      btn32.textContent = "Click me!";
-      screenJs.appendChild(btn32);
-      btn32.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn32 = $('');
-      $btn32.appendTo($(screenJq));
-      $btn32.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act33":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn2 = document.createElement("button");
-      btn2.textContent = "Click me!";
-      screenJs.appendChild(btn2);
-      btn2.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn2 = $('');
-      $btn2.appendTo($(screenJq));
-      $btn2.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act34":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn34 = document.createElement("button");
-      btn34.textContent = "Click me!";
-      screenJs.appendChild(btn34);
-      btn34.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn34 = $('');
-      $btn34.appendTo($(screenJq));
-      $btn34.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act35":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn35 = document.createElement("button");
-      btn35.textContent = "Click me!";
-      screenJs.appendChild(btn35);
-      btn35.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn35 = $('');
-      $btn35.appendTo($(screenJq));
-      $btn35.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act36":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn36 = document.createElement("button");
-      btn36.textContent = "Click me!";
-      screenJs.appendChild(btn36);
-      btn36.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn36 = $('');
-      $btn36.appendTo($(screenJq));
-      $btn36.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act37":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn37 = document.createElement("button");
-      btn37.textContent = "Click me!";
-      screenJs.appendChild(btn37);
-      btn37.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn37 = $('');
-      $btn37.appendTo($(screenJq));
-      $btn37.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act38":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn38 = document.createElement("button");
-      btn38.textContent = "Click me!";
-      screenJs.appendChild(btn38);
-      btn38.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn38 = $('');
-      $btn38.appendTo($(screenJq));
-      $btn38.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act39":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn39 = document.createElement("button");
-      btn39.textContent = "Click me!";
-      screenJs.appendChild(btn39);
-      btn39.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn39 = $('');
-      $btn39.appendTo($(screenJq));
-      $btn39.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act40":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn40 = document.createElement("button");
-      btn40.textContent = "Click me!";
-      screenJs.appendChild(btn40);
-      btn40.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn40 = $('');
-      $btn40.appendTo($(screenJq));
-      $btn40.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act41":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn41 = document.createElement("button");
-      btn41.textContent = "Click me!";
-      screenJs.appendChild(btn41);
-      btn41.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn41 = $('');
-      $btn41.appendTo($(screenJq));
-      $btn41.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-      case "act42":
-      screenJs.innerHTML = `

-      <script>
-      let paragraph = document.createElement("p"); 
-      paragraph.textContent = "This is a new paragraph"; 
-      let element = document.getElementById("#foo");
-      element.appendChild(pararagraph); 
-      </script>
-      
-      
`;
-      let btn42 = document.createElement("button");
-      btn42.textContent = "Click me!";
-      screenJs.appendChild(btn42);
-      btn42.addEventListener("click", () => {
-        const paragraph = document.createElement("p");
-        paragraph.textContent =
-          "This is a new paragraph.! You have just created a new element using Javascript.";
-        screenJs.appendChild(paragraph);
-      });
-      screenJq.textContent = '';
-      screenJq.textContent = `$('container').append($('
This is a new paragraph! You have just created a new element using Javascript.
)';`;
-      let $btn42 = $('');
-      $btn42.appendTo($(screenJq));
-      $btn42.on("click", () => {
-        $(screenJq).append(
-          $(
-            "
This is a new paragraph! You have just created a new element using Javascript.
"
-          )
-        );
-      });
-      break;
-
-    default:
-      break;
-  };
+    
+  }
   return clickedItem;
-};
+}
 
 ("Create an HTML element");
 

From 7c5f3020141a957c0c201687e5fe8da35491891d Mon Sep 17 00:00:00 2001
From: Marcel Durgante 
Date: Wed, 11 Aug 2021 04:03:05 +0200
Subject: [PATCH 14/14] partialy done

---
 script.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/script.js b/script.js
index 87376222..f608d64a 100644
--- a/script.js
+++ b/script.js
@@ -40,6 +40,7 @@ modalClose.addEventListener("click", () => {
 document.addEventListener('click', (e) => {
   if (e.target == modalContainer) {
     modalContainer.style.display = "none"
+    
   }
 });