Friday, December 27, 2019

Lab 44 Wack-a-mole

In this lab, I followed the instruction from JavaScript30 and recreated the Wack-a-mole 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_44.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_44.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 44</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. After that, I typed in <h1> tags and inside those tags I put "Wack-a-mole" for text and <span class="score">0</span>. Next, I typed <button onClick="startGame();">Start!</button> for a start button. Afterwords, I typed in <p id="end"><b>Game Over!</b></p> which bolds the text shown when the game has ended. Then I typed in <div class="game"></div> and inside those div tags, I typed in multiple divs for the Wack-a-mole game. Lastly I typed in a legal notice via <p id="txt">Images from <a href="http://clipart-library.com/">http://clipart-library.com/</a></p> to cite the images used from clipart-library.com. Lastly, I made the copyright notice with <p> and <div> tags. For the CSS, I typed in html {width: 100%; height: auto;} body {background-color: #00FFA8; min-width: 100%; min-height: 100%;} to make the webpage responsive to screen size changes. I typed in #heading {text-align: center; font-size: 16px;} to center the heading of the lab. #txt {text-align: center;} to center the legal notice text. #end {display: none; font-size: 24px;} to hide the text that displays when the Wack-a-mole game ends and increase the font size of it. .score {background: rgba(255,255,255,0.2);  padding: 0 3rem; line-height: 1; border-radius: 1rem;} to highlight the score that the player got in the game. .game {width: 600px; height: 400px; display: flex; flex-wrap: wrap; margin: 0 auto;} to give the game a defined size. .hole {flex: 1 0 33.33%; overflow: hidden; position: relative;} .hole:after {display: block; background: url("1798891.gif") bottom center no-repeat; background-size: contain; content: ''; width: 100%; height:70px; position: absolute; z-index: 2; bottom: -30px;} .mole {background: url("2044864.png") bottom center no-repeat; background-size: 60%; position: absolute; top: 100%; width: 100%; height: 100%; transition:all 0.4s;} .hole.up .mole {top: 0;} to position where the holes and the mole were going to be. For the JavaScript, I typed in:

const holes = document.querySelectorAll('.hole');
  const scoreBoard = document.querySelector('.score');
  const moles = document.querySelectorAll('.mole');
  let lastHole;
  let timeUp = false;
  let score = 0;
  function randomTime(min, max) {
    return Math.round(Math.random() * (max - min) + min);
  }
  function randomHole(holes) {
    const idx = Math.floor(Math.random() * holes.length);
    const hole = holes[idx];
    if (hole === lastHole) {
      console.log('Ah nah thats the same one bud');
      return randomHole(holes);
    }
    lastHole = hole;
    return hole;
  }
  function peep() {
    const time = randomTime(200, 1000);
    const hole = randomHole(holes);
    hole.classList.add('up');
    setTimeout(() => {
      hole.classList.remove('up');
      if (!timeUp) {
  peep();
  document.getElementById("end").style.display = "none";
  } else if (timeUp) {
  document.getElementById("end").style.display = "block";
  }
    }, time);
  }
  function startGame() {
    scoreBoard.textContent = 0;
    timeUp = false;
    score = 0;
    peep();
    setTimeout(() => timeUp = true, 10000)
  }
  function bonk(e) {
    if(!e.isTrusted) return; // cheater!
    score++;
    this.parentNode.classList.remove('up');
    scoreBoard.textContent = score;
  }
  moles.forEach(mole => mole.addEventListener('click', bonk));

This JavaScript makes the game functional by making the game be animated and shows the text before and after the game. Knowing how to use JavaScript is useful to a web designer because it allows web designers to make website functional and implement games into their website.

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


Lab 43 Countdown Timer

