Skip to content

Instantly share code, notes, and snippets.

View fayazara's full-sized avatar
👨‍💻
Writing Code

Fayaz Ahmed fayazara

👨‍💻
Writing Code
311 followers · 15 following
View GitHub Profile
@fayazara
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
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
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
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
fayazara / now.json
Created April 20, 2020 18:16
Zeit config for hosting a Nuxt SSR app
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/now-builder",
"config": {
"serverFiles": [
"package.json"
]
@fayazara
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
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
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
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
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"