javascript newbie

1

I just started learning javascript in college, 2 days ago and would like to know a simple way to format using CSS. To be specific, I want to make the words Office Cheapo a different color without affecting any other texts. I know that my code is flawed especially my price calculations but … baby steps. Thanks in advance for any help provided.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JavaScript Basics Exercise</title>
    
    <style>
    
    
            
  
    
    </style>
    
</head>

<body>
<script>
    
var name;   
   
var number1;
    
var number2;

var number3;
    
var price1;
    
var price2;
    
var price3;
    
var total;   
 
name = prompt("please enter your name");   
      

    
    //  using parseInt to ensure strings converted to numbers    
      
      
 number1 = parseInt(prompt("How many notebooks would you like to buy?", "Please enter a number from 1-10"));

    
  number2 = parseInt(prompt("How many pens would you like to buy?", "Please enter a number from 1-5"));
  
 number3 = parseInt(prompt("How many USB Flash Drives would you like to buy?", "Please enter a number from 1-5"));
    
price1= 5.50;
    
price2= 1.95;
    
price3= 6.75;
    
total = price1 * number1 + (price3 * number3 * .05) + price2 * number2 * .11;
    
 
//Added $ to string so that costomer can view total as money.
    
document.write("Welcome to Office Cheapo, " + name +". Heres your invoice: <br><br> Notebooks bought -- " + number1 + " <br><br> Pens bought-- " + number2 +"<br><br> USB Flash Drives bought-- " + number3 + "<br><br> Final Cost-- $" + total + " <br><br>Thanks for shopping at office Cheapo, cough up and have a nice day!! " );     
   
   
    

    
    </script>
</body>
</html>
2

Hi haberjin!
Welcome to the forums :slight_smile:

The easiest way to style HTML content in the page is to identify the region you wish to style, wrap it in an appropriate element, give it a class or id value, and create the appropriate style rule to target it.

For styling some text inside a larger chunk of text, the span element is the perfect wrapper. Below is an example that shows this at work:

<html>

<head>
  <style>
    .name {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <script>
    document.write("Hello <span class='name'>haberjin</span>!!!");
  </script>
</body>

</html>

What you will do inside your document.write block should be very similar.

Cheers,
Kirupa

1 Like