How do I change the font size and font color in this block of code?

Question

I'm very new to JS and I'm working on a project. This is the website so far (http://irie.rf.gd/rw/) When you click on the equal sign, it generates a random quote.

How do I increase the font-size of the quotes and center the text?

I also want the color of the quotes to change every time a new quote is generated but I have no idea how. Its an assignment, so if anyone knows how to do this with loops I would appreciate it (I get a higher grade). Thanks in advance.

 <script>

            //Shows a dropdown list when selected
            //Clicking this button reveals and hides all four math operators
            //Users can select whichever operator they like

            function selectOperator() {
                var menuList = document.getElementById("menuList")
                document.getElementById("listings").value = menuList.options[menuList.selectedIndex].text;
            }



            //The following quotes will be displayed when the equal sign is clicked.
            var quotes = [
                'Try not to talk in circles. There\'s just no point.', 
                'You clicked on the equal sign. He\'s so humble. He\'s not less than or geater than anyone else.',
                'My dad spent all summer at the beach. He\'s a Tan Gent.',
                'The 2 fours skipped lunch because they already 8, silly!',
                'Ok, so clearly, math just isn\'t your thing. Its ok. No need to cry.',
                'Don\'t feel too bad for parallel lines since they will never meet. They are experts in social distancing.',
                'Check your angles. They weren\'t able to get a loan since their parents won\'t cosine.',
                'Oh I see! Your plants hate math because you told them math will give them square roots.',
                'You keep checking one math book after another. Bad idea. They have their own problems!',
                'This website is like an obtsue triangle. Its never right!',
                'Be wary of anyone with a graph paper. Those people are always plotting something.',
                'Rumor has it that old math teacher of yours has a favorite snake. Its a pi-thon.',
                'Meet my baby twins. Both their names are parabolas and they only drink quadratic formula.',
                'What did one dessert say to the other? I\'m a cute 3.14.',
            ]
            

            //This generates random quotes.
            function nextQuote() {
                var randonNumber = Math.floor(Math.random() * (quotes.length));
                document.getElementById('randomquotegenerater').innerHTML = quotes[randonNumber];
            }
        </script>

body {
    background-color: #eae7dc
}


h1 {
    color: #e85a46;
    text-align: center;
    margin-bottom: 120px;
}


#section1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 40px;    
}

#randomquotegenerater {
    width: 80%;
    height: 150px;
    background-color: #e98074;
    margin-left: 120px;
    align-items: center;
}

#box1 {
    width: 300px;
    height: 100px;
    border: 1px solid black;
}

#box2 {
    width: 300px;
    height: 100px;
    border: 1 px solid black;
}

#menuList {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    justify-content: center;
}


.dropdownmenu {
    display: inline;
    position: relative;
}


.choices {
    display: none;
    position:absolute;
    background-color: lightgray;
    overflow: auto;
    z-index: 1;
}


#menuList option {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


#quotebutton {
    margin-left: 48%;
    margin-bottom: 20px;
    width: 80px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Can you solve this?</title>
        <meta charset="UTF-8">
        <meta name="description" content="(This is a useless website">
        <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <h1>Free online math solutions</h1>

        <div id="section1">
            <div>
                <!--Users can enter any whole number of their choice--> 
                <input type="number" id="box1" name="box1" placeholder="enter a valid integer">
            </div>

            <form class="dropdownmenu">
                <select id="menuList" onchange = "selectOperator()">
                    <option>Select an operator</option>
                    <option class="choices">+</option>
                    <option class="choices">-</option>
                    <option class="choices">x</option>
                    <option class="choices">/</option>
                </select>
            </form>


            <div>
                <!--Users can enter any whole number of their choice--> 
                <input type="number" id="box2" name="box2" placeholder="enter a valid integer">
            </div>
            </div>
      
       

        <button onclick="nextQuote()" id="quotebutton">=</button>
        


        <div id="randomquotegenerater">
            <!--Random quote will show up here-->

        </div>       
    </body>
</htm

You may have intended [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) rather than `align-items`. How do you want to change size and color? Does each quote have a specific size and color or is it random? — showdev, Mar 23 '21 at 21:11
Also see [Random color generator](https://stackoverflow.com/questions/1484506/random-color-generator). — showdev, Mar 24 '21 at 00:26

Manas Khandelwal · Answer 1 · 2021-03-24T08:00:26.660

Add this font-size: 30px; to #randomquotegenerater in css:

#randomquotegenerater {
  width: 80%;
  height: 150px;
  background-color: #e98074;
  margin-left: 120px;
  align-items: center;
  font-size: 30px;
}

To add random color:

function nextQuote() {
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  var randonNumber = Math.floor(Math.random() * (quotes.length));
  document.getElementById('randomquotegenerater').innerHTML = `<span style="color:#${randomColor};">${quotes[randonNumber]}</span>`;
}

Now, why we multiply it by `16777215`.

16777215 is the number that is equal to the white color. If you console.log it like this:

console.log((16777215).toString(16)); //ffffff

