I asked ChatGPT how to get RapidAPI data into a website – including WordPress
Can you write code for an index.html page using a separate js file where my website visitors can enter a YouTube channels home page url to find out if that YouTube channel is monetized or not using the following javascript jQuery;
[ (JavaScript)jQuery Code Snippet copied from RapidAPI ]
const settings = {
"async": true,
"crossDomain": true,
"url": "https://youtube-monetization-check.p.rapidapi.com/check?channel=https%3A%2F%2Fwww.youtube.com%2Fuser%2FMrBeast6000",
"method": "GET",
"headers": {
"X-RapidAPI-Key": "5I6dont4know2WTF9Im8doing7but6Im4going3to9do8it7anyway69",
"X-RapidAPI-Host": "youtube-monetization-check.p.rapidapi.com"
}
};
$.ajax(settings).done(function (response) {
console.log(response);
});ChatGPT Response
I can help you create an index.html page and a separate JavaScript file to implement the functionality you described. I will use the provided base code to fetch data from the API. Here’s the code for the index.html and the separate JavaScript file.
- Create an HTML file named
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Monetization Checker</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>YouTube Monetization Checker</h1>
<p>Enter a YouTube channel's home page URL:</p>
<input type="text" id="channelUrl" placeholder="https://www.youtube.com/user/MrBeast6000">
<button id="checkBtn">Check Monetization</button>
<p id="result"></p>
<script src="checkMonetization.js"></script>
</body>
</html>2. Create a JavaScript file named checkMonetization.js:
$(document).ready(function() {
$('#checkBtn').on('click', checkMonetization);
});
function checkMonetization() {
const channelUrl = $('#channelUrl').val();
const encodedUrl = encodeURIComponent(channelUrl);
const settings = {
"async": true,
"crossDomain": true,
"url": `https://youtube-monetization-check.p.rapidapi.com/check?channel=${encodedUrl}`,
"method": "GET",
"headers": {
"X-RapidAPI-Key": "5I6dont4know2WTF9Im8doing7but6Im4going3to9do8it7anyway69",
"X-RapidAPI-Host": "youtube-monetization-check.p.rapidapi.com"
}
};
$.ajax(settings).done(function (response) {
const resultElement = $('#result');
if (response === 'True') {
resultElement.text('This channel is monetized.');
} else if (response === 'False') {
resultElement.text('This channel is not monetized.');
} else {
resultElement.text('Unexpected response. Please try again.');
}
}).fail(function (error) {
console.error(error);
$('#result').text('An error occurred. Please try again.');
});
}
The index.html file contains a simple form where the user can input a YouTube channel’s home page URL. When the “Check Monetization” button is clicked, the checkMonetization function in the checkMonetization.js file is called. This function fetches data from the API using the provided base code and updates the content of the result element based on the response.
Thanks, can you add a style sheet for the index.html page to make it look more modern. Good for mobile devices, nice wide entry/edit box and button
Certainly! Here’s an updated version of the index.html file with a new internal stylesheet that makes the page look more modern and suitable for mobile devices:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Monetization Checker</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 768px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
font-size: 2em;
color: #333;
margin-bottom: 20px;
}
input[type="text"] {
font-size: 1em;
padding: 10px;
width: 100%;
max-width: 500px;
box-sizing: border-box;
outline: none;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
font-size: 1em;
padding: 10px 20px;
margin-top: 10px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #0056b3;
}
p#result {
font-size: 1.2em;
color: #333;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>YouTube Monetization Checker</h1>
<p>Enter a YouTube channel's home page URL:</p>
<input type="text" id="channelUrl" placeholder="https://www.youtube.com/user/MrBeast6000">
<button id="checkBtn">Check Monetization</button>
<p id="result"></p>
</div>
<script src="checkMonetization.js"></script>
</body>
</html>
This update includes a new <style> block within the <head> section that contains CSS to style the page. The styles include:
- A modern font family (Arial, sans-serif) and background color (#f5f5f5) for the
body. - A
.containerclass to center the content and add padding. - Styling for the
h1element to increase font size and adjust the color. - Styling for the
input[type="text"]element to increase font size, padding, and set a maximum width for better appearance on mobile devices. - Styling for the
buttonelement, including hover effects. - Styling for the
p#resultelement to increase font size and adjust the color.
This should provide a more modern look and feel that works well on both desktop and mobile devices. Feel free to adjust the colors and other styles as needed to better match your desired aesthetic.
Awesome thank you. Can we get the resulting text of; "This channel is not monetized." to show in bold red and "This channel is monetized." Also ideally I'd like to be able to have this on/within a WordPress site/page if possible. Which way would be the best way to do this?
[notice, I forgot to add the show in bold green instruction but ChatGPT added it anyway in the code below ]
You’re welcome! To display the result text in bold red for “This channel is not monetized” and bold green for “This channel is monetized,” you can update the checkMonetization.js file as follows:
$(document).ready(function() {
$('#checkBtn').on('click', checkMonetization);
});
function checkMonetization() {
const channelUrl = $('#channelUrl').val();
const encodedUrl = encodeURIComponent(channelUrl);
const settings = {
"async": true,
"crossDomain": true,
"url": `https://youtube-monetization-check.p.rapidapi.com/check?channel=${encodedUrl}`,
"method": "GET",
"headers": {
"X-RapidAPI-Key": "5I6dont4know2WTF9Im8doing7but6Im4going3to9do8it7anyway69",
"X-RapidAPI-Host": "youtube-monetization-check.p.rapidapi.com"
}
};
$.ajax(settings).done(function (response) {
const resultElement = $('#result');
if (response === 'True') {
resultElement.text('This channel is monetized.').css('color', 'green');
} else if (response === 'False') {
resultElement.text('This channel is not monetized.').css('color', 'red');
} else {
resultElement.text('Unexpected response. Please try again.').css('color', '');
}
}).fail(function (error) {
console.error(error);
$('#result').text('An error occurred. Please try again.').css('color', '');
});
}
The main change is the addition of .css('color', 'green') and .css('color', 'red') to set the text color.
To integrate this solution into a WordPress site, follow these steps:
- Create a new page or open an existing page where you’d like to insert the YouTube Monetization Checker.
- In the WordPress editor, switch to the “Text” or “Code” view (depending on your WordPress version) to edit the page’s HTML directly.
- Copy the entire content of the updated
index.html(without the opening<!DOCTYPE html>,<html>,<head>, and<body>tags, and their corresponding closing tags) and paste it into the WordPress editor. - Save the page and view it on your website to ensure the YouTube Monetization Checker appears and functions as expected.
Note: When using this method, you might experience conflicts with the styles and scripts included by your WordPress theme or plugins. To avoid potential conflicts, you can further isolate the checker’s code using a custom plugin or by utilizing a page builder that supports custom HTML/JavaScript.
Another option is to create a custom WordPress plugin or shortcode to encapsulate the YouTube Monetization Checker’s functionality. This would require more advanced WordPress development knowledge, but it would provide better integration with your WordPress site.
Thanks, I'm getting errors trying the code within WordPress; Uncaught TypeError: $ is not a function at checkMonetization.js:1:1 - so I'll leave it on the separate index.html page. Please add a menu/header to the index.html page with the logo: https://income.tube/wp-content/uploads/2022/05/IncomeTube200.png (200x52) on the left and a separate menu button or "Home" link both pointing to https://income.tube
The error you encountered within WordPress is likely caused by the jQuery library being loaded in “no conflict” mode, which is the default behavior in WordPress. This means that the $ shortcut is not available for jQuery. You can work around this issue by wrapping your JavaScript code in an Immediately Invoked Function Expression (IIFE) that passes the jQuery object as a parameter, and then using jQuery instead of $:
(function($) {
$(document).ready(function() {
$('#checkBtn').on('click', checkMonetization);
});
function checkMonetization() {
const channelUrl = $('#channelUrl').val();
const encodedUrl = encodeURIComponent(channelUrl);
const settings = {
"async": true,
"crossDomain": true,
"url": `https://youtube-monetization-check.p.rapidapi.com/check?channel=${encodedUrl}`,
"method": "GET",
"headers": {
"X-RapidAPI-Key": "5I6dont4know2WTF9Im8doing7but6Im4going3to9do8it7anyway69",
"X-RapidAPI-Host": "youtube-monetization-check.p.rapidapi.com"
}
};
$.ajax(settings).done(function(response) {
const resultElement = $('#result');
if (response === 'True') {
resultElement.text('This channel is monetized.').css('color', 'green');
} else if (response === 'False') {
resultElement.text('This channel is not monetized.').css('color', 'red');
} else {
resultElement.text('Unexpected response. Please try again.').css('color', '');
}
}).fail(function(error) {
console.error(error);
$('#result').text('An error occurred. Please try again.').css('color', '');
});
}
})(jQuery);
However, if you prefer to keep the checker on a separate index.html page, I’ve added a header with the logo and a “Home” link as requested:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Monetization Checker</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* ...previous styles... */
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 52px;
}
.menu {
font-size: 1em;
}
.menu a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.2s ease;
}
.menu a:hover {
background-color: rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body>
<header class="header">
<a href="https://income.tube" class="logo">
<img src="https://income.tube/wp-content/uploads/2022/05/IncomeTube200.png" alt="IncomeTube Logo">
</a>
<nav class="menu">
<a href="https://income.tube">Home</a>
</nav>
</header>
<div class="container">
<h1>YouTube Monetization Checker</h1>
<p>Enter a YouTube channel's home page URL:</p>
<input type="text" id="channelUrl" placeholder="https://www.youtube.com/user/MrBeast6000">
<button id="checkBtn">Check Monetization</button>
<p id="result"></p>
</div>
<script src="checkMonetization.js"></script>
</body>
</html>
The updated index.html now includes a header with the IncomeTube logo on the left and a “Home” link on the right, both pointing to https://income.tube. The new header styles have been added to the existing <style> block.
This should provide a complete backup solution for your YouTube Monetization Checker. If you have any more questions or need further assistance, feel free to ask. I’m here to help!
Your WordPress solution has fixed the error, now working perfectly! Thank you.
You’re welcome! I’m glad everything is working well for you. If you have any more questions or need further assistance in the future, don’t hesitate to ask. Have a great day!
You can checkout the index.html page here: https://income.tube/yt/
And the WordPress version: https://income.tube/youtube-monetization-checker/
I just added “autofocus” to the end of the entry input box so the cursor is blinking and ready for someone to paste an URL straight in without having to click it first;
<input type="text" id="channelUrl" placeholder="https://www.youtube.com/user/MrBeast6000" autofocus >
