body{

background-color: #19172e;

color: white;

}

.title{

margin-bottom: 15px;

font-size: 30px;

font-family: Impact;

}

p{

font-size: 20px;

margin-top: 20px;

margin-bottom: 30px;

}

.item{

background-color: rgba(100, 100, 121, 0.1);

padding: 50px;

text-align: center;

flex-direction: column;

border-radius: 20px;

border: 1px solid white;

height: 70%;

width: 55%;

}

#newQuote{

background-color: rgba(100, 100, 121, 0.5);

padding: 25px 20px;

color: #fff;

border: none;

outline: none;

border-radius: 5px;

}

#newQuote:hover{

background-color: green;

}

<head>

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/main.css">

</head>

<body>

<div class="container justify-content-center">

<div class="row w-100 h-100 align-items-center justify-content-center">

<div class="item d-flex justify-content-center align-items-center">

<h1 class="title">Quote of the Day</h1>

<p>Press the button below to get a new quote!</p>

<button id="newQuote">New Quote</button>

<p id="quote"></p>

<p id="name"></p>

</div>

</div>

</div>

<script src="js/jquery-3.5.1.slim.min.js"></script>

<script src="js/popper.min.js"></script>

<script src="js/bootstrap.min.js"></script>

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

</body>

var httr = new XMLHttpRequest();

var quotes = [];

httr.open('GET', 'https://type.fit/api/quotes/');

httr.addEventListener('readystatechange', function(){

if(httr.readyState==4)

{

quotes = JSON.parse(httr.response);

console.log(quotes);

}

var x = document.getElementById('newQuote');

var y;

var w = document.getElementById('quote');

var z = document.getElementById('name');

display();

function display(){

do{

y = Math.floor(Math.random() * quotes.length);

}while(quotes[y].author == null)

w.innerHTML = quotes[y].text;

z.innerHTML = "-- " + quotes[y].author;

<div class="item">

<a target="_blank" href="100 - Quote of The Day/index.html">

<img src="30DaysOfJavaScript/assets/100.png" alt="Quote of The Day" />

<h4>Quote of The Day</h4>

</a>

</div>