In this article, we will see how we can create a chip component with the help of HTML, CSS, and JavaScript. In a chip component, there are basically two sections: one is the content section, and the other is the cross-button section. Both should be under one container with a proper border-radius.
Preview Image:
Prerequisites
Approach
- Create an HTML structure for the chips component with proper ids and classes for the styles.
- Add a CSS file that contains all the styles related to the chip component.
- Add a JavaScript file with all the logic to create the chip and delete it.
- Then, link the JavaScript and CSS files to the HTML file.
Example: This example describes the basic implementation of the Chips Component using HTML, CSS, and JavaScript.
HTML
<!-- Index.html --> <!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0" />
< link rel = "stylesheet" href = "style.css" />
< title >Chips Component</ title >
</ head >
< body >
< header >
< img src =
alt = "Error in Loading" >
< h1 >GeeksforGeeks</ h1 >
</ header >
< form id = "addChipForm" class = "add-chip" >
< input type = "text" id = "nameInput" placeholder = "Chip Name" />
< button type = "submit" >
Add Chip
</ button >
</ form >
< div class = "chips-container" >
<!-- Existing chips go here -->
</ div >
< script src = "script.js" ></ script >
</ body >
</ html >
|
CSS
/* Style.css */ body { font-family : Arial , sans-serif ;
margin : 0 ;
padding : 0 ;
} header { display : flex;
color : #308c44 ;
justify- content : center ;
} header img { margin-right : 5px ;
} .chips-container { display : flex;
flex-wrap: wrap;
gap: 10px ;
width : max-content;
margin : auto ;
margin-top : 80px ;
} .chip { display : flex;
align-items: center ;
background-color : #f0f0f0 ;
border : 1px solid #ccc ;
border-radius: 20px ;
gap: 5px ;
} .chip-avatar { width : 24px ;
height : 24px ;
border-radius: 50% ;
background-color : grey;
text-align : center ;
line-height : 23px ;
} .close- icon {
cursor : pointer ;
margin : 0px 8px ;
font-weight : bold ;
color : red ;
} .add-chip { display : flex;
align-items: center ;
margin : 10px ;
/* border: 2px solid red; */
width : max-content;
margin : auto ;
margin-top : 50px ;
} #nameInput, #profileIconInput { padding : 10px ;
border-radius: 20px ;
border : 1px solid #ccc ;
margin-right : 10px ;
} #addC hipForm button {
background-color : #007bff ;
color : #fff ;
border : none ;
border-radius: 20px ;
padding : 10px 10px ;
cursor : pointer ;
} |
Javascript
// Script.js // Function to create a new chip function createChip(name) {
const chipContainer =
document.querySelector(
".chips-container" );
const chip =
document.createElement( "div" );
chip.classList.add( "chip" );
const chipAvatar =
document.createElement( "div" );
chipAvatar.classList.add(
"chip-avatar" );
chipAvatar.textContent = "P" ;
const chipName =
document.createElement( "div" );
chipName.textContent = name;
const closeIcon =
document.createElement( "div" );
closeIcon.classList.add(
"close-icon" );
closeIcon.textContent = "x" ;
closeIcon.addEventListener(
"click" ,
function () {
chip.remove();
});
chip.appendChild(chipAvatar);
chip.appendChild(chipName);
chip.appendChild(closeIcon);
chipContainer.appendChild(chip);
} // Handle form submission const addChipForm = document.getElementById(
"addChipForm" );
addChipForm.addEventListener( "submit" ,
function (event) {
event.preventDefault();
const nameInput =
document.getElementById(
"nameInput" );
const name =
nameInput.value.trim();
if (name !== "" ) {
createChip(name);
// Use null if profile icon is empty
nameInput.value = "" ;
}}); |
Output: