Pemrograman Web: Tugas Membuat Kalkulator: Difference between revisions

Created page with "== AI == Berikut adalah contoh kode untuk membuat web kalkulator menggunakan pemrograman PHP dengan dua isian untuk angka dan pilihan drop down untuk memilih operator matematika:<syntaxhighlight lang="php" line="1"> <!DOCTYPE html> <html> <head> <title>Kalkulator</title> </head> <body> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <label for="angka1">Angka Pertama:</label> <input type="number" id="angka1" name="angka1"><br><br> <label for="ang..."
 
 
Line 121: Line 121:
</syntaxhighlight>
</syntaxhighlight>
   
   
style.css
<code>style.css</code><syntaxhighlight lang="css" line="1">
<code>body{
body{
    background: #68F3F8;
    background: #68F3F8;
    font-family: sans-serif;
    font-family: sans-serif;
}
}
 
.kalkulator{
.kalkulator{
    width: 300px;
    width: 300px;
    background: #0081CF;
    background: #0081CF;
    padding: 10px 20px 30px 20px;
    padding: 10px 20px 30px 20px;
    border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 10px 10px 0px #FFFFFF;
    box-shadow: 0px 10px 10px 0px #FFFFFF;
}
}
 
.bil{
.bil{
    width: 280px;
    width: 280px;
    margin: 10px;
    margin: 10px;
    border: none;
    border: none;
    font-size: 14pt;
    font-size: 14pt;
    border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    padding: 10px;
}
}
 
.opt{
.opt{
    font-size: 14pt;
    font-size: 14pt;
    border: none;
    border: none;
    width: 280px;
    width: 280px;
    margin: 10px;
    margin: 10px;
    border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    padding: 10px;
}
}
 
.tombol{
.tombol{
    background: #A9A9A9;
    background: #A9A9A9;
    margin: 10px;
    margin: 10px;
    border-top: none;
    border-top: none;
    border-right: none;
    border-right: none;
    border-left: none;
    border-left: none;
    border-radius: 5px;
    border-radius: 5px;
    padding: 10px 20px;
    padding: 10px 20px;
    color: #eee;
    color: #eee;
    font-size: 15pt;
    font-size: 15pt;
    border-bottom: 2px solid #64950;
    border-bottom: 2px solid #64950;
}
}
 
.hasil{
.hasil{
    width: 280px;
    width: 280px;
    margin: 10px;
    margin: 10px;
    border: none;
    border: none;
    font-size: 14pt;
    font-size: 14pt;
    border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    padding: 10px;
    background: #eee;
    background: #eee;
}
}
 
.judul{
.judul{
    text-align: center;
    text-align: center;
    color: #eee;
    color: #eee;
    font-weight: 300px;
    font-weight: 300px;
}</code>
}
</syntaxhighlight>