My Codes

Click count

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clicker Game</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,900" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <header>
        <h1 class="title">Click The Button</h1>
    </header>

    <button type="button" id="button"><span>CLICK</span> ME!
    </button>

    <div class="countTitle">
        <p>Your click count is...</p>
    </div>

    <div class="clickCount">
        <span class="number">0</span>
    </div>

    <div class="reset">Reset
    </div>

    <!-- <div class="buttonscont">
        <div class="reset"><span>RESET</span></div>
    </div> -->
    <!-- <div class="counter">
        <span class="number">0</span>
    </div> -->

    <script src="app.js"></script>

</body>
</html>

body {
    max-width: 1024px;
    width: 98%;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

.title {
    color: #b33939;
    margin-top: 1em;
    font-weight: 100;
    font-size: 2.5em;
}

button {
    background-color: #40407a;
    color: #fff;
    border: none;
    border-right: 4px solid #2c2c54;
    border-bottom: 4px solid #2c2c54;
    border-radius: 0.2em;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 2em;
    letter-spacing: 0.25em;
    padding: 5% 10%;
    display: inline-block;
    cursor: pointer;
}

button:hover {
    background-color: #2c2c54;
    border-right: 4px solid #706fd3;
    border-bottom: 4px solid #706fd3;
    color: #fff;
}

button > span {
    font-weight: 900;
}

.countTitle {
    margin: 1.5em 0 0 0;
    color: #4b6584;
    font-weight: 400;
}

.number {
    font-size: 3em;
    font-weight: 900;
    background-color: #efefef;
    color: #0a3d62;
    padding: 0 2.5em;
}

.reset {
    margin-top: 2em;
    color: #eb3b5a;
    text-decoration: underline;
    font-size: 0.75em;
    cursor: pointer;
}

.reset:hover {
    color: #227093;
}

const button = document.querySelector('#button');
let number = document.querySelector('.number');
const reset = document.querySelector('.reset');

let clicks = 0;
function count() {
    clicks++;
    number.innerHTML = clicks;
}
button.addEventListener('click', count);


function resetCount() {
    number.innerHTML = 0;
    clicks = 0;
}
reset.addEventListener('click', resetCount);

Video

results matching ""

    No results matching ""