margin: 50px auto; background: white; border-radius: 5px; box-shadow: 10px 10px 0 rgba(0,0,0,0.1);} .item {display: flex; align-items: center; border-bottom: 1px solid #F1F1F1;} .item:last-child { border-bottom: 0;} input:checked + p { background: #F9F9F9; text-decoration: line-through;} input[type="checkbox"] {margin: 20px;} p {margin: 0; padding: 20px; transition: background 0.2s; flex: 1; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200;border-left: 1px solid #D1E2FF;} That makes the structural look of the content of the webpage. For the JavaScript, I put:
// JavaScript Document
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
let lastChecked;
function handleCheck(e) {
// Check if they had the shift key down
// AND check that they are checking it
let inBetween = false;
if (e.shiftKey && this.checked) {
// go ahead and do what we please
// loop over every single checkbox
checkboxes.forEach(checkbox => {
console.log(checkbox);
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
console.log('Starting to check them in between!');
}
if (inBetween) {
checkbox.checked = true;
}
});
}
lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
This makes the checkboxes clickable and interactable. Knowing how to make checklists is useful to a web designer when making forms and website with email accounts in them.
Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_24/Lab_24.html
No comments:
Post a Comment