In this lab, I followed the instruction from JavaScript30 and recreated the Countdown Timer 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_43.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_43.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 43</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Then, I typed in <div class="timer"></div> which is the div that encompasses the whole timer. Inside that div, I typed in  <div class="timer__controls"></div> with multiple buttons and a form input inside to control the timer. There is also a <div class="display"></div> that has <p> and <h1> tags inside to display the time. For the CSS, I made sure the webpage was responsive the screen size changes by typing in html { width: 100%; height: auto;} body { background-color: #00FFA8; min-width: 100%; min-height: 100%;}. #heading {text-align: center; font-size: 16px;} for centering 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 set the copyright font a different font and space in between. .display__time-left {font-weight: 100; font-size: 20rem; margin: 0; color: white; text-shadow: 4px 4px 0 rgba(0,0,0,0.05);} to style the font and font color of the time text. .timer {display: flex;min-height: 100vh; flex-direction: column;} to style the whole timer itself that aligns its child elements into columns and a minimum height. .timer__controls {display: flex;} .timer__controls > * {flex: 1;}.timer__controls form {flex: 1; display: flex;} .timer__controls input {flex: 1;border: 0;padding: 2rem;} .timer__button { background: none; border: 0; cursor: pointer; color: white; font-size: 2rem; text-transform: uppercase; background: rgba(0,0,0,0.1); border-bottom: 3px solid rgba(0,0,0,0.2); border-right: 1px solid rgba(0,0,0,0.2); padding: 1rem; font-family: 'Inconsolata', monospace;} .timer__button:hover,
.timer__button:focus {background: rgba(0,0,0,0.2); outline: 0;} to style the child elements of the timer like background color or border. .display {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;} .display__end-time {font-size: 4rem; color: white;} to make the timer text align properly. For the JavaScript, I put:

// JavaScript Document
let countdown;
const timerDisplay = document.querySelector('.display__time-left');
const endTime = document.querySelector('.display__end-time');
const buttons = document.querySelectorAll('[data-time]');

function timer(seconds) {
  // clear any existing timers
  clearInterval(countdown);

  const now = Date.now();
  const then = now + seconds * 1000;
  displayTimeLeft(seconds);
  displayEndTime(then);

  countdown = setInterval(() => {
    const secondsLeft = Math.round((then - Date.now()) / 1000);
    // check if we should stop it!
    if(secondsLeft < 0) {
      clearInterval(countdown);
      return;
    }
    // display it
    displayTimeLeft(secondsLeft);
  }, 1000);
}

function displayTimeLeft(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainderSeconds = seconds % 60;
  const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;
  document.title = display;
  timerDisplay.textContent = display;
}

function displayEndTime(timestamp) {
  const end = new Date(timestamp);
  const hour = end.getHours();
  const adjustedHour = hour > 12 ? hour - 12 : hour;
  const minutes = end.getMinutes();
  endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
}

function startTimer() {
  const seconds = parseInt(this.dataset.time);
  timer(seconds);
}

buttons.forEach(button => button.addEventListener('click', startTimer));
document.customForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const mins = this.minutes.value;
  console.log(mins);
  timer(mins * 60);
  this.reset();
});

This makes the timer get the time, continue forward in timer, animate the time, and make the timer functional.

Lastly, I made the copyright notice with <p> and <div> tags. Knowing how to build a countdown timer is useful for a web designer in making his or her own websites with time mechanics.

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


Lab 42 Video Speed Controller

In this lab, I followed the instruction from JavaScript30 and recreated the Video Speed Controller 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_42.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_42.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 42</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I wrote <div class="wrapper"></div> to wrap the content of the lab. After that I did <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video> to make the video. Then I typed <div class="speed"><div class="speed-bar">1×</div></div> to create the speed 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. video {box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);} to give the video a box shadow. .speed {background: #efefef; flex: 1; display: flex; align-items: flex-start; margin: 10px; border-radius: 50px; box-shadow: 0 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;} .speed-bar {width: 100%; background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; padding: 2px; color: white;
height: 16.3%;} to give the speed bar coloring, size, and positioning.  For the JavaScript, I did:

const speed = document.querySelector('.speed');
  const bar = speed.querySelector('.speed-bar');
  const video = document.querySelector('.flex');
  function handleMove(e) {
      const y = e.pageY - this.offsetTop;
      const percent = y / this.offsetHeight;
      const min = 0.4;
      const max = 4;
      const height = Math.round(percent * 100) + '%';
      const playbackRate = percent * (max - min) + min;
      bar.style.height = height;
      bar.textContent = playbackRate.toFixed(2) + '×';
      video.playbackRate = playbackRate;
    }
  speed.addEventListener('mousemove', handleMove);

This JavaScript makes the speed bar function and controls the speed of the video when moving horizontally inside it with the mouse cursor. Knowing how to build a video speed controller is useful to a web designer because it adds user interactions that benefit the site and the user.

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


Lab 41 Click and Drag

In this lab, I followed the instruction from JavaScript30 and recreated the Click and Drag 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_41.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_41.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 41</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next, I typed in numerous <div> tags and most of them had a number inside them. For the CSS, I typed in html {width: 100%; height: auto;} body {background-color: #00FFA8; min-width: 100%; min-height: 100%;} to make the webpage responsive to screen size changes and have a background color. #heading {text-align: center; font-size: 16px;} to make the heading of the lab centered. #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. .items {height: 800px; padding: 100px; width: 100%; border: 1px solid white; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; user-select: none; cursor: pointer; transition: all 0.2s; transform: scale(0.98); will-change: transform; position: relative; background: rgba(255,255,255,0.1); font-size: 0; perspective: 500px;} .items.active {background: rgba(255,255,255,0.3); cursor: grabbing; cursor: -webkit-grabbing; transform: scale(1);} .item { width: 200px; height: calc(100% - 40px); display: inline-flex; align-items: center; justify-content: center; font-size: 80px; font-weight: 100; color: rgba(0,0,0,0.15); box-shadow: inset 0 0 0 10px rgba(0,0,0,0.15);} .item:nth-child(9n+1) { background: dodgerblue;} .item:nth-child(9n+2) { background: goldenrod;} .item:nth-child(9n+3) { background: paleturquoise;} .item:nth-child(9n+4) { background: gold;} .item:nth-child(9n+5) { background: cadetblue;} .item:nth-child(9n+6) { background: tomato;} .item:nth-child(9n+7) { background: lightcoral;} .item:nth-child(9n+8) { background: darkslateblue;} .item:nth-child(9n+9) { background: rebeccapurple;} .item:nth-child(even) { transform: scaleX(1.31) rotateY(40deg); } .item:nth-child(odd) { transform: scaleX(1.31) rotateY(-40deg); } to make the divs align, colorize the divs, and give sizes to the divs. For the JavaScript I typed:

const slider = document.querySelector('.items');
  let isDown = false;
  let startX;
  let scrollLeft;
  slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
  });
  slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
  });
  slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
  });
  slider.addEventListener('mousemove', (e) => {
    if (!isDown) return;  // stop the fn from running
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 3;
    slider.scrollLeft = scrollLeft - walk;
  });

