Front End Development Libraries Projects - Build a Random Quote Machine

Tell us what’s happening:

Describe your issue in detail here.
I am trying to have the background dynamically load and change to an image from an array of background image links and then change the buttons’ background color and the quote and author’s text color to match. I managed to get the buttons’ background color to change, but the formatting of the buttons got messed up (I wanted the share buttons for Twitter/X and Tumblr to be floating on the left with some space in-between while the Generate New Quote button floats on the right I also wanted the button symbols and text to be white) and the background image for the page isn’t rendering at all. The new page with the twitter and tumblr quotes also don’t seem to work.

I am also getting this error for my JavaScript code despite there being no syntax errors that I can find: Unexpected token, expected “,” (204:32)
(I’ll put this by my code below too for easier readability).

I am using codepen.io for this challenge. I have SASS as the preprocessor for CSS and am externally importing React and ReactDOM (I imported the React 16 and ReactDOM 16 packages) with Babel as the preprocessor for JavaScript.

I pass all of the challenge’s tests, this is more so all the functions I planned to have run properly on the code. (I don’t want code in there that doesn’t function properly, and I also want there to actually be a dynamically changing style when the button is clicked, and the page is loaded).

Any insight would be greatly appreciated. I have been trying to get this to work via many google searches and looking over of the syntax.

Your code so far

HTML:

<div id="root">
</div>

CSS (w/SASS preprocessor)

html
  margin: 0
  padding: 0
  list-style: none
  vertical-align: baseline

div
  position: relative
  z-index: 2

body
  background-color: #333
  color: #333
  font-family: Verdana, Arial, sans-serif
  font-weight: 400
  display: flex
  justify-content: center
  align-items: center
  height: 100vh

#quote-box
  border-radius: 3px
  position: relative
  width: 450px
  padding: 40px 50px
  display: table
  background-color: #fff

#quote-box .quote-text
  color: #fff

.footer
  width: 450px
  text-align: center
  display: block
  margin: 15px auto 30px auto
  font-size: 0.8em
  color: #fff

.footer a
  font-weight: 500
  text-decoration: none
  color: #fff

#profile-link, #project-link
  color: orange
  transition: color 0.3s

#profile-link:active, #project-link:active
  color: yellow

#profile-link:hover, #project-link:hover
  color: yellow

#quote-box .quote-text i
  font-size: 1em
  margin-right: 0.4em

#quote-box .quote-author
  width: 450px
  height: auto
  clear: both
  padding-top: 20px
  font-size: 1em
  text-align: right

#quote-box .buttons
  width: 450px
  margin: auto
  display: block

#quote-box .buttons .button
  height: 38px
  border: none
  border-radius: 3px
  color: #fff
  outline: none
  font-size: 0.85em
  padding: 8px 18px 6px 18px
  margin-top: 30px
  opacity: 1
  cursor: pointer

#quote-box .buttons .button:hover
  opacity: 0.9

#quote-box .buttons .button#tweet-quote,
#quote-box .buttons .button#tumblr-quote
  float: left
  padding: 0
  padding-top: 8px
  text-align: center
  font-size: 1.2em
  margin-right: 5px
  height: 30px
  width: 40px

#quote-box .buttons .button#new-quote
  float: right

Javascript (w/React & ReactDOM externally rendered [I used the React 16 and ReactDOM packages] and Babel as preprocessor):

function applyBackgroundStyle(background) {
  const root = document.getElementById("root");
  root.style.backgroundImage = `url("${background.link}")`;
  document.body.style.backgroundColor = background.color;
}
  
function getRandomQuote(quotes) {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  return quotes[randomIndex];
}



