Web Client Programming By Wei Jian Zhen: April 2019

Thursday, April 18, 2019

Games 4 Change Website Submission

Today I submitted my Games 4 Change submission. The topic on it was broad ranging from diversity to equity. Now for that, I built a website for the submission. So first, I created a new html file. I typed in the basic html code, which are <!doctype html> tag, <html> tags, <meta> tags, <title> tags, <head> tags, and <body> tags. Secondly, I inserted <link rel> tags to insert my CSS stylesheet and favicon into the website. Thirdly inside the <body> tags, I inserted my content there. I typed in <div> tags with a class name of bannerDiv and a name of top. Inside those <div> tags, I placed in <center> tags and inside those <center> tags, I put <img src> tags to place my banner on the top of the website. Next I typed in another <div> tags with a class name of navbar. Inside the <div> tags, I typed in another <div> tag with a class name of dropdown. Inside the <div> tags with the class name of dropdown, I typed in <button> tags with a class name of dropbtn, onclick name of myFunction(), and the unicode for a 3 line hamburger menu icon between the button tags. After the <button> tags, I inserted <div> tags with a class name of dropdown-content and an id of myDropdown. Inside the <div> tags with a class name of dropdown-content, I inserted <a> tags with text between them. That code I typed in was the navbar and the 3 line hamburger menu. After that, I typed in <center> tags. Inside the <center> tags, I typed in a whole bunch of text. I started with <h1> tags with Equality & Equity inside. Next I typed in a <br> tag to make a line break. After that, I typed in <div> tags with a class name of eeDiv. Inside the <div> tags, I typed in <h2> tags with Equality inside. I typed in a <br> tag to make a line break again. I typed in <h5> tags that displayed the definition of equality with <cite> tags and <i> tags to some words italic. Then I typed in <p> tags with <a> tags, <img> src> tags, and text inside to make the image align with the text. I duplicated all the content from <div> tags with eeDiv class and pasted it under a <br> tag after the <div> tags with eeDiv class. I changed the name of the classes and text to relate to equity. Then I coded in a back to the top button with <button> tags, that have an id of bTopBtn and a class name of topBtn. Inside the button, I placed in <a> tags with an href of #Top and a style of color:Black; and text-decoration: none;. Inside the <a> tags, I typed in Back to the Top! Afterwords, I typed in <footer> tags with a class name of ft. Inside the <footer> tags, I typed in <p> tags to insert text into the footer. At the end of the html document, I placed down <script> tags. Inside the script tags, I typed in function myFunction() { document.getElementById("myDropdown").classList.toggle("show");}, and window.onclick = function(e) {if (!e.target.matches('.dropbtn')) {var myDropdown = document.getElementById("myDropdown"); if (myDropdown.classList.contains('show')) { myDropdown.classList.remove('show');}}}. I duplicated the file and made 3 more files simular to the html file I discussed. I changed the texts of the other files to match its theme/topic. For the CSS, I typed in @charset "UTF-8";, html{height: 100%;}, body {margin: 0; padding: 0; height: 100%; font-size: 28px; font-family: Arial, Times, Helvetica, sans-serif; background-color: #D7D7D7; background-image:linear-gradient(to bottom, #D3D3D3, #ffffff); background-repeat: no-repeat; background-attachment: fixed;}, h1 {font-style: normal; font-family: "Arial Black", Impact, Gadget, sans-serif; font-display: auto;}, h2 {font-style: normal; font-family: "Arial Black", Impact, Gadget, sans-serif; font-display: auto;}, h5 {font-style: normal; font-family: "Arial", Gadget, sans-serif; font-display: auto;}, p {font-style: normal; font-family: "Times New Roman", Times, serif; font-display: auto;}, .navbar {overflow: hidden; background-color: #0032FF;}, .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}, .dropdown { float: left; overflow: hidden; width: 50px;}, .dropdown .dropbtn {cursor: pointer; font-size: 50px; border: none; outline: none; color: white; align-content: center; padding-left: 1px; padding-right: 1px; background-color: inherit; font-family: Arial, Helvetica, "Noto Sans", sans-serif; margin: 0px; width: 100%;}, .navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {background-color: #0185F3;}, .dropdown-content {display: none;position: absolute; background-color: #f9f9f9; min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}, .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; font-size: 25px;}, .dropdown-content a:hover {background-color: #ddd;}, .show {display: block;}, .bannerDiv {background-color: #272626;}, .imgBanner { max-width: 100%; max-height: inherit; object-fit: cover;}, .eeDiv {padding-bottom: 80px;}, .imgSide {display: inline-block; max-width: 25%; max-height: inherit; float: right; clear: right; padding: 0px; margin: 0px 0px 15px 15px; overflow:hidden;},
.textSide{text-align: left; vertical-align: middle; margin-left: 10px; margin-right: 10px; font-size: 30px;}, .ft {background-color: yellow; color: black; font-style: italic; margin: 10px; padding: 0px; clear:both; font-size: 16px;}, .topBtn { padding: 15px 25px; font-size: 24px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #40E0D0; border: none; border-radius: 15px; box-shadow: 0 9px #999;}, .topBtn:hover {background-color: #00FFFF} .topBtn:active {
background-color: #40E0D0; box-shadow: 0 5px #666; transform: translateY(4px);}, and media queries that change specific attributes of the website to be compatible with the device the user is handling. Lastly, I saved all files and uploaded my submission. Knowing how to build a website on a topic is important to a web designer because it allows him or her to do their job effectively and efficiently.

Link to website: http://techteach.us/Web2020/ZWeiJian/GFC/gfcee.html

Sunday, April 14, 2019

AP CSP Create Task

My teammates and I did the AP CSP Create Task. To do that, first and foremost we developed an idea for a game. We decided that it would be a shooting game. This shooting game would be built in parts managed by my teammates and I. So we coded the game and shared ideas with each other to make the game more engaging. We also got art for our game to make the game more believable. The most difficult part of the game that my teammates and I created was coding itself because of all the bugs and glitches in the game. Now due to rules and regulations from the College Board, which I entered the game into, I cannot give anymore information about the AP CSP Create Task game. Knowing how to build a game is useful to programmers because it will help you build a career in game developing.

Tuesday, April 9, 2019

Lab 20 Js Comparison Operators

In this lab, I created a simple comparison operators program with HTML, CSS, and Javascript. So first I opened up my programming application, Atom.io or Dreamweaver, either which one. Next, I created a new file. After that, I typed into the document the basic HTML code needed for an HTML document. I typed in <!DOCTYPE html>, <head> tags, <meta charset="UTF-8"> tag, <title> tags, <body> tags, and <html> tags. Next I inserted <meta name> tags, <link rel> tag for my favicon, <center> tags inside the <body> tags, and <h1> tags inside the <center> tags that have the date, text that says Digital Design, and Lab 18. Afterwords, I typed in <img src> tags to put in my name plate and banner inside the <center> tags. I put a <footer> tag to state the copyright of the lab. Next, I put <div> tags inside the <center> tags and inside those div tags I put <h2> tags and <p> tags creating the title for the lab. Afterwords, I typed in <p> tags with <b> tags bold the text that explains the lab. Then I put <form> tags. Inside the <form> tags, I typed in <input> tags that created the textboxes and buttons in the website. Inside the <input> tags, I typed in the type of input, name of input, value of the input, placeholder of the input, and onclick to make the inputs respond to the presses or texts inputted by the user. Next, I inserted a script from google to make my javascript work but I do not know if it actually does anything for my website. After that, I typed in <script> tags to put in Javascript inside. I first typed into my <script> tags functions with each their individual names like greater_numbers() and less_numbers(), which match the onclick names from the inputs. Inside those functions, I typed in var first_Number = parseInt(document.getElementById("Txt1").value);, var second_Number = parseInt(document.getElementById("Txt2").value);, and if(first_Number (comparison operator) second_Number) {document.getElementById("txtResult").value = "True";} else if((comparison operator)(first_Number (comparison operator) second_Number)){ document.getElementById("txtResult").value = "False";} else { document.getElementById("txtResult").value = "Null";}}. I also made a clear button with <input> tags and javascript. For the javascript, I put a function named clear_number() and inside the function I put document.getElementById("Calculator").reset(); so that the user will have a faster/better experience with the calculator. After that, I put the <br> tags to space the content and comments to describe the code. Lastly, I styled the website by adding style tags inside the head tags and typing in the CSS code for my website. The CSS code was footer{display: block; background: #FFFF16;}, body{background-color: cyan;}, input[type=text] {width: 15%; height: auto; display: inline-block; border: 2px solid #000000; box-sizing: border-box; cursor: auto;}, input[type=button] {width: 25%;
height: auto; background-color: red; color: white; cursor: pointer;}, and input[type=button]:hover { background-color:#F75255;}.

Website: http://techteach.us/Web2020/ZWeiJian/Labs/Lab_20/Lab20.html

Lab 19 Js Assignment Operators

In this lab, I created a simple assignment operators program with HTML, CSS, and Javascript. So first I opened up my programming application, Atom.io or Dreamweaver, either which one. Next, I created a new file. After that, I typed into the document the basic HTML code needed for an HTML document. I typed in <!DOCTYPE html>, <head> tags, <meta charset="UTF-8"> tag, <title> tags, <body> tags, and <html> tags. Next I inserted <meta name> tags, <link rel> tag for my favicon, <center> tags inside the <body> tags, and <h1> tags inside the <center> tags that have the date, text that says Digital Design, and Lab 18. Afterwords, I typed in <img src> tags to put in my name plate and banner inside the <center> tags. I put a <footer> tag to state the copyright of the lab. Next, I put <div> tags inside the <center> tags and inside those div tags I put <h2> tags and <p> tags creating the title for the lab. Afterwords, I typed in <p> tags with <b> tags bold the text that explains the lab. I inserted <p> tags to show the fixed number that is 10. I typed in <input tags to have a textbox for the user to input a number and buttons to execute the calculation. For those inputs I typed in the type of input, the name of input, the value of input, placeholder of input, and onclick of input. Next, I inserted a script from google to make my javascript work but I do not know if it actually does anything for my website. After that, I typed in <script> tags to put in Javascript inside. I first typed into my <script> tags functions with each their individual names like add_numbers() and subt_numbers(), which match the onclick names from the inputs. Inside those functions, I typed in var first_Number = 10;, var second_Number = parseInt(document.getElementById("Txt2").value);, var result = first_Number (with an arithmetic operator sign depending on the function like + or *) second_Number;, and document.getElementById("txtResult") .value = result; to get the inputs of the user and calculate the numbers to get the answer of the inputed numbers. I also made a X=Y button with <input> tags and javascript. For the javascript, I put a function named gets_number() and inside the function I put var first_Number = 10;, var second = parseInt(document.getElementById("Txt2").value;, var first_Number = second number;, var result = first_Number;, and document.getElementById("txtResult").innerHTML = result; to make 10 be the same as the second number that the user typed into the textbox. After that, I put the <br> tags to space the content and comments to describe the code. Lastly, I styled the website by adding style tags inside the head tags and typing in the CSS code for my website. The CSS code was footer{display: block; background: #FFFF16;}, body{background-color: cyan;}, input[type=text] {width: 15%; height: auto; display: inline-block; border: 2px solid #000000; box-sizing: border-box; cursor: auto;}, input[type=button] {width: 10%;
height: auto; background-color: red; color: white; cursor: pointer;}, and input[type=button]:hover { background-color:#F75255;}.

Website: http://techteach.us/Web2020/ZWeiJian/Labs/Lab_19/Lab19.html

Lab 18 JS Arithmetic Operators

In this lab, I created a simple calculator with HTML, CSS, and Javascript. So first I opened up my programming application, Atom.io or Dreamweaver, either which one. Next, I created a new file. After that, I typed into the document the basic HTML code needed for an HTML document. I typed in <!DOCTYPE html>, <head> tags, <meta charset="UTF-8"> tag, <title> tags, <body> tags, and <html> tags. Next I inserted <meta name> tags, <link rel> tag for my favicon, <center> tags inside the <body> tags, and <h1> tags inside the <center> tags that have the date, text that says Digital Design, and Lab 18. Afterwords, I typed in <img src> tags to put in my name plate and banner inside the <center> tags. I put a <footer> tag to state the copyright of the lab. Next, I put <div> tags inside the <center> tags and inside those div tags I put <h2> tags and <p> tags creating the title for the lab. Afterwords, I typed in <p> tags with <b> tags bold the text that explains the lab. Then I put <form> tags. Inside the <form> tags, I typed in <input> tags that created the textboxes and buttons in the website. Inside the <input> tags, I typed in the type of input, name of input, value of the input, placeholder of the input, and onclick to make the inputs respond to the presses or texts inputted by the user. Next, I inserted a script from google to make my javascript work but I do not know if it actually does anything for my website. After that, I typed in <script> tags to put in Javascript inside. I first typed into my <script> tags functions with each their individual names like add_numbers() and subt_numbers(), which match the onclick names from the inputs. Inside those functions, I typed in var first_Number = parseInt(document.getElementById("Txt1").value);, var second_Number = parseInt(document.getElementById("Txt2").value);, var result = first_Number (with an arithmetic operator sign depending on the function like + or *) second_Number;, and document.getElementById("txtResult") .value = result; to get the inputs of the user and calculate the numbers to get the answer of the inputed numbers. I also made a clear button with <input> tags and javascript. For the javascript, I put a function named clear_number() and inside the function I put document.getElementById("Calculator").reset(); so that the user will have a faster/better experience with the calculator. After that, I put the <br> tags to space the content and comments to describe the code. Lastly, I styled the website by adding style tags inside the head tags and typing in the CSS code for my website. The CSS code was footer{display: block; background: #FFFF16;}, body{background-color: cyan;}, input[type=text] {width: 15%; height: auto; display: inline-block; border: 2px solid #000000; box-sizing: border-box; cursor: auto;}, input[type=button] {width: 10%;
height: auto; background-color: red; color: white; cursor: pointer;}, and input[type=button]:hover { background-color:#F75255;}.

Website: http://techteach.us/Web2020/ZWeiJian/Labs/Lab_18/Lab18.html

Tuesday, April 2, 2019

Career Fair

Today, I went to a trip to the Armory in New York City, Manhattan. Inside the armory, my class and I went to venues and booths that consisted of educational, business, or entertainment platforms and topics. In the first floor of the Armory, I went to this booth where they showcased LED lights and batteries. It was particularly arts and crafts in which my class made lots of colorful and bright art. I just had the LED light stuck to the battery. Next I visited a venue where they talked about entrepreneur and business startup plans and how to be an entrepreneur. I went with a team to make a pretend plan to pitch an idea with to the staff as we were told. I learned that being an entrepreneur, you have to be creative and be a problem solver all the time. In the end, I got a book talking about tips being an entrepreneur out of it. After that, I went to the third floor of the armory and visited a lot of booths there. One of them, I played a game that had you fight another person in the screen. It was fun. In another one, I visited a booth that talked about numbers and how to find solutions using math. It was very confusing though. Also, they all gave some gifts to me. After that, I went to the second floor and went to participate in the booth for dancing. It was mediocre at best since the moves weren't that complex and the instructions were confusing. After that I went to the 4th floor and waited excruciatingly in a long line to play some VR games in there. It was not enjoyable because of that. Although my favorite part was actually trying out the VR games. Then, I ate lunch and sat on the benches on the 4th floor. Lastly, I met up with my class and went back home. I learned that you have to be adaptable and patient in the technology field during this trip.

Pictures: