Web Client Programming By Wei Jian Zhen: January 2020

Tuesday, January 28, 2020

Smart Goals

Today, during 1/28/2020, I was assigned to make S.M.A.R.T. Goals. The short term goal I made was about healing my body from illnesses. I will ascertain this goal by applying medicine to myself. I will know when my goal has been reached when I do not have redness and coughing. The mid-term goal is getting an 80-90+ grade point average. I will ascertain this goal by studying the subjects that I have. I will know when my goal has been reached when I get my report card. The long term goal is improving my intelligence. I will ascertain this goal by learning about specific topics and/or subjects and gathering information from credible sources. I will know when my goal has been reached when I get do well on exams or get my report card.

My S.M.A.R.T. Goals.

Tuesday, January 14, 2020

Lab 12 Jason

In this lab, I used JavaScript and JSON to build a website with videos in it. First, I opened my zip file containing the HTML for Lab 12. All of the code for the HTML was complete already from <html> tags to <video> tags. For the CSS, I typed in html {min-height: 100%; min-width: 100%; max-height: 100%; max-width: 100%;} body {width: 100%; height: auto; background-color: #383838;} to make the webpage responsive to size changes and have a background color. Next I typed in .container {background-color: #F9A93e;} to make the background color of the <div> displaying the video orange. Then I typed in #videos-list {display: block; position: relative; float: left; height: 440px; width: auto; list-style-type: none; overflow-x: hidden; overflow-y: scroll;} to make the column containing the videos have a defined size, no bullet points, and have a vertical scroll. After that, I typed in .col-md-12 {width: 100%; height: auto; background-color: #F04C6b;} that makes the top <div> red. Lastly, I typed in .col-md-3 {width: 210px; height: auto; background-color: #3C3C3c;} This makes the div containing the video list have a black background color. For the JavaScript, I placed in:

{
"youtubeId": "yrWOhhOsg2k",
"title": "ur cute",
"author": "narpy"
},
{
"youtubeId": "QabOws88zD4",
"title": "give me the ball papa",
"author": "jimmy2296"
},
{
"youtubeId": "Fa2irrYK09w",
"title": "Knights in gym",
"author": "Ordo Kromen"
}

to insert more videos into the webpage. Knowing how to use JSON is useful to a web designer because it allows the web designer to input updated information into their website without changing the information over and over again.

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

Monday, January 13, 2020

WBL Workshop #4 Resume Writing

On January 13, 2020 I came to the Web Design room of my school to do a Work Based Learning (WBL) workshop. I sat down and listened to the workshop presentation by the WBL Coordinator about resume writing, building, and the importance of resumes. The most important points of the workshop was about the importance of persuading the employer to select you for a job with an excellent resume. Skills like literary fluency and resume design are important to a web designer because it advertises their skills to potential employers for the web designers to make money and keep themselves sustained.

Friday, January 10, 2020

Lab 10 Cycle Simple Slideshow

In this lab, I implemented/fixed simple cycle slideshows on a pre-built webpage via a zip file. First, I downloaded the zip file and opened it up. Secondly, I linked all the CSS and JavaScript files onto the HTML file with <script> and <link> tags in the <head> and <body> tags. After that, I typed in id="subContent1" class="subColumn" data-cycle-fx="carousel" data-cycle-carousel-vertical="true" inside the bottom-left div containing images of a t-shirt, people in line, and alcoholic beverages. The images themselves have <img> tags with alt attributes that I added. Next, I typed id="subContent2" class="subColumn" into the bottom middle <div> containing text. Afterwords, I typed in id="subContent3" class="subColumn" for the bottom right <div> which contained images of music ads. Images have <img> tags with the alt attribute added in by me. Lastly, I typed in the javascript to make the slideshow function as intended inside <script> tags with:

$(document).ready(function(){

$('#subContent1').cycle({
fx: 'scrollVert',
speed: 200,
timeout: 5000,
delay:3000
});

$('#subContent2').cycle({
fx: 'scrollHorz',
speed: 200,
timeout: 5000,
delay:3000,
rev: true,
slides: "> div"
});

$('#subContent3').cycle({
fx: 'fade',
speed: 200,
timeout: 5000,
delay:3000
});
});

This JavaScript code cycles through the images of the bottom left div vertically, cycles horizontally through the texts of the bottom middle div, and cycles through the images of the bottom right div by fading the images away to the next one. Slideshows are useful to web designers because it grants the web designers access to more tools in their arsenal to build and improve their website.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_10/

Thursday, January 9, 2020

Lab 9 Carousel

In this lab, I created a carousel from the images and links given by the website from a zip file. First, I downloaded and opened up the zip file. Next, I linked most of the CSS and JavaScript files onto the HTML file with <script> and <link> tags. After that, I made <div> tags with ids in them to align the images, texts, and links to the correct order. After that, I typed in more <div> tags that encompassed <span> and <a> tags that are used to navigate the carousel. Carousels are useful to a web designer because it allows more options to the web designer and can enhance the page.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_09/

Lab 8 Random Testimonials Troubleshooting

In this lab, I fixed the website that was given to me via a zip file. First up, downloaded and opened up the zip file. Next I looked through the code to see if there was any errors like missing semicolons or wierd syntaxes. Then I noticed that the multiple texts did no change right below the top image. So I typed in <script> tags to link my JavaScript file to the HTML file to make the text change. I typed into the JavaScript:
$(function(){

"use strict";
var pressQuotes = [];
pressQuotes[0]="NAPS is by far the most significant cultural force of the decade. â€” New York Times";
pressQuotes[1]="These days sleeping at your desk is not just acceptable, it's encouraged. â€” The Atlantic";
pressQuotes[2]="NAPS has changed the way people think about sleep, on a grand scale. â€” Washington Post";
pressQuotes[3]="Happiness increased 200% since NAPS began promoting siestas. â€” National Science Review";
pressQuotes[4]="NAPS has ushered in a new era of sleep. â€” USA Today";
pressQuotes[5]="Not surprisingly, more siestas means more productivity. â€” Wall Street Journal";
pressQuotes[6]="NAPS is doing the hard work of helping people get the rest they need. â€” U.S. News";

var rando = Math.floor(Math.random()*pressQuotes.length);

$("#press-quote").html(pressQuotes[rando]);
});

which changed the text everytime the page was reloaded. Knowing how to troubleshoot code is useful to a web designer when debugging and fixing their websites.

Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_08/

Lab 7 Simple Accordion

In this lab, I created a simple accordion with HTML, CSS, and JavaScript. To do this, I first created new HTML, CSS, and JavaScript files. The <html>, <head>, <body>, <meta> and <title> tags were present in the HTML file. Thirdly I linked my CSS and JavaScript files via <link> and <script> tags in the <head> and <body> tags. Fourthly, I typed in <div class="center"><h1>Lab 7</h1><h2>Wei Jian Zhen</h2><h3>1/2/2020</h3></div> to create the header of the lab. I put some <br> tags afterwords to create a line break for the next content. Next, I typed in <dl> tags which are description list tags. Inside the <dl> tags, I typed in <dt> tags which are terms/names of the description list. Inside the <dt> tags, I typed in <dd> tags which defines the description list terms/names. Inside the description list, I typed in text so that <dt> tags show a question and <dd> tags show an answer. For the CSS, I typed in html {min-width: 100%; min-height: 100%; padding: 0; margin: 0;} body {
min-width: 100%; min-height: 100%;} to make the webpage responsive to size changes. I typed in dl {width: 100%; height: auto;} to give the description list a defined size. I typed in dt {background-color:#0090FF; width: 80%; height: 45px; border-style: solid; border-color: white; border-radius:4px;
color: white; font-size: 25px; cursor: pointer;} to give the <dt> tags a background color of blue, width of 80% of its original width, height of 45 pixels, a white border, white text color, font size of 25 pixels, and a change in the mouse cursor when at the <dt> tags. Next I typed in dt:hover { background-color:#00D0FF;} to further indicate that the mouse is at the <dt> tags. After that, I typed in dd {width: 75%; height: 40px; background-color:#DBDBDB; object-position: center; border-radius:4px; font-size: 20px;} to give the <dd> tags 75% of its original width, a height of 40 pixels, background color of grey, center the text, a border, and a font size of 20 pixels. To center the content, I used the class .center { margin-left: auto; margin-right: auto;margin-top: 3px; margin-bottom: 3px;
text-align: center; }. For the JavaScript, I typed in $(document).ready(function(){$("dd").hide(); $(".answer").hide(); $("dl").on("mouseover", "dt", function(){ $(this).next() .slideDown(300) .siblings("dd") .slideUp(300);});}); to make the <dd> tags show when it is sliding down the <dt> tags and when the mouse cursor is at the <dt> tags. Knowing how to use accordions is useful to a web designer as it gives the web designer another tool they can use to enhance their websites.

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

Wednesday, January 8, 2020

Lab 11 AJAX load

In this lab, I used jQuery AJAX, which assists in loading data from a server without a browser page refresh, to load a text file onto the HTML file when the user presses the button. To do this, I first downloaded the zip file given to me for the lab. Secondly, I opened my HTML file to see what was inside. I had my <html>, <head>, <meta>, <title>, <script>, <body>, <div>, and <button> tags as a preset for me. Thirdly, I typed in <div id=”head”><h1>Lab 11</h1><h2>Wei Jian Zhen</h2><h3>1/8/2019</h3></div> to make the heading of the lab. Fourthly, I surrounded the <div id=”div1”> <h2>Let jQuery AJAX Change This Text</h2></div> and <button>Get External Content</button> with <div id="main"></div> to style the content. Next, I created a CSS file to style the webpage. I typed inside the CSS file html {min-width: 100%; min-height: 100%; max-width: 100%; max-height: 100%;} and body {width: 100%; height: auto; background-color: cyan;} to make the html document responsive to any changes to the document’s width or height and have a background color of cyan for the page. After that, I typed in #main {width: 50%; height: auto; margin: 0 auto; text-align: center; background-color: aquamarine; border: 1px solid #000000;} to make the <div id="main"></div> half its width, have proportionate height in response to the width, center the div, center the text and button inside the div, have a aquamarine background color, and a thin black border around the div. Afterwards, I typed in #main button {font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; font-size: 32px; background-color: ghostwhite; color: black; border: 1px solid #000000; margin: 5px; cursor: pointer;} to style the button inside the div with a font family of Lucida Granda, font size of 32 pixels, background color of ghostwhite, text color of black, a black thin border, space around the button, and to turn the cursor into a pointer. Then I typed in #head { text-align: center;} to center the heading with the <h1>, <h2>, and <h3> tags inside. Furthermore, I typed in #div1 {text-align: center;} to center the text above the button. Lastly, I changed the JavaScript inside one of the <script> tags which loads the txt file to the HTML document. JQuery AJAX is useful to web designers because it allows web designers to change text almost instantaneously without changing the HTML document and reloading the webpage, as that process is slower.

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