Scribd Logo
Upload

Welcome to Scribd!

  • 9 views

    Mahendy Arya Putra Airlangga - 152111513011 - Tugastpk

    Uploaded by

    imam wahyu
    1. The document describes 3 JavaScript programs: - Counter.js, which functions as a counter to add or subtract items - MovingButton.js, which randomly changes the coordinates of a button using JavaScript - Event.js, which displays events directly in JavaScript without loading when a user clicks a button 7 times. 2. Key details provided include that Counter.js stores the count in localStorage and displays it, MovingButton.js outputs random coordinates to the console, and Event.js uses document.write and element creation to display a hidden message after 7 clicks. 3. The results of each program are described: output to the console for Counter.js, random coordinates in the console for

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Mahendy Arya Putra Airlangga - 152111513011 - Tugastpk

    Uploaded by

    imam wahyu
    9 views7 pages
    1. The document describes 3 JavaScript programs: - Counter.js, which functions as a counter to add or subtract items - MovingButton.js, which randomly changes the coordinates of a button using JavaScript - Event.js, which displays events directly in JavaScript without loading when a user clicks a button 7 times. 2. Key details provided include that Counter.js stores the count in localStorage and displays it, MovingButton.js outputs random coordinates to the console, and Event.js uses document.write and element creation to display a hidden message after 7 clicks. 3. The results of each program are described: output to the console for Counter.js, random coordinates in the console for

    Original Title

    Mahendy Arya Putra Airlangga_152111513011_tugastpk

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    1. The document describes 3 JavaScript programs: - Counter.js, which functions as a counter to add or subtract items - MovingButton.js, which randomly changes the coordinates of a button using JavaScript - Event.js, which displays events directly in JavaScript without loading when a user clicks a button 7 times. 2. Key details provided include that Counter.js stores the count in localStorage and displays it, MovingButton.js outputs random coordinates to the console, and Event.js uses document.write and element creation to display a hidden message after 7 clicks. 3. The results of each program are described: output to the console for Counter.js, random coordinates in the console for

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    9 views7 pages

    Mahendy Arya Putra Airlangga - 152111513011 - Tugastpk

    Uploaded by

    imam wahyu
    1. The document describes 3 JavaScript programs: - Counter.js, which functions as a counter to add or subtract items - MovingButton.js, which randomly changes the coordinates of a button using JavaScript - Event.js, which displays events directly in JavaScript without loading when a user clicks a button 7 times. 2. Key details provided include that Counter.js stores the count in localStorage and displays it, MovingButton.js outputs random coordinates to the console, and Event.js uses document.write and element creation to display a hidden message after 7 clicks. 3. The results of each program are described: output to the console for Counter.js, random coordinates in the console for

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 7

    Mahendy Arya Putra Airlangga

    152111513011

    1. Counter.js

    Deskripsi : berfungsi seperti alat bantu hitung untuk menambah atau mengurangi jumlah suatu objek

    <!doctype html>
    <html lang="en">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-
    to-fit=no">

    <!-- Bootstrap CSS -->


    <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-
    Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">

    <title>number</title>

    <style>
    .bg{
    background-color: rgba(0, 0, 0, 0.2);
    }
    </style>

    </head>
    <body>

    <div class="jumbotron jumbotron-fluid" id="jumbotron">


    <div class="container">
    <p class="lead">Counter</p>
    </div>
    </div>
    <div class="container">
    <div class="text-center">
    <h1 class="display-3">Count (cek console)</h1>
    <h2 class="display-4" id="counter">0</h2>
    <span>
    <button id="low" onclick="lower()" class="btn btn-
    danger btn-lg">Kurang</button>
    <button type="reset" onclick="reset()" class="btn
    btn-secondary btn-lg">reset</button>
    <button id="add" onclick="add()" class="btn btn-
    success btn-lg">Tambah</button>
    </span>
    </div>
    </div>

    <footer class="bg-light text-center text-lg-start fixed-bottom">


    <!-- Copyright -->
    <div class="text-center p-3" style="background-color: rgba(0, 0,
    0, 0.2);">
    © 2021 Copyright:
    <a class="text-dark" href="https://mdbootstrap.com/"> <br>
    Footer </a>
    </div>
    <!-- Copyright -->
    </footer>

    <!-- Optional JavaScript -->


    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-
    KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
    <script
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-
    ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
    <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-
    JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

    <!-- javascript -->


    <script>

    const number = "Counted number";


    if(typeof(Storage)!=="undefined"){
    if(localStorage.getItem === null){
    localStorage.setItem(number, 0)
    }
    }

    let counter = document.getElementById("counter");


    if(localStorage.getItem(number) === null){
    counter.innerText = "0"
    }else{
    counter.innerText = localStorage.getItem(number)
    }

    function add() {
    let add = localStorage.getItem(number);
    add++;
    localStorage.setItem(number, add)
    counter.innerText = localStorage.getItem(number)
    console.log(localStorage.getItem(number))
    }

    function lower(){
    let lower = localStorage.getItem(number);
    lower-=1;
    localStorage.setItem(number, lower)
    counter.innerText = localStorage.getItem(number)
    console.log(localStorage.getItem(number))
    }

    function reset(){
    let reset = localStorage.removeItem(number);
    counter.innerText = "0"
    console.log(localStorage.getItem(number))
    }

    </script>
    </body>
    </html>

    Hasil penjumlahan/pengurangan dapat di cek pada console


    2. MovingButton.js

    Deskripsi : Mengubah kordinat button secara acak menggunakan java script

    <!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>Document</title>

    <style>
    *{
    font-family: sans-serif;
    }
    .content{
    /* border: 2px solid black; */
    padding: 8px;
    margin: auto;
    width: 60%;
    text-align: center;
    box-sizing: border-box;
    /* position:relative; */
    }

    .btn-gamau{
    position: absolute;
    background:linear-gradient(red, pink) ;
    /* margin-left: 8px; */
    }
    .mau {
    background:linear-gradient(green, yellowgreen);
    }
    .btn {
    padding: 10px;
    width: 90px;
    border-radius: 10px;
    color: white;
    font-size: large;
    }

    @media (max-width:600px){
    .content{
    width: 100%;
    box-sizing: border-box;
    }
    /* .btn-gamau{
    position: absolute;
    top: 65%;
    left: 39%;
    } */
    }

    </style>
    </head>
    <body>
    <div class="content">
    <h1>Moving Button</h1>
    <img
    src="https://i.pinimg.com/originals/63/21/fa/6321fa6690d59b2f37c25ce0d271cb6c.gif
    " alt="">
    <h1>Coba Klik Tombol Warna Merah ! (cek console)</h1>
    <button id="btn-mau" class="btn mau">Hijau</button>
    <button id="btn-gamau" class="btn-gamau btn"
    onmousemove="gamau(this)">Merah</button>
    </div>

    <script>
    function mau() {
    alert("Button Hijau di Klik")
    }
    document.getElementById("btn-mau").onclick = mau

    function gamau(id) {
    let mau = document.getElementById("btn-mau");
    let i = Math.floor(Math.random() *300)+1;
    let j = Math.floor(Math.random() *100) + mau.offsetTop
    id.style.left = i + 'px';
    id.style.top = j + "px"
    console.log(i + 'px'+ ',' + j + "px")
    }

    </script>
    </body>
    </html>

    Hasil kordinat yang didapat secara acak akan ditampilkan pada console
    3. event.js

    Deskripsi : menampilkan event secara langsung pada java script tanpa loading Ketika pengguna menekan
    button sebanyak 7 kali

    <!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>Document</title>
    </head>
    <style>
    .content {
    /* width: 40%; */
    padding: 12px;
    box-sizing: border-box;
    border: 5px solid black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    }
    .content button {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    </style>
    <body onload="welcome()">
    <div class="content" hidden id="content">

    <button id="button">
    Kamu klik aku
    </button>
    <p id="awal">
    kamu sudah mengklik aku sebanyak <span id="show">0</span> kali
    </p>

    </div>

    <script>
    let welcome = () => {
    alert("Assalamualaikum")
    const content = document.getElementById("content");
    content.removeAttribute("hidden")
    }

    let count =0;


    let increament = () => {
    count++
    console.log(count);
    let hide = document.getElementById("show").innerText = count;

    if( hide == 7){


    const hiddenMessage = document.createElement("h4")
    hiddenMessage.innerText = "WAW HADIAH TERSEMBUNYI BUAT KAMU"
    hiddenMessage.style.color = "red"
    document.write('document write');
    // const hiddenImage = document.createElement("img");
    // hiddenImage.setAttribute("src",
    "https://i.ibb.co/9Wbjsj8/Whats-App-Image-2021-10-18-at-8-30-15-PM.jpg");
    const lanjut = document.createElement("p")
    lanjut.innerText= "ayo klikk lagi !!!"
    lanjut.style.color = "red"
    const content = document.querySelector(".content");
    const awal = document.getElementById("awal");
    content.appendChild(hiddenImage)
    content.appendChild(lanjut)
    content.insertBefore(hiddenMessage, awal)
    }
    }
    document.getElementById("button").onclick = increament;

    </script>
    </body>
    </html>

    Hasil event akan di tampilkan dengan document writes

    Dan banyaknya jumlah pengguna menekan tombol akan di tampilkan lewat console

    You might also like