This JavaScript allows the user to move the divs horizontally by clicking and dragging the divs across the screen. Lastly, I made the copyright notice with <p> and <div> tags. Knowing how to make click and drag objects in a webpage is useful to a web designer because it allows for more interactivity and better transitions for the user who may do business to the website.

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


Lab 40 Stripe Follow Along Nav

In this lab, I followed the instruction from JavaScript30 and recreated the Stripe Follow Along Nav 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_40.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_40.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 40</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed in <nav class="top"<div class="dropdownBackground"><span class="arrow"></span></div> to make the 3 boxes. After that, I typed in <li>, <a>, <div>, <img>, <p>, <ul>, and <span> classes to make the pop-up appear with content in the boxes. Lastly, I made the copyright notice with <p> and <div> tags. For the CSS, I typed in 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 page responsive to screen size changes. #heading {text-align: center; font-size: 16px;} #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%;} for centering the heading and changing the font of the copyright notice. nav {position: relative; perspective: 600px;} .cool > li > a {color: yellow; text-decoration: none; font-size: 20px; background: rgba(0,0,0,0.2); padding: 10px 20px; display: inline-block; margin: 20px; border-radius: 5px;} nav ul {list-style: none; margin: 0; padding: 0; display: flex; justify-content: center;} .cool > li {position: relative; display: flex; justify-content: center;} to position, colorize, and size the boxes. .dropdown {opacity: 0; position: absolute; overflow: hidden; padding: 20px; top: -20px; border-radius: 2px; transition: all 0.5s; transform: translateY(100px); will-change: opacity; display: none;} .trigger-enter .dropdown { display: block;} .trigger-enter-active .dropdown {opacity: 1;} .dropdownBackground {width: 100px; height: 100px;
position: absolute; background: #fff; border-radius: 4px; box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1); transition: all 0.3s, opacity 0.1s, transform 0.2s; transform-origin: 50% 0; display: flex; justify-content: center; opacity: 0;} .dropdownBackground.open {opacity: 1;} to give the content coloring, positioning, font, size, and animation. .arrow {position: absolute; width: 20px; height: 20px; display: block; background: white; transform: translateY(-50%) rotate(45deg);} to make the pop-up and colorize it.  .bio {min-width: 500px; display: flex; justify-content: center; align-items: center; line-height: 1.7;} .bio img { float: left; margin-right: 20px; width: 25%; height: auto;} .courses {min-width: 300px;} .courses li { padding: 10px 0; display: block;border-bottom: 1px solid rgba(0,0,0,0.2);} .dropdown a { text-decoration: none; color: #ffc600;} a.button {background: black; display: block; padding: 10px; color: white; margin-bottom: 10px;} /* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */ .button[href*=twitter] { background: #019FE9; } .button[href*=facebook] { background: #3B5998; } .button[href*=youtube] { background: #ff0000; } .button[href*=instagram] { background: #3f729b; } to stylize the content inside the pop-up. For the JavaScript, I typed:

const triggers = document.querySelectorAll('.cool > li');
  const background  = document.querySelector('.dropdownBackground');
  const nav  = document.querySelector('.top');
  function handleEnter() {
    this.classList.add('trigger-enter');
    setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
    background.classList.add('open');
    const dropdown = this.querySelector('.dropdown');
    const dropdownCoords = dropdown.getBoundingClientRect();
    const navCoords = nav.getBoundingClientRect();
    const coords = {
      height: dropdownCoords.height,
      width: dropdownCoords.width,
      top: dropdownCoords.top - navCoords.top,
      left: dropdownCoords.left - navCoords.left
    };
    background.style.setProperty('width', `${coords.width}px`);
    background.style.setProperty('height', `${coords.height}px`);
    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
  }
  function handleLeave() {
    this.classList.remove('trigger-enter', 'trigger-enter-active');
    background.classList.remove('open');
  }
  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));

This makes the navigation with the pop-up functional and shows the content of it when hovered over.
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_40/Lab_40.html


Lab 39 Event Capture, Propagation, Bubbling and Once

