Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
#1

I am just realizing the new quote button randomizes the color for the main background and the quote box foreground text. This is a challenging wrinkle that will take me a while to figure out. I think they are using something called a flex that we have not yet learned. Also, I have added <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> to enable font awesome, but it does not seem to be active. Should this command work on HTML I am not seeing where the list of quotes/authors is housed.

Your code so far

Your browser information:

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

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

1 Like
#2

Post your code.

The color change isn’t a requirement but all it does is use an array of hex color strings and using the same logic for a random quote to get a random color. Then just set the body color (background-color and color). It is using jQuery but you absolutely do not need that.

1 Like
#3

My first pass effort began with Javascript code:

let randrgb=[];
for (let i=0; i<3; i++){
let randrgb[i]=Math.floor(255*Math.random());
  console.log(randrgb);
}

But I don’t know how to use that array for colors. I’ll go back and review JQuery.

Then do I use bootstrap to place the twitter, tumbler and new quote elements?

1 Like
#4

Generating valid random colors is not as easy as just having an array of colors. If you have enough of them the user won’t notice it and you can also control the colors and pick some that you like.

Here is a Codepen

2 Likes
#5

That is a lot cleaner than the first one that I found (https://codepen.io/kaizoku_95/pen/JvzayE).

Hey! to be clear, is the Hamburger bar popout thing part of the assignment? Am I supposed to recreate the black background header row too?

1 Like
#6

I assume you mean the test script? No that is just a script you add so you can test it.

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Are you talking about Codepen header? That is not part of the page, it is part of the Codepen UI.

1 Like
#7

Do i just pop the link in an HTML <script></script> element in the <head>, use script{} in CSS or put the script in the JS console somehow? We have not been taught test scripts to my recollection.

1 Like
#8 
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>

I placed it before closing body tag.

No we have not been taught this stuff. I think we reached the point where extensive own research is required.

1 Like
#9

Well it is installed and claiming that I have passed 10 of 12 tests already and I have not figured out how to pass the quotes, pass the authors or get my font-awesome icons to populate. In addition, when I added <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/> to my HTML inside the <head></head> element it messed up my background. There is no way it should be saying passed 10 of 12.

I also have not figured out how to get the color random, incorporate JQuery or Bootstrap. Not 10 of 12 for sure.

1 Like
#10

Take a close look at the tests.

Most of them are about just having some elements rendered on the page.

Just couple of them are about dynamic.

There are no strict requirements about styling(well, I think there is just one) - so even if bootstrap is messing with the layout - it will not affect the tests too much.

I just created object lookup with quotes and authors.

I saw some versions where folks fetching this data, but I myself have not messed around fetching yet.

I am using react, so no feedback about jQuery from my end.

#11

Although I the script thinks I am, I don’t think I am really passing 6-9 right now since no quotes or authors are on my page.

#12

Ok, this is weird and interesting.

But in order to try and evaluate the weirdness of it, I need to see your code. You are doing stuff locally, or maybe you have this project on codepen or somewhere?

I am not sure if I will be able to figure it out, don’t know stuff about test suites.

#13

How are you seeing other people’s versions?

#14

Here is my CSS that was working before I put the bootstrap initialization in my HTML:

  --randomcolor: #6495ed;
}

body {
  font-family: system-ui;
  font-size: 25px;
  background-color: #77B1A9; /*same as rgb(119, 177, 169)*/
  color: #77B1A9;
  text-align: center;
}

#quote-box {
  background-color: white;
  margin: auto;
  margin-top: 250px ;
  width: 450px;
  height: 300px;
  padding: 25px 50px;
}

#author {
  text-align: right;
  font-size: 18px;
}

#new-quote {
    float: right;
}```

Note the color is the color I was seeing before I realized it was random and dynamic.
#15

If somebody shared link to their codepen for example. You can search this forum, just type in the search filed ‘random quote machine’

#16

My HTML includes a lot of stylesheet stuff that I copied by inspection:

  <HTML lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>FCC : Random Quote Machine</title>
      <link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/fullpage/fullpage-1580f96ce81ff0a427cf57dda2748ce646c38efc201ae5942a29958cffa6856d.css">
      <link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/global/global-13b6426431ed0f511a5f146fedda1389eb9eabcb17a1aee8bde0db5f7aa8b923.css">
      <link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/packs/css/everypage-bc120a53.css">
      <link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/page/page-f19203c8fe65f7537f749457302a72522949afc3526cf238841f52afebabd5fa.css">
      <link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/editor/editor-9ec1239896c38e8af5e2c952d80a98c0bc83d9d805bf69d553a20e8689051f73.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <!--add font-awesome-->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/> <!--add bootstrap-->
      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script><!--Hamburger bar popout test module-->
    </head>
    <body>
      <div id="quote-box">
        <p id="text"> 
          Quotes will go here.
        </p>
        <p id="author"> 
          Author's name
        </p>
        <div class="buttons">
      <a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank" href="https://twitter.com/intent/tweet?hashtags=quotes&amp;related=freecodecamp&amp;text=%22Life%20is%20not%20measured%20by%20the%20number%20of%20breaths%20we%20take%2C%20but%20by%20the%20moments%20that%20take%20our%20breath%20away.%22%20Maya%20Angelou" style="background-color: rgb(119, 177, 169);">
        <i class="fa fa-twitter"></i>
      </a>
      <a class="button" id="tumblr-quote" title="Post this quote on tumblr!" target="_blank" href="https://www.tumblr.com/widgets/share/tool?posttype=quote&amp;tags=quotes,freecodecamp&amp;caption=Maya%20Angelou&amp;content=Life%20is%20not%20measured%20by%20the%20number%20of%20breaths%20we%20take%2C%20but%20by%20the%20moments%20that%20take%20our%20breath%20away.&amp;canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&amp;shareSource=tumblr_share_button" style="background-color: rgb(119, 177, 169);">
        <i class="fa fa-tumblr"></i>
      </a>
      <button class="button" id="new-quote" style="background-color: rgb(119, 177, 169);">New quote</button>
    </div>
        <img id="tweet-quote"></img>
      </div>
    </body>
  </HTML>```
#17

I really don’t understand why the font-awesome icons are not presenting. I have no clue on author and quote to fetch or lookup. Where are the arrays?

#18

I put the array of objects with authors and quotes and stuff in js file.

Remember challenges like record collection? It looks kind of like it.

about this I am not sure.
It may be something related to codepen environment - no clue about it.
I am using codepen only to test some snippets real quick, or to show some raw code to other people.
Or to look at other’s people work.
I am building stuff locally.

#19

To do this you have to know how to source this data. Once I know where it is/how I can call it, I’ll figure out how to use it. I inspected their code and just see it randomly appear to replace the prior quotes and authors. I don’t see an array or object to work with.

#20

A developer suggest that I install Visual Studio Code last month. I have done so, but have been on code pen rather than operating locally. Not sure how/when to step up in this regard.