geekboots-team’s gists

geekboots-team / toogle-theme.tsx

Created June 23, 2025 15:35

React Component for Toogle Dark and Light theme

	"use client";

	import { useEffect, useState } from "react";

	const ToggleTheme = () => {
	const [theme, setTheme] = useState("light");

	useEffect(() => {
	const theme = localStorage.getItem("theme");
	if (theme) setTheme(theme);

geekboots-team / timer.tsx

Created June 23, 2025 15:30

React Component for Timer for a Ecommerce page

	"use client";

	import { useEffect, useState } from "react";

	interface TimeCount {
	days: string;
	hours: string;
	minutes: string;
	seconds: string;
	}

geekboots-team / css-shadow.html

Created September 9, 2024 15:58

Difference box-shadow and drop-shadow in CSS and how it is different?

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;

geekboots-team / otp-verification-system-in-js.html

Last active July 29, 2024 09:17

How to generate 6 digit OTP and verify using JavaScript only

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>OTP System</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
	href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap"

geekboots-team / animated-mobile-navigation.html

Created July 13, 2024 12:44

Create a attractive animated mobile navigation menu using HTML CSS and JavaScript

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Dropdown Menu</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
	href="https://fonts.googleapis.com/css2?family=Catamaran:wght@100..900&family=Dancing+Script:wght@400..700&display=swap"

geekboots-team / digital-clock-in-js.html

Created July 10, 2024 11:53

Simple digital clock in javascript

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Digital Clock</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
	href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap"

geekboots-team / animated-bell-notification.html

Created June 23, 2024 12:55

How to create animated bell notification using HTML CSS and SVG

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Animated Bell Icon</title>
	<style>
	* {
	margin: 0;
	padding: 0;

geekboots-team / creative-image-gallery.html

Created June 2, 2024 11:35

creative and stunning image gallery using JavaScript and CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Creative Gallery</title>
	<style>
	* {
	margin: 0;
	padding: 0;

geekboots-team / splash-image.html

Last active May 23, 2024 12:32

Create a Cool Splash Image Effect with HTML & CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Splash Image</title>
	<style>
	* {
	margin: 0;
	padding: 0;

geekboots-team / copy-char-file.java

Created March 21, 2024 16:35

Java programming example for coping character stream file from directory

	/* Character stream */
	import java.io.*;

	class copycharfile {
	public static void main(String args[]) throws IOException {
	FileReader freader;
	FileWriter fwrite;
	try {
	freader = new FileReader("charfile.txt");
	fwrite = new FileWriter("outfile.txt");

Geekboots geekboots-team