In this lab, I followed the instruction from JavaScript30 and recreated the Event Capture, Propagation, Bubbling and Once 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_39.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_39.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 39</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed <div class="one"><div class="two"><div class="three"></div></div></div>. For the CSS, I typed in html {width: 100%; height: auto;} body {background-color: #00FFA8;
min-width: 100%; min-height: 100%;} to make the page size responsive and give the page a background color. #heading {text-align: center; font-size: 16px;} #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 beginning and ending text of the webpage. div {width: 100%; padding: 100px;} .one {background: thistle; cursor: pointer;} .two {background: mistyrose; cursor: pointer;} .three {background: coral; cursor: pointer;} to colorize the <divs> tags to look like the boxes in the console menu. For the JavaScript, I typed in:

 const divs = document.querySelectorAll('div');
  const button = document.querySelector('button');
  function logText(e) {
    console.log(this.classList.value);
    // e.stopPropagation(); // stop bubbling!
    // console.log(this);
  }
  divs.forEach(div => div.addEventListener('click', logText, {
    capture: false,
    once: true
  }));
  button.addEventListener('click', () => {
    console.log('Click!!!');
  }, {
    once: true
  });

This makes the <div> tags put out a console.log output from the console menu of the webpage. Lastly, I made the copyright notice with <p> and <div> tags. 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_39/Lab_39.html



Lab 38 Sticky Nav

In this lab, I followed the instruction from JavaScript30 and recreated the Sticky Nav 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_38.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_38.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 38</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next, I typed in <nav id="main"><ul><li class="logo"><a href="#">LOST.</a></li><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Images</a></li><li><a href="#">Locations</a></li><li><a href="#">Maps</a></li></ul></nav> to make the navigation bar. Then I put <div class="site-wrap"></div> to make the content of the lab and inside it I typed, <p> and <img> tags to fill up the content. 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 make the webpage screen responsive and have a background color. #heading {text-align: center; font-size: 16px;} #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 stylize the beginning and end text with their fonts. .site-wrap {max-width: 700px; margin: 70px auto; background: white; padding: 40px; text-align: justify; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); transform: scale(0.98); transition: transform 0.5s;} body.fixed-nav .site-wrap {transform: scale(1);} to stylize the content with color, font, and animation. h1 {color: white; font-size: 7vw; text-shadow: 3px 4px 0 rgba(0,0,0,0.2);} to make <h1> tags text color white, change the font size, and provide a text shadow. nav {background: black; top: 0; width: 100%; transition:all 0.5s; position: relative; z-index: 1;} body.fixed-nav nav {position: fixed; box-shadow: 0 5px 0 rgba(0,0,0,0.1);} nav ul {margin: 0; padding: 0; list-style: none; display: flex;} nav li {flex: 1; text-align: center; display: flex; justify-content: center; align-items: center;} li.logo {max-width: 0; overflow: hidden; background: white; transition: all 0.5s; font-weight: 600; font-size: 30px;} li.logo a {color: black;} .fixed-nav li.logo {max-width: 500px;} nav a {text-decoration: none; padding: 20px; display: inline-block; color: white; transition: all 0.2s; text-transform: uppercase;} to stylize the navigation menu to have color, size, and positioning. For the JavaScript, I typed in:

const nav = document.querySelector('#main');
    let topOfNav = nav.offsetTop;
    function fixNav() {
      if (window.scrollY >= topOfNav) {
        document.body.style.paddingTop = nav.offsetHeight + 'px';
        document.body.classList.add('fixed-nav');
      } else {
        document.body.classList.remove('fixed-nav');
        document.body.style.paddingTop = 0;
      }
    }
    window.addEventListener('scroll', fixNav);

This makes the navigation bar resize and move when scrolling the page. Knowing how to use sticky navigation is useful for a web designer that wants to make their UI more accessible to the user.

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


Lab 37 Speech Synthesis

