├── .github ├── FUNDING.yml └── assets │ ├── radio.png │ ├── checkbox.png │ ├── dropdown.png │ ├── preview.gif │ ├── switch.png │ ├── expandable.png │ ├── hamburger.png │ ├── otp-filed.png │ ├── tag-input.png │ ├── contextmenu.png │ ├── drag-and-drop.png │ ├── ripple-button.png │ ├── slide-hover.png │ ├── slide-input.png │ ├── password-input.png │ └── shine-hover-effect.png ├── search-bar ├── preview.png ├── README.md ├── index.html └── style.css ├── contextmenu ├── README.md ├── main.js ├── style.css └── index.html ├── dropdown ├── README.md ├── index.html └── style.css ├── radio ├── README.md ├── index.html └── style.css ├── checkbox ├── README.md ├── index.html └── style.css ├── expandable ├── README.md ├── index.html └── style.css ├── hamburger ├── README.md ├── main.js ├── index.html └── style.css ├── otp-field ├── README.md ├── index.html ├── style.css └── main.js ├── switch ├── README.md ├── index.html └── style.css ├── tag-input-field ├── README.md ├── index.html ├── style.css └── main.js ├── slide-label-input ├── README.md ├── main.js ├── index.html └── style.css ├── password-input ├── README.md ├── index.html ├── style.css └── main.js ├── drag-and-drop-upload ├── README.md ├── index.html ├── main.js └── style.css ├── ripple-button ├── README.md ├── index.html └── style.css ├── slide-button ├── README.md ├── index.html └── style.css ├── shining-button ├── README.md ├── index.html └── style.css └── README.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: ["hicodersofficial"] 2 | -------------------------------------------------------------------------------- /search-bar/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/search-bar/preview.png -------------------------------------------------------------------------------- /.github/assets/radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/radio.png -------------------------------------------------------------------------------- /search-bar/README.md: -------------------------------------------------------------------------------- 1 | # Search Bar 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/gOKmWRG) 4 | 5 | ![](preview.png) 6 | -------------------------------------------------------------------------------- /.github/assets/checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/checkbox.png -------------------------------------------------------------------------------- /.github/assets/dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/dropdown.png -------------------------------------------------------------------------------- /.github/assets/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/preview.gif -------------------------------------------------------------------------------- /.github/assets/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/switch.png -------------------------------------------------------------------------------- /.github/assets/expandable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/expandable.png -------------------------------------------------------------------------------- /.github/assets/hamburger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/hamburger.png -------------------------------------------------------------------------------- /.github/assets/otp-filed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/otp-filed.png -------------------------------------------------------------------------------- /.github/assets/tag-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/tag-input.png -------------------------------------------------------------------------------- /.github/assets/contextmenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/contextmenu.png -------------------------------------------------------------------------------- /.github/assets/drag-and-drop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/drag-and-drop.png -------------------------------------------------------------------------------- /.github/assets/ripple-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/ripple-button.png -------------------------------------------------------------------------------- /.github/assets/slide-hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/slide-hover.png -------------------------------------------------------------------------------- /.github/assets/slide-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/slide-input.png -------------------------------------------------------------------------------- /.github/assets/password-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/password-input.png -------------------------------------------------------------------------------- /.github/assets/shine-hover-effect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicodersofficial/custom-html-css-js-widgets/HEAD/.github/assets/shine-hover-effect.png -------------------------------------------------------------------------------- /contextmenu/README.md: -------------------------------------------------------------------------------- 1 | # Context Menu 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/LYQQNrL) 4 | 5 | # Preview 6 | 7 | ![](../.github/assets/contextmenu.png) 8 | -------------------------------------------------------------------------------- /dropdown/README.md: -------------------------------------------------------------------------------- 1 | # Drag And Drop 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/OJQpbjj) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/dropdown.png) 8 | -------------------------------------------------------------------------------- /radio/README.md: -------------------------------------------------------------------------------- 1 | # Custom Radio Button 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/QWQLara) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/radio.png) 8 | -------------------------------------------------------------------------------- /checkbox/README.md: -------------------------------------------------------------------------------- 1 | # Custom Checkbox 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/MWQWrPG) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/checkbox.png) 8 | -------------------------------------------------------------------------------- /expandable/README.md: -------------------------------------------------------------------------------- 1 | # Expandable 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/bGLVQpY) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/expandable.png) 8 | -------------------------------------------------------------------------------- /hamburger/README.md: -------------------------------------------------------------------------------- 1 | # Custom Checkbox 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/PoQmBJR) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/hamburger.png) 8 | -------------------------------------------------------------------------------- /otp-field/README.md: -------------------------------------------------------------------------------- 1 | # OTP/PIN Field 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/oNEqJGO) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/otp-filed.png) 8 | -------------------------------------------------------------------------------- /switch/README.md: -------------------------------------------------------------------------------- 1 | # Custom HTML & CSS Switch 2 | 3 | ### [See Live](https://codepen.io/hicoders/pen/GRyVjVy) 4 | 5 | ## Screenshot 6 | 7 | ![](../.github/assets/switch.png) 8 | -------------------------------------------------------------------------------- /tag-input-field/README.md: -------------------------------------------------------------------------------- 1 | # Tag Input 2 | 3 | ### [See Live](https://codepen.io/hicoders/pen/abqVZKM) 4 | 5 | ## Screenshot 6 | 7 | ![](../.github/assets/tag-input.png) 8 | -------------------------------------------------------------------------------- /slide-label-input/README.md: -------------------------------------------------------------------------------- 1 | # Slide Input 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/xxYbyRN) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/slide-input.png) 8 | -------------------------------------------------------------------------------- /password-input/README.md: -------------------------------------------------------------------------------- 1 | # Password Input 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/wvmwzoE) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/password-input.png) 8 | -------------------------------------------------------------------------------- /drag-and-drop-upload/README.md: -------------------------------------------------------------------------------- 1 | # Drag And Drop 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/oNEYXZZ) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/drag-and-drop.png) 8 | -------------------------------------------------------------------------------- /ripple-button/README.md: -------------------------------------------------------------------------------- 1 | # Ripple Button Effect 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/MWQKPOo) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/ripple-button.png) 8 | -------------------------------------------------------------------------------- /slide-button/README.md: -------------------------------------------------------------------------------- 1 | # Slide Button Hover Effect 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/MWQzmgY) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/slide-hover.png) 8 | -------------------------------------------------------------------------------- /shining-button/README.md: -------------------------------------------------------------------------------- 1 | # Shine Hover Effect 2 | 3 | ## [See Live](https://codepen.io/hicoders/pen/mdXvGJy) 4 | 5 | # Preview 6 | 7 | ![Preview](../.github/assets/shine-hover-effect.png) 8 | -------------------------------------------------------------------------------- /hamburger/main.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.querySelector(".hamburger"); 2 | const layers = document.querySelectorAll(".hamburger span"); 3 | 4 | hamburger.addEventListener("click", (e) => { 5 | layers.forEach((layer) => layer.classList.toggle("active")); 6 | }); 7 | -------------------------------------------------------------------------------- /slide-label-input/main.js: -------------------------------------------------------------------------------- 1 | document.querySelectorAll(".text-input").forEach((element) => { 2 | element.addEventListener("blur", (event) => { 3 | if (event.target.value != "") { 4 | event.target.nextElementSibling.classList.add("filled"); 5 | } else { 6 | event.target.nextElementSibling.classList.remove("filled"); 7 | } 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /ripple-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ripple Button 9 | 10 | 11 |

