HTML + CSS + JAVASCRIPT

CSS - RESPONSIVO

@media screen and (max-width: 1000px) {
div#principal {
height:1100px;
}
#calculator
{
margin-left:30%;
}
div#formulario {
width:70%;
margin-left:15%;
}}

@media screen and (max-width: 900px) {
div#h2 {
width:70%;
}
#calculator {
margin-left:25%;
}}

@media screen and (max-width: 750px) {
#calculator {
margin-left:22%;
}}

@media screen and (max-width: 700px) {
div#h2 {
font-size: .8em;
}
#calculator {
margin-left:20%;
}}

@media screen and (max-width: 650px) {
#calculator {
margin-left:17%;
}
div#principal {
height:1000px;
}
div#formulario {
width:80%;
margin-left:10%;
}}

@media screen and (max-width: 600px) {
#calculator {
margin-left:15%;
}}

@media screen and (max-width: 550px) {
#calculator {
margin-left:10%;
}}

JAVASCRIPT - CALC. DIGITAL

// Side navigation
function w3_open() {
var x = document.getElementById ("mySidebar");
x.style.width = "100%";
x.style.fontSize = "40px";
x.style.paddingTop = "10%";
x.style.display = "block";
}

function w3_close() {
document.getElementById ("mySidebar").style.display = "none";
}

// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName ("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName ("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace (" w3-dark-grey", "");
}
document.getElementById (cityName).style.display = "block";
evt.currentTarget.className += " w3-dark-grey";
}
var mybtn = document.getElementsByClassName ("testbtn")[0];
mybtn.click();

// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace (" w3-show", "");
}
}

// Slideshows
var slideIndex = 1;
function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}

function showDivs(n) {
var 1x = document.getElementsByClassName ("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
showDivs(1);

// Progress Bars
function move() {
var elem = document.getElementById ("myBar");
var width = 5;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}}}

JAVASCRIPT - CALC. JUROS

function simples() {
var div = document.getElementById ("divResultado");
var valor = document.getElementById ("txtValor").value;
var taxa = document.getElementById ("txtTaxa").value;
var parcelas = document.getElementById ("txtParcelas").value;
var js = (valor * (taxa/100) * parcelas);
var vf = (valor*1) + (js*1);
div.innerText = "O rendimento de: " +valor+" , após "+parcelas+ " parcelas e "+taxa+ " % de juros simples, será de: "+vf;
}

function composto() {
var div = document.getElementById ("divResultado");
var valor = document.getElementById ("txtValor").value;
var taxa = document.getElementById ("txtTaxa").value;
var parcelas = document.getElementById ("txtParcelas").value;
var jc = Math.pow((1+(taxa/100)), parcelas);
var vf = ((valor*1)*(jc*1)).toFixed(2);
div.innerText = "O rendimento de: " +valor+" , após "+parcelas+ " parcelas e "+taxa+ " % de juros composto, será de: "+vf;
}