Skip to content

Commit

Permalink
Make a client for APIs, esp. for rapidapi.com.
Browse files Browse the repository at this point in the history
  • Loading branch information
atom-box committed Sep 8, 2021
1 parent 24e9b57 commit cd2b805
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 0 deletions.
83 changes: 83 additions & 0 deletions helpers/sentimentAnalyzer.mjs
Original file line number Diff line number Diff line change
@@ -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");
49 changes: 49 additions & 0 deletions sentimentAnalyzer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">

<!--
I DID NOT WRITE ANY OF THIS FILE. IT IS STRAIGHT FROM rapidAPI
https://rapidapi.com/blog/how-to-use-an-api-with-javascript/
-->


<head>
<meta charset="UTF-8">
<title>sentiment analyzer</title>

<link rel="stylesheet" href="styles/rapidapi.css">
</head>
<body>
<div class="main">
<h2 class="main-header">Comment text analysis</h2>
<section class="main-input-comment">
<label for="comment">Write your comment here:</label>
<textarea
name="comment"
id="comment"
class="input-output-field"
placeholder="Your comment..."
>
</textarea>
<button class="main-analyze-button" onclick="onAnalyzeButtonClick()">Analyze...</button>
</section>
<section class="main-result">
<p id="main-result-block" class="main-result-block invisible">
<span>Result:</span>
<span id="result" class="input-output-field dark"></span>
</p>
</section>
</div>

<!-- Import axios library -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Querystring library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.7.0/qs.min.js"></script>
<!-- Import our javascript file -->
<script src="helpers/sentimentAnalyzer.mjs"></script>
</body>


<!--
https://rapidapi.com/blog/how-to-use-an-api-with-javascript/
-->
62 changes: 62 additions & 0 deletions styles/rapidapi.css
Original file line number Diff line number Diff line change
@@ -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; }

0 comments on commit cd2b805

Please sign in to comment.