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
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
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
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment