アラート

デモ

See the Pen alert1 by logsuke (@design-list) on CodePen.

コード

<main>
        <section id="section1" class="section">

          <button id="button">alert</button>

        </section>
    </main>

/*=== Base ===*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --nav-height: 8rem;
    --max-width: 1024px;
    --container-padding: 0 4rem;
    --gap: 2rem;
    --bg-color: rgb(240, 240, 240);
    --first-color: rgb(172, 245, 255);
}


/*=== Font ratio ===*/

html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

.section {
    width: var(--max-width);
    margin: 0 auto;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
}

/* alert */

#button {
    width: 150px;
    height: 50px;
    padding: .5rem 1rem;
    background: var(--first-color);
    border: none;
    font-size: 2rem;
    border-radius: .5rem;
    cursor: pointer;

}

const button = document.getElementById('button');

button.addEventListener('click', function() {
    //アラート
    //  alert('hello');

    // 確認
    var result = confirm('ok?');

    // 入力を促す
    // var result = prompt('input');
    if (result) {
        //true
        console.log(result)
    } else {
        //false
        console.log(result)
    }
})