6/6 JS Tutorials

itatikola · Jun 6, 2024 · 6a81d40 · 6a81d40
1 parent 57d7f6c
commit 6a81d40
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -5,3 +5,6 @@ Started working on the site!
 
 ## December 3, 2023 
 Finished - visit the site at [www.itatikola.com](www.itatikola.com). 
+
+## June 6, 2024
+Refactoring to remove dependencies on Jekyll, adding JS project
diff --git a/authcode.txt b/authcode.txt
@@ -0,0 +1,25 @@
+https://api.instagram.com/oauth/authorize?client_id=1182296206103770&redirect_uri=https://itatikola.com/auth/&scope=user_profile,user_media&response_type=code
+
+AQDMXjveTYyNDH8F0Ae1BxfmAuOKcRUMXjzCPLo97mCNjoKHcqL49_i93Dz_iJ4acs8RjvRZXxea5VECf7qsHiaUIPPoU4QgclGEKyOtxAkfUB9twpnwsJ11PvjoU6oFKrRTTIYltLckxLSgzU9LcWiGP5lN3ZUkS_DEPAMwQNSUjIr7F9gZih4xElhoOV2Vd192aa5zEbN9pJjcfqYQ7-e0pHHKOx-SCKjwLbp1NX8Z6g
+curl -X POST \
+  https://api.instagram.com/oauth/access_token \
+  -F client_id=1182296206103770\
+  -F client_secret=710a59a6d09fae09b621a4e889c9185c\
+  -F grant_type=authorization_code \
+  -F redirect_uri=https://itatikola.com/auth/ \
+  -F code=AQDMXjveTYyNDH8F0Ae1BxfmAuOKcRUMXjzCPLo97mCNjoKHcqL49_i93Dz_iJ4acs8RjvRZXxea5VECf7qsHiaUIPPoU4QgclGEKyOtxAkfUB9twpnwsJ11PvjoU6oFKrRTTIYltLckxLSgzU9LcWiGP5lN3ZUkS_DEPAMwQNSUjIr7F9gZih4xElhoOV2Vd192aa5zEbN9pJjcfqYQ7-e0pHHKOx-SCKjwLbp1NX8Z6g
+
+returned:
+
+access_token: IGQWRQSExuaTNIamJWc1o5RVdQMVRiZAmpfb2hjMTUzS1hTRmNrTk14UlQ3REUwdlpVeFF3UHlfQTk5Q0lWOV9JUWZAWc3hickFwclN3THhfLTVQQXhBUzJuMHVENjRBSUZACajQtSE42SzJLa1RocW5CMHFSOEhXNDlmeDg4ZAW5ySlp0UQZDZD
+curl -X GET \
+  'https://graph.instagram.com/me/?fields=media&access_token=IGQWRQSExuaTNIamJWc1o5RVdQMVRiZAmpfb2hjMTUzS1hTRmNrTk14UlQ3REUwdlpVeFF3UHlfQTk5Q0lWOV9JUWZAWc3hickFwclN3THhfLTVQQXhBUzJuMHVENjRBSUZACajQtSE42SzJLa1RocW5CMHFSOEhXNDlmeDg4ZAW5ySlp0UQZDZD'
+
+
+
+curl -X GET \
+  'https://graph.instagram.com/17911116302843368?fields=media_type,caption,permalink,media_url&access_token=IGQWRQSExuaTNIamJWc1o5RVdQMVRiZAmpfb2hjMTUzS1hTRmNrTk14UlQ3REUwdlpVeFF3UHlfQTk5Q0lWOV9JUWZAWc3hickFwclN3THhfLTVQQXhBUzJuMHVENjRBSUZACajQtSE42SzJLa1RocW5CMHFSOEhXNDlmeDg4ZAW5ySlp0UQZDZD'
+
+
+
+17854567844935592
diff --git a/index.html b/index.html
@@ -3,7 +3,6 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
-        <meta name="description" content="Hi! My name is Indira Tatikola and I am a software engineer. This is my personal portfolio site." />
         <title>Indira Tatikola</title>
         <link href="styles/minima.css" rel="stylesheet" />
         <script src="https://kit.fontawesome.com/6a36c605f0.js" crossorigin="anonymous"></script>
@@ -70,7 +69,7 @@
             </table>
         </div>
 
-        <!--div class="bubble" id="experimentOne">
+        <div class="bubble" id="experimentOne">
             <h1>Number Guessing Game</h1>
 
             <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>
@@ -100,18 +99,32 @@ <h1>Silly Story</h1>
                 <label for="uk">UK</label> <input id="uk" type="radio" name="ukus" value="uk" />
             </div>
             <div>
-                <button class="randomize">Generate random story</button>
-            </div>
-
+                <button class="randomize">Generate Random Story</button>
+            </div>    
             <p class="story"></p>
-        </div-->
+        </div>
 
