Conversor

conversor.markdown

Conversor

A Pen by Klaylton Fernando on CodePen.

License.

index.html

<div class="box painel">
        <input type=number class=ads placeholder="Valor Adsense">
        <button class=btn>Calcular</button>
    </div>
    <div class=box>
        <p>Valor Total</p>
        <h1>US$ <spam class=total></spam></h1>
    </div>
    <div class=box>
        <p>Média Total:</p>
        <h1>US$  <spam class=media></spam></h1>
    </div>
    <div class="box">
       <p>Valor em Reais:</p>
        <h1>R$ <spam class="dolar"></spam></h1>
    </div>

script.js

function diasMes(month, year) {
    return new Date(year, month, 0).getDate();
}
function $(el){
    return document.querySelector(el);
}
var d = new Date();
var diaAtual = d.getDate();
var mes = d.getMonth();

$(".btn").addEventListener("click",function(){
    var valorAds = $(".ads").value;
    var valorMediaAds = valorAds / diaAtual;
    var valorAdsMes = valorMediaAds * diasMes(2018, 2);
    $(".total").innerHTML = valorAdsMes.toFixed(2);
    $(".media").innerHTML = valorMediaAds.toFixed(2);
});

var request = new XMLHttpRequest();
var url = 'http://economia.awesomeapi.com.br/USD-BRL/1';
request.open('GET', url, true);
request.onload = function () {
    var data = JSON.parse(request.responseText);
    $(".btn").addEventListener("click", function(){
        let real = parseInt($(".ads").value);
        $(".dolar").innerHTML = (real * data[0].low).toFixed(2);
    });
}
request.send();

style.css

body{
    background: #f5f5f5;
    font-family: verdana;
}
.painel{
    display: flex;
}
.box{
    border: 1px solid #ccc;
    padding: 20px;
    margin: 10px 0;
    background: #fff;
}
.btn{
    border: none;
    background: #398ff4;
    color: #fff;
    padding: 10px 15px;
    margin: 0;
    display: inline-block;
}
.ads{
    font-size: 25px;
    margin: 0 10px 0 0;
    padding: 0;
    width: 100px;
}
p{
    margin: 0;
}
h1{
    margin: 0;
    color: #666;
}

Este é um estudo sobre JSON em Javascript.