Ripple Button

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /shining-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Shining Hover 9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /slide-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Slide Hover 9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Custom Switch

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /hamburger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hamburger Menu 9 | 10 | 11 |
12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /tag-input-field/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tag Input Field 9 | 10 | 11 |

Tags Input

12 |
13 | 14 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /hamburger/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | place-items: center; 4 | height: 100vh; 5 | background: #1f2023; 6 | } 7 | 8 | .hamburger { 9 | width: 40px; 10 | cursor: pointer; 11 | } 12 | 13 | .hamburger span { 14 | width: 100%; 15 | height: 3px; 16 | display: block; 17 | background: rgb(255, 255, 255); 18 | transition: all 0.2s; 19 | border-radius: 20px; 20 | } 21 | 22 | .stuffing { 23 | margin: 10px 0; 24 | } 25 | 26 | .top-bun.active { 27 | transform: rotate(-45deg) translateX(-9.5px); 28 | width: 50%; 29 | } 30 | .stuffing.active { 31 | width: 80%; 32 | transform: translateX(-3px); 33 | } 34 | 35 | .bottom-bun.active { 36 | transform: rotate(45deg) translateX(-9.5px); 37 | width: 50%; 38 | } 39 | -------------------------------------------------------------------------------- /otp-field/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | OTP Field 9 | 10 | 11 |

Enter OTP

12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /search-bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Search Bar 13 | 14 | 15 |
16 |
17 | 18 |
19 | 20 | 21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /slide-label-input/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Slide Label Input 9 | 10 | 11 |
12 |
13 | 21 | 22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /otp-field/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: "Poppins", sans-serif; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | flex-direction: column; 8 | background: #282a36; 9 | height: 100vh; 10 | color: #fff; 11 | } 12 | 13 | .otp-field { 14 | display: flex; 15 | } 16 | 17 | .otp-field input { 18 | width: 24px; 19 | font-size: 32px; 20 | padding: 10px; 21 | text-align: center; 22 | border-radius: 5px; 23 | margin: 2px; 24 | border: 2px solid #55525c; 25 | background: #21232d; 26 | font-weight: bold; 27 | color: #fff; 28 | outline: none; 29 | transition: all 0.1s; 30 | } 31 | 32 | .otp-field input:focus { 33 | border: 2px solid #a527ff; 34 | box-shadow: 0 0 2px 2px #a527ff6a; 35 | } 36 | 37 | .disabled { 38 | opacity: 0.5; 39 | } 40 | 41 | .space { 42 | margin-right: 1rem !important; 43 | } 44 | -------------------------------------------------------------------------------- /radio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Radio Button 9 | 10 | 11 |

Radio Buttons

