learnwithleon · AmjadElHassan · Mar 4, 2021
diff --git a/simple-Api/index.html b/simple-Api/index.html
@@ -0,0 +1,29 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>stoichiometry project</title>
+        <meta name="description" content="I really want to use api information to create an app where I can solve stoichiometry problems, and eventualy maybe more advanced info">
+        <meta name="keywords" content="chemistry, stoichiometry">
+        <meta name="viewport" content="width=device-width, initial-scale=1.25">
+        <link rel="stylesheet" href="style/style.css">
+    </head>
+    <body>
+        <h1>Stoichiometry Calculator</h1>
+        <h2>Welcome to my project!</h2>
+        <p>This will eventually be a valuable stoichiometry calculator for chemistry students. But right now, we are working on the first step! This is focused on interpretting <br>
+        I want to:<br><ul><li>Reject all inputs that are non-chemical</li><li>be able to retrieve information on valid molecules</li></ul></p>
+        <p>as of now, it will reject and provide a proper error if you have entered a syntax issue, such as using h2o instead of H2O. In the future, I will acount for this, but for focusing on data retrieval and organization, users must enter proper capitalization for molecules</p>
+        <p>but if you enter a properly capitalized molecule like, Na2CO3, an image of the molecule will appear at the bottom of the page</p>
+        <h3>
+            Dev Notes
+        </h3>
+        <p>the entire workflow from click-event to image propogating on the page is the result of 3 subsequent requests, 1 post and 2 get. I learned the basis of handling http requests efficiently through the use of async + await ES6 functionality.
+            I learned to effectively pass the results of promises into other promises to reliably arrive at what I am interested in.
+        </p>
+        <img src="https://media3.giphy.com/media/lOa0tPKiMLdqVdFiS8/giphy-downsized-large.gif">
+        <label for="user-input">input</label>
+        <input type="text" id="user-input">
+        <button>run</button>
+        <script src="js/main.js"></script>
+    </body>
+</html>
diff --git a/simple-Api/js/main.js b/simple-Api/js/main.js
@@ -0,0 +1,66 @@
+// let url = 'https://api.rsc.org/compounds/v1/'
+//universal variables
+let formula = document.querySelector('#user-input')
+let library = []
+
+document.querySelector('button').addEventListener('click', function () {
+  queryOrganize(formula.value);
+})
+
+
+function createImage(imageCode) {//translate base64 imag into a png
+  let image = new Image();
+  image.src = `data:image/png;base64,${imageCode}`;
+  document.body.appendChild(image);
+
+}
+
+async function queryOrganize(x) {
+  //functionScope variables
+  const postBody = await JSON.stringify({//creates post body from formular request
+    "formula": x
+  })
+  let postOptions = {
+    method: "POST",
+    headers: {
+      "apikey": "YZzPHvkbkTGNFJsfXW9KPwKzvsVA3UFk",
+      "Accept": "application/json",
+      "Content-Type": "application/json"
+    },
+    body: await postBody//stringify takes time, so we will wait for it to return the body before continuing
+  };
+  let getOptions = {
+    method: "GET",
+    headers: {
+      "apikey": "YZzPHvkbkTGNFJsfXW9KPwKzvsVA3UFk",
+      "Accept": "application/json",
+      "Content-Type": "application/json"
+    },
+  };
+
+  let url = 'https://api.rsc.org/compounds/v1'
+  //functions to call
+  async function GetQuery() {//this will process all requests until we get our image
+    try {//each declaration or callback is analogous to individual .then()
+      let rawPost = await fetch(url + "/filter/formula", postOptions)
+      let readablePost = await rawPost.json()//.json() takes time as well
+      let queryId = readablePost.queryId
+      let rawGet = await fetch(url + `/filter/${queryId}/results`, getOptions)
+      let readableGet = await rawGet.json()
+      let chemId = readableGet.results[0]
+      let img = await fetch(url + `/records/${chemId}/image`, getOptions)
+      let readableImg = await img.json()
+      let imgCode = readableImg.image
+      createImage(imgCode)
+    } catch(err) {//in event of error
+      console.log(err)//always print error to console log
+      if ( /^SyntaxError/.test(err)){//if the problem is the response doesn't understand user entered input
+        alert('Please enter only valid molecules, and follow Capitalization nomenclature conventions')
+      } else if (/^TypeError/.test(err)){//if address issues
+        alert('please notify us; failed Fetch request')
+
+      }
+    }
+  }
+  await GetQuery()//we will run the above function 
+}