In this lab, I followed the instruction from JavaScript30 and recreated the Speech Synthesis 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_37.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_37.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 37</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed in <option>, <select>, <h1>, and div tags that created the form. 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. .voiceinator {padding: 2rem; width: 50rem; margin: 0 auto; border-radius: 1rem; position: relative; background: white; overflow: hidden; z-index: 1; box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);} to give the content a background, size, and positioning. h1 {width: calc(100% + 4rem); margin: -2rem 0 2rem -2rem; padding: .5rem; background: #ffc600; border-bottom: 5px solid #F3C010; text-align: center; font-size: 5rem; font-weight: 100; font-family: 'Pacifico', cursive; text-shadow: 3px 3px 0 #F3C010; to stylize the <h1> tags. .voiceinator input, .voiceinator button, .voiceinator select, .voiceinator textarea {width: 100%; display: block; margin: 10px 0; padding: 10px; border: 0; font-size: 2rem; background: #F7F7F7; outline: 0;} textarea {height: 20rem;} input[type="select"] {} .voiceinator button {background: #ffc600; border: 0; width: 49%; float: left; font-family: 'Pacifico', cursive; margin-bottom: 0; font-size: 2rem; border-bottom: 5px solid #F3C010; cursor: pointer; position: relative;} .voiceinator button:active {top: 2px;} .voiceinator button:nth-of-type(1) {margin-right: 2%;} to make the content inside the <div> tags more colorful and easy on the eyes. For the JavaScript, I typed in:

const msg = new SpeechSynthesisUtterance();
  let voices = [];
  const voicesDropdown = document.querySelector('[name="voice"]');
  const options = document.querySelectorAll('[type="range"], [name="text"]');
  const speakButton = document.querySelector('#speak');
  const stopButton = document.querySelector('#stop');
  msg.text = document.querySelector('[name="text"]').value;
  function populateVoices() {
    voices = this.getVoices();
    voicesDropdown.innerHTML = voices
      .filter(voice => voice.lang.includes('en'))
      .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
      .join('');
  }
  function setVoice() {
    msg.voice = voices.find(voice => voice.name === this.value);
    toggle();
  }
  function toggle(startOver = true) {
    speechSynthesis.cancel();
    if (startOver) {
      speechSynthesis.speak(msg);
    }
  }
  function setOption() {
    console.log(this.name, this.value);
    msg[this.name] = this.value;
    toggle();
  }
  speechSynthesis.addEventListener('voiceschanged', populateVoices);
  voicesDropdown.addEventListener('change', setVoice);
  options.forEach(option => option.addEventListener('change', setOption));
  speakButton.addEventListener('click', toggle);
  stopButton.addEventListener('click', () => toggle(false));

This makes the input form make the the webpage speak with audio. Knowing how to use speech synthesis is useful to a web designer because it gives accessibility to people of disabilities.

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


Lab 36 Follow Along Link Highlighter

In this lab, I followed the instruction from JavaScript30 and recreated the Follow Along Link Highlighter 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_36.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_36.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 36</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed in <nav><ul class="menu"><li><a href="">Home</a></li><li><a href="">Order Status</a></li><li><a href="">Tweets</a></li><li><a href="">Read Our History</a></li><li><a href="">Contact Us</a></li></ul></nav> to create the navigation menu. <div class="wrapper"></div> with <p> and <a> tags inside it for the content of the webpage. 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. .wrapper {margin: 0 auto; max-width: 500px; font-size: 20px; line-height: 2; position: relative;} to give the <div class="wrapper"></div> a size, positioning, and font. a {text-decoration: none; color: black; background: rgba(0,0,0,0.05); border-radius: 20px;} .highlight {transition: all 0.2s; border-bottom: 2px solid white; position: absolute; top: 0; background: white; left: 0; z-index: -1; border-radius: 20px; display: block; box-shadow: 0 0 10px rgba(0,0,0,0.2);} .menu {padding: 0; display: flex; list-style: none; justify-content: center; margin:100px 0;} .menu a {display: inline-block; padding: 5px; margin: 0 20px; color: black;} to colorize and position the link highlighter. For the JavaScript, I put:

// JavaScript Document
const triggers = document.querySelectorAll('a');
  const highlight = document.createElement('span');
  highlight.classList.add('highlight');
  document.body.appendChild(highlight);
  function highlightLink() {
    const linkCoords = this.getBoundingClientRect();
    console.log(linkCoords);
    const coords = {
      width: linkCoords.width,
      height: linkCoords.height,
      top: linkCoords.top + window.scrollY,
      left: linkCoords.left + window.scrollX
    };
    highlight.style.width = `${coords.width}px`;
    highlight.style.height = `${coords.height}px`;
    highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
  }
  triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

This makes the link highlighter move when hovered over or scrolled.Knowing how to use link highlighters is useful to a web designer because it allows the web designer to make more clean designs and UI.

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


Lab 35 Geolocation

In this lab, I followed the instruction from JavaScript30 and recreated the Geolocation 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_35.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_35.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 35</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. After that, I typed in <svg>, <h1>, and <span> tags that create a compass for the geolocater. 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. After that, I typed in .arrow {width: 250px;overflow: hidden;transition: all 0.2s;transform: rotate(0deg);display: inline-block;} .units {font-size: 15px;} which makes the arrow for the Geolocation. For the JavaScript:

const arrow = document.querySelector('.arrow');
    const speed = document.querySelector('.speed-value');
    navigator.geolocation.watchPosition((data) => {
      console.log(data);
      speed.textContent = data.coords.speed;
      arrow.style.transform = `rotate(${data.coords.heading}deg)`;
    }, (err) => {
      console.error(err);
    });
which makes the Geolocation get the location. Knowing how to use a geolocater is useful for collecting data from users from a website.

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


Lab 34 Speech Detection

In this lab, I followed the instruction from JavaScript30 and recreated the Speech Detection 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_34.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_34.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 34</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. After that I typed in <div class="words" contenteditable></div> for the speech detection box. 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. Then I did, .words {max-width: 500px; margin: 50px auto; background-color: white; border-radius: 5px; box-shadow: 10px 10px 0 rgba(0,0,0,0.1); padding: 1rem 2rem 1rem 5rem; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background-size: 100% 3rem; position: relative; line-height: 3rem;} p {margin: 0 0 3rem;}.words:before {content: ''; position: absolute;width: 4px; top: 0; left: 30px;bottom: 0;border: 1px solid;border-color: transparent #efe4e4;} to stylize the speech detection box/main content. For the JavaScript, I typed in:

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();
  recognition.interimResults = true;
  recognition.lang = 'en-US';

  let p = document.createElement('p');
  const words = document.querySelector('.words');
  words.appendChild(p);
  recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
      .map(result => result[0])
      .map(result => result.transcript)
      .join('');
      const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
      p.textContent = poopScript;
      if (e.results[0].isFinal) {
        p = document.createElement('p');
        words.appendChild(p);
      }
  });
  recognition.addEventListener('end', recognition.start);
  recognition.start();