12 |
13 |
14 | Male 15 | 16 | 17 |
18 |
19 | Female 20 | 21 | 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /ripple-button/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: "Poppins", Arial, Helvetica, sans-serif; 4 | background: #191724; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | color: #fff; 10 | flex-direction: column; 11 | } 12 | 13 | .btn { 14 | border: none; 15 | padding: 1rem 3rem; 16 | cursor: pointer; 17 | border-radius: 100px; 18 | font-size: 18px; 19 | background: #7e4ccb; 20 | color: #fff; 21 | position: relative; 22 | } 23 | 24 | .btn::before { 25 | content: ""; 26 | position: absolute; 27 | inset: 0; 28 | transform: scaleX(0); 29 | width: 100%; 30 | height: 100%; 31 | background: #ffffff55; 32 | border-radius: 100px; 33 | } 34 | 35 | .btn:active::before { 36 | animation: ripple 180ms cubic-bezier(0.23, 1, 0.32, 1); 37 | } 38 | @keyframes ripple { 39 | to { 40 | transform: scaleX(1); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /password-input/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Input Password 9 | 10 | 11 |
12 |
13 | 14 | ☠️ 15 | 16 | 17 |
18 |
19 |
20 | Strength 21 |
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /slide-button/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Poppins", sans-serif; 3 | height: 100vh; 4 | display: grid; 5 | place-items: center; 6 | background: #282a36; 7 | } 8 | 9 | button { 10 | padding: 18px 30px; 11 | font-size: 16px; 12 | border: none; 13 | position: relative; 14 | cursor: pointer; 15 | box-sizing: border-box; 16 | overflow: hidden; 17 | background: #ff4655; 18 | border-radius: 0; 19 | min-width: 200px; 20 | color: #fff; 21 | z-index: 0; 22 | text-transform: uppercase; 23 | font-weight: 600; 24 | letter-spacing: 2px; 25 | } 26 | 27 | button::before { 28 | content: ""; 29 | position: absolute; 30 | display: block; 31 | top: 0; 32 | left: -50px; 33 | width: 150%; 34 | height: 100%; 35 | background: #14202d; 36 | transition: all 0.7s ease-in-out; 37 | z-index: -1; 38 | transform: translateX(-300px) skew(-20deg); 39 | } 40 | 41 | button:hover::before { 42 | transform: translateX(0px) skew(-20deg); 43 | } 44 | -------------------------------------------------------------------------------- /shining-button/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Poppins", sans-serif; 3 | height: 100vh; 4 | display: grid; 5 | place-items: center; 6 | background: #282a36; 7 | } 8 | 9 | button { 10 | padding: 18px 30px; 11 | font-size: 16px; 12 | border: none; 13 | position: relative; 14 | cursor: pointer; 15 | box-sizing: border-box; 16 | overflow: hidden; 17 | background: #3b3b3b; 18 | border-radius: 5px; 19 | min-width: 200px; 20 | color: #fff; 21 | z-index: 0; 22 | text-transform: uppercase; 23 | font-weight: 600; 24 | letter-spacing: 2px; 25 | transition: all 0.3s; 26 | } 27 | 28 | button::before { 29 | content: ""; 30 | position: absolute; 31 | display: block; 32 | top: 0; 33 | left: -50px; 34 | width: 70%; 35 | height: 100%; 36 | background: linear-gradient(90deg, transparent, #ffffff71, transparent); 37 | transition: all 1s; 38 | z-index: -1; 39 | transform: translateX(-120px) skew(-20deg); 40 | } 41 | 42 | button:hover::before { 43 | transform: translateX(300px) skew(-20deg); 44 | } 45 | 46 | button:hover { 47 | background: #ff006a; 48 | } 49 | -------------------------------------------------------------------------------- /dropdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | Dropdown 13 | 14 | 15 |
16 | Social Links 17 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /contextmenu/main.js: -------------------------------------------------------------------------------- 1 | const contextmenu = document.querySelector(".contextmenu"); 2 | let ctxPosition = { 3 | pageX: 0, 4 | pageY: 0, 5 | }; 6 | document.addEventListener("contextmenu", (e) => { 7 | e.preventDefault(); 8 | const ctxHeight = contextmenu.offsetHeight; 9 | const ctxWidth = contextmenu.offsetWidth + 5; 10 | 11 | const widthOverflow = e.pageX + ctxWidth > window.innerWidth; 12 | const heightOverflow = e.pageY + ctxHeight > window.innerHeight; 13 | 14 | ctxPosition = { 15 | pageX: widthOverflow ? e.pageX - ctxWidth - 5 : e.pageX, 16 | pageY: heightOverflow ? e.pageY - ctxHeight : e.pageY, 17 | }; 18 | 19 | hideContextMenu(); 20 | setTimeout(showCtxMenu, 50); 21 | }); 22 | document.addEventListener("click", hideContextMenu); 23 | 24 | function showCtxMenu() { 25 | contextmenu.style.cssText = ` 26 | opacity: 1; 27 | transform: scale(1); 28 | top: ${ctxPosition.pageY}px; 29 | left: ${ctxPosition.pageX}px; 30 | `; 31 | } 32 | 33 | function hideContextMenu() { 34 | contextmenu.style.cssText = ` 35 | opacity: 0; 36 | transform: scale(0); 37 | top: ${ctxPosition.pageY}px; 38 | left: ${ctxPosition.pageX}px; 39 | `; 40 | } 41 | -------------------------------------------------------------------------------- /expandable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Expandable 9 | 10 | 11 |
12 | 13 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /drag-and-drop-upload/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | Drag and drop upload 14 | 15 | 16 |
17 |
18 | 19 | 20 | Drag and drop your documents, photos, and video here. 21 | 22 |
23 | 24 | OR 25 | 26 |
27 | 28 | 29 |
30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /slide-label-input/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | place-items: center; 4 | height: 100vh; 5 | font-family: "Poppins", Arial, Helvetica, sans-serif; 6 | background: #191724; 7 | color: #fff; 8 | } 9 | 10 | .input-container { 11 | width: 280px; 12 | position: relative; 13 | } 14 | 15 | .label { 16 | position: absolute; 17 | left: 10px; 18 | top: 14px; 19 | transition: all 0.2s; 20 | padding: 0 2px; 21 | z-index: 1; 22 | color: #b3b3b3; 23 | } 24 | .text-input { 25 | padding: 0.8rem; 26 | width: 100%; 27 | height: 100%; 28 | border: 2px solid #2f2c45; 29 | background: #272530; 30 | border-radius: 5px; 31 | font-size: 18px; 32 | outline: none; 33 | transition: all 0.3s; 34 | color: #fff; 35 | } 36 | 37 | .label::before { 38 | content: ""; 39 | height: 5px; 40 | background: #272530; 41 | position: absolute; 42 | left: 0px; 43 | top: 10px; 44 | width: 100%; 45 | z-index: -1; 46 | } 47 | 48 | .text-input:focus { 49 | border: 2px solid #7e4ccb; 50 | } 51 | 52 | .text-input:focus + .label, 53 | .filled { 54 | top: -10px; 55 | color: #7e4ccb; 56 | font-size: 14px; 57 | } 58 | 59 | .text-input::placeholder { 60 | font-size: 16px; 61 | opacity: 0; 62 | transition: all 0.3s; 63 | } 64 | .text-input:focus::placeholder { 65 | opacity: 1; 66 | } 67 | -------------------------------------------------------------------------------- /contextmenu/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: url(https://9to5mac.com/wp-content/uploads/sites/6/2021/10/Chroma-Red-Dark.jpg?); 3 | background-size: cover; 4 | font-family: "poppins", sans-serif; 5 | position: relative; 6 | height: 100vh; 7 | margin: 0; 8 | } 9 | 10 | ul { 11 | list-style: none; 12 | margin-block-start: 0; 13 | margin-block-end: 0; 14 | padding-inline-start: 0; 15 | } 16 | .contextmenu { 17 | box-shadow: 0 0 36px 1px #00000033; 18 | border-radius: 10px; 19 | border: 1px solid #a6a6a628; 20 | background-color: #9191912d; 21 | backdrop-filter: blur(20px); 22 | width: 250px; 23 | position: absolute; 24 | opacity: 0; 25 | transform: scale(0); 26 | transition: transform 0.2s, opacity 0.1s; 27 | } 28 | 29 | .items li { 30 | padding: 2px 5px; 31 | } 32 | 33 | .items:first-child { 34 | margin-top: 3px; 35 | } 36 | .items:last-child { 37 | margin-bottom: 3px; 38 | } 39 | .items a { 40 | color: #fff; 41 | display: flex; 42 | align-items: center; 43 | justify-content: space-between; 44 | padding: 0.3rem 1rem; 45 | text-decoration: none; 46 | transition: all 0.2s; 47 | font-weight: 300; 48 | font-size: 14px; 49 | border-radius: 5px; 50 | } 51 | .items a:hover { 52 | background-color: #91919142; 53 | } 54 | 55 | .fa-brands, 56 | .fa-solid { 57 | margin-right: 10px; 58 | color: #aaa; 59 | } 60 | -------------------------------------------------------------------------------- /drag-and-drop-upload/main.js: -------------------------------------------------------------------------------- 1 | const drop = document.querySelector(".drop"); 2 | const input = document.querySelector(".drop input"); 3 | const text = document.querySelector(".text"); 4 | const progress = document.querySelector(".progress"); 5 | 6 | let files = []; 7 | 8 | input.addEventListener("change", () => { 9 | drop.style.display = "none"; 10 | upload(); 11 | }); 12 | 13 | drop.addEventListener("dragover", (e) => { 14 | e.preventDefault(); 15 | text.innerHTML = "Release your mouse to drop."; 16 | drop.classList.add("active"); 17 | }); 18 | 19 | drop.addEventListener("dragleave", (e) => { 20 | e.preventDefault(); 21 | text.innerHTML = "Drag and drop your documents, photos, and video here."; 22 | drop.classList.remove("active"); 23 | }); 24 | 25 | drop.addEventListener("drop", (e) => { 26 | e.preventDefault(); 27 | files = e.dataTransfer.files; 28 | drop.style.display = "none"; 29 | upload(); 30 | }); 31 | 32 | // Upload Logic 33 | function upload() { 34 | // fake Upload Logic 35 | let intervalCount = 0.25; 36 | progress.style.display = "block"; 37 | progress.style.width = `${20 * intervalCount}%`; 38 | const interval = setInterval(() => { 39 | intervalCount += 0.25; 40 | progress.style.width = `${20 * intervalCount}%`; 41 | if (intervalCount == 5) { 42 | clearInterval(interval); 43 | } 44 | }, 100); 45 | } 46 | -------------------------------------------------------------------------------- /search-bar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | display: grid; 7 | place-content: center; 8 | height: 100vh; 9 | background: #000000; 10 | } 11 | 12 | input { 13 | font-family: "Space Grotesk"; 14 | } 15 | .container { 16 | display: inline-block; 17 | } 18 | .row { 19 | display: flex; 20 | background: #000; 21 | border-radius: 100px; 22 | border: 1px solid #3b3b3b; 23 | } 24 | .row input { 25 | background: transparent; 26 | color: #fff; 27 | font-weight: 600; 28 | font-size: 15px; 29 | border: none; 30 | padding: 0; 31 | width: 0; 32 | outline: none; 33 | transition: all 0.2s; 34 | } 35 | .icon { 36 | display: flex; 37 | align-items: center; 38 | justify-content: center; 39 | width: 45px; 40 | height: 45px; 41 | margin: 7px; 42 | border-radius: 50%; 43 | background: #ffffff; 44 | } 45 | .icon i { 46 | position: absolute; 47 | color: #222222; 48 | } 49 | .icon .fa-xmark { 50 | opacity: 0; 51 | } 52 | 53 | .container:hover input, 54 | input:focus, 55 | input:not(:placeholder-shown) { 56 | width: 250px; 57 | padding: 1rem; 58 | padding-left: 1.5rem; 59 | } 60 | 61 | .container:hover .fa-xmark, 62 | input:focus ~ .icon .fa-xmark, 63 | input:not(:placeholder-shown) ~ .icon .fa-xmark { 64 | opacity: 1; 65 | font-size: 20px; 66 | } 67 | 68 | .container:hover .fa-search, 69 | input:focus ~ .icon .fa-search, 70 | input:not(:placeholder-shown) ~ .icon .fa-search { 71 | opacity: 0; 72 | } 73 | -------------------------------------------------------------------------------- /radio/style.css: -------------------------------------------------------------------------------- 1 | /* General CSS */ 2 | 3 | body { 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | font-family: "Poppins", arial; 8 | flex-direction: column; 9 | height: 100vh; 10 | color: #fff; 11 | background: #1b2b34; 12 | } 13 | 14 | div { 15 | display: flex; 16 | } 17 | 18 | .container { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .container:nth-child(1) { 24 | margin-right: 20px; 25 | } 26 | 27 | .container span { 28 | margin-right: 10px; 29 | } 30 | 31 | /* Radio CSS */ 32 | .radio-input { 33 | display: none; 34 | } 35 | .radio { 36 | display: block; 37 | width: 25px; 38 | height: 25px; 39 | cursor: pointer; 40 | border-radius: 50%; 41 | border: 3px solid #fff; 42 | position: relative; 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | } 47 | .radio::before, 48 | .radio::after { 49 | content: ""; 50 | position: absolute; 51 | border-radius: 50%; 52 | transform: scale(0); 53 | display: block; 54 | transition: all 0.1s; 55 | } 56 | .radio::before { 57 | width: 20px; 58 | height: 20px; 59 | background: #fff; 60 | } 61 | .radio::after { 62 | width: 50px; 63 | height: 50px; 64 | background: #f7faff4d; 65 | } 66 | .radio-input:checked + .radio::after { 67 | animation: ripple 0.2s; 68 | } 69 | .radio-input:checked + .radio::before { 70 | transform: scale(1); 71 | } 72 | @keyframes ripple { 73 | to { 74 | transform: scale(1); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /checkbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Checkbox 9 | 10 | 11 |

