From cd2b805bdf3073d4fccbce9de32b848e1d0dded3 Mon Sep 17 00:00:00 2001 From: atom-box Date: Wed, 8 Sep 2021 16:37:08 -0500 Subject: [PATCH] Make a client for APIs, esp. for rapidapi.com. --- helpers/sentimentAnalyzer.mjs | 83 +++++++++++++++++++++++++++++++++++ sentimentAnalyzer.html | 49 +++++++++++++++++++++ styles/rapidapi.css | 62 ++++++++++++++++++++++++++ 3 files changed, 194 insertions(+) create mode 100644 helpers/sentimentAnalyzer.mjs create mode 100644 sentimentAnalyzer.html create mode 100644 styles/rapidapi.css diff --git a/helpers/sentimentAnalyzer.mjs b/helpers/sentimentAnalyzer.mjs new file mode 100644 index 0000000..bb73115 --- /dev/null +++ b/helpers/sentimentAnalyzer.mjs @@ -0,0 +1,83 @@ +console.log("line 1 of SENTIMENTANALYZER.MJS"); +// Text-Processing API Url +const API_URL = 'https://japerk-text-processing.p.rapidapi.com/sentiment/'; + +// RapidAPI request headers +const REQUEST_HEADERS = { + 'X-RapidAPI-Host': 'japerk-text-processing.p.rapidapi.com' + , 'X-RapidAPI-Key': 'edcb8a0210msh348353a6c7b6f6dp1fe7e9jsn0aa0040601d7' + , 'Content-Type': 'application/x-www-form-urlencoded' +}; + +// Button click handler +const onAnalyzeButtonClick = () => { + // Getting a textarea element with a comment + const commentElement = document.getElementById('comment'); + // Getting comment text + const commentText = commentElement.value.trim(); + // Handle empty comment + if (!commentText) { + return handleEmptyComment(); + } + // Calling the API and passing the result with the displayResult as a callback function + return analyzeComment(commentText, displayResult); + }; + +const analyzeComment = (comment, callback) => { + const data = { + text: comment, + language: 'english', + }; + + const formattedData = Qs.stringify(data); + axios.post( + API_URL, + formattedData, + { + headers: REQUEST_HEADERS + } + ).then( + (response) => { + const data = response.data; + callback(data); + } + ).catch( + (error) => console.error(error) + ) +}; + + +const handleEmptyComment = () => { + const resultBlockElement = document.getElementById('main-result-block'); + resultBlockElement.classList.add('invisible'); + return alert('Your comment is empty =('); +}; + +const displayResult = result => { + // Remove invisible class for main-result-block + const resultBlockElement = document.getElementById('main-result-block'); + resultBlockElement.classList.remove('invisible'); + // Setting the color of the result text depending on the response label + const label = result.label; + const resultElement = document.getElementById('result'); + resultElement.setAttribute('class', label); + let resultText = ''; + // Choosing the result text depending on response label + switch (label) { + case 'pos': + resultText = 'This comment is positive :^D'; + break; + case 'neg': + resultText = 'The mood is not good!'; + break; + case 'neutral': + resultText = 'This mood is neutral *_*'; + break; + default: + resultText = 'Hmmm, cannot understand your comment'; + } + // Setting the result text + resultElement.textContent = resultText; + }; + +console.log("line 83 of SENTIMENTANALYZER.MJS"); diff --git a/sentimentAnalyzer.html b/sentimentAnalyzer.html new file mode 100644 index 0000000..7b4b2c9 --- /dev/null +++ b/sentimentAnalyzer.html @@ -0,0 +1,49 @@ + + + + + + + + + sentiment analyzer + + + + +
+

Comment text analysis

+
+ + + +
+
+ +
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/styles/rapidapi.css b/styles/rapidapi.css new file mode 100644 index 0000000..8a33b92 --- /dev/null +++ b/styles/rapidapi.css @@ -0,0 +1,62 @@ +* { + font-family: "Arial", Arial, sans-serif; + font-weight: 400; + padding: 0;ь + margin: 0; + border: 0; +} +body { + padding: 20px; + display: flex; + justify-content: center; + align-items: center; +} +label, textarea { + display: block; +} +.main { + padding: 10px; + width: 35%; + box-shadow: 0 0 10px rgba(0,0,0,0.5); +} +.main-header { + text-align: center; + margin-bottom: 20px; +} +.main-input-comment { margin-bottom: 20px; } +.input-output-field { + width: 95%; + border: #ced4da 1px solid; + border-radius: 10px; + resize: none; + padding: 10px; + margin-bottom: 10px; + font-size: 16px; +} +.dark { + background-color: #222; + color: #fff; +} +.main-analyze-button { + width: 100%; + padding: 5px; + border: 1px solid #007bff; + background-color: #007bff; + border-radius: 7px; + color: white; + text-align: center; + font-size: 16px; + outline: none; +} +.main-analyze-button::-moz-focus-inner {border: 0;} +.main-analyze-button:hover { + background-color: #0069d9; + border-color: #0069d9; + cursor: pointer; +} +.main-result-block { text-align: center; } +.pos { color: green; } +.neg { color: darkred; } +.neutral { color: gray } + +.invisible { display: none; } \ No newline at end of file