document.addEventListener('DOMContentLoaded', function() { const svgs = document.querySelectorAll('svg'); const quoteParagraph = document.getElementById('quote-paragraph'); const quotes = [ "The only way to do great work is to love what you do. - Steve Jobs", "Strive not to be a success, but rather to be of value. - Albert Einstein", "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe. - Albert Einstein" ]; // Function to display the quote function displayQuote(index) { quoteParagraph.textContent = quotes[index]; } // Set the default quote to the first one displayQuote(0); svgs[0].classList.add('selected'); // Set the default selected circle svgs.forEach(svg => { svg.addEventListener('click', function() { // Remove 'selected' class from all SVGs svgs.forEach(s => s.classList.remove('selected')); // Add 'selected' class to the clicked SVG this.classList.add('selected'); // Get the quote index from the data attribute const quoteIndex = parseInt(this.dataset.quoteIndex); // Display the corresponding quote displayQuote(quoteIndex); }); }); }); #quote-box { margin-top: 20px; /* Add spacing above the quote */ } #quote-paragraph { font-size: 2em; /* Adjust the font size */ font-family: "Public Sans", serif; font-weight: 200; line-height: 1.2em; color: white; width: 520px; padding-bottom: 1em; } .circle-container{ display: flex; justify-content: center; align-items: center; margin-bottom: 5px; /* Reduced spacing between circles */ } svg { height: 30px; /* Adjust SVG height */ width: 30px; /* Adjust SVG width */ cursor: pointer; transition: transform 0.2s ease-in-out; } svg circle { fill: #6c6c6c; } svg.selected circle { fill: #fff; } svg.selected { transform: scale(1.2); }