In this lab, I followed the instruction from JavaScript30 and recreated the Sort Without Articles 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_31.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_31.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 31</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed in <ul id="bands"></ul> to make the list. 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. #bands {list-style: inside square; font-size: 20px; background: white; width: 500px; margin: auto; padding: 0; box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);} #bands li {border-bottom: 1px solid #efefef; padding: 20px;} #bands li:last-child {border-bottom: 0;} which gave color, size, and positioning to the main content of the lab. For the JavaScript, I put:
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
function strip(bandName) {
return bandName.replace(/^(a |the |an )/i, '').trim();
}
const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
document.querySelector('#bands').innerHTML =
sortedBands
.map(band => `<li>${band}</li>`)
.join('');
console.log(sortedBands);
This gave text to the content in an ordered way. Knowing how use JavaScript is useful to a web designer because it makes their websites function.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_31/Lab_31.html
No comments:
Post a Comment