Skip to content

aasisodiya/WebProjects

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WebProjects

Editor Visitors

Project URLs

Website Link Created Date Description
Createxion Home Page Link 4-March-2018
Email Footer Link 16-December-2018
JavaScript Notes Link 16-December-2018
Todo List Link 16-December-2018
Todo List Simple Link 16-December-2018
Todo List UI Link 16-December-2018
QnA App Link 16-December-2018
Switch Game Link 16-December-2018
Secret Santa Link 16-December-2018
Smiley Slider Link 3-May-2020
Fancy Scroll Bar Link 20-May-2020
Light Saber Scroll Link 20-May-2020
Ripple Effect Link 20-May-2020
Calculator Link 21-May-2020
Vehicle Scroll Link 22-May-2020
Isometric Page Link 22-May-2020
Neumorphic Buttons Link 22-May-2020
Sun And Moon Link 22-May-2020
Menu Template Link 24-May-2020
Masonry Grid Link 24-May-2020
SVG Line Animation Link 6-June-2020
Text Animation Link 13-June-2020
Projectile Motion Link 27-June-2020
Digital Clock Link 9-July-2020
Quiz Not Public 26-August-2020
Bookmarks Link 4-January-2021
Parallax Link 19-January-2021
Mood Year Link 6-March-2021
Animated Logo Link 2016
Scroll Activated CSS Link 2016
Simple Transition Animation Link 2016
Backgrounds Link 10-April-2021
F1 Response Link 28-March-2021
Defined Colors Link 31-March-2021
Gradient Play Link 4-April-2021
Backdrop Example Link 10-April-2021
Vertically Center Element Link 10-April-2021
Vertically Divided Element Link 2-March-2021
Detect If User Has Visited/Seen An Element Link 7-March-2021
Target Vs Current Target Link 28-February-2021
AR Link 2019
V1 Link 2016
V2 Link 2017
V3 Link 2019
VR Link 2016
Chess Clock Link 18-April-2021 A Digital Chess Clock
Password Generator Link 30-April-2021 Password Generator Tool
Cursor Follower Link 05-May-2021 Custom Cursor, Target Cursor, Cursor Follower
Torch Cursor Link 06-May-2021 Torch Cursor that helps you read the content in dark
Match Block Link 11-May-2021 Matching Block Puzzle
Twitter Post Generator Link 18-May-2021 Template to generate a Twitter post
Monty Hall Problem Link 28-May-2021 Monty Hall Problem Game
PIPBOY Template Animation Link 02-June-2021 PIPBOY Animation Created using CSS and HTML - Screen Buffer Animation
Confetti Animation Link 03-June-2021 Confetti Animation Created using JS, CSS, HTML
Touch Race Link 09-June-2021 Fastest one to tap the screen wins!
Loader Screens Link 12-June-2021 Pre Loader Screens
Merry Go Round Animation Link 13-June-2021 Merry Go Round Animation
3D CSS Link 14-June-2021 3D Animation Using CSS Only
Animated Clock Link 14-June-2021 Animated Clock (inspired from some random 9gag post)
My Mobile Model in CSS Link 19-June-2021 Model of my mobile - Moto G5S+ using CSS
Cyberpunk Glitch Animation Link 20-June-2021 Cyberpunk Glitch Animation
Cyberpunk Assets Link 21-June-2021 Cyberpunk Assets
Cat Animation Link 25-June-2021 Cat Animation inspired from Boom Slingers Mobile Game
Signature Pad Link 28-June-2021 Signature Canvas To Draw and Save Your Signature
Game of Bulls and Cows Link 02-July-2021 A classic game of Bulls And Cows
Drawing Board Link 06-July-2021 A drawing board code from Link
Magnifier Link 08-July-2021 A basic magnifier
Reverse Countdown Animation Link 09-July-2021 Reverse Countdown Animation
Memory Game Link 11-July-2021 Memory Game - Player at start is shown some numbers in random order. Then the number disappears and user is required to click the containers in same ascending order. Fastest wins!
Light Saber Animation Link 17-July-2021 Light Saber Animation
CSS Clock Animation Link 18-July-2021 CSS Clock Animation
Good&Bad Animation Link 21-July-2021 Inspired from Music Video
Cool Fonts Link 23-July-2021 Collection of all fonts I have used
Touch Initiated Animation Link 25-July-2021 Animation plays while you touch (or keep touching) the screen, and stops as soon as you stop touching
Polygon Clip Path Generator Link 31-July-2021 Polygon Clip Path Generator helps you generate polygon value for using with clip-path css property
Neon Animation Link 06-Aug-2021 Neon Animation
Tilt Animation Link 12-Aug-2021 Tilt Animation
Glass UI Example Link 14-Aug-2021 Glass UI Example
Webcam Integration in Background Link 15-Aug-2021 Webcam Integration in Background
3D Website using Spline Design Link 16-Aug-2021 3D Website using Spline Design
Border Generator Link 18-Aug-2021 Border Generator App helps to generate CSS code for border
Skull Animation Link 21-August-2021 Skull Animation
New Year Countdown Link 22-August-2021 New Year Countdown
Login Page UI Sample Link 23-August-2021 UI Template for a Sample Login Page inspired from many other Online References
Blob Animation Link 28-August-2021 Blob Animation
Curved Text using JS and CSS Link 30-August-2021 Curved Text using JS and CSS
Reveal Card using JS and CSS Link 30-August-2021 Reveal Card using JS and CSS
ThreeJS Basic Example Link 13-September-2021 ThreeJS Basic Example
Rain using ThreeJS Link 14-September-2021 Rain using ThreeJS
Text Background using CSS Link 16-September-2021 Text Background using CSS
ThreeJs Getting Started 1st Example Link 20-September-2021 ThreeJs Getting Started Example
ThreeJs Getting Started 2nd Example Link 21-September-2021 ThreeJs Getting Started Example
ThreeJs Getting Started 3rd Example Link 21-September-2021 ThreeJs Getting Started Example
Getting Started With Model Viewer Link 24-September-2021 Getting Started With Model Viewer
Pie Chart Background using CSS Link 25-August-2021 Pie Chart Background using CSS
Checkers Background using CSS Link 25-August-2021 Checkers Background using CSS

