Joe Schmoe API

saxena uditanshu — Sat, 15 Aug 2020 08:58:51 +0000

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.

DEV Community: Vanijya Technology

Joe Schmoe API

Joe Schmoes are colorful characters illustrated by Jon&Jess that can be used as profile picture placeholders for live websites or design mockups.

How To