Joe Schmoes are colorful characters illustrated by Jon&Jess that can be used as profile picture placeholders for live websites or design mockups.
Let's explore there API and make something cool. So Fire up your PC and let's code. Check the API endpoint Here
How To
Step 1 - Open VsCode or any other text editor.
Step 2 - Create a file index.html
Include this external library in your html file https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css
<main>
<div class="container border border-primary mt-5 px-2 py-2">
<center>
<h1>API DEMO, Enter Name To Get A Cool Profile Image</h1>
<label for="name" class="bmd-label-floating">Input Your Name</label>
<input type="text" class="form-control" id="name">
<button class="btn btn-primary btn-raised">Submit</button>
<br>
<img src="https://placehold.it/120x120?text=profile" width="120" height="120" class="imgchange">
</center>
</div>
</main>
Step 3 - Now create a style
tag and put this code in it.
body {
font-family: "Avenir Next";
background-color: #daf7a6;
}
Include jQuery in your html file https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
Step 4 - Now create Script
tag and put this javaScript code. This is the main code which fetch image for you.
$(document).ready(function(){
$('button').click(function(){
const name = $('#name').val();
alert(name);
$('.imgchange').attr('src',`https://joeschmoe.io/api/v1/${name}`);
const b = $('.imgchange');
console.log(b);
});
});
Step 5 - Now save your file and double click to open it in the browser. You will see something similar.
Check this working demo below
Now you can use this API anywhere you want.
We will be covering many topics related to Web Development and Data Science so stay updated with us.
Top comments (1)
The API is deprecated now.