Posts

Exercise 5: Price List

Image
  The Code: <!DOCTYPE html>      <html>      <head>      <meta name="viewport" content="width=device-width, initial-scale=1">      <title>Price List, Add and Remove</title>      <link rel="stylesheet" href="Exercise 007 - Style code.css">      </head>          <body>      <h1 class="font1"> Products & Price Select box</h1>      <div id="container">      <form>      <fieldset>      <label for="name"> • Add Products: </label>      <input type="text" id="name" placeholder="Enter Product" autocomplete="off"> <br> <br>      <label for="price"> • Add Price: </label>      <input type="number" id="price" placeholder="Enter Price...
Post a Comment
Read more

Exercise 4: Order List

Image
  Owen Wilson go WOW source: <!DOCTYPE html> <html> <head> <style> h1 { margin-left: 280px; font-family: "Arial"; } h4 { margin-left: 285px; font-family: "Arial"; } p { margin-left:40px; } label { display: inline-block; width: 150px; height: 20px; padding: 10px; margin-left: 30px; font-family: "Arial"; } fieldset { margin-left: 280px; margin-right: 280px; background: #909090; padding: 5px; font-family: "Times New Roman"; } #demo { position: relative; margin-left: 280px; margin-right: 280px; } #runthis { margin-left: 205px; margin-top:25px; } </style> </head> <body> <h1> Order List </h1> <h4> Please enter your details </h4> <fieldset> <label for="name">Enter your Name: </label> <input type="text" placeholder="Enter name" onfocus="this.placeholder=''" name="Name" id="name" value="" requ...
Post a Comment
Read more

Exercise 3: If Else Months

  (screenshot wont publish smh) <html>  <head>What's the month?</head>   <body>Enter number of month:<br>     <input id="text_a" type="text;"> <p id="answer"></p> <button onclick="getFunction()">Submit</button> <script> function getFunction() { var a=document.getElementById("text_a").value; if (a=="1")   { document.getElementById("answer").innerHTML="1 January, New Year, New Beginnings ";   } else if (a=="2")   { document.getElementById("answer").innerHTML="2 February, Valentine's Day";   } else if (a=="3")   { document.getElementById("answer").innerHTML="3 March, Marchonward";   } else if (a=="4")   { document.getElementById("answer").innerHTML="4 April, Easter";   } else if (a=="5")   { document.getElementById("answer...
Post a Comment
Read more

Exercise 2: Grade Equivalent

Image
  <!DOCTYPE html> <html> <head> <title>Grade Equivalent</title> </head> <body> <h1>Grade Equivalent</h1> <p> <b> Name: </b> <input type="text" id="myText" name="fname" value=""></p> <p> <b> Score: </b> <input type="text" placeholder="Type" id="inputId2" value=""></p> <p><b>Total Items:</b><input type="text" placeholder="Type" id="inputId3" value=""></p> <button type="button"onclick="getCompute();">Compute</button> <script> function getCompute(){ var str = document.getElementById("myText").value; var n1 = Number(document.getElementById("inputId2").value); var n2 = Number(document.getElementById("inputId3").value); ave = (n1/n2)*...
Post a Comment
Read more

Exercise 1: The First Javascript Program

Image
  <html> <head><title>Javascript Code </head></title> <body> <script language = "javascript" type = "text/javascript">   var name,age,course,skill,subject ; document.write("<br> Welcome to Javascript Programming"); name=prompt("Your Name Here"); document.write("<br> Name: <b>" +name) ; age=prompt("Age"); document.write("<br> Age: <b>" +age ); course=prompt("Enter your course"); document.write("<br> Course: <b>" +course ); skill=prompt("Enter your talent/skills"); document.write("<br> Talent: <b>" +skill ); subject=prompt("What's your favourite subject?"); document.write("<br> Subject: <b>" +subject ); </script> </body> </html> Output
Post a Comment
Read more

Sign Up Form Output

Image
  autofill
Post a Comment
Read more

Compilation of Finals Part 2

  Animation <!DOCTYPE html> <html> <head> Animation   <style>  div {   width: 2000px;   height: 100px;   background-color: pink;   animation-name: example;   animation-duration: 10s; } @keyframes example {   from {background-color: red;}   to {background-color: blue;} } To make the animation transition, they keyframes are key, cuz they're named Keyframes. there you see From and To, which are self explanatory, so you use Keyframes to indicate what is the start and end of an animation with HTML. Embedding a Youtube Video with IFrames <iframe width="1080" height="720" src="https://www.youtube.com/embed/29ZBBsq6uSU"> </iframe> Is all you need, you can insert this in the body of an HTML you are working on, change the link and it will play the video in the HTML, all you need is internet.
Post a Comment
Read more