HomeworkLib
Question
need help making budget planner website what java script code would i enter to make this calculate my budget after expenses when i hit submit

°p a (--) С 0 file:///C/Users kinse. Downloads budget%20websitebudget. Budget Planner Add Monthly Income Salary/Wages Add Expenses Rent Food Other 23 24 Submit 26 27 28 29 30 31 32 34 35 36 37 O Type here to search
budgethtm Х style.css scriptjs 1 <IDOCTYPE html> 2 <html> 3 <head> 4 <link rel-stylesheet href style.css 5 <script types text/javascript srce script.js></script 6 </head> 7 <body> 9 ch1)Budget Planner</h1> 10 11 <h2> </h2> 12 13 14 <div> 15 <p>Add Monthly Incomec/p> 16 </div> 17 18 19 くinput class=form-control input-ig- type=text id=income placeholder. form> Salary/Wages/> 28 21 23 24 <div> 25 <p>Add Expenses</p> 26 27 </div> 28 29 зе 31 <form> <input class-form-control input-1g type- text id-income placeholder- İde-rent placeholder-_ 32 Rent /> <input Insurance/> 33 class. form-control input-lg- type-text 34 cinput classaform-control input-18 type-text- id.food placeholder- input-lg. Food/> <input 35 class.form-control type»text İde-insurance- laceholdersOther/>
Coutton classe ben btn-primary btn-1g btn-block Sutmitfouttors Adiv ediv classecol--4 fps </body> 1107 AM
CAUserskinse Downloads budget websitelstyle css Sublime Test (UNREGISTERED) File Edit Selection Find View Goto Tools Project Preferences Help 0 xstylecss scriptjs 1 body ( 3 font-family: Georgia, serif; 4 6 h1 ( 7 color: #191978; 8 font-size: 38px; 9 height: 10ex; 10 11 text-align: center; width: 10ex; 12 13 14 h2 t 15 16 17 18 P I 19 28 21 22 padding-top: 2px 23 24 button 25 font-size: 20px; 26 27 border: Spx solid gray font: bold; font-size: 29px; color: #000088; 11:07 AM 1/4/2019
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

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:

Budget Planner Results Add Mnthly Income After your expenses you have $350 left in your budget. 1000 Add Expenses 200 300 100 50 Submit

0 0
Add a comment
Know the answer?
Add Answer to:
need help making budget planner website what java script code would i enter to make this...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • I need help with my javascript project, I've started on it but I can't seem to...

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

  • I beleiebve my code is right but it will not accept it. Please tell me what...

    I beleiebve my code is right but it will not accept it. Please tell me what I am doing wrong. Enter your name and the date in the comment section of each file: gp_cover.html, gp_page1.html, gp_page2.html, gp_page3.html, gp_layout.css, and gp_print.css respectively. Go to the gp_cover.html file and add a viewport meta tag to the document head, setting the width of the layout viewport to the device width and setting the initial scale of the viewport to 1.0. Go to the...

  • Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...

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

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

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

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

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

  • i need the code that goes within the <script> opening and closing following the insturctions of...

    i need the code that goes within the <script> opening and closing following the insturctions of the insturctions of the pasted assignment screen shots please. <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 3 Hands-on Project 3-1 Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 3-1</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 3-1 </h1> </header> <article> <h2>Lunch selections</h2> <form> <input type="checkbox" id="item1" value="8" /> <label for="item1">Fried chicken ($8.00)</label> <input type="checkbox"...

  • I am trying to create a slide show using JavaScript. This is what I have so...

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

  • JAVASCRIPT/JQUERY Hello I would like some help understanding jQuery. Here are the directions: Write a program...

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

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT