Friday, December 27, 2019

Lab 21 Array Cardio Day 2

In this lab, I followed the instruction from JavaScript30 and recreated the Array Cardio Day 2 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_21.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_21.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 21</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. After that, I typed in <p> tags and <em> tags that instructed the user to look in thier Javascript Console. 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. For the JavaScript, I made:

// JavaScript Document
const people = [
      { name: 'Max', year: 2001 },
      { name: 'Brittney', year: 2002 },
      { name: 'Ivan', year: 1980 },
      { name: 'Ethan', year: 2012 }
    ];

    const comments = [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ];

    // Some and Every Checks
    // Array.prototype.some() // is at least one person 19?
    // const isAdult = people.some(function(person) {
    //   const currentYear = (new Date()).getFullYear();
    //   if(currentYear - person.year >= 19) {
    //     return true;
    //   }
    // });
    const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
    console.log({isAdult});
    // Array.prototype.every() // is everyone 19?
    const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
    console.log({allAdults});
    // Array.prototype.find()
    // Find is like filter, but instead returns just the one you are looking for
    // find the comment with the ID of 823423
    const comment = comments.find(comment => comment.id === 823423);
    console.log(comment);
    // Array.prototype.findIndex()
    // Find the comment with this ID
    // delete the comment with the ID of 823423
    const index = comments.findIndex(comment => comment.id === 823423);
    console.log(index);
    // comments.splice(index, 1);
    const newComments = [
      ...comments.slice(0, index),
      ...comments.slice(index + 1)
    ];

That made use of the console commands. Knowing how to use JavaScript is useful to a web designer because it allows web designers to make website functional.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_21/Lab_21.html


No comments:

Post a Comment