From 6a81d405a2ee006623d637e673a4618de9610d1d Mon Sep 17 00:00:00 2001 From: Indira Tatikola Date: Thu, 6 Jun 2024 17:35:43 -0400 Subject: [PATCH] 6/6 JS Tutorials --- README.md | 3 + authcode.txt | 25 ++++++++ index.html | 29 ++++++--- projects.html => projectts.html | 0 scripts/bouncingBalls.js | 0 scripts/superHeroes.js | 106 ++++++++++++++++++++++++++++++++ styles/minima.css | 44 ++++++++++++- 7 files changed, 196 insertions(+), 11 deletions(-) create mode 100644 authcode.txt rename projects.html => projectts.html (100%) create mode 100644 scripts/bouncingBalls.js create mode 100644 scripts/superHeroes.js diff --git a/README.md b/README.md index e69a88f..be87a7a 100644 --- 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 \ No newline at end of file diff --git a/authcode.txt b/authcode.txt new file mode 100644 index 0000000..b36039a --- /dev/null +++ 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 \ No newline at end of file diff --git a/index.html b/index.html index 4bc58ac..2a51ca9 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ - Indira Tatikola @@ -70,7 +69,7 @@ - + -
-

Instagram

+
+

SuperHeroes

+ +

This example requires you to enter commands in your browser's JavaScript console (see What are browser developer tools for more information).

+
+
+ +
+ +
+ +
+
+
+
+

Bouncing Balls

+ \ No newline at end of file diff --git a/projects.html b/projectts.html similarity index 100% rename from projects.html rename to projectts.html diff --git a/scripts/bouncingBalls.js b/scripts/bouncingBalls.js new file mode 100644 index 0000000..e69de29 diff --git a/scripts/superHeroes.js b/scripts/superHeroes.js new file mode 100644 index 0000000..2959458 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/styles/minima.css b/styles/minima.css index 96b4049..51626e4 100644 --- a/styles/minima.css +++ b/styles/minima.css @@ -710,10 +710,7 @@ 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 { @@ -721,4 +718,45 @@ button { 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; } \ No newline at end of file