components/components.json at main · designftw-2022/components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
[
	{
		"name": "Carousel",
		"tag": "custom-carousel",
		"repo": "cameron4young/Carousel-Web-Component",
		"description": "Web Component that can be used to create a Carousel display on webpages, without any knowledge of JavaScript.",
		"image": "https://cameron4young.github.io/Carousel-Web-Component/carousel.png"
	},
	{
		"name":"Cool Tabs",
		"tag":"cool-tab",
		"repo": "itaylor24/cool-tabs",
		"description": "Cool tabs is a custom web component for creating selectable tabs. Selecting a tab displays its content",
		"image": "https://itaylor24.github.io/cool-tabs/cool-tabs-image.png"
	},
	{
		"name": "Speedy Counter",
		"tag": "speedy-counter-v1",
		"repo": "Tamara-Mitrovska/counter-web-component",
		"description": "A web component that takes a number as contents and displays a counter that counts up to that number with customizable speed and start value.",
		"image": "https://tamara-mitrovska.github.io/counter-web-component/media/screenshot.png"
	},
	{
		"name": "Chess position component",
		"tag": "chess-board",
		"repo": "camimgh/chess-position-component",
		"description": "Component that takes in a fen string and renders it as a static image of a chess board position.",
		"image": "https://camimgh.github.io/chess-position-component/images/chess-board-example.png"
  },
  {
		"name": "Password Input",
		"tag": "password-input",
		"repo": "kevintang2022/6s063-webcomponent_password-input",
		"description": "This is a custom element module for password inputs. It allows you to hide and show the password with a single click.",
		"image": "https://kevintang2022.github.io/6s063-webcomponent_password-input/docs/demo.jpg"
	},
	{
		"name": "Formula Plotter",
		"tag": "formula-plotter",
		"repo": "cwcrystal8/formula-plotter",
		"description": "A simple web component for plotting a single-variable formula on a graph with a resizable domain",
		"image": "https://crystalwang.me/formula-plotter/docs/formula-plotter.png"
	},
	{
		"name": "image-compare",
		"tag": "image-compare",
		"repo": "barishnamazov/image-compare",
		"description": "Simple, lightweight, and easy-to-use web component for comparing two images. You slide the slider to control which picture is shown more.",
		"image": "https://barishnamazov.github.io/image-compare/screenshot.png"
	},
	{
		"name": "Mermaid Previewer",
		"tag": "mermaid-preview",
		"repo": "iperez319/mermaid-js-component",
		"description": "An element that renders graphs written using Mermaid-js",
		"image": "https://iperez319.github.io/mermaid-js-component/demo.png"
	},
	{
		"name": "Currency Converter",
		"tag": "currency-converter",
		"repo": "maoivy/6s063-currency",
		"description": "A component that converts from one currency to another",
		"image:": "https://maoivy.github.io/currency-converter/screenshot.png"
	},
	{
		"name": "Popup Notification",
		"tag": "adhami-toast",
		"repo": "adhami3310/pop-up-notification",
		"description": "A web component for Pop-Up notifications",
		"image": "https://adhami.me/pop-up-notification/image.png"
	},
	{
		"name": "Flip-Card",
		"tag": "flip-card",
		"repo": "mchanphilly/flip-card",
		"description": "A component that allows for easy construction of flippable card-like elements",
		"image": "https://mchanphilly.github.io/flip-card/flip-icon.png"
	},
	{
		"name": "Nutrition Facts",
		"tag": "nutrition-facts",
		"repo": "yaroluchko/nutrition-facts",
		"description": "A component that allows you to quickly display main nutritional facts about a certain food",
		"image": "https://yaroluchko.github.io/nutrition-facts/example.png"
	}
]