updates

petstore/petstoreapp/src/main/resources/templates/fragments/header.html

@@ -34,7 +34,7 @@
   					<a class="btn btn-outline-primary" href="/oauth2/authorization/B2C_1_signupsignin">Sign up / Sign in</a>
 	  			</div>
   			</div>
-  			<div class="cartcontainer"><a href = "/cart"><img class="cart" src="content/carticon.png"/><div class="cartcount"><div id="cartcount" style="margin-left:9px;margin-top:-3px;font-weight: 900;" th:text="${cartSize}" /></div></a></div>
+  			<div id="cartcontainer" class="cartcontainer"><a href = "/cart"><img class="cart" src="content/carticon.png"/><div class="cartcount"><div id="cartcount" style="margin-left:9px;margin-top:-3px;font-weight: 900;" th:text="${cartSize}" /></div></a></div>
   		</div>
 	</div>
 </body>

petstore/petstoreapp/src/main/resources/templates/soulmachines.html

@@ -22,15 +22,32 @@
 	<div lang="en" th:replace="fragments/disclaimer :: disclaimer"></div>
 	-->
 
+	<style>
+		@keyframes expandAndReturn {
+			0% { transform: scale(1); }
+			50% { transform: scale(2.0); }
+			100% { transform: scale(1); display: none; }
+		  }
+	</style>
+
 	<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
 	<script>
 		function cartcount(){
 			$.ajax({
 			 url: 'api/cartcount',
 			 type: 'GET',
 			 success: function(size){
+			  var oldsize = $( "#cartcount" ).html();
 			  console.log("cart count: " + size);
 			  $( "#cartcount" ).html(size);
+			  if (size != oldsize) {
+				$("#cartcontainer").css( "animation-name", "expandAndReturn" );
+				$("#cartcontainer").css( "animation-duration", "2s" );
+			  }
+			  else
+			  {
+				$("#cartcontainer").removeAttr("style");
+			  }
 			 }
 			});
 		   }