This will result in the webpage detecting the audio. Knowing how to use speech detection software is useful in making websites accessible to people with disabilities.

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


Lab 33 Webcam Fun

In this lab, I followed the instruction from JavaScript30 and recreated the Webcam Fun 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_33.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_33.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 33</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed in <div>, <button>, <canvas>, <video>, and audio tags to make a screen recorder. 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. I typed in .photobooth {background: white; max-width: 150rem; margin: 2rem auto; border-radius: 2px;} .photobooth:after {content: ''; display: block; clear: both;} .photo {width: 100%; float: left;} .player {position: absolute; top: 20px; right: 20px; width:200px;}.strip {padding: 2rem;}
.strip img {width: 100px; overflow-x: scroll; padding: 0.8rem 0.8rem 2.5rem 0.8rem; box-shadow: 0 0 3px rgba(0,0,0,0.2); background: white;} .strip a:nth-child(5n+1) img { transform: rotate(10deg); } .strip a:nth-child(5n+2) img { transform: rotate(-2deg); } .strip a:nth-child(5n+3) img { transform: rotate(8deg); } .strip a:nth-child(5n+4) img { transform: rotate(-11deg); }.strip a:nth-child(5n+5) img { transform: rotate(12deg); } to give size, position, color, and animation to the camera screen. For the JavaScript, I typed:

const video = document.querySelector('.player');
const canvas = document.querySelector('.photo');
const ctx = canvas.getContext('2d');
const strip = document.querySelector('.strip');
const snap = document.querySelector('.snap');

function getVideo() {
  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(localMediaStream => {
      console.log(localMediaStream);

video.srcObject = localMediaStream;
      video.play();
    })
    .catch(err => {
      console.error(`OH NO!!!`, err);
    });
}

function paintToCanvas() {
  const width = video.videoWidth;
  const height = video.videoHeight;
  canvas.width = width;
  canvas.height = height;

  return setInterval(() => {
    ctx.drawImage(video, 0, 0, width, height);
    // take the pixels out
    let pixels = ctx.getImageData(0, 0, width, height);
    // mess with them
    // pixels = redEffect(pixels);

    pixels = rgbSplit(pixels);
    // ctx.globalAlpha = 0.8;

    // pixels = greenScreen(pixels);
    // put them back
    ctx.putImageData(pixels, 0, 0);
  }, 16);
}

function takePhoto() {
  // played the sound
  snap.currentTime = 0;
  snap.play();

  // take the data out of the canvas
  const data = canvas.toDataURL('image/jpeg');
  const link = document.createElement('a');
  link.href = data;
  link.setAttribute('download', 'handsome');
  link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
  strip.insertBefore(link, strip.firstChild);
}

function redEffect(pixels) {
  for (let i = 0; i < pixels.data.length; i+=4) {
    pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
    pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
    pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
  }
  return pixels;
}

function rgbSplit(pixels) {
  for (let i = 0; i < pixels.data.length; i+=4) {
    pixels.data[i - 150] = pixels.data[i + 0]; // RED
    pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
    pixels.data[i - 550] = pixels.data[i + 2]; // Blue
  }
  return pixels;
}

function greenScreen(pixels) {
  const levels = {};

  document.querySelectorAll('.rgb input').forEach((input) => {
    levels[input.name] = input.value;
  });

  for (i = 0; i < pixels.data.length; i = i + 4) {
    red = pixels.data[i + 0];
    green = pixels.data[i + 1];
    blue = pixels.data[i + 2];
    alpha = pixels.data[i + 3];

    if (red >= levels.rmin
      && green >= levels.gmin
      && blue >= levels.bmin
      && red <= levels.rmax
      && green <= levels.gmax
      && blue <= levels.bmax) {
      // take it out!
      pixels.data[i + 3] = 0;
    }
  }

  return pixels;
}

getVideo();

video.addEventListener('canplay', paintToCanvas);

This makes the camera functionality be active during the photo shoot. Lastly, I made the copyright notice with <p> and <div> tags. Knowing how to use a screen recorder is useful to a web designer when making a web video chat website.

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


Lab 32 Adding Up Times with Reduce

