Website Penebak Umur dengan JavaScript

-
Selamat datang di artikel ini kali ini kita bakal buat penebak umur ya kalian usah bisa baca di judulnya gk perlu saya kasih tau lagi jadi kita bakal buat ini pertama-tama bakal buat buat file di code editor kalian namanya terserah, setelah itu kalian tulis syntax ini: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tebak Umur</title>
</head>
<body>
   
</body>
</html>

Nah setelah itu di bagian dalam body:
<body>
   
</body>

tulis syntax ini
<h1>Penebak Umur</h1>
    <div class="Tombol">
        <button onclick="Tebak()" class="btn btn-primary">Tebak</button>
    </div>
    <div class="Container">
        <div id="Tebakan_Tahun"></div>
        <div id="Tebajan_Hari"></div>
    </div>

oke pertama kita bakal nyebutin fungsi dari syntaxnya dari h1, h1 itu buat judul website nya dan yang kedua div sama button, fungsi dari div itu buat jadi tempat naro kayak tulisan tombol tulisan dan lain lain, kalo button fungsinya buat ya jadi tombol dan naro function yang nanti nyambung ke javascirpt.

Nah setelah itu kita bakal naro script di form html kita jadi gimana caranya, jadi pertama 
kita buat ini :
<script>
   
</script>  

nah nanti di dalam scriptnya kita buat syntax kayak gini:


<script>
function Tebak() {
    let Masukan_Tahun = Number(prompt("Masukan Tahun Kelahiran"))
    let Umur = 2022 - Masukan_Tahun;
    let hari = (2022 - Masukan_Tahun) * 365;

    //Untuk Umur
    let h1 = document.createElement("h1");
    let Text = document.createTextNode(`Umur :${Umur},`);

    h1.appendChild(Text);

    let Tempat_Umur = document.getElementById("Tebakan_Tahun");
    Tempat_Umur.appendChild(h1)

    //Untuk Berapa Hari kita sudah hidup
    let h11 = document.createElement("h1");
    let Text2 = document.createTextNode(` Hari hidup :${hari}`);

    h1.appendChild(Text2);

    let Tempat_Hari = document.getElementById("Tebakan_Hari");
    Tempat_Hari.appendChild(h12)

}

</script>

jadi fucntion tebak itu nyambung ke button tadi yang di atas, nah nanti jadinya kita buat gunain aplikasinya kita nanti pencet tombol "Tebak" nanti muncul pop up yang kita bisa isi tahun kelahiran kita dan kita bisa liat umur kita dan sudah berapa hari kita hidup di dunia nanti hasilnya seperti ini : 



seperti itu nah sekarang kita pengen buat website nya jadi lebih bagus dan ada style nya gimana caranya kita tinggal tambahin tag yang namanya <style>
nah nanti tag style itu di taruh di atas tag <body>  
nanti kayak gini :

<style>
   
</style>
<body>
    <h1>Penebak Umur</h1>
    <div class="Tombol">
        <button onclick="Tebak()" class="btn btn-primary">Tebak</button>
    </div>
    <div class="Container">
        <div id="Tebakan_Tahun"></div>
        <div id="Tebajan_Hari"></div>
    </div>
</body>

nah tag style nya nanti diisi ini  :
body{
    font-family: Arial, Helvetica, sans-serif;
    font-weight:100;
    font-size: medium;
    text-align: center;
}

#Tebakan_Tahun{
    margin: auto;
}

.container{
    background-color: aquamarine;
}

nah biar bagus tambahin link ini:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65Vo
hhpuuCOmLASjC"
crossorigin="anonymous">

nah ini ditambahin di atas <title></title>
di tambahin kayak gitu supaya website nya lebih bagus, nanti hasilnya kayak gini:





Udah begitu aja artikel nya mudah mudahan bermanfaat.

Komentar

Posting Komentar