WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]> <html class="no-js"> <!--<![endif]--> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Search Tag</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script> <link rel="stylesheet" href="main.css"> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div class="wrapper"> <h2 class="title">Search Tag</h2> <div class="content"> <input type="text" placeholder="Type and Enter"> </div> <button class="remove-all">Remove All</button> </div> </body> <script src="app.js" ></script> </html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap'); :root{ --primary-color:#8cc84c; } *{ margin: 0; padding:0; box-sizing:border-box; } body{ font-family: 'Poppins'; background: #8cc84c; display:flex; justify-content: center; align-items: center; height:100vh; } .wrapper{ background: white; border-radius: 10px; width: 400px; padding:20px; } .title{ font-size: 22px; } .content{ border: 1px solid #888; padding: 10px; display:flex; flex-wrap: wrap; margin-top: 20px; border-radius: 5px; } .content li{ background: #8cc84c; color:white; border-radius: 3px; list-style: none; margin:4px 3px; padding:10px; } .content li i{ font-size: 16px; margin-left: 5px; cursor: pointer; } .content input{ border:none; outline: none; font-size: 20px; margin:10px; flex:1; } .remove-all{ background: var(--primary-color); border:none; outline: none; border-radius: 5px; color:white; padding: 10px 20px; font-size: 16px; margin-top:20px; cursor: pointer; transition: all 0.3s ease; } .remove-all:hover{ background: #7cac49; }
var content=document.querySelector('.content') var input=document.querySelector('.content input') var btnRemoveAll=document.querySelector('.remove-all') var tags=['Nodejs', 'Reactjs'] function render(){ content.innerHTML='' for(let i=0;i<tags.length;i++){ const tag=tags[i]; content.innerHTML+= `<li> ${tag} <i class="fas fa-times" onclick="removeTag(${i})"></i> </li> ` } content.appendChild(input) input.focus() } function removeTag(index){ tags.splice(index,1) render() } render() input.addEventListener('keydown',function(event){ if(event.key =='Enter'){ console.log(); tags.push(input.value.trim()) input.value='' render() } }) btnRemoveAll.addEventListener('click',function(){ tags=[] render() })
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]> <html class="no-js"> <!--<![endif]--> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Search Tag</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script> <link rel="stylesheet" href="main.css"> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div class="wrapper"> <h2 class="title">Search Tag</h2> <div class="content"> <input type="text" placeholder="Type and Enter"> </div> <button class="remove-all">Remove All</button> </div> </body> <script src="app.js" ></script> </html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap'); :root{ --primary-color:#8cc84c; } *{ margin: 0; padding:0; box-sizing:border-box; } body{ font-family: 'Poppins'; background: #8cc84c; display:flex; justify-content: center; align-items: center; height:100vh; } .wrapper{ background: white; border-radius: 10px; width: 400px; padding:20px; } .title{ font-size: 22px; } .content{ border: 1px solid #888; padding: 10px; display:flex; flex-wrap: wrap; margin-top: 20px; border-radius: 5px; } .content li{ background: #8cc84c; color:white; border-radius: 3px; list-style: none; margin:4px 3px; padding:10px; } .content li i{ font-size: 16px; margin-left: 5px; cursor: pointer; } .content input{ border:none; outline: none; font-size: 20px; margin:10px; flex:1; } .remove-all{ background: var(--primary-color); border:none; outline: none; border-radius: 5px; color:white; padding: 10px 20px; font-size: 16px; margin-top:20px; cursor: pointer; transition: all 0.3s ease; } .remove-all:hover{ background: #7cac49; }
var content=document.querySelector('.content') var input=document.querySelector('.content input') var btnRemoveAll=document.querySelector('.remove-all') var tags=['Nodejs', 'Reactjs'] function render(){ content.innerHTML='' for(let i=0;i<tags.length;i++){ const tag=tags[i]; content.innerHTML+= `<li> ${tag} <i class="fas fa-times" onclick="removeTag(${i})"></i> </li> ` } content.appendChild(input) input.focus() } function removeTag(index){ tags.splice(index,1) render() } render() input.addEventListener('keydown',function(event){ if(event.key =='Enter'){ console.log(); tags.push(input.value.trim()) input.value='' render() } }) btnRemoveAll.addEventListener('click',function(){ tags=[] render() })