In this lab, I followed the instruction from JavaScript30 and recreated the Adding Up Times with Reduce 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_32.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_32.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 32</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next, I inserted <ul> and <li> tags that made a 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. For the JavaScript, I typed in:
  const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
  const seconds = timeNodes
    .map(node => node.dataset.time)
    .map(timeCode => {
      const [mins, secs] = timeCode.split(':').map(parseFloat);
      return (mins * 60) + secs;
    })
    .reduce((total, vidSeconds) => total + vidSeconds);
    let secondsLeft = seconds;
    const hours = Math.floor(secondsLeft / 3600);
    secondsLeft = secondsLeft % 3600;
    const mins = Math.floor(secondsLeft / 60);
    secondsLeft = secondsLeft % 60;
    console.log(hours, mins, secondsLeft);
This makes the webpage functional. 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_32/Lab_32.html


Lab 31 Sort Without Articles

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


Lab 30 Mouse Move Shadow

In this lab, I followed the instruction from JavaScript30 and recreated the Mouse Move Shadow 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_30.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_30.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 30</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed <div class="hero"><h1 contenteditable>🔥WOAH!</h1></div>. 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. .hero {min-height: 100vh; display: flex; justify-content: center; align-items: center;color: black;} h1 {text-shadow: 10px 10px 0 rgba(0,0,0,1); font-size: 100px;} to make the text "WOAH!" big, colorized, and animated. For the JavaScript, I typed:

const hero = document.querySelector('.hero');
  const text = hero.querySelector('h1');
  const walk = 500; // 500px
  function shadow(e) {
    const { offsetWidth: width, offsetHeight: height } = hero;
    let { offsetX: x, offsetY: y } = e;
    if (this !== e.target) {
      x = x + e.target.offsetLeft;
      y = y + e.target.offsetTop;
    }
    const xWalk = Math.round((x / width * walk) - (walk / 2));
    const yWalk = Math.round((y / height * walk) - (walk / 2));
    text.style.textShadow = `
      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
    `;
  }
  hero.addEventListener('mousemove', shadow);

This helps move the text and animate it. Knowing how to make text shadow move is useful to a web designer when making unique websites that require such skills.

Lab 29 Local Storage

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


Lab 28 JavaScript References VS Copying

In this lab, I followed the instruction from JavaScript30 and recreated the JavaScript References VS Copying 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_28.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_28.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 28</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. 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 put:

// JavaScript Document

// start with strings, numbers and booleans
    // let age = 100;
    // let age2 = age;
    // console.log(age, age2);
    // age = 200;
    // console.log(age, age2);
    // let name = 'Wes';
    // let name2 = name;
    // console.log(name, name2);
    // name = 'wesley';
    // console.log(name, name2);
    // Let's say we have an array
    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
    // and we want to make a copy of it.
    const team = players;
    console.log(players, team);
    // You might think we can just do something like this:
    // team[3] = 'Lux';
    // however what happens when we update that array?
    // now here is the problem!
    // oh no - we have edited the original array too!
    // Why? It's because that is an array reference, not an array copy. They both point to the same array!
    // So, how do we fix this? We take a copy instead!
    const team2 = players.slice();
    // one way
    // or create a new array and concat the old one in
    const team3 = [].concat(players);
    // or use the new ES6 Spread
    const team4 = [...players];
    team4[3] = 'heeee hawww';
    console.log(team4);
    const team5 = Array.from(players);
    // now when we update it, the original one isn't changed
    // The same thing goes for objects, let's say we have a person object
    // with Objects
    const person = {
      name: 'Wes Bos',
      age: 80
    };
    // and think we make a copy:
    // const captain = person;
    // captain.number = 99;
    // how do we take a copy instead?
    const cap2 = Object.assign({}, person, { number: 99, age: 12 });
    console.log(cap2);
    // We will hopefully soon see the object ...spread
    // const cap3 = {...person};
    // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
    const wes = {
      name: 'Wes',
      age: 100,
      social: {
        twitter: '@wesbos',
        facebook: 'wesbos.developer'
      }
    };
    console.clear();
    console.log(wes);
    const dev = Object.assign({}, wes);
    const dev2 = JSON.parse(JSON.stringify(wes));


Knowing how to use Javascript is useful to a web designer because it allows the website to be functional.

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


Lab 27 Slide in on Scroll

In this lab, I followed the instruction from JavaScript30 and recreated the Slide in on Scroll 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_27.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_27.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 27</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next I typed in <p> and <img> tags for the main content of the lab. 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. Next, I typed in .site-wrap {max-width: 700px;margin: 100px auto;background: white; padding: 40px; text-align: justify;}.align-left {float: left; margin-right: 20px;}.align-right {float: right; margin-left: 20px;}.slide-in {opacity: 0; transition: all .5s;} .align-left.slide-in {transform: translateX(-30%) scale(0.95);} .align-right.slide-in {transform: translateX(30%) scale(0.95);} .slide-in.active {opacity: 1; transform: translateX(0%) scale(1);} to make the text and images be animated when scrolled. For the JavaScript, I put:

