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...
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.
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>