In my JavaScript code, there is an object named annualPlan.
Whenever a user submits the HTML form for a specific month, I aim to update the value in the object for that particular month accordingly.
For instance, if someone submits August 21 and 200, I want the value of pAug to be 500.
However, if the same person re-submits August 21 and 500, I intend for pAug to revert back to 200.
The chunk of code below showcases my endeavor to accomplish this task (even though it felt more like attempt number 100!).
What are your thoughts on this approach?
var planMonth;
var planAmount;
//generate a unique ID based on the current time when the form is submitted
var today = new Date();
var FullDate = today.getDate() + "-" + (today.getMonth() + 1); //adjusting start month from 0 by adding 1
var time = today.getHours() + ":" + today.getMinutes();
var dateTime = FullDate + " " + time
var annualPlan = {
pJan: 0,
pFeb: 0,
pMarch: 0,
pApril: 0,
pJune: 0,
pJuly: 0,
pAugust: 0,
pSept: 0,
pOct: 0,
pNov: 0,
pDec: 0,
};
const addPlan = function(ev) {
ev.preventDefault();
let planUpdate = {
id: dateTime,
Month: document.getElementById("PlanMonth").value,
Amount: document.getElementById("PlanSave").value,
}
annualPlan.push(planUpdate);
document.querySelector("form").reset();
//console.log(annualPlan);
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById("button").addEventListener("click", addPlan);
});/* PAGE STRUCTURE START */
body {
padding-left: 150px;
padding-right: 150px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 18px;
}
#inputarea {
margin-top: 100px;
}
label {
display: inline-block;
padding-bottom: 8px;
font-size: 22px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
input {
padding: 10px 20px;
font-size: 18px;
letter-spacing: 2px;
}
#formSection {
padding-top: 30px;
}
/* PAGE STRUCTURE END */
/* FONT STYLING START */
#inputarea h3 {
text-decoration: underline;
color: #334058;
font-size: 30px;
}
/* NAVIGATION AREA START */
* {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-moz-transition-timing-function: cubic-bezier(100, 50, 21, 6);
transition-timing-function: cubic-bezier(100, 50, 21, 6);
-moz-transition-property: all;
-moz-transition-timing-function: cubic-bezier(100, 50, 21, 6);
}
.style-1 {
text-align: center;
margin-top: 40px;
}
.btn {
color: #fff;
background: #3399cc;
padding: 20px 40px;
text-decoration: none;
letter-spacing: 2px;
text-transform: uppercase;
}
.btn:hover {
border: none;
background: rgba(0, 0, 0, 0.4);
background: #fff;
padding: 40px 40px;
color: #334058;
}
/* NAVIGATION AREA END */<!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.0">
<title>Grow Your Wealth</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/fav.ico">
</head>
<!-- Navigation Start -->
<nav class="style-1">
<a href="index.html" class="btn">Home</a>
<a href="appPage.html" class="btn">App Page</a>
</nav>
<!-- Navigation End -->
<section id="inputarea">
<h3 id="section-header">Plan Input Area</h3>
<form onsubmit=>
<div id="formSection">
<label for="PlanMonth">Month</label><br>
<input type="month" name="PlanMonth" id="PlanMonth" value="2021-08">
</div>
<div id="formSection">
<label for="PlanSave">Planned Saving for Month</label><br>
<input type="number" name="PlanSave" id="PlanSave" value="200"><br><br>
</div>
<div id="formSection">
</div>
<input type="submit" value="submit" id="button">
</form>
</section>
<!-- JS File -->
<script src="js/app.js"></script>
</body>
</html>