vivek-vijayan · December 18, 2022 12:29
diff --git a/StockManagement.html b/StockManagement.html
 <html>
    <style>
        body {
            font-family: 'Comic Sans MS';  
        }
        h2 {
            color: rgb(255,255,255);
            text-transform: uppercase;
            background-color: rgb(34,34,34);
            padding: 20px;
        }
        
        .count-display-area {
            display: flex;
            flex-direction: row;
            overflow: scroll;
        }
        
        .count-display-area p {
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 10px;
            text-transform: uppercase;
            font-weight: bold;
            border-bottom: red solid 1px;
        }
        
        .count-display-area p span {
            background-color: red;
            padding-left: 5px;
            padding-right: 5px;
            margin-left: 5px;
            color:white;
        }
        
        form {
            margin: 30px;
        }
        
        form .field {
            padding: 5px;
            font-size: 15px;
            margin: 10px;
        }
        
        form .button {
            padding: 10px;
            background-color: red;
            color:white;
            font-size: 15px;
        }
        
        .error {
            background: rgb(251,213,144);
            color:red;
            margin: 20px;
            padding: 5px;
        }
    </style>
    <body onload="load_the_fruits_count()" style="background-color: white">
        <center>
            <h2>Stock Management</h2>
        </center>
        
        <!-- Counts of each Stock  -->
        <div class="count-display-area">
            <p>Apple <span id="apple-count">20</span></p>
            <p>Orange <span id="orange-count">150</span></p>
            <p>Grape <span id="grape-count">30</span></p>
            <p>Pineapple <span id="pineapple-count">43</span></p>
            <p>Strawberry <span id="strawberry-count">99</span></p>
        </div>
        
        
        <!-- Error field -->
        
        <p id="error" class="error" style="display:none">
           
        </p>
        
        <!--  Form to update the count -->
        <h3>Adding new stock</h3>
        <hr>
        <form>
            Fruit Name : <input class="field" id="fruitname" type="text" />
            <br>
            Add items : <input class="field" id="additem" type="numbers"/>
            <br>
            <input class="button" type="button" onclick="updateStock()" id="submit" value="Update" />
        </form>
    </body>
    
    <script>
    var stockDB = [
                {
                    fruit_name :'apple',
                    count : 12
                },
                {
                    fruit_name :'orange',
                    count : 32
                },
                {
                    fruit_name :'grape',
                    count : 123
                },
                {
                    fruit_name :'pineapple',
                    count : 62
                },
                {
                    fruit_name :'strawberry',
                    count : 100
                }
            ]
    function load_the_fruits_count() {
        for(eachFruit in stockDB) {
            var count = stockDB[eachFruit]['count']
            document.getElementById(stockDB[eachFruit]['fruit_name'] + '-count').innerText = count
        }
    }
    
    function updateStock() {
        get_fruit_name = document.getElementById('fruitname').value;
        get_new_item_count = document.getElementById('additem').value;
        
        error_field = document.getElementById('error');
        
        if(get_new_item_count > 100) {
            error_field.style.display = 'block';
            error_field.innerText = "ERROR : item count should be less than 100";
            return;
        } else {
            error_field.style.display = 'none';
        }
        
        for(eachFruit in stockDB) {
            stockDB[eachFruit]["count"] =
                stockDB[eachFruit]["fruit_name"] === get_fruit_name
                  ? parseInt(get_new_item_count) + parseInt(stockDB[eachFruit]["count"])
                  : stockDB[eachFruit]["count"];
        }
        load_the_fruits_count();
    }
        
  </script>
 </html>
	<html>
	<style>
	body {
	font-family: 'Comic Sans MS';
	}
	h2 {
	color: rgb(255,255,255);
	text-transform: uppercase;
	background-color: rgb(34,34,34);
	padding: 20px;
	}

	.count-display-area {
	display: flex;
	flex-direction: row;
	overflow: scroll;
	}

	.count-display-area p {
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 10px;
	text-transform: uppercase;
	font-weight: bold;
	border-bottom: red solid 1px;
	}

	.count-display-area p span {
	background-color: red;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 5px;
	color:white;
	}

	form {
	margin: 30px;
	}

	form .field {
	padding: 5px;
	font-size: 15px;
	margin: 10px;
	}

	form .button {
	padding: 10px;
	background-color: red;
	color:white;
	font-size: 15px;
	}

	.error {
	background: rgb(251,213,144);
	color:red;
	margin: 20px;
	padding: 5px;
	}
	</style>
	<body onload="load_the_fruits_count()" style="background-color: white">
	<center>
	<h2>Stock Management</h2>
	</center>

	<!-- Counts of each Stock -->
	<div class="count-display-area">
	<p>Apple <span id="apple-count">20</span></p>
	<p>Orange <span id="orange-count">150</span></p>
	<p>Grape <span id="grape-count">30</span></p>
	<p>Pineapple <span id="pineapple-count">43</span></p>
	<p>Strawberry <span id="strawberry-count">99</span></p>
	</div>


	<!-- Error field -->

	<p id="error" class="error" style="display:none">

	</p>

	<!-- Form to update the count -->
	<h3>Adding new stock</h3>
	<hr>
	<form>
	Fruit Name : <input class="field" id="fruitname" type="text" />
	<br>
	Add items : <input class="field" id="additem" type="numbers"/>
	<br>
	<input class="button" type="button" onclick="updateStock()" id="submit" value="Update" />
	</form>
	</body>

	<script>
	var stockDB = [
	{
	fruit_name :'apple',
	count : 12
	},
	{
	fruit_name :'orange',
	count : 32
	},
	{
	fruit_name :'grape',
	count : 123
	},
	{
	fruit_name :'pineapple',
	count : 62
	},
	{
	fruit_name :'strawberry',
	count : 100
	}
	]
	function load_the_fruits_count() {
	for(eachFruit in stockDB) {
	var count = stockDB[eachFruit]['count']
	document.getElementById(stockDB[eachFruit]['fruit_name'] + '-count').innerText = count
	}
	}

	function updateStock() {
	get_fruit_name = document.getElementById('fruitname').value;
	get_new_item_count = document.getElementById('additem').value;

	error_field = document.getElementById('error');

	if(get_new_item_count > 100) {
	error_field.style.display = 'block';
	error_field.innerText = "ERROR : item count should be less than 100";
	return;
	} else {
	error_field.style.display = 'none';
	}

	for(eachFruit in stockDB) {
	stockDB[eachFruit]["count"] =
	stockDB[eachFruit]["fruit_name"] === get_fruit_name
	? parseInt(get_new_item_count) + parseInt(stockDB[eachFruit]["count"])
	: stockDB[eachFruit]["count"];
	}
	load_the_fruits_count();
	}

	</script>
	</html>