Help!

[KLNewton]

Select Topic Area

Question

Body

Please help, I'm losing my mind. This seemed to load fine (mostly - background image refuses to load) through website upload, however desktop app upload is having issues and not giving me a link to view the site remotely. I've now deleted both repositories (again) with an idea to try again tomorrow/whenever I receive an answer :(

The main issue is no matter what I try, the background image will not load. I've been trying for over 2hrs, YouTube and other searches have been of no use. I've tried ./ ../ .. and it has always been .jpg not .JPG also no spelling errors for either link.

HTML:

<title>DOM Manipulation P1</title>

<!-- Project 1: Quote Generator-->

<div class="container">
        <div class="header">
            <h2>JavaScript Quote Generator</h2>
    </div>
    <div class="main-content">
        <div class="text-area">
            <span class="quote">"I do the very best I know how - the very best I can; and I mean to keep on doing so until the end."</span>
        </div>
        <div class="person">Abraham Lincoln</div>

        <div class="button-area">
            <button id="new-quote">New Quote</button>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="DOMproject1.js"></script>

CSS:
/* General Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background: url(project-1.jpg)
    no-repeat center center/cover;
}

.container {
    width: 550px;
    height: 450px;
}

.header {
    font-size: 1.3rem;
    border: solid 2px #ffffff;
    color: #ffffff;
    background-color: #262626;
    padding: 5px;
    width: 80%;
    margin: 20px auto;
    border-radius: 5px;
}

.main-content {
    width: 100%;
    height: 300px;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 50px 40px;
    box-shadow: 0 0 10px;
}

.main-content .text-area {
    font-size: 1.5rem;
    line-height: 1.5;
}

.main-content .person {
font-size: 1.6rem;
color: red;
text-transform: uppercase;
margin-top: 20px;
}

.button-area button {
background-color: #262626;
color: #ffffff;
font-size: 1.3rem;
padding: 10px 15px;
margin-top: 20px;
border-radius: 5px;
}

.button-area button:active {
background-color: lightblue;
}

JavaScript:
// Variables

let btn = document.querySelector("#new-quote");
let quote = document.querySelector(".quote");
let person = document.querySelector(".person");

const quotes = [{
quote: "The best way to find yourself is to lose yourself in the service of others.",
person: Mahatma Gandhi
}, {
quote: "If you want to live a happy life, tie it to a goal, not to people or things.",
person: Albert Einstein
}, {
quote: "At his best, man is the noblest of all animals; separated from law and justice he is the worst.",
person: Aristotle
}, {
quote: "Your time is limited, so dont waste it living someone else's life.",
person: Steve Jobs
}, {
quote: "Tell me and I forget. Teach me and I remember. Involve me and I learn.",
person: Benjamin Franklin
}, {
quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough.",
person: Oprah Winfrey
}, {
quote: "It does not matter how slowly you go as long as you do not stop.",
person: Confucius
}, {
quote: "Our lives begin to end the day we become silent about things that matter.",
person: Martin Luther King, Jr.
}, {
quote: "Remember that not getting what you want is sometimes a wonderful stroke of luck.",
person: Dalai Lama
}, {
quote: "The journey of a thousand miles begins with one step.",
person: Lao Tzu
}, ];

btn.addEventListener("click", function(){

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

quote.innerText = quotes[random].quote;
person.innerText = quotes[random].person;

})