And if you notice the rgb value of white, you will see it is rgb(255, 255, 255). Here of all colors 255 is the max value for all - red, blue, green.

So when we multiply Math.floor(Math.random() * 16777215) with this number will get a number that is less than of white because white is max.

Now what does `.toString(16)` do

This is a tricky one. toString converts a number to a string. The 16 here is the base, which can be from 1 to 32.

If you want to know more about number.toString(base) you can read the official ECMAScript documentation below: https://262.ecma-international.org/5.1/#sec-9.8.1

//Shows a dropdown list when selected
//Clicking this button reveals and hides all four math operators
//Users can select whichever operator they like

function selectOperator() {
  var menuList = document.getElementById("menuList")
  document.getElementById("listings").value = menuList.options[menuList.selectedIndex].text;
}


//The following quotes will be displayed when the equal sign is clicked.
var quotes = [
  'Try not to talk in circles. There\'s just no point.',
  'You clicked on the equal sign. He\'s so humble. He\'s not less than or geater than anyone else.',
  'My dad spent all summer at the beach. He\'s a Tan Gent.',
  'The 2 fours skipped lunch because they already 8, silly!',
  'Ok, so clearly, math just isn\'t your thing. Its ok. No need to cry.',
  'Don\'t feel too bad for parallel lines since they will never meet. They are experts in social distancing.',
  'Check your angles. They weren\'t able to get a loan since their parents won\'t cosine.',
  'Oh I see! Your plants hate math because you told them math will give them square roots.',
  'You keep checking one math book after another. Bad idea. They have their own problems!',
  'This website is like an obtsue triangle. Its never right!',
  'Be wary of anyone with a graph paper. Those people are always plotting something.',
  'Rumor has it that old math teacher of yours has a favorite snake. Its a pi-thon.',
  'Meet my baby twins. Both their names are parabolas and they only drink quadratic formula.',
  'What did one dessert say to the other? I\'m a cute 3.14.',
]


//This generates random quotes.
function nextQuote() {
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  var randonNumber = Math.floor(Math.random() * (quotes.length));
  document.getElementById('randomquotegenerater').innerHTML = `<span style="color:#${randomColor};">${quotes[randonNumber]}</span>`;
}

body {
  background-color: #eae7dc
}

h1 {
  color: #e85a46;
  text-align: center;
  margin-bottom: 120px;
}

#section1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  width: 100%;
  margin-bottom: 40px;
}

#randomquotegenerater {
  width: 80%;
  height: 150px;
  background-color: #e98074;
  margin-left: 120px;
  align-items: center;
  font-size: 30px;
}

#box1 {
  width: 300px;
  height: 100px;
  border: 1px solid black;
}

#box2 {
  width: 300px;
  height: 100px;
  border: 1 px solid black;
}

#menuList {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  justify-content: center;
}

.dropdownmenu {
  display: inline;
  position: relative;
}

.choices {
  display: none;
  position: absolute;
  background-color: lightgray;
  overflow: auto;
  z-index: 1;
}

#menuList option {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#quotebutton {
  margin-left: 48%;
  margin-bottom: 20px;
  width: 80px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Can you solve this?</title>
  <meta charset="UTF-8">
  <meta name="description" content="(This is a useless website">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <h1>Free online math solutions</h1>

  <div id="section1">
    <div>
      <!--Users can enter any whole number of their choice-->
      <input type="number" id="box1" name="box1" placeholder="enter a valid integer">
    </div>

    <form class="dropdownmenu">
      <select id="menuList" onchange="selectOperator()">
        <option>Select an operator</option>
        <option class="choices">+</option>
        <option class="choices">-</option>
        <option class="choices">x</option>
        <option class="choices">/</option>
      </select>
    </form>


    <div>
      <!--Users can enter any whole number of their choice-->
      <input type="number" id="box2" name="box2" placeholder="enter a valid integer">
    </div>
  </div>



  <button onclick="nextQuote()" id="quotebutton">=</button>



  <div id="randomquotegenerater">
    <!--Random quote will show up here-->

  </div>
</body>

</html>

Awesome! I might also "center the text" in `#randomquotegenerater` with `display:flex;justify-content:center;align-items:center;text-align:center;`. — showdev, Mar 24 '21 at 00:24
@ManasKhandelwal Thanks for this! Just one question. Can you explain the random color quote that you wrote? How did you get (* 16777215).toString(16))? I just want to understand it so that I can get better. Like I said, I'm new to JS. — irie, Mar 24 '21 at 03:47
@irie I added some explanation, hope it helps... if you need any help let me know ✌ — Manas Khandelwal, Mar 24 '21 at 08:01

score -1 · Answer 2 · answered Mar 23 '21 at 21:10

-1

In your javascript code where you add a new quote, you need to also add code to change the css text-color property of the element as well. You can use random numbers, which you've used elsewhere in your code.

answered Mar 23 '21 at 21:10

OctopuSS7

465
2
9

How do I change the font size and font color in this block of code?

2 Answers2

Now, why we multiply it by 16777215.

Now what does .toString(16) do

Now, why we multiply it by `16777215`.

Now what does `.toString(16)` do