Posts

Showing posts from September, 2019

Animation button

Image
It's good practice to make a diagram about a set of code. From beginning to end. The ins and outs. It creates a visual aspect into coding. // animation code <style> #custom-button{ display:inline-block; color:white; background-color:#29425c; padding:10px; font-size:30px; border: 2px solid #29425c; border-radius:5px; margin:top:10px; cursor:pointer; box-shadow:2px 2px 5px black; transition: box-shadow ease-in-out 0.4s } #custom-button:hover{ box-shadow:0px 0px 0px black; }  </style> // HTML <section> <div class="colors">  <h8> Animation <br><br><br>  <a id="custom-button">   <h9>Hello World</h9>  </a> <h1 class="GG"> I created a simple 2D animation using <br> JavaScript and Cascating Style Sheet. <br> Hover over the button! </h1> </h8></div> ...

Calculator

Image
// custom function function calculateTip(){ // store data of inputs var billAmount = document.getElementById("billAmount").value; var serviceQuality = document.getElementById("seviceQuality").value; var numPeople = document.getElementById("totalPeople").value; // Quick Validation if(billAmount === "" || serviceQuality == 0){ alert("Please enter some values") return; } if(numPeople === "" || numPeople <= 1){ numPeople = 1; document.getElementById("each").style.display="none"; } else { document.getElementById("each").style.display="block"; } var total = (billAmount * serviceQuality) / numPeople; total = Math.round(total * 100) / 100; total = total.toFixed(2); document.getElementById("totalTip").style.display="block" document.getElementById("tip").innerHTML = total; } // script.js // hide the tip amount...