Custom Checkbox

12 |
13 |
14 | 15 | 20 | HTML 21 |
22 | 23 |
24 | 25 | 30 | CSS 31 |
32 | 33 |
34 | 35 | 40 | JavaScript 41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /checkbox/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #191724; 3 | font-family: "scandia"; 4 | color: #fff; 5 | display: flex; 6 | align-items: center; 7 | flex-direction: column; 8 | justify-content: center; 9 | height: 100vh; 10 | } 11 | 12 | .container { 13 | margin: 1rem 0; 14 | display: flex; 15 | align-items: center; 16 | } 17 | 18 | .container span { 19 | margin-left: 1rem; 20 | } 21 | 22 | /* Checkbox css */ 23 | 24 | .check-input { 25 | display: none; 26 | } 27 | .checkbox { 28 | width: 25px; 29 | height: 25px; 30 | border-radius: 50%; 31 | border: 2px solid #fff; 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | cursor: pointer; 36 | padding: 3px; 37 | transition: 0.3s all; 38 | } 39 | .checkbox svg { 40 | width: 20px; 41 | height: 20px; 42 | } 43 | .check-input:checked + .checkbox { 44 | background: #26bfbf; 45 | border: 2px solid #26bfbf; 46 | } 47 | .check-input:checked + .checkbox svg path { 48 | stroke-dasharray: 500; 49 | stroke-dashoffset: 500; 50 | stroke: #fff; 51 | stroke-width: 3; 52 | animation: check 4s forwards; 53 | } 54 | .checkbox::before { 55 | content: ""; 56 | position: absolute; 57 | border-radius: 50%; 58 | transform: scale(0); 59 | display: block; 60 | width: 60px; 61 | height: 60px; 62 | background: #26bfbf66; 63 | z-index: -1; 64 | } 65 | .check-input:checked + .checkbox::before { 66 | animation: ripple 0.3s; 67 | } 68 | @keyframes check { 69 | to { 70 | stroke-dashoffset: 0; 71 | } 72 | } 73 | @keyframes ripple { 74 | to { 75 | transform: scale(1); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /drag-and-drop-upload/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #f0d4ff; 3 | display: grid; 4 | place-items: center; 5 | font-family: "Poppins", Arial, Helvetica, sans-serif; 6 | height: 100vh; 7 | overflow: hidden; 8 | } 9 | 10 | .drop-container { 11 | background: #fff; 12 | padding: 1.5rem; 13 | width: 450px; 14 | display: inline-block; 15 | border-radius: 20px; 16 | box-shadow: 0 0 40px 15px rgba(0, 0, 0, 0.2); 17 | } 18 | .drop { 19 | border-radius: 10px; 20 | border: 3px dashed #aaaaaa; 21 | display: grid; 22 | width: 100%; 23 | place-content: center; 24 | padding: 2rem; 25 | box-sizing: border-box; 26 | display: grid; 27 | place-items: center; 28 | } 29 | 30 | .active { 31 | border: 3px solid #4b4b4b; 32 | background: #edccff; 33 | } 34 | 35 | .drop .icon { 36 | font-size: 60px; 37 | color: #a916f9; 38 | } 39 | .drop .text { 40 | text-align: center; 41 | font-weight: 500; 42 | color: #443f46; 43 | margin-top: 1rem; 44 | } 45 | 46 | .progress { 47 | background: #a916f9; 48 | width: 0%; 49 | height: 20px; 50 | display: none; 51 | border-radius: 10px; 52 | transition: all 0.2s; 53 | } 54 | .drop label { 55 | background: #a916f9; 56 | padding: 0.7rem 1.8rem; 57 | border-radius: 5px; 58 | color: #fff; 59 | cursor: pointer; 60 | } 61 | 62 | .file-input { 63 | display: none; 64 | } 65 | 66 | .line { 67 | width: 80px; 68 | height: 1px; 69 | background: #949494; 70 | } 71 | 72 | .or-con { 73 | display: flex; 74 | align-items: center; 75 | margin: 0.5rem; 76 | } 77 | 78 | .or { 79 | margin: 0 1rem; 80 | font-weight: 500; 81 | color: #443f46; 82 | } 83 | -------------------------------------------------------------------------------- /otp-field/main.js: -------------------------------------------------------------------------------- 1 | const inputs = document.querySelectorAll(".otp-field input"); 2 | 3 | inputs.forEach((input, index) => { 4 | input.dataset.index = index; 5 | input.addEventListener("keyup", handleOtp); 6 | input.addEventListener("paste", handleOnPasteOtp); 7 | }); 8 | 9 | function handleOtp(e) { 10 | /** 11 | * 12 | * 👉 NOTE: On mobile devices `maxlength` property isn't supported, 13 | * So we to write our own logic to make it work. 🙂 14 | */ 15 | const input = e.target; 16 | let value = input.value; 17 | let isValidInput = value.match(/[0-9a-z]/gi); 18 | input.value = ""; 19 | input.value = isValidInput ? value[0] : ""; 20 | 21 | let fieldIndex = input.dataset.index; 22 | if (fieldIndex < inputs.length - 1 && isValidInput) { 23 | input.nextElementSibling.focus(); 24 | } 25 | 26 | if (e.key === "Backspace" && fieldIndex > 0) { 27 | input.previousElementSibling.focus(); 28 | } 29 | 30 | if (fieldIndex == inputs.length - 1 && isValidInput) { 31 | submit(); 32 | } 33 | } 34 | 35 | function handleOnPasteOtp(e) { 36 | const data = e.clipboardData.getData("text"); 37 | const value = data.split(""); 38 | if (value.length === inputs.length) { 39 | inputs.forEach((input, index) => (input.value = value[index])); 40 | submit(); 41 | } 42 | } 43 | 44 | function submit() { 45 | console.log("Submitting..."); 46 | // 👇 Entered OTP 47 | let otp = ""; 48 | inputs.forEach((input) => { 49 | otp += input.value; 50 | input.disabled = true; 51 | input.classList.add("disabled"); 52 | }); 53 | console.log(otp); 54 | // 👉 Call API below 55 | } 56 | -------------------------------------------------------------------------------- /dropdown/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: "Poppins", Arial, sans-serif; 4 | background: #1f2023; 5 | color: #fff; 6 | display: grid; 7 | place-items: center; 8 | height: 100vh; 9 | } 10 | 11 | ul { 12 | list-style: none; 13 | margin-block-start: 0; 14 | margin-block-end: 0; 15 | padding-inline-start: 0; 16 | } 17 | .dropdown { 18 | position: relative; 19 | } 20 | .label { 21 | cursor: pointer; 22 | background: rgb(40, 40, 40); 23 | padding: 0.8rem 1rem; 24 | width: 100%; 25 | display: block; 26 | box-sizing: border-box; 27 | transition: all 0.3s; 28 | } 29 | 30 | .items a { 31 | color: #fff; 32 | display: flex; 33 | align-items: center; 34 | padding: 0.5rem 1rem; 35 | text-decoration: none; 36 | transition: all 0.2s; 37 | } 38 | .items a:hover { 39 | border-left: 5px solid; 40 | background: rgb(37, 37, 37); 41 | } 42 | 43 | .fa-brands, 44 | .fa-solid { 45 | margin-right: 10px; 46 | } 47 | 48 | .items { 49 | background: rgb(52, 52, 52); 50 | opacity: 0; 51 | visibility: hidden; 52 | min-width: 100%; 53 | height: 0; 54 | position: absolute; 55 | top: 48px; 56 | transform-origin: top; 57 | transform: scaleY(0); 58 | transition: transform 0.3s; 59 | } 60 | 61 | .items::before { 62 | content: ""; 63 | position: absolute; 64 | width: 15px; 65 | height: 15px; 66 | background: rgb(52, 52, 52); 67 | transform: rotate(45deg); 68 | top: -7px; 69 | left: 20px; 70 | z-index: -1; 71 | } 72 | 73 | .dropdown:hover > .items { 74 | opacity: 1; 75 | visibility: visible; 76 | height: unset; 77 | transform: scaleY(1); 78 | } 79 | 80 | .dropdown:hover > .label { 81 | background: rgb(255, 115, 0); 82 | } 83 | -------------------------------------------------------------------------------- /expandable/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: "Poppins", Arial, sans-serif; 4 | display: grid; 5 | place-content: center; 6 | height: 100vh; 7 | background: #1f2023; 8 | color: #fff; 9 | } 10 | .check-input { 11 | display: none; 12 | } 13 | .header-container { 14 | display: flex; 15 | align-items: center; 16 | } 17 | .header-container .header { 18 | flex: 1; 19 | } 20 | .title { 21 | margin-block-start: 0; 22 | margin-block-end: 0; 23 | font-weight: 600; 24 | } 25 | .header-container .sub-title { 26 | font-size: 13px; 27 | color: #aaaaaa; 28 | } 29 | .header-container .icon { 30 | width: 15px; 31 | height: 2px; 32 | background: #b6b6b6; 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | } 37 | .header-container .icon::before { 38 | content: ""; 39 | width: 2px; 40 | height: 15px; 41 | display: block; 42 | background: #b6b6b6; 43 | transition: all 0.2s; 44 | } 45 | .check-input:checked + label .header-container .icon::before { 46 | content: ""; 47 | opacity: 0; 48 | } 49 | .expandable-container { 50 | width: 450px; 51 | } 52 | .expandable .header-container { 53 | background: #313237; 54 | cursor: pointer; 55 | padding: 1rem; 56 | } 57 | .expandable .content { 58 | opacity: 0; 59 | visibility: hidden; 60 | padding: 1rem; 61 | width: 100%; 62 | background: #3a3a42; 63 | box-sizing: border-box; 64 | margin-block-start: 0; 65 | margin-block-end: 0; 66 | transform: scaleY(0); 67 | transform-origin: top; 68 | height: 0; 69 | transition: transform 0.2s; 70 | } 71 | .check-input:checked + label .content { 72 | opacity: 1; 73 | height: unset; 74 | transform: scaleY(1); 75 | visibility: visible; 76 | } 77 | -------------------------------------------------------------------------------- /switch/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --switch-width: 50px; 3 | --switch-height: 30px; 4 | --circle-size: 22px; 5 | --circle-padding: 3px; 6 | --circle-bg: #fff; 7 | --circle-on-bg: #fff; 8 | --switch-bg: #c9c9c9; 9 | --switch-on-bg: #4c86d8; 10 | } 11 | 12 | .switch { 13 | width: var(--switch-width); 14 | height: var(--switch-height); 15 | border-radius: 100px; 16 | cursor: pointer; 17 | background: var(--switch-bg); 18 | display: flex; 19 | position: relative; 20 | align-items: center; 21 | transition: all 0.5s; 22 | } 23 | 24 | .switch::before { 25 | content: ""; 26 | display: block; 27 | background: var(--circle-bg); 28 | width: var(--circle-size); 29 | height: var(--circle-size); 30 | border-radius: 50%; 31 | position: absolute; 32 | transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 33 | left: var(--circle-padding); 34 | -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 35 | -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 36 | -ms-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 37 | -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 38 | } 39 | 40 | .switch-input { 41 | display: none; 42 | } 43 | 44 | .switch-input:checked + .switch { 45 | background: var(--switch-on-bg); 46 | } 47 | 48 | .switch-input:checked + .switch::before { 49 | background: var(--circle-on-bg); 50 | left: calc( 51 | (var(--switch-width) - var(--circle-size)) - var(--circle-padding) 52 | ); 53 | } 54 | 55 | body { 56 | background: #191724; 57 | font-family: "scandia"; 58 | color: #fff; 59 | display: flex; 60 | align-items: center; 61 | flex-direction: column; 62 | justify-content: center; 63 | height: 100vh; 64 | } 65 | -------------------------------------------------------------------------------- /contextmenu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Contextmenu 13 | 14 | 15 |
16 | 63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /password-input/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: "Poppins", sans-serif; 8 | height: 100vh; 9 | background: #091a20; 10 | color: #fff; 11 | display: grid; 12 | place-content: center; 13 | } 14 | 15 | .input-container { 16 | width: 300px; 17 | } 18 | 19 | .input-group { 20 | position: relative; 21 | display: flex; 22 | align-items: center; 23 | } 24 | 25 | .input-group input { 26 | padding: 0.8rem 3rem 0.8rem 0.8rem; 27 | width: 100%; 28 | background: #112d37; 29 | outline: none; 30 | border: 1px solid #215164; 31 | border-radius: 4px; 32 | color: #fff; 33 | transition: width 0.9s, height 0.9s, border-radius 0.9s; 34 | font-size: 16px; 35 | } 36 | 37 | .input-group input::placeholder { 38 | color: #346a80; 39 | } 40 | 41 | .input-group input:focus { 42 | border: 1px solid #55b7dd; 43 | box-shadow: 0px 0px 2px 2px #55b7dd34; 44 | } 45 | .input-group .toggle { 46 | position: absolute; 47 | right: 10px; 48 | font-size: 25px; 49 | cursor: pointer; 50 | user-select: none; 51 | z-index: 99; 52 | } 53 | 54 | .input-group .ripple { 55 | background: #fff; 56 | display: block; 57 | position: absolute; 58 | height: 35px; 59 | width: 35px; 60 | border-radius: 50%; 61 | right: 10px; 62 | transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); 63 | z-index: 1; 64 | } 65 | 66 | .pass-strength { 67 | display: flex; 68 | align-items: center; 69 | margin-top: 3px; 70 | } 71 | 72 | .strength-label { 73 | font-size: 12px; 74 | margin-left: 10px; 75 | } 76 | .strength-percent { 77 | flex: 1; 78 | height: 5px; 79 | border-radius: 10px; 80 | display: block; 81 | background: #eee; 82 | } 83 | 84 | .strength-percent span { 85 | display: block; 86 | height: 100%; 87 | transition: all 0.4s; 88 | border-radius: 10px; 89 | } 90 | 91 | .weak { 92 | background: red; 93 | width: 33%; 94 | } 95 | 96 | .average { 97 | background: #ffd000; 98 | width: 66%; 99 | } 100 | 101 | .strong { 102 | background: green; 103 | width: 100%; 104 | } 105 | -------------------------------------------------------------------------------- /password-input/main.js: -------------------------------------------------------------------------------- 1 | const passInput = document.querySelector(".input-group input"); 2 | const toggleIcon = document.querySelector(".input-group .toggle"); 3 | const ripple = document.querySelector(".input-group .ripple"); 4 | const percentBar = document.querySelector(".strength-percent span"); 5 | const passLabel = document.querySelector(".strength-label"); 6 | 7 | passInput.addEventListener("input", handlePassInput); 8 | toggleIcon.addEventListener("click", togglePassInput); 9 | 10 | function handlePassInput(e) { 11 | if (passInput.value.length === 0) { 12 | passLabel.innerHTML = "Strength"; 13 | addClass(); 14 | } else if (passInput.value.length <= 4) { 15 | passLabel.innerHTML = "Weak"; 16 | addClass("weak"); 17 | } else if (passInput.value.length <= 7) { 18 | passLabel.innerHTML = "Not Bad"; 19 | addClass("average"); 20 | } else { 21 | passLabel.innerHTML = "Strong"; 22 | addClass("strong"); 23 | } 24 | } 25 | 26 | function addClass(className) { 27 | percentBar.classList.remove("weak"); 28 | percentBar.classList.remove("average"); 29 | percentBar.classList.remove("strong"); 30 | if (className) { 31 | percentBar.classList.add(className); 32 | } 33 | } 34 | 35 | function togglePassInput(e) { 36 | const type = passInput.getAttribute("type"); 37 | if (type === "password") { 38 | passInput.setAttribute("type", "text"); 39 | toggleIcon.innerHTML = "💀"; 40 | // toggleIcon.innerHTML = "🐵"; 41 | ripple.style.cssText = ` 42 | border-radius: 4px; 43 | width: 100%; 44 | height: 100%; 45 | right: 0; 46 | z-index: -1; 47 | `; 48 | passInput.style.color = "#000"; 49 | passInput.style.background = "transparent"; 50 | toggleIcon.style.fontSize = "27px"; 51 | } else { 52 | passInput.setAttribute("type", "password"); 53 | toggleIcon.innerHTML = "☠️"; 54 | // toggleIcon.innerHTML = "🙈"; 55 | toggleIcon.style.fontSize = "25px"; 56 | ripple.style.cssText = ` 57 | border-radius: 50%; 58 | height: 35px; 59 | width: 35px; 60 | right: 10px; 61 | z-index: 1; 62 | `; 63 | passInput.style.color = "#fff"; 64 | passInput.style.background = "#112d37"; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /tag-input-field/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: "Poppins", Arial, Helvetica, sans-serif; 4 | background: #1f2023; 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: center; 8 | align-items: center; 9 | color: #fff; 10 | height: 100vh; 11 | } 12 | 13 | ul { 14 | margin-block-start: 0; 15 | margin-block-end: 0; 16 | padding-inline-start: 0px; 17 | } 18 | 19 | li { 20 | list-style: none; 21 | } 22 | 23 | .tag-area { 24 | padding: 1rem; 25 | outline: none; 26 | width: 600px; 27 | border: 2px solid #605f6f; 28 | border-radius: 5px; 29 | transition: all 0.2s; 30 | cursor: text; 31 | display: flex; 32 | align-items: center; 33 | position: relative; 34 | } 35 | 36 | .label { 37 | position: absolute; 38 | background: #1f2023; 39 | padding: 0 0.3rem; 40 | color: #adadad; 41 | top: 22px; 42 | transition: all 0.1s; 43 | } 44 | 45 | .label-active { 46 | top: -11px; 47 | color: #8d29ff; 48 | font-size: 13px; 49 | } 50 | 51 | .tag-area ul { 52 | display: flex; 53 | flex-wrap: wrap; 54 | align-items: center; 55 | } 56 | 57 | .active { 58 | border: 2px solid #8d29ff !important; 59 | } 60 | 61 | .tag { 62 | padding-left: 0.8rem; 63 | background: #353535; 64 | border-radius: 100px; 65 | display: flex; 66 | align-items: center; 67 | justify-content: space-between; 68 | margin: 0.5rem; 69 | } 70 | 71 | .tag-input { 72 | padding: 0.5rem; 73 | outline: none; 74 | border: none; 75 | width: 150px; 76 | margin-left: 0.5rem; 77 | background: transparent; 78 | font-size: 20px; 79 | color: #fff; 80 | } 81 | 82 | .cross { 83 | cursor: pointer; 84 | display: flex; 85 | margin-left: 0.5rem; 86 | justify-content: center; 87 | align-items: center; 88 | padding: 1.3rem; 89 | transform: rotate(45deg); 90 | border-radius: 50%; 91 | background: #414141; 92 | } 93 | 94 | .cross:hover { 95 | background: #818181b1; 96 | } 97 | 98 | .cross::before { 99 | content: ""; 100 | width: 2px; 101 | height: 16px; 102 | position: absolute; 103 | background: rgb(255, 255, 255); 104 | } 105 | 106 | .cross::after { 107 | content: ""; 108 | height: 2px; 109 | width: 16px; 110 | position: absolute; 111 | background: rgb(255, 255, 255); 112 | } 113 | 114 | @media (max-width: 650px) { 115 | .tag-area { 116 | width: 300px; 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /tag-input-field/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @link https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/tag-input-field 3 | * INSTAGRAM: @hi.coders 4 | */ 5 | 6 | const tagInput = document.querySelector(".tag-input"); 7 | const tagArea = document.querySelector(".tag-area"); 8 | const ul = document.querySelector(".tag-area ul"); 9 | const label = document.querySelector(".label"); 10 | 11 | let tags = []; 12 | 13 | function addEvent(element) { 14 | tagArea.addEventListener("click", () => { 15 | element.focus(); 16 | }); 17 | 18 | element.addEventListener("focus", () => { 19 | tagArea.classList.add("active"); 20 | label.classList.add("label-active"); 21 | }); 22 | 23 | element.addEventListener("blur", (e) => { 24 | tagArea.classList.remove("active"); 25 | if (element.value === "" && tags.length === 0) { 26 | label.classList.remove("label-active"); 27 | } 28 | if (!element.value.match(/^\s+$/gi) && element.value !== "") { 29 | tags.push(e.target.value.trim()); 30 | element.value = ""; 31 | renderTags(); 32 | } 33 | }); 34 | /** 35 | * NOTE: Keyboard events works unexpected on mobile devices. 36 | * For mobile devices you need to add this code 37 | * to get the last character user entered. 38 | * value[value.length - 1] === " " 39 | * 40 | * keycode 32 is for SpaceBar 41 | * keycode 13 is for EnterKey 42 | */ 43 | 44 | element.addEventListener("keydown", (e) => { 45 | console.log(e); 46 | const value = e.target.value; 47 | if ( 48 | (e.keyCode === 32 || 49 | e.keyCode === 13 || 50 | value[value.length - 1] === " ") && 51 | !value.match(/^\s+$/gi) && 52 | value !== "" 53 | ) { 54 | tags.push(e.target.value.trim()); 55 | element.value = ""; 56 | renderTags(); 57 | } 58 | if (e.keyCode === 8 && value === "") { 59 | tags.pop(); 60 | renderTags(); 61 | } 62 | }); 63 | } 64 | addEvent(tagInput); 65 | 66 | function renderTags() { 67 | ul.innerHTML = ""; 68 | tags.forEach((tag, index) => { 69 | createTag(tag, index); 70 | }); 71 | const input = document.createElement("input"); 72 | input.type = "text"; 73 | input.className = "tag-input"; 74 | addEvent(input); 75 | ul.appendChild(input); 76 | input.focus(); 77 | setTimeout(() => (input.value = ""), 0); 78 | } 79 | 80 | function createTag(tag, index) { 81 | const li = document.createElement("li"); 82 | li.className = "tag"; 83 | const text = document.createTextNode(tag); 84 | const span = document.createElement("span"); 85 | span.className = "cross"; 86 | span.dataset.index = index; 87 | span.addEventListener("click", (e) => { 88 | tags = tags.filter((_, index) => index != e.target.dataset.index); 89 | renderTags(); 90 | }); 91 | li.appendChild(text); 92 | li.appendChild(span); 93 | ul.appendChild(li); 94 | } 95 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Custom Widgets 2 | 3 | Collection of Customized Web UI components. _i.e_ Buttons, Checkboxes, Radio Buttons, Switches, etc. 4 | 5 | ## Widgets 6 | 7 | | S.No | Repo | See live | 8 | | ---- | ---------------------------------- | -------------------------- | 9 | | 01 | [Custom Switch][switch] | [See Live][switch-live] | 10 | | 02 | [Radio Button][radio] | [See Live][radio-live] | 11 | | 03 | [Custom Checkbox][checkbox] | [See Live][checkbox-live] | 12 | | 04 | [Ripple Button][ripple-btn] | [see live][ripple-live] | 13 | | 05 | [Slide Label Input][slide-input] | [see Live][slide-i-live] | 14 | | 06 | [Drag and Drop Upload][dnd-upload] | [see live][dnd-live] | 15 | | 07 | [Expandable][expandable] | [see Live][expd-live] | 16 | | 08 | [Tags Input][tags-input] | [see live][tags-live] | 17 | | 09 | [Dropdown][dropdown] | [see live][dropdown-live] | 18 | | 10 | [Hamburger][hamburger] | [see live][hamburger-live] | 19 | | 11 | [ContextMenu][ctxmenu] | [see live][ctxmenu-live] | 20 | | 12 | [OTP/PIN Filed][otp-f] | [see live][otp-f-live] | 21 | | 13 | [Slide Hover Effect][she] | [see live][she-live] | 22 | | 14 | [Shine Hover Effect][shine] | [see live][shine-live] | 23 | | 15 | [Password Input][pass-input] | [see live][pass-live] | 24 | | 16 | [Search Bar][search-bar] | [see live][search-live] | 25 | 26 | ## **Preview** 27 | 28 | preview 29 | 30 | ### **Thank You!** 😍 31 | 32 | [switch]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/switch 33 | [switch-live]: https://codepen.io/hicoders/pen/GRyVjVy 34 | [radio]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/radio 35 | [radio-live]: https://codepen.io/hicoders/pen/QWQLara 36 | [checkbox]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/checkbox 37 | [checkbox-live]: https://codepen.io/hicoders/pen/MWQWrPG 38 | [ripple-btn]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/ripple-button 39 | [ripple-live]: https://codepen.io/hicoders/pen/MWQKPOo 40 | [slide-input]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/slide-label-input 41 | [slide-i-live]: https://codepen.io/hicoders/pen/xxYbyRN 42 | [dnd-upload]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/drag-and-drop-upload 43 | [dnd-live]: https://codepen.io/hicoders/pen/oNEYXZZ 44 | [expandable]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/expandable 45 | [expd-live]: https://codepen.io/hicoders/pen/bGLVQpY 46 | [tags-input]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/tag-input-field 47 | [tags-live]: https://codepen.io/hicoders/pen/abqVZKM 48 | [dropdown]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/dropdown 49 | [dropdown-live]: https://codepen.io/hicoders/pen/OJQpbjj 50 | [hamburger]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/hamburger 51 | [hamburger-live]: https://codepen.io/hicoders/pen/PoQmBJR 52 | [ctxmenu]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/contextmenu 53 | [ctxmenu-live]: https://codepen.io/hicoders/pen/LYQQNrL 54 | [otp-f]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/otp-field 55 | [otp-f-live]: https://codepen.io/hicoders/pen/oNEqJGO 56 | [she]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/slide-button 57 | [she-live]: https://codepen.io/hicoders/pen/MWQzmgY 58 | [shine]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/shining-button 59 | [shine-live]: https://codepen.io/hicoders/pen/mdXvGJy 60 | [pass-input]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/password-input 61 | [pass-live]: https://codepen.io/hicoders/pen/wvmwzoE 62 | [search-bar]: https://github.com/hicodersofficial/custom-html-css-js-widgets/tree/main/search-bar 63 | [search-live]: https://codepen.io/hicoders/pen/gOKmWRG 64 | --------------------------------------------------------------------------------