1

I recently decided to self teach myself JavaScript/HTML/CSS in order to create websites. I've started learning on my own a month ago and have been working on a website to see what I can do so far, and I wanted to include some basic JavaScript to make the site interactive. So far in starting my project I have encountered 2 problems...

  1. So far I have three functions that will display your name, the type of flower you picked, and the number of flowers you wish to purchase when you click the submit button. Where I'm stuck is I have an "Order Total" section in the 'Review' div that I wish to display under it the total price it will cost, which would be type of flower * Number of flowers. So I'm basically stuck in not knowing how to make a function that will take the form values from the type of flower and number of flowers, and have it give the order total when the submit button is clicked.For this test site I have 3 flowers: Sunflower, roses, and lilys...so lets say Sunflower is $5, roses $6, and lilys $7.

  2. When I view my website in the browser (I use chrome) and hit refresh it changes the size of my buttons in the navagation section much smaller than what they orginally showed. Also when I try to add a ':hover' option to my navagation buttons to have them change colors when I hover over them nothing will happen. I have a feeling both of these problems with my buttons are related, but I have no clue why these issues are occuring.

This is my first post on here so I hope I did this right and provided enough information on my problems. Any help with these issues for this newbie would be greatly appreciated, thanks.

Code:

body {
     background: #ff0055;
     background: linear-gradient(#b30086, #ff0055) fixed;
    
    }
    
    .header {
     width: 740px;
     height: 130px;
     margin: 20px auto 10px auto;
     background: #ff80df;
     background: linear-gradient(#ff80df, #ccffdd);
     border-radius: 10px 50px 10px 10px;
     box-shadow: 5px 5px 10px #3c2f00;
     line-height: 130px;
    }
    
    .slogan {
     font-size: 30px;
     float: right;
     font-family: 'Syncopate', sans-serif;
     margin-right: 50px;
    }
    
    .workarea {
     
     
     width:714px;
     height: 417px;
     background: #ff80df;
     background: linear-gradient(#ccffdd, #ff80df);
     border-radius: 10px 10px 10px 50px;
     box-shadow: 5px 5px 10px #3c2f00;
     padding: 20px;
     clear: both;
     float: left;
     margin: 20px auto 20px auto;
     position: absolute;
     margin-left: 250px;
    }
     
    .review {
     background: green;
     width: 180px;
     height: 417px;
     margin: 20px auto 20px auto;
     float: left; 
     margin-left:1025px;
     position: relative;
     padding: 20px;
     border-radius: 10px 50px 50px 10px;
     box-shadow: 5px 5px 10px #3c2f00;
     background: #ff80df;
     background: linear-gradient(#ccffdd, #ff80df);
    
    }
    
    button {
     display: block;
     width: 150%;
     padding: 20%;
     border-radius: 50px 10px 10px 50px;
     margin-bottom: 30px;
     margin: 20px;
     background: #ff80df;
     background: linear-gradient(#ccffdd, #ff80df);
     box-shadow: 5px 5px 10px #3c2f00;
     font-weight: bold;
     
     
      
    }
      
      .nav {
       position: absolute;
       margin: 40px 40px 40px -10px;
       margin-top: 40px;
       
      }
      
      .nav button:not(:last-child) {
       border-bottom: none;
      }
      
      .nav button:hover {
       background-color: green;
      }
      
    #but2, #but3 {
     margin-top: 50px;
    } 
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="flower.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet">
    <script>
    function showName() {
    document.getElementById("display").innerHTML = document.getElementById("name").value;
    }
    
    function showType() {
    document.getElementById("display2").innerHTML = document.getElementById("typeFlo").value;
    }
    
    function showNumber() {
    document.getElementById("display3").innerHTML = document.getElementById("numFlo").value;
    
    
    
    }
    
    </script>
    
    </head>
    
    <body>
    <div class="header">
    <span class="slogan">Miss Lemon's Flower Shop</span>
    
    
    </div>
    
    
    <div class="workarea">
    
    <h3>Place your order below!</h3>
    
    <form>
    <p>Your Name: 
    <input type="text" id="name" placeholder="Enter your name"></p><br>
    <p>Type of flower: 
    <select id="typeFlo">
    <option>Sunflower</option>
    <option>Roses</option>
    <option>Lily</option>
    </select></p><br>
    <p>Number of flowers:
    <input type="number" id="numFlo" placeholder="How many flowers?"></p><br>
    </form>
    <input type="submit" onclick="showName(); showType(); showNumber();">
    </div>
    
    <div class="review">
    <b><span id="display" style="color: red"></span><br> Review your order below</b><br><br><br>
    
    <b>Type of flower:</b><br>
    <span id="display2"></span>
    <br><br>
    <b>Number of Flowers:</b><br>
    <span id="display3"></span>
    <br><br>
    <b>Order Total:</b><br>
    <span id="display4"></span>
    <br><br><br>
    <input type="submit" value="checkout">
    
    </div>
    
    <div class="nav">
    <button id="but1">Home</button>
    <button id="but2">Products</button>
    <button id="but3">Buy Now</button>
    
    </div>
    
    
    
    </body>
    </html>
klaus27
  • 13
  • 2
  • Get the type, convert that to a price, multiply by the quantity, and show that as the total. – Barmar Jul 14 '17 at 02:22

2 Answers2

1

First I replaced the p tags for your inputs with actual labels. Then I changed the first button to an actual button instead of a submit. Then I created another function showTotal() that will take the flower type and get the cost out of an array and put the total into the order total div. Although there's no reason all four of these functions couldn't be combined.

The showTotal function stores the flower type values in an object, reads the selected flower type and number of flowers, computes the total and displays it to 2 decimals.

The reason your hover wasn't working was because of the background: linear-gradient. Your background color was changing, it was just under the linear gradient.

How to check if a variable is an integer in JavaScript? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

function showName() 
{
  document.getElementById("display").innerHTML = document.getElementById("name").value;
}

function showType() 
{
  document.getElementById("display2").innerHTML = document.getElementById("typeFlo").value;
}

function showNumber() 
{
  document.getElementById("display3").innerHTML = document.getElementById("numFlo").value;
}

function showTotal()
{
  //flower prices in object
  var flowerPrices = {
    'Sunflower': 5,
    'Roses': 6,
    'Lily': 7
  };
  var numberFlowers = document.getElementById('numFlo').value;
  var flowerType = document.getElementById('typeFlo').value;
  var total = 0;
  var totalContainer = document.getElementById('display4');
  
  //check for integer
  if (!isNaN(numberFlowers) && 
         parseInt(Number(numberFlowers)) == numberFlowers && 
         !isNaN(parseInt(numberFlowers, 10)) &&
         //check that valid flower is selected
         flowerPrices.hasOwnProperty(flowerType)
   ) {
      //get total
      total = flowerPrices[flowerType] * numberFlowers;
      //format to 2 decimal places
      totalContainer.innerHTML = '$' + total.toFixed(2);
   }
}
body {
    background: #ff0055;
    background: linear-gradient(#b30086, #ff0055) fixed;

}

.header {
    width: 740px;
    height: 130px;
    margin: 20px auto 10px auto;
    background: #ff80df;
    background: linear-gradient(#ff80df, #ccffdd);
    border-radius: 10px 50px 10px 10px;
    box-shadow: 5px 5px 10px #3c2f00;
    line-height: 130px;
}

.slogan {
    font-size: 30px;
    float: right;
    font-family: 'Syncopate', sans-serif;
    margin-right: 50px;
}

.order-label {
  display: inline-block;
  width: 128px;
}

.workarea {
    width:714px;
    height: 417px;
    background: #ff80df;
    background: linear-gradient(#ccffdd, #ff80df);
    border-radius: 10px 10px 10px 50px;
    box-shadow: 5px 5px 10px #3c2f00;
    padding: 20px;
    clear: both;
    float: left;
    margin: 20px auto 20px auto;
    position: absolute;
    margin-left: 250px;
}

.review {
    background: green;
    width: 180px;
    height: 417px;
    margin: 20px auto 20px auto;
    float: left; 
    margin-left:1025px;
    position: relative;
    padding: 20px;
    border-radius: 10px 50px 50px 10px;
    box-shadow: 5px 5px 10px #3c2f00;
    background: #ff80df;
    background: linear-gradient(#ccffdd, #ff80df);

}

button {
    display: block;
    width: 150%;
    padding: 20%;
    border-radius: 50px 10px 10px 50px;
    margin-bottom: 30px;
    margin: 20px;
    background: #ff80df;
    background: linear-gradient(#ccffdd, #ff80df);
    box-shadow: 5px 5px 10px #3c2f00;
    font-weight: bold;
}

        .nav {
            position: absolute;
            margin: 40px 40px 40px -10px;
            margin-top: 40px;

        }

        .nav button:not(:last-child) {
            border-bottom: none;
        }

        .nav button:hover {
            background: linear-gradient(#0F0, #ff80df);
        }

#but2, #but3 {
    margin-top: 50px;
}

#but1:hover {
  color: #00F;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="flower.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet">
</head>

<body>
  <div class="header">
    <span class="slogan">Miss Lemon's Flower Shop</span>
  </div>

  <div class="workarea">
    <h3>Place your order below!</h3>
    <form>
        <label for="name" class="order-label">Your Name:</label>
        <input type="text" id="name" placeholder="Enter your name"><br>
      
        <label for="typeFlo" class="order-label">Type of flower: </label>
        <select id="typeFlo">
          <option>Sunflower</option>
          <option>Roses</option>
          <option>Lily</option>
        </select><br>
        
        <label for="numFlo" class="order-label">Number of flowers: </label>
        <input type="number" id="numFlo" placeholder="How many flowers?"><br>
    </form>
    <input type="button" onclick="showName(); showType(); showNumber(); showTotal();" value="Show Totals">
  </div>

  <div class="review">
    <b><span id="display" style="color: red"></span><br> Review your order below</b><br><br><br>

    <b>Type of flower:</b><br>
    <span id="display2"></span>
    <br><br>
    <b>Number of Flowers:</b><br>
    <span id="display3"></span>
    <br><br>
    <b>Order Total:</b><br>
    <span id="display4"></span>
    <br><br><br>
    <input type="submit" value="checkout">
  </div>

  <div class="nav">
    <button id="but1">Home</button>
    <button id="but2">Products</button>
    <button id="but3">Buy Now</button>
  </div>
</body>
</html>
Russell
  • 476
  • 2
  • 10
0

This should solve your problem with the compute total. Please note of the price_array so that you can customized it. The logic here is as explained by @Barmar.

function showOrderTotal() {
  var price_array = {"Sunflower": 5, "Roses": 6, "Lily": 7};
  var str = document.getElementById("numFlo").value;
  if (str && str.length > 0)
    var countis = str;
  else
   var  countis = 0;
  document.getElementById("display4").innerHTML =  price_array[document.getElementById("typeFlo").value] * countis;
}

As for your css, use this instead. Note that I used background instead of background color to cancel out the line-gradient that you have used. I also added cursor change on hover to denote that it is clickable.

.nav > button:hover {
  background: green;
  cursor: pointer;
}
ajib
  • 309
  • 2
  • 17