Skip to content

Instantly share code, notes, and snippets.

View fayazara's full-sized avatar
Writing Code

Fayaz Ahmed fayazara

Writing Code
View GitHub Profile
@fayazara
fayazara / ageweight.vue
Created April 24, 2020 04:59
Age and weight with tailwindcss
<template>
<section class="grid grid-cols-2 gap-2 mb-6 text-center">
<div class="rounded-md shadow-md bg-gray-800 p-4 w-full">
<p class="uppercase font-bold">Weight</p>
<p class="text-5xl font-bold">74</p>
<div class="flex items-center justify-around">
<button class="rounded-full bg-gray-900 h-12 w-12 text-2xl">-</button>
<button class="rounded-full bg-gray-900 h-12 w-12 text-2xl">+</button>
</div>
</div>
@fayazara
fayazara / navbar.vue
Created April 24, 2020 05:30
For my article about tailwind and vue
<template>
<div class="shadow-lg py-6 px-4 flex items-center">
<div>
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
class="w-8 h-8"
>
<path d="M4 6h16M4 12h16M4 18h7"></path>
</svg>
@fayazara
fayazara / gender.vue
Created April 25, 2020 06:34
Gender component with action for bmi calculator article
<template>
<section class="grid grid-cols-2 gap-2 mb-6">
<div
class="rounded-md bg-gray-800 p-4 w-full transition-all duration-300 cursor-pointer"
@click="toggle('male')"
:class="gender == 'male' ? null : 'opacity-25 shadow-md'"
>
<svg
class="w-16 h-16 mx-auto"
fill="#fff"
@fayazara
fayazara / height.vue
Created April 25, 2020 06:45
height vue emit value with a watcher
<template>
<section class="rounded-md shadow-md bg-gray-800 p-4 text-center mb-6">
<p class="font-bold">HEIGHT</p>
<p class="text-5xl font-bold">
{{ height }}<small class="text-sm">cm</small>
</p>
<input
type="range"
min="120"
max="215"
@fayazara
fayazara / calculate.js
Created April 25, 2020 08:01
Calculate the BMI
calculateBMI() {
var met = this.height / 100;
const bmi = this.weight / (met * met);
this.$router.push({
query: { bmi: bmi.toFixed(2) },
path: "/result"
});
}
@fayazara
fayazara / result.vue
Created April 25, 2020 08:35
Result page boilerplate for article
<template>
<div class="container mx-auto pt-6 px-4 max-w-lg">
<p class="text-4xl font-bold mb-4">Your Result</p>
<div class="rounded bg-gray-700 p-6 text-center">
<p class="text-green-400 font-bold uppercase">Normal</p>
<p class="text-6xl font-bold text">{{ $route.query.bmi }}</p>
<p class="text-gray-400 font-bold">Normal BMI Range</p>
<p>18.5 - 24.9</p>
<p>You have a normal body weight. Good Job!</p>
<button class="my-4 bg-gray-600 p-4 rounded w-full">SHARE</button>
@fayazara
fayazara / hello_world.js
Created May 8, 2020 10:48
This Gist is created with an API
console.log('Hello there')
@fayazara
fayazara / app.js
Last active May 13, 2020 10:16
Get Bitcoin price and send data to a telegram bot
const express = require("express");
const app = express();
const axios = require("axios");
app.get("/send-btc-price", async (request, response) => {
try {
const btc = await axios.get('https://api.binance.com/api/v3/ticker/price?symbol=BTCUSDT');
var str = `<b>Bitcoin Price</b>: $${parseInt(btc.data.price).toFixed(2)}`;
var telegram_url = encodeURI(
@fayazara
fayazara / app.js
Created May 14, 2020 16:51
Get Instagram Feed
const express = require("express");
const app = express();
const axios = require("axios");
const cors = require("cors");
app.use(cors());
app.get("/", async (_, res) => {
const api = `https://graph.instagram.com/me/media?fields=id,media_type,media_url,caption&access_token=${process.env.SECRET}`;
const { data } = await axios.get(api);
@fayazara
fayazara / app.js
Last active May 19, 2020 09:27
Get Cryptocurrency Prices from Binance
const express = require("express");
const app = express();
const axios = require("axios");
app.get("/", async (req, res) => {
let BTC = "https://api.binance.com/api/v3/ticker/price?symbol=BTCUSDT";
let ETH = "https://api.binance.com/api/v3/ticker/price?symbol=ETHUSDT";
let LTC = "https://api.binance.com/api/v3/ticker/price?symbol=LTCUSDT";
let XRP = "https://api.binance.com/api/v3/ticker/price?symbol=XRPUSDT";