₹0.00

No products in the cart.

contact@prgujju.com

₹0.00

No products in the cart.

Home Blog

API | Random Cat Photo Generator API

Random Cat Image Generator is a free API. You can use it for free. With its help, you can also create a Telegram bot and a website and earn money. It is very easy to do that. And you can do it in all programming languages.

Random Cat Photo Generator API

Random Cat Image generator API is very easy to use, you will get an endpoint, and simply you have to make a GET request on it.

GET https://api.thecatapi.com/v1/images/search

Only one image may be sent per request. The following image content types are supported Cat API free:

  • image/jpeg
  • image/png
  • image/gif
  • image/tiff

The response is an Image object within a data envelope. Example response TheCatAPI:

[
{
"id": "MTY1ODc5MA",
"url":"https://cdn2.thecatapi.com/images/MTY1ODc5MA.png",
"width": 638,
"height": 431
}
]

How To Use Random Cat Picture API

PHP

<?php

$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.thecatapi.com/v1/images/search",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

JavaScript

const options = {method: 'GET'};

fetch('https://api.thecatapi.com/v1/images/search', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

Python

import requests

url = "https://api.thecatapi.com/v1/images/search"

response = requests.request("GET", url)

print(response.text)

For More Detail – https://docs.thecatapi.com/

API | Random Doge Image Generator API

Random doge Image Generator API is a free API that you can do it anywhere for free, this API works on GET requests. If you request, you will get JSON output in response, which you can use in your project. It is straightforward, you can use it in an easy way in languages like Javascript, Php, Python, etc. Javascript random dog image API,

How To Use Random Doge Image API

Random Doge Photo Generator API EndPoint

GET https://random.dog/woof.json

Random dog picture generator API is very easy to use, you will get an endpoint, and simply you have to make a GET request on it.

Only one image may be sent per request. The following image content types are supported Dog API free:

  • image/jpeg
  • image/png
  • image/gif
  • image/tiff

Animated gifs are supported. Use your power for good.

The response is an Image object within a data envelope. Example response The Dog API:

{
"fileSizeBytes": 122289,
"url": "https://random.dog/6d07c332-b2b3-418e-a3ab-bb189e4bb899.jpg"
}

How To Use Random Dog Image API

For PHP

<?php

$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://random.dog/woof.json",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

JavaScript

const options = {method: 'GET'};

fetch('https://random.dog/woof.json', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

Python

import requests

url = "https://random.dog/woof.json"

response = requests.request("GET", url)

print(response.text)

Stylish Working Calculator using HTML CSS & JavaScript

Hello how are you You have brought a Stylish Working Calculator using HTML CSS & JavaScript for you today, which is absolutely free, this code has been provided by Hi.Coders. Which uploads many other codes for free. If you want, you can order some custom build codes or websites by contacting them. Contact Us

This calculator app/website is very well designed. Which is also easy to do. And you can do it for yourself or you can help the visitor to do it by including it in your tools website. And AdSense can either earn money from any other ADS network

You can do this like a tools website. This means that you can earn money by creating multiple tools websites. Here you will find codes of many tools which will be free and some will be paid. Mostly you will get to see free tools, then you can create a tools website and earn money.

If you want to make multiple tools website then you may have to do a lot of hard work because the HTML codes you will get here will not match with your themes, then you may have to change the class id of all, if the same class id will remain then your There may be a design change or some other design show.

Stylish Working Calculator using HTML CSS & JavaScript Source Code

This calculator is divided into 3 files, which reside in every tool code or in every website which is HTML, CSS, and javascript, here you will get to see all these files and you can put them on your website either in a separate one. You can make a page from it and put it in it.

First of all, you will need an HTML file, which you will find its code below, if you are creating a new page, then create a file by its name and in the last .HTML extension should come like index.html similarly calc.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <section id="main">
      <div id="calculator">
        <div id="display">
          <span class="result"></span>
          <span class="type">0</span>
        </div>
        <div class="cal-pad">
          <div class="row-con">
            <div class="itemAC dark" title="Clear All">AC</div>
            <div class="item-del dark" title="Del">&#8882;</div>
            <div class="item/ dark num">/</div>
            <div class="itemX dark num">*</div>
            <div class="item7 num">7</div>
            <div class="item8 num">8</div>
            <div class="item9 num">9</div>
            <div class="item- dark num">-</div>
            <div class="item4 num">4</div>
            <div class="item5 num">5</div>
            <div class="item6 num">6</div>
            <div class="item+ dark num">+</div>
            <div class="item1 num">1</div>
            <div class="item2 num">2</div>
            <div class="item3 num">3</div>
            <div class="item0 num">00</div>
            <div class="item0 num">0</div>
            <div class="item-dot num">.</div>
            <div class="item-eq">=</div>
          </div>
        </div>
      </div>
    </section>
    <script src="./main.js"></script>
  </body>
</html>

Second file you have to create for styling which will be css file then you have to create a new file named style.css and paste the following code in that file

@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono";
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

body {
  margin: 0;
  font-family: "Share Tech Mono", "Segoe UI", Tahoma, Geneva, Verdana,
    sans-serif;
  overflow: hidden;
  background-color: #413f42;
}
a {
  text-decoration: none;
  color: rgb(66, 107, 255);
}
#main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}
#calculator {
  width: 23rem;
  background-color: #2b2b2b;
  box-shadow: 0 0 24px 10px rgba(0, 0, 0, 0.3);
}
#display {
  width: 100%;
  min-height: 6rem;
  overflow-wrap: break-word;
  font-family: "poppins";
  background-color: rgb(24 24 24);
  text-align: right;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
  box-sizing: border-box;
  position: relative;
}
.row-con {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
}
.row-con > div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(24, 24, 24);
  color: #fff;
  font-weight: bold;
  border: 0.5px solid #333;
  cursor: pointer;
  font-size: 1.4rem;
}
.row-con > div:hover {
  background-color: #444444;
  border: 0.5px solid rgb(109, 109, 109);
}
.row-con > div:active {
  transform: scale(0.9);
}
.cal-pad {
  height: 25rem;
}
.item-eq {
  background-color: #f5672c !important;
  font-size: 1.8rem;
  font-weight: bolder;
  grid-area: 4/4/6/4;
}
.item-eq:hover {
  background-color: #f57945 !important;
}
.dark {
  background-color: rgb(37, 37, 37) !important;
}
.dark:hover {
  background-color: rgb(58, 58, 58) !important;
}
.dark {
  font-family: digital;
}
span.type {
  font-size: 3rem;
  position: absolute;
  right: 5px;
  top: 30px;
  transition: all 0.2s;
}