Notes

Topic Notes Link Created Date Description
Index Link 20-May-2021
Smiley Slider Link 3-May-2020
Animations Index Link 11-March-2021
Notes Index Link 20-May-2020
Colors Link 2-April-2021
Notes CSS Link 10-April-2021
CSS Layouts Link 2-March-2021
Vertically Center Element Link 10-April-2021
Vertically Divided Element Link 2-March-2021
JS Jquery Notes Link 20-May-2020
Creating Copy Of An Object Link 5-March-2021
Detect If User Has Visited/Seen An Element Link 7-March-2021
Error & Solution Link 3-March-2021
Practical Notes Link 6-April-2021
Sort By Numeric Property Link 6-April-2021
Change Event Vs Input Event Link 6-April-2021
FullScreen Function Link 6-April-2021
Popup Message Link 6-April-2021
Swap Key-Value in JSON Link 6-April-2021
Sort Object By Keys Link 6-April-2021
Copy Content To Clipboard Link 6-April-2021
JS Dates Link 27-February-2021
on, off, one, click Link 27-February-2021
Target Vs Current Target Link 28-February-2021
Clean Code Link 15-April-2021 Short and Effective way of writing code
Swapping Values In Two Variables Link 15-April-2021 Short and Effective way to Swapping Values In Two Variables
Convert String to Number Link 15-April-2021 Short and Effective way to Convert String to Number
Substitute A Variable Inside A String Link 15-April-2021 Short and Effective way to Substitute A Variable Inside A String
Optional Chaining Link 16-April-2021 Short and Effective way to extract subproperty of data that too safely
Creating Copy Of An Array Link 16-April-2021 Correct way to Creating Copy Of An Array
Split A String Into An Array Link 16-April-2021 Short and Effective way to Split A String Into An Array
Remove Duplicate Values From An Array Link 16-April-2021 Short and Effective way to Remove Duplicate Values From An Array
Single Line If-Else Condition Check Link 16-April-2021 Short way for using If-Else Condition Check
Well Formatted JSON Link 19-April-2021 JSON with proper indentation and format
Orientation Based Styling Link 21-April-2021 Orientation Based Styling, Screen Rotation, Landscape, Portrait
scroll-behavior Property for Smooth Scroll Link 22-April-2021 Smooth Scroll to an Element using CSS
Scroll Reveal Link 23-April-2021 CSS Reveal Animation based on scroll using Jquery
Device Data from Navigator That Browser Can Share Link 24-April-2021 Device data from navigator that browser can share
Detect Device Type Link 24-April-2021 Detect the device type i.e wether it is Android, iPhone or iPad.
devicePixelRatio Property Link 24-April-2021 Device Pixel Ratio
Detect Orientation or Orientation Change Link 24-April-2021 Detect the device orientation
Height & Width Link 24-April-2021 Height & Width
Convert Seconds To hh:mm:ss Format Link 24-April-2021 JS Code to Convert Seconds To hh:mm:ss Format
window, document And screen Properties Link 25-April-2021 window, document And screen Related Properties
white-space Property Link 25-April-2021 Sets how white space inside an element is handled
overflow-wrap Property Link 25-April-2021 Setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box
word-break Property Link 25-April-2021 Sets whether line breaks appear wherever the text would otherwise overflow its content box
hyphens Property Link 25-April-2021 How words should be hyphenated when text wraps across multiple lines
transition Property Link 25-April-2021 Apply animations to properties using transition
filter Property Link 26-April-2021 CSS property applies graphical effects like blur or color shift to an element
CSS Marquee Link 26-April-2021 CSS Marquee
animation-play-state Property Link 27-April-2021 Animation CSS Property
animation-delay Property Link 27-April-2021 Animation CSS Property
animation-iteration-count Property Link 27-April-2021 Animation CSS Property
animation-fill-mode Property Link 27-April-2021 Animation CSS Property
Rotation Animation on Scroll Link 27-April-2021 Rotation Animation on Scroll
Translation Animation on Scroll Link 27-April-2021 Translation Animation on Scroll
position Property Link 28-April-2021 position Property
Create and Download File on UI Link 03-May-2021 Create and Download File on UI
Using display-mode in media rule Link 08-May-2021 Using display-mode to Detect FullScreen Using CSS
Events Link 08-May-2021 Events List
Handle Touch Move / Cursor Move Event & event.changedTouches & event.touches Link 08-May-2021 Handle Touch Move / Cursor Move Event and extract the data using
Count Touch Points Using event.touches.length Link 10-May-2021 Count Touch Points Using event.touches.length
Check If Object Is Empty using jQuery.isEmptyObject() Link 16-May-2021 Check If Object Is Empty using jQuery.isEmptyObject()
Shuffle an Array / Randomize an Array Link 16-May-2021 Shuffle an Array / Randomize an Array
@import Rule Link 16-May-2021 Using @import Rule to import another css file in given css file and also for importing google fonts
HTML Notes Link 17-May-2021
<meta> tag: The metadata element Link 17-May-2021 <meta> tag: The metadata element
Standard metadata names Link 17-May-2021 Standard metadata names
Uncommon MetaData Names Link 17-May-2021 Uncommon MetaData Names
Values for the content of <meta name="robots"> Link 17-May-2021 Values for the content of <meta name="robots">
MetaData Viewport Link 17-May-2021 MetaData Viewport
Refresh A Page On Specific Interval Link 17-May-2021 Refresh A Page On Specific Interval
Redirect To A Page After Specific Interval Link 17-May-2021 Redirect To A Page After Specific Interval
Prevent Zoom on Your Website Link 17-May-2021 Prevent Zoom on Your Website
Robots.txt File Link 17-May-2021 Robots.txt File
color-scheme Property Link 17-May-2021 Using color-scheme to specify preference of colors
Upload Image to a static website without server Link 20-May-2021 Upload Image to a static website without server. Input Image Tag. FileReader() and URL.createObjectURL()
Making Website Text Content Editable Link 24-May-2021 Enable user to edit any text element of your website using contenteditable attribute
Spellcheck Attribute Link 25-May-2021 Enable website to perform spellcheck for editable element using spellcheck="true" attribute
Detect Hashtags(#) and Mentions(@) In input or textarea Link 25-May-2021 Detect Hashtags and Mentions(@) In input or textarea
White space issue with html2canvas and canvas2image Link 25-May-2021 Solutions for White Gap Issue Related To html2canvas or canvas2image
Using html2canvas and canvas2image to export a webpage element as an Image Link 26-May-2021 Using html2canvas and canvas2image to export a webpage element as an Image
pointer-events Property Link 27-May-2021 CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events
Sample Button Link 31-May-2021 Sample Button Code you can directly copy-paste
inset Property Link 06-June-2021 Set the position on all four sides with one CSS property. Property top, right, bottom, and left all together can be replaced with one CSS property i.e inset
Using Media Query to set dark/light theme Link 07-June-2021 Using Media query i.e. @media (prefers-color-scheme: dark/light) for setting website theme based on system theme
CSS Units Link 08-June-2021 Notes on CSS Units like vh,vw,ch,em,rem,%
More Ways to Vertically Center An Element Link 17-June-2021 Vertically center using display as table, grid and flex or position as relative & absolute
Perspective CSS Link 18-June-2021 Implementing Perspective in CSS using perspective and perspective-origin
::first-letter and ::first-line Selector Link 23-June-2021 Styling using ::first-letter and ::first-line Selector
Styling the Bullets in Lists using ::marker Link 23-June-2021 Styling the Bullets in Lists using ::marker
Using SVG for bullets in List Link 23-June-2021 Using SVG for bullets in List
mix-blend-mode and isolation Property Link 24-June-2021 mix-blend-mode and isolation Property Example
Signature Pad Link 28-June-2021 Signature Canvas To Draw and Save Your Signature
:hover or :active doesn't work in IPhone's Safari Link 29-June-2021 Solution is to use ontouchstart attribute with the tag
CSS Interaction Media Queries Link 30-June-2021 CSS Interaction Media Queries like hover and pointer
currentColor Keyword Link 01-July-2021 Using currentColor Keyword, to set value same as element's color property
Custom Cursor For Your Website Link 04-July-2021 Using Custom Cursor For Your Website using cursor property
The Open Graph Protocol Link 05-July-2021 The Open Graph Protocol
Prevent Div Selection on Android Link 10-July-2021 Prevent Div Selection on Android using CSS
Prevent Screen Reader From Reading an Element Link 11-July-2021 Prevent Screen Reader From Reading an Element using aria-hidden="true"
Scroll With Padding Using scroll-padding-top Link 14-July-2021 Scroll With Padding Using scroll-padding-top
border vs outline Link 15-July-2021 border vs outline
Reading a File on UI Link 20-July-2021 Reading a File on UI
Implementing Drag and Drop Link 20-July-2021 Implementing Drag and Drop
Using Shadow with Clip Path Link 25-July-2021 Using Shadow With Clip Path
columns Property in CSS Link 26-July-2021 columns Property in CSS
quotes CSS Property Link 27-July-2021 quotes CSS Property
content CSS Property Link 28-July-2021 content CSS Property
Draggable Element using Jquery Link 30-July-2021 Making an element draggable using Jquery
Data Attributes Link 03-August-2021 Data Attributes in HTML i.e data-* Attributes
Global Attributes Link 04-August-2021 Global Attributes List
Random Image Using picsum.photos Link 05-August-2021 Random Image Using picsum.photos
Detect Device Orientation Link 10-August-2021 Detecting Device Orientation / Motion
aspect-ratio CSS Property Link 20-August-2021 aspect-ratio CSS Property sets a preferred aspect ratio for the box
Useful Imports Link 24-August-2021 List of useful imports
Google Fonts Material Icons Link 24-August-2021 Google Fonts Material Icons Imports and Details
ARIA Attributes Link 25-August-2021 ARIA Attributes are used for accessibilities
Intersection Observer API Link 27-August-2021 Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. Basically used with scroll.
<fieldset> Element Link 29-August-2021 <fieldset> Element
<datalist> Element Link 29-August-2021 <datalist> Element: The HTML Data List element used with input list
<progress> Element Link 29-August-2021 <progress>: The Progress Indicator element
<meter> Element Link 29-August-2021 <meter>: The HTML Meter element
<template> Element Link 29-August-2021 <template>: The Content Template element
Set Text Inside a Polygon Using shape-outside Property Link 31-August-2021 Set Text Inside a Polygon Using shape-outside Property
How to import Jquery directly into your script.js file? Link 03-September-2021 How to import Jquery directly into your script.js file / How to import jQuery using ES6 Syntax OR solution for Uncaught SyntaxError: Cannot use import statement outside a module
PokeAPI Example Link 04-September-2021 Randomly getting Pokemon using PokeAPI
API Call From Website Link 05-September-2021 API Call From Website and all details
direction Property Link 08-September-2021 direction Property
WebXR Notes Link 09-September-2021 WebXR Notes
$.get() Function Link 22-September-2021 Way to get data / website data using $.get()
Fuzzing Testing Link 23-October-2021 Fuzzing Testing
Kevin Powell's Challenge Link 1-November-2021 Kevin Powell's Challenge - Link
writing-mode CSS Property Link 7-Nov-2021 writing-mode CSS Property
Generators In JS Link 18-Aug-2022 Generators In JS, solution for counter problem
RegExp In JS Link 19-Aug-2022 RegExp In JS

Date Topic
2022-08-28 A-Frame Notes
2022-09-03 Google API Integration Testing
2022-09-17 List Styling Using CSS
2022-11-15 Content Editable Style Tag
2022-11-18 Decide Favicons Based on Browser Theme
2022-12-12 Lazy Loading using loading attribute
2023-01-31 HTML Tags

Date Project
2022-09-18 Game - SolveIt!
2022-10-08 Game - ClickIt!
2022-11-04 Cool Websites
2023-04-19 Countdown App From Countdown (2019) Movie