const colors = {
    green: "#006400",
    purple: "#7851a9",
    red: "#880808",
    blue: "#00416a",
    teal: "#20b2aa"
  };

  const backgrounds = [
    {
      name: "Green Galaxy",
      link: "https://images.designtrends.com/wp-content/uploads/2016/04/07071737/Free-galaxy-wallpapers.jpg",
      color: colors.green,
      buttonColor: colors.green,
    },
    {
      name: "Purple Galaxy",
      link: "https://wallpapercave.com/wp/CToGD7f.jpg",
      color: colors.purple,
      buttonColor: colors.purple,
    },{
    name: "Red Galaxy",
    link: "https://live.staticflickr.com/65535/48767730827_8bed65e74b_n.jpg",
    color: colors.red,
      buttonColor: colors.red
  },
  {
    name: "Green Galaxy",
    link:
      "https://1.bp.blogspot.com/--pFPrhaZZAs/YLYvpIUvVnI/AAAAAAAAO5A/wmcGY7TM-PYh5PHkktWbLarTmVyKZJ6UACLcBGAsYHQ/s1200/green-bean-galaxies_nahladovka.jpg",
    color: colors.green, buttonColor: colors.green
  },
  {
    name: "Ocean Reef",
    link:
      "https://th.bing.com/th/id/R.eb3ec903ed51db94b1c319073b9e45ea?rik=itL%2fVMAfTBySXA&pid=ImgRaw&r=0&sres=1&sresct=1",
    color: colors.teal, buttonColor: colors.teal
  },
  {
    name: "Ocean Diver",
    link:
      "https://th.bing.com/th/id/OIP.BwXnHpzAh1H25I3pesnIvgHaE8?pid=ImgDet&rs=1",
    color: colors.blue,
    buttonColor: colors.blue
  },
  {
    name: "Ocean Dark",
    link:
      "https://th.bing.com/th/id/R.0edf3a04036c240078cf8e862c9d1036?rik=zAxg8VmyX%2fcENw&riu=http%3a%2f%2fwallpapercave.com%2fwp%2fiBVthRI.jpg&ehk=mqSYlENVFnMKI74xk7ovfUipQDkjxSjetdUxBr5gl10%3d&risl=&pid=ImgRaw&r=0",
    color: colors.blue, buttonColor: colors.blue
  },
  { name: "Green Ocean", link: "https://wallpapercave.com/wp/7yxl85D.jpg",
  color: colors.green, buttonColor: colors.green},
  {
    name: "Ocean Half & Half",
    link:
      "https://th.bing.com/th/id/OIP.8jtkZKdG5iLZcYDQH5jP5wHaEo?pid=ImgDet&rs=1",
    color: colors.purple, buttonColor: colors.purple
  }
];

  const getRandomBackground = () => {
    const randomIndex = Math.floor(Math.random() * backgrounds.length);
    return backgrounds[randomIndex];
  };

