Day 10 | Demo ToDo List

Sử dụng HTML , CSS, JS  thiết kế ứng dụng (Coder) quốc dân  Todo List.

				
						<body>
		<div class="wrapper">
			<div class="title">
				<h2>Search Tags</h2>
			</div>
			<div class="content">
				<ul>
					<input type="text" spellcheck="false" placeholder="Type and enter" />
				</ul>
			</div>
			<button class="btn-removeAll">Remove All</button>
		</div>

		<script src="app.js"></script>
	</body>
				
			
				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: #8cc84c;
}

.wrapper {
	width: 500px;
	background: #fff;
	border-radius: 10px;
	padding: 18px 25px 20px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
}

.title h2 {
	font-size: 21px;
	font-weight: 600;
}

.content ul {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	margin: 20px 0;
	border-radius: 5px;
	border: 1px solid #888;
}

.content ul li {
	color: #333;
	margin: 4px 3px;
	list-style: none;
	border-radius: 5px;
	background: #8cc84c;
	padding: 5px 8px 5px 10px;
	color: white;
}

.content ul li i {
	margin-left: 8px;
	font-size: 16px;
	cursor: pointer;
}

.content ul input {
	flex: 1;
	padding: 5px;
	border: none;
	outline: none;
	font-size: 16px;
}

button {
	border: none;
	outline: none;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	padding: 9px 15px;
	border-radius: 5px;
	background: #8cc84c;
	transition: all 0.3s ease;
}

button:hover {
	background: #7cac49;
}

				
			
				
					const ul = document.querySelector('ul'),
	input = document.querySelector('input')

let tags = ['nodejs', 'reactjs']

createTag()

function createTag() {
	ul.querySelectorAll('li').forEach((li) => li.remove())
	tags.slice().reverse().forEach((tag) => {
		let liTag = `
            <li>${tag}
            <i class="uit uit-multiply" onclick="removeTag(this, '${tag}')"></i>
            </li>
            `
		ul.insertAdjacentHTML('afterbegin', liTag)
	})
    input.focus()
}

function removeTag(element, tag) {
	let index = tags.indexOf(tag)
	tags.splice(index, 1)
	element.parentElement.remove()
	input.focus()
}

function addTag(e) {
	if (e.key == 'Enter') {
		let tag = e.target.value.trim()
		if (tag != '' && !tags.includes(tag)) {
			tags.push(tag)
			createTag()
		}
		e.target.value = ''
	}
}

input.addEventListener('keyup', addTag)

const removeBtn = document.querySelector('.btn-removeAll')
removeBtn.addEventListener('click', () => {
	tags.length = 0
	ul.querySelectorAll('li').forEach((li) => li.remove())
    input.focus()
})

				
			
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :

HTML : HTML căn bản cho người mới bắt đầu

CSS : CSS căn bản cho người mới bắt đầu

JS: Javascript cho người mới bắt đầu 

 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *