Added today's content

orlandocaraballo · orlandocaraballo · commit 1872fb3bbcec · 2023-01-31T12:23:53.000-05:00
diff --git a/01_31_2023/index.html b/01_31_2023/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Document</title>
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <div>
+      <p style="color: blue">This is a paragraph</p>
+      <p class="magenta">
+        <span>This is a paragraph</span>
+      </p>
+      <p id="larger">This is a paragraph</p>
+      <p class="magenta">This is a paragraph</p>
+      <p>This is a paragraph</p>
+    </div>
+  </body>
+</html>
diff --git a/01_31_2023/review.js b/01_31_2023/review.js
@@ -0,0 +1,30 @@
+// objects
+const person = {
+  name: "orlando c",
+  age: 39,
+  "-address": "jersey city",
+};
+
+const keyToLookFor = "name";
+
+// modifying a value of a key
+person.age = 29 // 😉 orlando's visible age
+
+console.log(person.name);
+console.log(person.age);
+
+// the following code is invalid
+// console.log(person.-address)
+
+// alternative syntax
+console.log(person["name"]);
+console.log(person["age"]);
+
+// this code however is valid
+console.log(person["-address"]);
+console.log(person[keyToLookFor]);
+
+// looping thru object
+for (const property in person) {
+  console.log("Property -> ", property, ", value -> ", person[property]);
+}
diff --git a/01_31_2023/script.js b/01_31_2023/script.js
@@ -0,0 +1,36 @@
+// to select one element, returns an HTMLElement
+const firstP = document.querySelector("p");
+
+// to select all elements, returns a NodeList
+const paragraphs = document.querySelectorAll("p");
+
+// modify a style property
+firstP.style.color = "red";
+
+// display the content of paragraphs
+console.log(paragraphs);
+
+// create elements
+const newParagraph1 = document.createElement("p");
+const newParagraph2 = document.createElement("p");
+
+// when you create elements, they are not placed within the DOM
+//  yet
+
+// modify the text inside the element
+newParagraph1.textContent = "This is the last p";
+
+// this code would add the new paragraph to the end of the body
+// document.body.appendChild(newParagraph1);
+
+// select the first div on the document
+const div = document.querySelector("div");
+
+// adds new paragraph to beginning of the div to
+div.prepend(newParagraph2);
+
+// selects an element with id of larger
+const largerP = document.querySelector("p#larger");
+
+// modifies the paragraph with the new font size
+largerP.style.fontSize = "2em";
diff --git a/01_31_2023/style.css b/01_31_2023/style.css
@@ -0,0 +1,3 @@
+p {
+  color: black;
+}
