Fayaz Ahmed fayazara

⭐

Writing Code

Product Developer

fayazara / index.html

Created November 13, 2019 07:18

Vuejs Async/Await Vuejs Example

	<!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>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

fayazara / params.js

Created November 13, 2019 07:27

Get Query parameter from Current URL using vanilla.js

	let urlParams = new URLSearchParams(window.location.search.substring(1));
	let value = urlParams.get("query");

	/*

	Example URL - https://example.com?name=John

	console.log(urlParams.get("name"));
	"John will be printed in log"

fayazara / Indian-phone-number-regex.txt

Created January 10, 2020 05:58

Regex for validating Indian phone numbers - Without starting with 0 & 10 digits

^[1-9][0-9]{9}$

fayazara / tailwind.config.js

Created April 18, 2020 07:23

Tailwind config for Darkmode & Nuxt

	module.exports = {
	theme: {
	darkSelector: '.dark-mode',
	},
	variants: {
	backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', 'hover', 'responsive'],
	borderColor: ['dark', 'dark-focus', 'dark-focus-within', 'hover', 'responsive'],
	textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'responsive']
	},
	plugins: [

fayazara / now.json

Created April 20, 2020 18:16

Zeit config for hosting a Nuxt SSR app

fayazara / rzp.js

Created April 21, 2020 09:46

Make Payments with Razorpay

	order() {
	const rzp_options = {
	key: "YOUR_RAZORPAY_KEY",
	amount: this.product.price * 100,
	name: "The Bollywood Store",
	description: this.product.title,
	handler: function(response) {
	alert(`Payment Succesful ${response.razorpay_payment_id}`)
	},
	modal: {

fayazara / button.vue

Created April 21, 2020 17:44

Tailwind CSS Dark mode toggle

	<template>
	<button @click="toggle">Change Theme</button>
	</template>

	<script>
	export default {
	methods: {
	toggle() {
	this.$colorMode.preference =
	this.$colorMode.value == "light" ? "dark" : "light";

fayazara / gender.vue

Created April 24, 2020 04:31

Tailwind grids 2 columns

	<template>
	<section class="grid grid-cols-2 gap-4">
	<div class="rounded-md shadow-md bg-gray-800 h-48"></div>
	<div class="rounded-md shadow-md bg-gray-800 h-48"></div>
	</section>
	</template>

fayazara / gender.vue

Created April 24, 2020 04:33

Tailwind css grid with in action

	<template>
	<section class="grid grid-cols-2 gap-2 mb-6">
	<div class="rounded-md shadow-md bg-gray-800 p-4 w-full">
	<svg
	class="w-16 h-16 mx-auto"
	fill="currentColor"
	stroke="currentColor"
	viewBox="0 0 384 384"
	>
	<path

fayazara / height.vue

Created April 24, 2020 04:38

Height component with vue.js

	<template>
	<section class="rounded-md shadow-md bg-gray-800 p-4 text-center">
	<p>HEIGHT</p>
	<p class="text-5xl font-bold">
	{{ height }}<small class="text-sm">cm</small>
	</p>
	<input
	type="range"
	min="120"
	max="215"