-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make a client for APIs, esp. for rapidapi.com.
- Loading branch information
Showing
3 changed files
with
194 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/ | ||
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; } |