In this lab, I followed the instruction from JavaScript30 and recreated the Local Storage activity. First off, I made the HTML, CSS, and JavaScript files. Secondly, the <html>, <head>, <body>, <meta>, and <title> tags were already inserted in the HTML file. Thirdly, I typed in <link rel="stylesheet" type="text/css" href="Lab_29.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_29.js" type="text/javascript"></script> inside the <body> tags which linked my JavaScript file with my HTML file. Inside the <body> tags, I typed the heading for the lab which has my name, date, and lab number with <div id="heading"><h1>Lab 29</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed in <div>, <h2>, <p>, <ul>, <li>, <form>, and <input> tags to build the input bar. Lastly, I made the copyright notice with <p> and <div> tags.For the CSS I did html {width: 100%; height: auto;} body {background-color: #00FFA8; min-width: 100%; min-height: 100%;} to give the webpage a background color and make the webpage responsive to screen size changes. #heading {text-align: center; font-size: 16px;} to center the heading of the lab. #copyright {font-size: 16px; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-weight: normal; padding-left: 1%; padding-right: 1%;} to change the font of the copyright notice. svg {fill:white; background: rgba(0,0,0,0.1); padding: 20px; border-radius: 50%; width: 200px; margin-bottom: 50px;} .wrapper {padding: 20px; max-width: 350px; background: rgba(255,255,255,0.95); box-shadow: 0 0 0 10px rgba(0,0,0,0.1);} h2 {text-align: center; margin: 0; font-weight: 200;} .plates { margin: 0; padding: 0; text-align: left; list-style: none;} .plates li {border-bottom: 1px solid rgba(0,0,0,0.2); padding: 10px 0; font-weight: 100; display: flex;} .plates label {flex: 1; cursor: pointer;} .plates input {display: none;} .plates input + label:before {content: '⬜️'; margin-right: 10px;} .plates input:checked + label:before {content: '🌮';} .add-items {margin-top: 20px;} .add-items input {padding: 10px;outline: 0;border: 1px solid rgba(0,0,0,0.1);} to stylize the webpage content into having a shopping que functionality. The JavaScript enforces his too with:
const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = JSON.parse(localStorage.getItem('items')) || [];
function addItem(e) {
e.preventDefault();
const text = (this.querySelector('[name=item]')).value;
const item = {
text,
done: false
};
items.push(item);
populateList(items, itemsList);
localStorage.setItem('items', JSON.stringify(items));
this.reset();
}
function populateList(plates = [], platesList) {
platesList.innerHTML = plates.map((plate, i) => {
return `
<li>
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
<label for="item${i}">${plate.text}</label>
</li>
`;
}).join('');
}
function toggleDone(e) {
if (!e.target.matches('input')) return; // skip this unless it's an input
const el = e.target;
const index = el.dataset.index;
items[index].done = !items[index].done;
localStorage.setItem('items', JSON.stringify(items));
populateList(items, itemsList);
}
addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);
populateList(items, itemsList);
Knowing how to make input forms is useful to a web designer because it allows for more interactivity for the user.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_29/Lab_29.html
No comments:
Post a Comment