From 34e4983d4b9b1a2d992fe50c31ff727817e27f18 Mon Sep 17 00:00:00 2001 From: Amjad Elhassan Date: Thu, 4 Mar 2021 14:45:49 -0500 Subject: [PATCH] stoich api --- simple-Api/index.html | 29 +++++++++++++++++++ simple-Api/js/main.js | 66 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 simple-Api/index.html create mode 100644 simple-Api/js/main.js diff --git a/simple-Api/index.html b/simple-Api/index.html new file mode 100644 index 0000000..5a7003a --- /dev/null +++ b/simple-Api/index.html @@ -0,0 +1,29 @@ + + + + stoichiometry project + + + + + + +

Stoichiometry Calculator

+

Welcome to my project!

+

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
+ I want to:

+

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

+

but if you enter a properly capitalized molecule like, Na2CO3, an image of the molecule will appear at the bottom of the page

+

+ Dev Notes +

+

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. +

+ + + + + + + \ No newline at end of file diff --git a/simple-Api/js/main.js b/simple-Api/js/main.js new file mode 100644 index 0000000..113359f --- /dev/null +++ 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 +} \ No newline at end of file