Random Year Trivia

by aerawk

HTML

<!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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Carter+One|Open+Sans" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
    <link rel="stylesheet" href="./styles.css" type="text/css">
    <style>
    #fact{ display: none; }
    </style>
    <title>Random Year Facts</title>
</head>
<body class="bg-primary">
    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card bg-dark text-white mt-3 p-4 drop-shadow">
                    <h1 class="text-center text-accent">Random Year Facts!</h1>
                    <h6 class="text-center">Enter a number to see a random fact from that year!</p>
                    <input type="number" class="form-control form-control-md" id="numberInput" placeholder="Enter a year...">
                    <div id="fact" class="card-body my-5 py-5">
                        <h3 class="card-title text-center text-accent" id="year"></h4>
                        <p id="factText" class="card-text font-italic"></p>
                    </div>
                    <img src="https://wewastetime.files.wordpress.com/2016/07/3.gif?w=700&h=" class="card-img-bottom img-fluid pt-4" id="clockImage">
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="index.js">
        
    </script>
</body>
</html>

CSS

.bg-secondary {
    background-color: #407f8f !important;
}
.bg-primary {
    background-color: #acbdba !important;
}
.bg-dark {
    background-color: #2d4159 !important;
}
.text-white {
    color: #dedede !important;
}
.text-accent {
    color: #ff715b !important;
}
.form-control {
    background-color: #dedede !important;
}
body {
    font-family: 'Carter One', cursive !important;
}
p {
    font-family: 'Open Sans', sans-serif !important;
}
.drop-shadow {
    -webkit-box-shadow: 0px 5px 20px 3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 20px 3px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 20px 3px rgba(0,0,0,0.75);
}

JavaScript

let fact = document.querySelector('#fact')
let factText = document.querySelector('#factText')
let numberInput = document.querySelector('#numberInput')
let year = document.querySelector('#year')
let image = document.querySelector('#clockImage')
numberInput.addEventListener('input', getFact)

function getFact() {
    let number = numberInput.value

    fetch(`http://numbersapi.com/${number}/year`)
        .then(response => response.text())
        .then(data => {
            if (number != '') {
                fact.style.display = 'block'
                factText.innerText = data
                year.innerText = `Fact for the year ${number}:`
                image.style.display = 'none'
            }
            if (!number) {
                image.style.display = 'block'
                fact.style.display = 'none'
            }
        })
        .catch(err => console.log(err))
}