-        <div class="bubble" id="Instagram">
-            <h1>Instagram</h1>
+        <div class="bubble" id="experimentThree">
+            <h1>SuperHeroes</h1>
+
+            <p>This example requires you to enter commands in your browser's JavaScript console (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> for more information).</p>
+            <div class="superhero">
+                <header>
+
+                </header>
+
+                <section>
+
+                </section>
+            </div>
+        </div>
 
+        <div class="bubble" id="experimentFour">
+            <h1>Bouncing Balls</h1>
 
         </div>
 
     <script defer src="/scripts/numberGame.js"></script>
     <script defer src="/scripts/sillyStory.js"></script>
+    <script defer src="scripts/superHeroes.js"></script>
 </html>
diff --git a/projects.html → projectts.html b/projects.html → projectts.html
diff --git a/scripts/bouncingBalls.js b/scripts/bouncingBalls.js
diff --git a/scripts/superHeroes.js b/scripts/superHeroes.js
@@ -0,0 +1,106 @@
+/**
+ * PRACTICE WITH OOP
+ * function Person(name, age) {
+    this.name = {}; 
+    const names = name.split(" "); 
+    for (let i = 0; i < names.length; i++) {
+        let field = "name" + (i + 1);
+        if (i === 0) {
+            field = "first"; 
+        } else if (i === names.length - 1) {
+            field = "last"; 
+        }
+        this.name[field] = names[i]; 
+    }
+    this.age = age;
+    this.introduceSelf = () => {
+        console.log(`Hi! I'm ${this.name.first}.`);
+    };
+    this.bio = () => {
+        console.log(`Ms./Mrs./Mr.${this.name.last} is ${this.age} years old.`);
+    };
+    this.farewell = () => {
+        console.log(`${this.name.first} has passed.`);
+    }
+
+}
+
+const person = {
+    name: {
+        first: "Jane",
+        last: "Doe"
+    },
+    age: 32,
+    bio() {
+      console.log(`${this.name.first} ${this.name.last} is ${this.age} years old.`);
+    },
+    introduceSelf() {
+      console.log(`Hi! I'm ${this.name.first}.`);
+    },
+};
+
+person.farewell = () => {
+    console.log(`${person.name.first} has passed.`);
+};
+
+const indira = new Person("Indira Mohini Tatikola", 19); 
+const abirami = new Person("Abirami Chinnakaruppan", 20); 
+*/
+
+async function populate() {
+    const requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
+    const request = new Request(requestURL);
+
+    const response = await fetch(request);
+    const superHeroes = await response.json();
+
+    populateHeader(superHeroes);
+    populateHeroes(superHeroes);
+}  
+
+function populateHeader(obj) {
+    const header = document.querySelector("header");
+    const myH1 = document.createElement("h1");
+    myH1.textContent = obj.squadName;
+    header.appendChild(myH1);
+
+    const myPara = document.createElement("p");
+    myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
+    header.appendChild(myPara);
+}
+
+function populateHeroes(obj) {
+    const section = document.querySelector("section");
+    const heroes = obj.members;
+
+    for (const hero of heroes) {
+      const myArticle = document.createElement("article");
+      const myH2 = document.createElement("h2");
+      const myPara1 = document.createElement("p");
+      const myPara2 = document.createElement("p");
+      const myPara3 = document.createElement("p");
+      const myList = document.createElement("ul");
+
+      myH2.textContent = hero.name;
+      myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
+      myPara2.textContent = `Age: ${hero.age}`;
+      myPara3.textContent = "Superpowers:";
+
+      const superPowers = hero.powers;
+      for (const power of superPowers) {
+        const listItem = document.createElement("li");
+        listItem.textContent = power;
+        myList.appendChild(listItem);
+      }
+
+      myArticle.appendChild(myH2);
+      myArticle.appendChild(myPara1);
+      myArticle.appendChild(myPara2);
+      myArticle.appendChild(myPara3);
+      myArticle.appendChild(myList);
+
+      section.appendChild(myArticle);
+    }
+}
+
+populate();
diff --git a/styles/minima.css b/styles/minima.css
@@ -710,15 +710,53 @@ button {
   background: rgba(150,150,150,0.6);
   text-shadow: 1px 1px 1px white;
   border: 1px solid #999;
-  position: absolute;
   cursor: pointer;
-  top: 2px;
-  left: 2px;
 }
 
 .thumb-bar img {
   display: block;
   width: 20%;
   float: left;
   cursor: pointer;
+}
+
+/**
+SUPERHERO EXPERIMENT
+*/
+.superhero {
+  font-family: 'Faster One', cursive;
+}
+
+/* header styles */
+
+.superhero h1 {
+  font-size: 4rem;
+  text-align: center;
+}
+
+.superhero header p {
+  font-size: 1.3rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+/* section styles */
+
+.superhero section article {
+  width: 33%;
+  float: left;
+}
+
+.superhero section p {
+  margin: 5px 0;
+}
+
+.superhero section ul {
+  margin-top: 0;
+}
+
+.superhero h2 {
+  font-size: 2.5rem;
+  letter-spacing: -5px;
+  margin-bottom: 10px;
 }