Below is the solution:
budget.html:
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Budget</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojione/1.3.0/assets/css/emojione.min.css" rel="stylesheet"
type="text/css" />
<script src="script.js" type="text/javascript"></script>
</head>
</body>
<div class="container-fluid center-meh-boi">
<div class="row">
<h1>Budget Planner</h1>
<h2> </h2>
<div class="col-sm-6 col-sm-offset-1">
<div class="box-of-stuff">
<div>
<p>Add Mnthly Income</p>
</div>
<form>
<input class="form-control input-lg" type="text" id="income" placeholder="Salary/Wages" />
<div>
<p>Add Expenses</p>
</div>
<input class="form-control input-lg" type="text" id="rent" placeholder="Rent" />
<input class="form-control input-lg" type="text" id="food" placeholder="Food" />
<input class="form-control input-lg" type="text" id="insurance" placeholder="Insurance" />
<input class="form-control input-lg" type="text" id="others" placeholder="others" />
</form>
<button class="btn btn-primary btn-lg btn-block" onclick="gather()">Submit</button>
</div>
</div>
<div class="col-sm-4">
<div class="results">
<h1 class="title">Results</h1>
</span>
<div id="results-data">
<p>Hit that submit button to see your results!</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
script.js:
function gather() {
//create a variable and stores the value enter to the textbox
income = document.getElementById("income").value;
income = income.replace(/D/g,'');
rent = document.getElementById("rent").value;
rent = rent.replace(/D/g,'');
food = document.getElementById("food").value;
food = food.replace(/D/g,'');
insurance = document.getElementById("insurance").value;
insurance = insurance.replace(/D/g,'');
others = document.getElementById("others").value;
others = others.replace(/D/g,'');
result = income - rent - others - food - insurance; //calculate the result
if (result === 0) { //check if the result is zero
document.getElementById("results-data").innerHTML='<p class="text-danger convert-emoji"> You didn't enter anything. Try again !</p>';
}
else if (result < 0) {
document.getElementById("results-data").innerHTML='<p class="text-danger"> After your expenses you have $' + result + ' left in your budget. You might want to try and reduce your spending this month.</p>';
}
else {
document.getElementById("results-data").innerHTML=
'<p class="text-sucess"> After your expenses you have $' + result + ' left in your budget.</p>';
}
}
styles.css:
html {
font-size: 18px;
}
body {
font-size: 1rem;
}
p {
margin: 0 0 10px;
font: bold;
font-size: 38px;
color: #000;
padding-top: 2px;
}
h1 {
color: #191970;
font-size: 38px;
height: 100%;
text-align: center;
width: 100%
}
h2{
border: 5px solid grey;
margin-top: -100px;
}
.title {
margin: 0;
display: inline-block;
}
input {
display: block;
padding: 5px;
margin: 12px auto;
width: 100%;
}
.results {
min-height: 20px;
padding: 19px;
margin: 20px 0 ;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
.results-data {
margin: 1.5rem 0;
}
}
.box-of-stuff {
min-height: 20px;
padding: 19px;
margin: 20px 0 ;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.text-sucess {
color: #468847;
}
.text-danger {
color: #b94a48;
}
.center-meh-boi {
position: absolute;
width: 100%;
}
.row {
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 768px) {
.center-meh-boi {
position: relative;
top: 0;
margin-top: 0 !important;
}
}
output:
need help making budget planner website what java script code would i enter to make this...
I need help with my javascript project, I've started on it but I can't seem to get ym java scripts to work with my index.html. Can someone please help me fix my code? I need the main.js & scratchpad.js to work with my index.html .Thank you Directions: Go to the following link: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics On that page, scroll down to "A 'hello world' example". Follow the step-by-step instructions to download their code and edit it in your text editor of choice....
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="./bootstrap/js/bootstrap.js"></script> <meta charset="UTF-8"> <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm"> <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5> <nav class="my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="index.html">Home</a> <a class="p-2 text-dark" href="about.html">About Us</a> <a class="p-2 text-dark" href="products.html">Products</a> <a class="p-2 text-dark"...
Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap --> <link href="css/bootstrap-4.0.0.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...
Trying to understand java script.. The code provided prints out a game board of cells that are 10 x 10. I currnetly have it printed out so that it will print out pink squares. how can i create a click even on any of the pink squares that when they are clicked it will turn the square black... then any square that is black when it is clicked it will change back to the color pink html/js code and css...
Below is the code created for a previous assignment. I now need to create functions to validate the name, age, and item selection in an external JavaScript file. Specifically, check for the following: The user has entered a name Age is a number between 18 and 110 An item is selected Ensure that a handler returns true if the input is acceptable and false otherwise. Add an onSubmit attribute to the form tag so that a validation failure prevents the...
in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date: Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...
Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...
need help writing code to make this gui in java To review the basics of user interfaces Directions Create an interface for a program that helps a group of people to calculate how much each of them owes for a restaurant meal that looks like the one below. The interface does not need to do anything in response to user clicks.
JAVASCRIPT/JQUERY Hello I would like some help understanding jQuery. Here are the directions: Write a program that creates the following table: Course Course Name Day Time IMS115 Windows 10 Monday 6 PM IMS215 Office 2016 Wednesday 5 PM MIS200 Java Thursday 9 AM MTH105 Business Math Saturday 10 AM Using jQuery, select every other odd row and change the font color to blue and make it bold. And here is my code: Chapter4.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="Chapter4.css">...
I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...