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
No comments:
Post a Comment