// JavaScript Document

function debounce(func, wait = 20, immediate = true) {
      var timeout;
      return function() {
        var context = this, args = arguments;
        var later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    };
    const sliderImages = document.querySelectorAll('.slide-in');
    function checkSlide() {
      sliderImages.forEach(sliderImage => {
        // half way through the image
        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
        // bottom of the image
        const imageBottom = sliderImage.offsetTop + sliderImage.height;
        const isHalfShown = slideInAt > sliderImage.offsetTop;
        const isNotScrolledPast = window.scrollY < imageBottom;
        if (isHalfShown && isNotScrolledPast) {
          sliderImage.classList.add('active');
        } else {
          sliderImage.classList.remove('active');
        }
      });
    }
    window.addEventListener('scroll', debounce(checkSlide));

This makes the images and text show when the user scrolls down. Lastly, I made the copyright notice with <p> and <div> tags. Knowing how to make images appear when the user scroll is useful when making websites that contain a lot of text and images.

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


Lab 26 Key Sequence Detection

In this lab, I followed the instruction from JavaScript30 and recreated the Key Sequence Detection 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_26.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_26.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 19</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. 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. Next I typed in .hint {text-align: center; font-size: 24px; margin: 0;} .highlight {background-color: yellow; text-decoration: underline;} to highlight the hints. For the JavaScript, I put:

const pressed = [];
const secretCode = 'march';

window.addEventListener('keyup', (e) => {
  console.log(e.key);
  pressed.push(e.key);
  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
  if (pressed.join('').includes(secretCode)) {
    console.log('DING DING!');
    cornify_add();
  }
  console.log(pressed);
});

to make the secret code activate when pressed the certain keys. Knowing how to use key sequence detection is useful to a web designer in registering user input.

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


Lab 25 Custom Video Player

In this lab, I followed the instruction from JavaScript30 and recreated the Custom Video Player 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_25.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_25.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 25</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. After that, I typed in <div>, <input>, and <button> tags which built the video player. Afterwords, I typed in <p> and <a> tags that credited the video. 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. Next I did:

.player {
  margin: 0 auto;
  max-width: 750px;
  border: 5px solid rgba(0,0,0,0.2);
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  position: relative;
  font-size: 0;
  overflow: hidden;
}

/* This css is only applied when fullscreen is active. */
.player:fullscreen {
  max-width: none;
  width: 100%;
}

.player:-webkit-full-screen {
  max-width: none;
  width: 100%;
}

.player__video {
  width: 100%;
}

.player__button {
  background: none;
  border: 0;
  line-height: 1;
  color: white;
  text-align: center;
  outline: 0;
  padding: 0;
  cursor: pointer;
  max-width: 50px;
}

.player__button:focus {
  border-color: #ffc600;
}

.player__slider {
  width: 10px;
  height: 30px;
}

.player__controls {
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(100%) translateY(-5px);
  transition: all .3s;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.1);
}

.player:hover .player__controls {
  transform: translateY(0);
}

.player:hover .progress {
  height: 15px;
}

.player__controls > * {
  flex: 1;
}

.progress {
  flex: 10;
  position: relative;
  display: flex;
  flex-basis: 100%;
  height: 5px;
  transition: height 0.3s;
  background: rgba(0,0,0,0.5);
  cursor: ew-resize;
}

.progress__filled {
  width: 50%;
  background: #ffc600;
  flex: 0;
  flex-basis: 50%;
}

/* unholy css to style input type="range" */

input[type=range] {
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
  margin: 0 5px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: rgba(255,255,255,0.8);
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}

input[type=range]::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.5px;
  box-shadow:0 0 2px rgba(0,0,0,0.2);
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #bada55;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
}

which made the video screen and options colorful, positioned well, and sized. For the JavaScript, I put:

// JavaScript Document

/* Get Our Elements */
const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');
const toggle = player.querySelector('.toggle');
const skipButtons = player.querySelectorAll('[data-skip]');
const ranges = player.querySelectorAll('.player__slider');

/* Build out functions */
function togglePlay() {
  const method = video.paused ? 'play' : 'pause';
  video[method]();
}

function updateButton() {
  const icon = this.paused ? '►' : '❚ ❚';
  console.log(icon);
  toggle.textContent = icon;
}

function skip() {
 video.currentTime += parseFloat(this.dataset.skip);
}

function handleRangeUpdate() {
  video[this.name] = this.value;
}

function handleProgress() {
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.style.flexBasis = `${percent}%`;
}

function scrub(e) {
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}

/* Hook up the event listeners */
video.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
video.addEventListener('timeupdate', handleProgress);

toggle.addEventListener('click', togglePlay);
skipButtons.forEach(button => button.addEventListener('click', skip));
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));

let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mouseup', () => mousedown = false);


which allowed for user interaction with the video like pausing and speeding up the video.

 Knowing how to make custom video player is useful to a web designer because it allows the web designer to do his/her job more effectively and efficiently.

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