const QuoteMachine = () => {
  const [quotes, setQuotes] = React.useState([
  {
    author: "Maya Angelou",
    quote:
      "If you're always trying to be normal, you will never know how amazing you can be."
  },
  {
    author: "George Orwell",
    quote:
      "If you can feel that staying human is worthwhile, even when it can’t have any result whatever, you’ve beaten them."
  },
  {
    author: "J.R.R. Tolkien",
    quote: "All we have to decide is what to do with the time that is given us."
  },
  {
    author: "Paulo Coelho",
    quote: "You have to take risks. We will only understand the miracle of life fully when we allow the unexpected to happen."
  },
  {
    author: "Mark Twain",
    quote: "Keep away from people who try to belittle your ambitions. Small people always do that, but the really great make you feel that you, too, can become great."
  },
  {
    author: "Lucy Maud Montgomery",
    quote: "Just as soon as you attain to one ambition you see another one glittering higher up still. It does make life so interesting."
  },
  {
    author: "Dale Carnegie",
    quote: "Most of the important things in the world have been accomplished by people who have kept on trying when there seemed to be no hope at all."
  },
  {
    author: "Jaachynma N.E. Agu",  
    quote: "Don't blow off another's candle for it won't make yours shine brighter."
  },
  {
    author: "Steven Cuoco",
    quote:
      "Take a moment and sit with yourself. You may find what you are looking for."
  },
  { 
   author: "Haruki Murakami",
   quote: "Pain is inevitable. Suffering is optional." },
  {
    author: "Kanae Minato",
    quote: "The world you live in is much bigger than that. If the place in which you find yourself is too painful, I say you should be free to seek another, less painful place of refuge. There is no shame in seeking a safe place. I want you to believe that somewhere in this wide world there is a place for you, a safe haven."
  },
  {
    author: "Gail Tsukiyama",
    quote: "Don’t ever think that just because you do things differently, you’re wrong."
  },
  {
    author: "Phillipa Soo",
    quote: "Life isn’t perfect, any failures you have are actually learning moments. They teach us how to grow and evolve."
  },
  {
    author: "Connie Chung",
    quote: "You can’t juggle it all 100 percent. You don’t have to be perfect. You don’t have to do everything."
  },
  {
    author: "Thich Nhat Hanh",
    quote: "To be beautiful means to be yourself. You don’t need to be accepted by others. You need to accept yourself."
  },
  {
    author: "Sonia Sotomayor",
    quote: "Success is its own reward, but failure is a great teacher too, and not to be feared."
  }
]);  
  
  const [currentQuote, setCurrentQuote] = React.useState(getRandomQuote(quotes));

const [background, setBackground] = React.useState(getRandomBackground());

  
  
  const getNewQuote = () => {
    const randomQuote = getRandomQuote(quotes);
    setCurrentQuote(randomQuote);
    
setBackground(getRandomBackground());
  };
 
  const textColor = background.color;
  const buttonBackgroundColor = background.buttonColor;  
  
 return (
    <div id="outer-wrapper" style={{ backgroundImage: `url("${background.link}") }}>
    <div id="quote-box">
        <div id="text-wrapper">
          <i className="fa fa-quote-left" id="fa-quote-left" title="left-side of quotation marks styled larger"></i>
          <span id="text" className="text text-center" style={{ color: background.color }}>
            {currentQuote ? currentQuote.quote : ""}
          </span>
        </div>
        <div id="author-wrapper">
          <span id="author" className="author" style={{ color: textColor }}>
            {currentQuote ? `- ${currentQuote.author}` : ""}
          </span>
        </div>
        </div>
        <div className="button-wrapper" id="button-wrapper">
          <a className="button" id="tweet-quote" href="twitter.com/intent/tweet" target="_blank" style={{ backgroundColor: buttonBackgroundColor color:#fff}}>
            <i className="fa fa-twitter" title="Post this quote on Twitter/X!"></i>
          </a>
          <a className="button" id="tumblr-quote" style={{ backgroundColor: buttonBackgroundColor color: #fff}}>
            <i className="fa fa-tumblr" title="Post this quote on Tumblr!"></i>
          </a>
          <button
            className="button"
            id="new-quote"
            title="Generate new quote"
            onClick={getNewQuote}
            style={{ backgroundColor: buttonBackgroundColor, float: right color: #fff}}
          >
            Generate New Quote
          </button>
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return (
    <div className="footer">
      <span>
        Completed by{" "}
        <a
          href="https://codepen.io/cmalloy"
          id="profile-link"
          title="Link to my profile"
        >
          cmalloy
        </a>{" "}
        for{" "}
        <a
          href="https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine"
          id="project-link"
        >
          this FreeCodeCamp Challenge
        </a>
      </span>
    </div>
  );
};

ReactDOM.render(
  <>
    <QuoteMachine />
    <Footer />
  </>,
  document.getElementById("root")
);

The error again is:
Unexpected token, expected "," (204:32)

Line 204 is:
{currentQuote ? `- ${currentQuote.author}` : ""}

which makes “.” the supposed error, but that is not how referencing properties works in JavaScript.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0

Challenge Information:

Front End Development Libraries Projects - Build a Random Quote Machine

you should use a comma to separate multiple style properties, not just spaces

style={{ backgroundColor: buttonBackgroundColor, color: "#fff" }}

You should do the same for other similar occurrences in your code

As said, your syntax for the style objects is not correct. They are just objects, you write them like any object. The properties are comma separated and the values are either variables or primitive values - e.g. a hex color value or left are strings, not identifiers (syntax example for the BG image).

You have an extra </div> in your QuoteMachine component JSX.

Your #quote-box element has a background color that is on top of the #outer-wrapper image.


Sometimes you have to backtrack errors. One way of doing that is to remove the code at the current location of the error and see if the error moves to a new location. Then fix that error(s) and after that put back the code again.

If you remove this, you can see the error move up to a different location (the styles).

{currentQuote ? `- ${currentQuote.author}` : ""}

Thank you both, this fixed the styling of the buttons and the quote and author text. I tried fixing the background, but I still can’t seem to get it to be behind everything despite setting it to the outer-container.

My updated code:

Html:

<div id="root">
    </div>

CSS(Sass):

html
  margin: 0
  padding: 0
  list-style: none
  vertical-align: baseline

div
  position: relative
  z-index: 2

body
  background-color: #333
  color: #333
  font-family: Verdana, Arial, sans-serif
  font-weight: 400
  display: flex
  justify-content: center
  align-items: center
  height: 100vh

#quote-box
  border-radius: 3px
  position: relative
  width: 450px
  padding: 40px 50px
  display: table
  background-color: #fff

#quote-box .quote-text
  color: #fff

.footer
  width: 450px
  text-align: center
  display: block
  margin: 15px auto 30px auto
  font-size: 0.8em
  color: #fff

.footer a
  font-weight: 500
  text-decoration: none
  color: #fff

#profile-link, #project-link
  color: orange
  transition: color 0.3s

#profile-link:active, #project-link:active
  color: yellow

#profile-link:hover, #project-link:hover
  color: yellow

#quote-box .quote-text i
  font-size: 1em
  margin-right: 0.4em

#quote-box .quote-author
  width: 450px
  height: auto
  clear: both
  padding-top: 20px
  font-size: 1em
  text-align: right

#quote-box .buttons
  width: 450px
  margin: auto
  display: block

#quote-box .buttons .button
  height: 38px
  border: none
  border-radius: 3px
  color: #fff
  outline: none
  font-size: 0.85em
  padding: 8px 18px 6px 18px
  margin-top: 30px
  opacity: 1
  cursor: pointer

#quote-box .buttons .button:hover
  opacity: 0.9

#quote-box .buttons .button#tweet-quote,
#quote-box .buttons .button#tumblr-quote
  float: left
  padding: 0
  padding-top: 8px
  text-align: center
  font-size: 1.2em
  margin-right: 5px
  height: 30px
  width: 40px

#quote-box .buttons .button#new-quote
  float: right

Javascript(Babel, React, ReactDOM):

  green: "#006400",
  purple: "#7851a9",
  red: "#880808",
  blue: "#00416a",
  teal: "#20b2aa"
};

const backgrounds = [
  {
    name: "Green Galaxy",
    link: "https://images.designtrends.com/wp-content/uploads/2016/04/07071737/Free-galaxy-wallpapers.jpg",
    color: colors.green,
    buttonColor: colors.green,
  },
  {
    name: "Purple Galaxy",
    link: "https://wallpapercave.com/wp/CToGD7f.jpg",
    color: colors.purple,
    buttonColor: colors.purple,
  },
  {
    name: "Red Galaxy",
    link: "https://live.staticflickr.com/65535/48767730827_8bed65e74b_n.jpg",
    color: colors.red,
    buttonColor: colors.red
  },
  {
    name: "Green Galaxy",
    link:
      "https://1.bp.blogspot.com/--pFPrhaZZAs/YLYvpIUvVnI/AAAAAAAAO5A/wmcGY7TM-PYh5PHkktWbLarTmVyKZJ6UACLcBGAsYHQ/s1200/green-bean-galaxies_nahladovka.jpg",
    color: colors.green,
    buttonColor: colors.green
  },
  {
    name: "Ocean Reef",
    link:
      "https://th.bing.com/th/id/R.eb3ec903ed51db94b1c319073b9e45ea?rik=itL%2fVMAfTBySXA&pid=ImgRaw&r=0&sres=1&sresct=1",
    color: colors.teal,
    buttonColor: colors.teal
  },
  {
    name: "Ocean Diver",
    link:
      "https://th.bing.com/th/id/OIP.BwXnHpzAh1H25I3pesnIvgHaE8?pid=ImgDet&rs=1",
    color: colors.blue,
    buttonColor: colors.blue
  },
  {
    name: "Ocean Dark",
    link:
      "https://th.bing.com/th/id/R.0edf3a04036c240078cf8e862c9d1036?rik=zAxg8VmyX%2fcENw&riu=http%3a%2f%2fwallpapercave.com%2fwp%2fiBVthRI.jpg&ehk=mqSYlENVFnMKI74xk7ovfUipQDkjxSjetdUxBr5gl10%3d&risl=&pid=ImgRaw&r=0",
    color: colors.blue,
    buttonColor: colors.blue
  },
  {
    name: "Green Ocean",
    link: "https://wallpapercave.com/wp/7yxl85D.jpg",
    color: colors.green,
    buttonColor: colors.green
  },
  {
    name: "Ocean Half & Half",
    link:
      "https://th.bing.com/th/id/OIP.8jtkZKdG5iLZcYDQH5jP5wHaEo?pid=ImgDet&rs=1",
    color: colors.purple,
    buttonColor: colors.purple
  }
];

const quotes = [
  {
    author: "Maya Angelou",
    quote:
      "If you're always trying to be normal, you will never know how amazing you can be."
  },
  {
    author: "George Orwell",
    quote:
      "If you can feel that staying human is worthwhile, even when it can’t have any result whatever, you’ve beaten them."
  },
  {
    author: "J.R.R. Tolkien",
    quote: "All we have to decide is what to do with the time that is given us."
  },
  {
    author: "Paulo Coelho",
    quote:
      "You have to take risks. We will only understand the miracle of life fully when we allow the unexpected to happen."
  },
  {
    author: "Mark Twain",
    quote:
      "Keep away from people who try to belittle your ambitions. Small people always do that, but the really great make you feel that you, too, can become great."
  },
  {
    author: "Lucy Maud Montgomery",
    quote:
      "Just as soon as you attain to one ambition you see another one glittering higher up still. It does make life so interesting."
  },
  {
    author: "Dale Carnegie",
    quote:
      "Most of the important things in the world have been accomplished by people who have kept on trying when there seemed to be no hope at all."
  },
  {
    author: "Jaachynma N.E. Agu",
    quote: "Don't blow off another's candle for it won't make yours shine brighter."
  },
  {
    author: "Steven Cuoco",
    quote:
      "Take a moment and sit with yourself. You may find what you are looking for."
  },
  {
    author: "Haruki Murakami",
    quote: "Pain is inevitable. Suffering is optional."
  },
  {
    author: "Kanae Minato",
    quote:
      "The world you live in is much bigger than that. If the place in which you find yourself is too painful, I say you should be free to seek another, less painful place of refuge. There is no shame in seeking a safe place. I want you to believe that somewhere in this wide world there is a place for you, a safe haven."
  },
  {
    author: "Gail Tsukiyama",
    quote: "Don’t ever think that just because you do things differently, you’re wrong."
  },
  {
    author: "Phillipa Soo",
    quote:
      "Life isn’t perfect, any failures you have are actually learning moments. They teach us how to grow and evolve."
  },
  {
    author: "Connie Chung",
    quote:
      "You can’t juggle it all 100 percent. You don’t have to be perfect. You don’t have to do everything."
  },
  {
    author: "Thich Nhat Hanh",
    quote:
      "To be beautiful means to be yourself. You don’t need to be accepted by others. You need to accept yourself."
  },
  {
    author: "Sonia Sotomayor",
    quote:
      "Success is its own reward, but failure is a great teacher too, and not to be feared."
  }
];

const getRandomQuote = () => {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  return quotes[randomIndex];
};

const getRandomBackground = () => {
  const randomIndex = Math.floor(Math.random() * backgrounds.length);
  return backgrounds[randomIndex];
};

const applyBackgroundStyle = (background) => {
  const root = document.getElementById("root");
  root.style.backgroundImage = `url("${background.link}")`;
};

const QuoteMachine = () => {
  const [currentQuote, setCurrentQuote] = React.useState(getRandomQuote());
  const [background, setBackground] = React.useState(getRandomBackground());

  const getNewQuote = () => {
    const randomQuote = getRandomQuote();
    setCurrentQuote(randomQuote);
    setBackground(getRandomBackground());
    applyBackgroundStyle(background);
  };

  const textColor = background.color || "black";
  const buttonBackgroundColor = background.buttonColor || "black";

  return (
    <div id="quote-box">
      <div id="text-wrapper">
        <i
          className="fa fa-quote-left"
          id="fa-quote-left"
          title="left-side of quotation marks styled larger" style={{color:textColor}}
        ></i> <span id="text" className="text text-center" style={{ color: textColor }}>
          {currentQuote ? currentQuote.quote : ""}
        </span>
      </div>
      <div id="author-wrapper">
        <span id="author" className="author" style={{ color: textColor, display: 'right' }}>
          {currentQuote ? `- ${currentQuote.author}` : ""}
        </span> <i
          className="fa fa-quote-right"
          id="fa-quote-right"
          title="right-side of quotation marks styled larger" style={{color:textColor, display: 'right'}}
        ></i>
      </div>
      <div className="button-wrapper" id="button-wrapper">
        <div className="button-container" style={{ display: 'inline-block' }}>
          <a className="button" id="tweet-quote" href="twitter.com/intent/tweet" target="_blank" style={{ backgroundColor: buttonBackgroundColor,
              color: '#fff',
              padding: '0',
              paddingTop: '0',
              textAlign: 'center',
              fontSize: '1.2em',
              marginRight: '0',
              height: '30px',
              width: '50%', position: 'relative'}}>
            <i className="fa fa-twitter" title="Post this quote on Twitter/X!"></i>
          </a>
        </div> <div className="button-container" style={{ display: 'inline-block' }}>
          <a className="button" id="tumblr-quote" style={{ backgroundColor: buttonBackgroundColor,
              color: '#fff',
              padding: '0',
              paddingTop: '0',
              textAlign: 'center',
              fontSize: '1.2em',
              marginRight: '5px',
              height: '30px',
              width: '50%', position: 'relative',}}>
            <i className="fa fa-tumblr" title="Post this quote on Tumblr!"></i>
          </a>
        </div>
        <button
          className="button"
          id="new-quote"
          title="Generate new quote"
          onClick={getNewQuote}
          style={{ backgroundColor: buttonBackgroundColor, float: 'right', color: '#fff'}}
        >
          Generate New Quote
        </button>
      </div>
    </div>
  );
};

const Footer = () => {
  return (
    <div className="footer">
      <span>
        Completed by{" "}
        <a href="https://codepen.io/cmalloy" id="profile-link" title="Link to my profile">
          cmalloy
        </a>{" "}
        for{" "}
        <a
          href="https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine"
          id="project-link"
        >
          this FreeCodeCamp Challenge
        </a>
      </span>
    </div>
  );
};

const App = () => {
  const background = getRandomBackground(); 
  applyBackgroundStyle(background);

  return (
    <div id="outer-wrapper" style={{ backgroundImage: `url("${background.link}")` }}>
      <QuoteMachine />
      <Footer />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

You have declared the getRandomQuote function twice: once as a named function and once as an arrow function.
You should use one form of the function, either the named function or the arrow function, but not both.
Use the arrow function

You have two declarations of the applyBackgroundStyle function in your code. The second declaration of the function will overwrite the first one.

Please post a link to your Codepen instead.


Remove the background-color from #quote-box

I assume you want it on the box and not the page background?

Ah, no I wanted it on the page background. I managed to do that, however, it only changes onLoad, not onClick of the #new-quote button. I decided to move onto other certifications for now, and to come back to this once I have more experience (which I hope will help resolve the issue though either way the styling is still pretty messy since I haven’t deleted the repeat CSS that JS/React is taking care of). Just for reference my code is now the following:

https://codepen.io/cmalloy/pen/QWzXXmB

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.