Deep John Mayer Quotes on Love and Relationships Now

Okay, so today I’m gonna walk you through my little side project, “quotes john mayer.” It’s pretty simple, but I learned a bunch doing it, so I figured I’d share.

The Idea

Basically, I’m a big John Mayer fan. And I always see these little inspirational quote things online, and I thought, “Why not make a John Mayer quote generator?” I mean, he’s got some pretty deep lyrics, right?

Getting Started: The Tech Stack

I knew I wanted to keep it simple. I didn’t want to over-engineer it. So, I went with what I knew:

• HTML/CSS: Obvious choice for the front-end. Nothing fancy, just basic structure and styling.
• JavaScript: To handle the quote selection and display logic.
• A JSON file: To store all the quotes. I figured this would be easier than setting up a database for such a small project.

Building the Quote List (JSON)

This was probably the most time-consuming part. I went through a bunch of John Mayer songs and interviews and pulled out quotes that I thought were interesting or insightful. Then, I formatted them into a JSON file like this:

"quote": "Hoping my innocence is kept, protected from the madness.",
"source": "Stop This Train"


"quote": "You can't be serious, I know you gotta be joking.",
"source": "Gravity"



"quote": "I am an architect of days that haven't happened yet.",
"source": "Something Like Olivia"

I ended up with around 50 quotes. It was a good mix, I think.

The JavaScript Logic

This is where things got a little more interesting. Here’s the basic flow:

1. Load the JSON file: I used the `fetch` API to load the JSON file when the page loads.
2. Parse the JSON: Convert the JSON data into a JavaScript array of objects.
3. Select a random quote: Generate a random number between 0 and the length of the array, and use that number to select a quote from the array.
4. Display the quote: Update the HTML elements with the selected quote and its source.

Here’s a snippet of the JavaScript code:

fetch('*')
.then(response => *())
.then(data => {
const quotes = data;

const quoteElement = *('quote');
const sourceElement = *('source');
function displayRandomQuote() {
const randomIndex = *(*()  *);
const randomQuote = quotes[randomIndex];

* = *;
* = '- ' + *;

displayRandomQuote(); // Display a quote on page load
// You could add a button to generate a new quote here
// For example:

// const newQuoteButton = *('new-quote-button');
// *('click', displayRandomQuote);

The HTML Structure

The HTML is pretty basic. I have a container for the quote, a place to display the quote text, and a place to display the source (song title). I also added a button (commented out in the code above) in case i wanted to add functionality to get a new quote on demand.

<!-- New Quote -->

Styling with CSS

I kept the CSS pretty minimal. Just some basic font styling, centering, and a little bit of padding. Nothing fancy.

The Result

So, after a few hours of coding and tweaking, I had a working John Mayer quote generator! It’s simple, but it does the job. It randomly displays a quote from my JSON file each time the page loads.

Lessons Learned

This project was a great reminder that you don’t need to over-complicate things. Sometimes the simplest solutions are the best. I also learned a bit more about working with JSON data and the `fetch` API. And, of course, I got to spend some time listening to John Mayer, which is always a win.

Next Steps (Maybe)

I might add a button to generate a new quote on demand. I also thought about adding the ability to share the quote on social media. But for now, I’m happy with the way it is.

Hopefully, this little walkthrough was helpful! Let me know if you have any questions.