assembler-institute · paulMolano · Jul 30, 2021 · Jul 30, 2021 · Jul 30, 2021 · Aug 1, 2021
diff --git a/assets/assembler-logo.png b/assets/assembler-logo.png
diff --git a/assets/jQuery-logo.png b/assets/jQuery-logo.png
diff --git a/assets/logoJS.png b/assets/logoJS.png
diff --git a/assets/tickBlue.png b/assets/tickBlue.png
diff --git a/assets/tickYellow.png b/assets/tickYellow.png
diff --git a/assets/word-image-1-768x307.png b/assets/word-image-1-768x307.png
diff --git a/assets/xRed.png b/assets/xRed.png
diff --git a/example.js b/example.js
@@ -0,0 +1,36 @@
+//!----------------------------!HTML EXAMPLES--------------------------------------
+
+let example1 = `<div class="divEx" id="vanilla"></div><div class="divEx" id="jquery"></div>`
+
+let example2 = `<button class="buttonEx" id="vanilla">Vanilla</button><button class="buttonEx" id="jquery">Jquery</button>`
+
+let example3 = `<button class="buttonEx" id="vanilla">Vanilla</button><button class="buttonEx" id="jquery">Jquery</button>`
+
+let example4 = `<textarea class="textareaEx" id="vanilla">Vanilla</textarea><textarea class="textareaEx" id="jquery">Jquery</textarea>`
+
+let example5 = `<button class="buttonEx" id="vanilla">Vanilla</button><button class="buttonEx" id="jquery">Jquery</button>`
+
+let example6 = `<input type="text" id="vanilla" name="vanilla" placeholder="Vanilla input">
+<input type="text" id="jquery" name="jquery" placeholder="Jquery input">`
+
+let example7 = `<img src="/assets/assembler-logo.png"  class="imgEx" id="example7">`
+
+let example8 = `<img src=""  class="imgEx" id="example8" alt="Img-example">`
+
+let example9 = `<form id="example9"><label for="lname">Last name</label><input type="text" id="lname" name="lname" value="Paul"><br>
+<input type="submit" value="Submit"></form>`
+
+let example10 = `<select name="example10" id="example10">
+<option value="Vanila">Vanilla</option>
+<option value="Jquery">Jquery</option>
+</select>`
+
+let example11 = `<button class="buttonEx" id="vanilla">Vanilla</button><button class="buttonEx" id="jquery">Jquery</button>`
+
+let example12 = `<label for="vanilla"><input type="checkbox" id="vanilla" name="vanilla">vanilla</label>
+<label for="jquery"><input type="checkbox" id="jquery" name="jquery">jquery</label>`
+
+let example13 = `<ul class="ulEx" id="ulEx" ><li>Coffee</li><li>Tea</li><li>Milk</li></ul><ul class="ulEx" id="ulEx2" ><li>Coffee</li><li>Tea</li><li>Milk</li></ul>`
+
+
+//let example1f = `<div class="divEx" id="vanilla"></div><div class="divEx" id="jquery"></div>`
diff --git a/index.html b/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JQuery Cheat Sheet</title>
+    <link rel="stylesheet" href="main.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="main.js" defer></script>
+    <script src="vanilla.js" defer></script>
+    <script src="jquery.js" defer></script>
+    <script src="example.js" defer></script>
+    <scrip></scrip>
+  </head>
+  <body>
+    <main class="grid__2x3 background-image border-container">
+      <h1 class="h1_page">CHEAT SHEET</h1>
+      <h2 class="h2_page h2vanilla" id="vanilla_title">VANILLA JS</h2>
+      <h2 class="h2_page h2jquery"  id="jquery_title">JQUERY</h2>
+      <div class="mid_page">
+        <div class="buttons_container"><button class="page_button" id="button_events">Events</button>
+        <button class="page_button" id="button_functions">
+          Functions & Selectors 1
+        </button>
+        <button class="page_button" id="button_selectors">
+          Functions & Selectors 2
+        </button></div>
+        <ul class="p_ul">
+          <li class="p_events pointer" id="e1">When the HTML document has been loaded and you can manipulate it</li>
+          <li class="p_events pointer" id="e2">When an HTML item has been clicked</li>
+          <li class="p_events pointer" id="e3">When an HTML item has been double clicked</li>
+          <li class="p_events pointer" id="e4">
+            User presses a key on the keyboard
+          </li>
+          <li class="p_events pointer" id="e5">User moves the mouse cursor</li>
+          <li class="p_events pointer" id="e6">
+            User changes a value of an text input
+          </li>
+          <li class="p_events pointer" id="e7">An image is loaded</li>
+          <li class="p_events pointer" id="e8">An image fails to load</li>
+          <li class="p_events pointer" id="e9">Form is submitted</li>
+          <li class="p_events pointer" id="e10">
+            User changes the option of a select
+          </li>
+          <li class="p_events pointer" id="e11">
+            Position the mouse over an element
+          </li>
+          <li class="p_events pointer" id="e12">
+            A checkbox is checked or unchecked
+          </li>
+          <li class="p_events pointer" id="e13">
+            A ul list item is clicked, show the item that was clicked
+          </li>
+        </ul>
+        <ul class="p_ul">
+          <li class="p_functions pointer" id="f1">
+            Create an HTML element with any text value
+          </li>
+          <li class="p_functions pointer" id="f2">
+            Remove an HTML element with any text value
+          </li>
+          <li class="p_functions pointer" id="f3">
+            Append an HTML element with any text value to a parent element
+          </li>
+          <li class="p_functions pointer" id="f4">
+            Prepend an HTML element with any text value to a parent element
+          </li>
+          <li class="p_functions pointer" id="f5">
+            Create and add an HTML element with any text value after another
+          </li>
+          <li class="p_functions pointer" id="f6">
+            Create and add an HTML element with any text value before another
+          </li>
+          <li class="p_functions pointer" id="f7">
+            Clone an HTML element within other element
+          </li>
+          <li class="p_functions pointer" id="f8">
+            Add a class to an HTML item
+          </li>
+          <li class="p_functions pointer" id="f9">
+            Remove a class to an HTML item
+          </li>
+          <li class="p_functions pointer" id="f10">
+            Toggle a class of an HTML item
+          </li>
+          <li class="p_functions pointer" id="f11">
+            Add a disabled attribute to an HTML button
+          </li>
+          <li class="p_functions pointer" id="f12">
+            Remove the disabled attribute of an HTML button
+          </li>
+          <li class="p_functions pointer" id="f13">
+            Set a data-src attribute to a img element
+          </li>
+          <li class="p_functions pointer" id="f14">
+            Remove the data-src attribute of the img element
+          </li>
+        </ul>
+        <ul class="p_ul">
+          <li class="p_selectors pointer" id="s1">Hide an HTML element on click (display: none)</li>
+          <li class="p_selectors pointer" id="s2">Show an HTML element on click (display: block)</li>
+          <li class="p_selectors pointer" id="s3">Fade in an HTML element using jQuery</li>
+          <li class="p_selectors pointer" id="s4">Fade out an HTML element using jQuery</li>
+          <li class="p_selectors pointer" id="s5">Iterate a collection of elements and apply a change of style on them</li>
+          <li class="p_selectors pointer" id="s6">Get the parent element of a certain element and change its font weight</li>
+          <li class="p_selectors pointer" id="s7">Get the collection of children of a certain element and change its font weight</li>
+          <li class="p_selectors pointer" id="s8">Get all the elements that have a certain class and change their font weight</li>
+          <li class="p_selectors pointer" id="s9">Get an item by id and change its font weight</li>
+          <li class="p_selectors pointer" id="s10">Get the elements that have a class & display none and change their font color</li>
+          <li class="p_selectors pointer" id="s11">Get the options of a select element that are selected (attribute selected)</li>
+          <li class="p_selectors pointer" id="s12">Change the href attribute of the first &lt;a&gt; element
+            <li class="p_selectors pointer" id="s13">Show an alert with the value of the first &lt;input&gt; of the page</li>
+            <li class="p_selectors pointer" id="s14">Remove all items from a specific selector</li>
+            <li class="p_selectors pointer" id="s15">Animate an item after 2 seconds from the initial page load</li>
+          </div>
+          <div class="result resultv" id="vanilla_result"></div>
+          <div class="example" id="example"></div>
+          <div class="result resultj" id="jquery_result"></div>
+        </main>
+      </body>
+  </html>
+