.active {
  top: 0px !important;
}

span.result {
  font-size: 1.4rem;
  display: block;
}
.itemAC {
  background-color: rgb(172, 58, 58) !important;
  font-family: "Share Tech Mono" !important;
  font-weight: normal !important;
}
.itemAC:hover {
  background-color: rgb(134, 65, 65) !important;
}

@media (max-width: 400px) {
  #calculator {
    width: 20rem;
  }
  .cal-pad {
    height: 22rem;
  }
}
@media (max-width: 300px) {
  #calculator {
    width: 15rem;
  }
  .cal-pad {
    height: 18rem;
  }
}

After creating these two files, Stylish Working Calculator tools will be ready, you will need JavaScript to make them work, then you should create another file named main.js, remember that there should be no change in the name because this file is in index.html. will be included

const nums = document.querySelectorAll(".num");
const typed = document.querySelector(".type");
const result = document.querySelector(".result");

let val = "0";

nums.forEach((num) => {
  num.addEventListener("click", (e) => {
    typed.classList.remove("active");
    let char = e.target.innerText;
    if (val === "0" && !char.match(/[*+/.-]/gi)) {
      val = char;
    } else {
      val += char;
    }

    if (val.match(/[0-9]+[+-\/*][+-\/*]+/gi)) {
      const operator = val[val.length - 1];
      val = val.substring(0, val.length - 2) + operator;
    }

    typed.innerText = val.replace(/\*/g, "×").replace(/\//g, "÷");
    if (!val.match(/[0-9]+[+-\/*]$/gi)) {
      try {
        result.innerText = eval(val);
      } catch (error) {
        invalidExpression();
      }
    }
  });
});

document.querySelector(".itemAC").addEventListener("click", () => {
  typed.classList.remove("active");
  typed.innerText = "0";
  result.innerText = "";
  val = "0";
});

document.querySelector(".item-del").addEventListener("click", () => {
  typed.classList.remove("active");
  val = val.substring(0, val.length - 1);
  if (val) {
    typed.innerText = val;
    if (!val.match(/[0-9]+[+-\/*]$/gi)) {
      try {
        result.innerText = eval(val);
      } catch (error) {
        invalidExpression();
      }
    } else {
      result.innerText = "";
    }
  } else {
    typed.innerText = "0";
    result.innerText = "";
  }
});

document.querySelector(".item-eq").addEventListener("click", () => {
  try {
    val = eval(val).toString();
    typed.classList.add("active");
    typed.innerText = val;
    result.innerText = "";
  } catch (error) {
    invalidExpression();
  }
});

function invalidExpression() {
  typed.innerText = "0";
  result.innerText = "Invalid Expression";
  val = "0";
}

Creating all these files will make your Stylish Working Calculator tools ready. Now you can do it if you are facing any problem. You can download the tools code by copy-pasting the code or else from the download button given below.

[adinserter block=”10″]

Stylish Circular Progress bar using html css & javascript

Hello readers, how are you, you must have seen many loading times, there are many types. Which enhances the beauty of your website. Like when a visitor comes to your site, he gets to see something great, it is the effort of all of us website owners. As you see us, we also bring some numbered codes for you. Like what we have brought for you today. Stylish Circular Progress bar which is made up of HTML CSS and javascript. It’s totally free. We have taken this code from hi.coders. Which we got from an Instagram post. We have published the code here without asking them. we respond to them.

We also call the loader a preloader, which shows some elements like you are giving a download link, either a file is uploaded or some other process is going on there, but we show this loading process bar. gets it done

This process bar will only be a process, you will have to run the next function according to you. It is very easy, if you have a little bit of JavaScript knowledge then you can do it easily.

This loader rotates 360 degrees clockwise. During this time, its color changes to orange and yellow while roaming. This means that when it is rotated 90 degrees its color changes from yellow to orange and when it rotates 180 degrees its color changes to orange and when it rotates 360 degrees its color changes completely to orange goes. done now.

You might like this:

Stylish Circular Progress bar using HTML CSS & javascript Source Code

To run this code, you will have to create some files, which is to create the first file index.html. If you want to do any pre-made file, then you can do that too, but keep one thing in mind the class of this loading process bar and any other class which is already on your website, then you should change it or else. it won’t work

First of all, you have to create an index.html file or add in anyone then add the below code

<!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>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="loader">
        <canvas id="canvas"></canvas>
        <h2 class="percent"></h2>
      </div>
      <p>of <strong>720</strong> customers</p>
    </div>
    <script src="main.js"></script>
  </body>
</html>

After this file is created, you will have to add a css file for styling, which will give you the code below. Which you need to name with style.css

body {
  margin: 0;
  font-family: "poppins", Arial, Helvetica, sans-serif;
  background-color: #141526;
}
.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

canvas {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.percent {
  position: absolute;
  font-size: 2rem;
  color: #fff;
}

p {
  color: #acadc9;
}

And after all the styles and structures are ready, you will need JavaScript to make it work properly, so you will have to create a main.js file, after it is created, add this code to it

const canvas = document.querySelector("#canvas");
const percent = document.querySelector(".percent");

const fullCircle = Math.PI * 2;
let completed = 0;
let val = 100;
// function promptInput() {
//   val = prompt("Enter percent value.");
//   val = parseInt(val);
//   if (val > 100 || val < 1) {
//     alert("Invalid input. Only 1 - 100 value is allowed");
//     promptInput();
//   }
// }
// promptInput();
let interval = setInterval(() => {
  completed++;
  if (completed <= val) {
    createCircle((completed / 100) * fullCircle);
  } else {
    clearInterval(interval);
    console.log("interval cleared");
  }
}, 30);

function createCircle(radian) {
  canvas.height = 230;
  canvas.width = 230;

  const ctx = canvas.getContext("2d");

  ctx.beginPath();
  ctx.arc(115, 115, 90, 0, Math.PI * 2, false);
  ctx.strokeStyle = "#090912";
  ctx.lineWidth = 30;
  ctx.stroke();

  ctx.beginPath();
  var gradient = ctx.createLinearGradient(0, 0, 230, 230);
  gradient.addColorStop(0, "#ff0000");
  gradient.addColorStop(0.5, "#ff7300");
  gradient.addColorStop(1, "#fff300");
  ctx.arc(115, 115, 90, 0, radian, false);
  ctx.strokeStyle = gradient;
  ctx.lineWidth = 30;
  ctx.stroke();
  percent.innerHTML = completed + "%";
}

After applying all these codes, your process bar will work properly, if you are facing any problem then you can download this entire code which you will get to see the download button below.

[adinserter block=”10″]

Best 10 Logo Maker Rest API | TextPro.me API

Hello how are you In the first post, we told you how you can use the endpoint of the TextPro API and generate a logo for yourself. Then you can create a Telegram bot and the people using it can make some payment or join the channel member, or make a referral and earn Telegram bot and get many users to get promoted there.

If you do not like the logo design that you saw earlier, then below are many other designs that you will like.

1. Sci text effect logo maker API

EndPoint:- text.prgujju.com/api/5?theme=sci&key=yourapikey&text=yourtext

2. Glue text effect logo maker API

EndPoint:- text.prgujju.com/api/10?theme=glue&key=yourapikey&text=yourtext

3. Brush text effect logo maker API

EndPoint:- text.prgujju.com/api/9?theme=brush&key=yourapikey&text=yourtext

4. Thunder text effect logo maker API

EndPoint:- text.prgujju.com/api/7?theme=thun&key=yourapikey&text=yourtext

5. Transformers text effect logo maker API

EndPoint:- text.prgujju.com/api/7?theme=trans&key=yourapikey&text=yourtext

6. Metalic text effect logo maker API

EndPoint:- text.prgujju.com/api/6?theme=metalic&key=yourapikey&text=yourtext

7. Pencil text effect logo maker API

EndPoint:- text.prgujju.com/api/4?theme=pen&key=yourapikey&text=yourtext

8. Sea text effect logo maker API

EndPoint:- text.prgujju.com/api/4?theme=sea&key=yourapikey&text=yourtext

9. Christmas text effect logo maker API

EndPoint:- text.prgujju.com/api/4?theme=chris&key=yourapikey&text=yourtext

10. Batman text effect logo maker API

EndPoint:- text.prgujju.com/api/4?theme=chris&key=yourapikey&text=yourtext

How to Use logo maker API

The API makes it very easy to do that. But the problem is that you will need an API to do this, which you will find in our Telegram bot. After getting the API, Topup will have to be done to send the API request. Which you can do with the help of the Telegram bot.