I'm building a Website on which you can enter your Minecraft UUID and it gives you a 3D Render of your Minecraft Skin. Unfortunately the API I am using only supports UUIDs. I thought the website could work like this:
You Enter a Username
The Username gets converted to a UUID using some API
The UUID gets send to the other API which hands you a Render of your Skin
How can this be done?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/minecraftia" type="text/css"/>
<title>Check Minecraft Skin!</title>
<script src="https://kit.fontawesome.com/c0ac5a1789.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<input type="text" id="skinname" placeholder="Enter your UUID" />
<button class="button">Search</button>
<div class="output">
<img id="image"/>
</div>
<script>
const skinname = document.getElementById("skinname");
const button = document.querySelector("button");
const image = document.getElementById("image");
button.addEventListener("click", async () => {
const rta = await fetch(
"https://visage.surgeplay.com/full/500/" + skinname.value
);
image.src = rta.url;
});
</script>
</main>
</body>
</html>
You can use official Mojang API
https://api.mojang.com/users/profiles/minecraft/<username>
Related
I have a simple app I made in vanilla JS that I want to convert to a mobile app. I can do it easily with Cordova, but I can't seem to get Admob ads to show up with any of the plugins I tried.
On this one I am using "admob-plus-cordova". I created it with the example app ID, and followed the instructions in the documentation. I just can't figure out why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta
name="viewport"
content="initial-scale=1, width=device-width, viewport-fit=cover"
/>
<meta name="color-scheme" content="light dark" />
<link rel="stylesheet" href="css/index.css" />
<title>Admob</title>
</head>
<body>
<div></div>
<script src="cordova.js"></script>
<script type="text/javascript">
let banner
document.addEventListener(
"deviceready",
async () => {
await admob.start()
banner = new admob.BannerAd({
adUnitId: " ca-app-pub-3940256099942544/6300978111",
})
banner.on("impression", async (evt) => {
await banner.hide()
})
await banner.show()
},
false
)
</script>
</body>
</html>
So I am struggling with APIs and how to handle them. I am currently stuck on an error and haven't been able to figure out how to fix it. My goal with this project is to be able to use the cocktailapi and have a search bar where a user can search by an ingredient, ie gin. I get the below error when I run the code. I'm just not sure how to fix this.
Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at extrafile.js:25:34
I also get the below error why I type input in the search bar.
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')extrafile.js:45
at displayIngredientResults (extrafile.js:45:26)
at HTMLInputElement. (extrafile.js:18:5)
Any advice is greatly appreciated.
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});
const drinks = document.getElementById('drinks1');
const searchBar = document.getElementById('search-Bar');
let ingredientResults = [];
searchBar.addEventListener('keyup', (e) => {
const searchString = e.target.value.toLowerCase();
const filteredIngredients= ingredientResults.filter((drinks) => {
return (
drinks.strIngredient.toLowerCase().includes(searchString)
);
});
displayIngredientResults(filteredIngredients);
});
const loadIngredientResults = () => {
try {
const res = fetch('https://www.thecocktaildb.com/api/json/v1/1/filter.php?i='+ searchBar.value)
.then(res => {return res.json()});
// ingredientResults = res.JSON().results;
// displayIngredientResults(ingredientResults);
} catch (err) {
console.error(err);
}
};
const displayIngredientResults = (results) => {
const htmlString = results
.map((drinks) => {
return `
<div class="card">
<div class="card-body">
<h2>${drinks.strIngredient}</h2>
</div>
</div>
`;
})
.join('');
drinks.innerHTML = htmlString;
};
loadIngredientResults();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
<script src="searchbyingredient.js"></script>
</head>
<body>
<div class="container">
<h1>✨Cocktails ✨</h1>
<div id="searchWrapper">
<input
type="text"
name="searchBar"
id="searchBar"
placeholder="Search for a Cocktail"
/>
</div>
<ul id="cocktailsList"></ul>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cocktail App</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<br>
<div class="card" style="width: 18rem;">
<div class="card-body" id = " card">
<label for="site-search" ></label>
<body>
<div class="container2">
<div id="searchWrapper">
<input
type="text"
name="search-Bar"
id="search-Bar"
placeholder="Enter Main Ingredient"
/>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="extrafile.js"></script>
<!-- <script src="searchbyingredient.js"></script> -->
</body>
</html>
A couple issues here:
The following line sets drinks as null or undefined, since your HTML does not already contain a div with the id of "drinks1".
const drinks = document.getElementById('drinks1');
If you want to create the element in Javascript, you'll need to use a library like jQuery to help you do that like this https://api.jquery.com/add/, or use vanilla javascript like this https://www.javascripttutorial.net/dom/manipulating/create-a-dom-element/
Also, you never set the value of ingredientResults so it is always [], also the function loadIngredientResults returns a promise, and you cannot depend on ingredientResults to not be [] when you execute the following line:
const filteredIngredients= ingredientResults.filter((drinks) => {
return (
drinks.strIngredient.toLowerCase().includes(searchString)
);
});
Consider creating an async/await asynchronous call on keyup and ensuring that the API call has succeeded or that filteredIngredients has a value.
I have an HTML file linked to a script. A button defined in the HTML has an onclick function 'incrementLabel()' but the function in the script throws the warning:
'incrementLabel' is declared but its value is never read.
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
I can't find any solutions to the problem other than writing the function in a in HTML. Any help would be much appreciated.
Thanks!
<!DOCTYPE HTML>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
This works perfectly fine. Check if you are importing your JS script correctly.
You can put the javascript code into a before the closing tag .
HTML:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
</body>
Some of online tools like https://playcode.io don't recognise your code but I have tested in vscode and works fine.
Maybe have to use other online tool or can test if you have imported the code well with a console.log("Works fine") into your javascript file.
Sorry for my english.
I'm learning, and It's been few days I've been stuck on this weather app project.
Since i'm new to APIs everything seems so complicated, I'm unable to get response properly from API And this time error I'm getting is "Uncaught (in promise) SyntaxError: Unexpected end of JSON input"
My code for reference:
// navigator.geolocation.getCurrentPosition(pos=>{console.log(pos)});
async function getLoc(){
const apikeyloc = "//apikey//";
const locationapi = "http://dataservice.accuweather.com/locations/v1/cities/autocomplete"
let query = document.getElementById("location").value;
const inputbox = document.getElementById("location");
let locationList;
inputbox.addEventListener('keydown',async function(){
const api = fetch(`${locationapi}${apikeyloc}${query}`);
(await api).json().then(res=>{
console.log(res);
res.forEach(item => {
if (item.LocalizedName.indexOf(inputbox.value != -1)) {
locationList = `${item.LocalizedName},${item.AdministrativeArea.LocalizedName},${item.CountryLocalizedName}`;
console.log(locationList)
}
});
})
}
)
}
getLoc()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather app</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<Nav>
<div class="timezone">
<div class="city">CityName</div>
<div class="icon">icon</div>
</div>
<div class="search">
<input type="text" id="location" placeholder="Type Location...">
</div>
</Nav>
<div class="weather">
<div class="temprature">28deg</div>
<div class="wdesc">Today is Sunny</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Any help would be appreciated.
You only assign the query variable once, to the document.elementById "location". This is empty at the loading of the page, so every api call you make in the keydown event will be with an empty query, resulting in a blank (non-json) response from the api.
Assign the query variable inside the key event. Also use keyup instead of keydown so that accessing the element's has the correct value. An ajax call on keyup should also be delayed, but take it one step at a time.
// navigator.geolocation.getCurrentPosition(pos=>{console.log(pos)});
async function getLoc(){
const apikeyloc = "?apikey=Om2MRV8SFRjSuVtjnisRhKGxTNQRzhrL&q=";
const locationapi = "http://dataservice.accuweather.com/locations/v1/cities/autocomplete"
const inputbox = document.getElementById("location");
let locationList;
inputbox.addEventListener('keyup',async function(){
//assign it here.
var query = document.getElementById("location").value;
const api = fetch(`${locationapi}${apikeyloc}${query}`);
(await api).json().then(res=>{
console.log(res);
res.forEach(item => {
if (item.LocalizedName.indexOf(inputbox.value != -1)) {
locationList = `${item.LocalizedName},${item.AdministrativeArea.LocalizedName},${item.CountryLocalizedName}`;
console.log(locationList)
}
});
})
}
)
}
getLoc()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather app</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<Nav>
<div class="timezone">
<div class="city">CityName</div>
<div class="icon">icon</div>
</div>
<div class="search">
<input type="text" id="location" placeholder="Type Location...">
</div>
</Nav>
<div class="weather">
<div class="temprature">28deg</div>
<div class="wdesc">Today is Sunny</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Hi I am trying to add a start button via jquery to appear when the page loads. However, the button is not loading.
Here is my code:
$(window).on('load', function() {
const startPage = $("<button id='start'>Go</button>");
$('main').append(startPage);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quiz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Objective London Quiz</h1>
</header>
<main class="questions"></main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>