What is the best way to retain data after clicking a button?

I am facing an issue where I need to figure out how to add information to a new page when a button is clicked. For example, let's say I have an "add to cart" button and upon clicking it, I want to store some data. How can I achieve this functionality? I am looking for a way to dynamically add information upon the click of a button, but I am unsure of how to implement it. If the add to cart button isn't functioning properly, how can I still make sure that data is stored on click?

.products .box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.products .box-container .box {
  flex: 1 1 30rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
  border-radius: .5rem;
  border: .1rem solid rgba(0, 0, 0, .1);
  position: relative;
}

.products .box-container .box .discount {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  font-size: 2rem;
  color: var(--pink);
  background: rgba(255, 51, 153, .05);
  z-index: 1;
  border-radius: .5rem;
}

.products .box-container .box .image {
  position: relative;
  text-align: center;
  padding-top: 2rem;
  overflow: hidden;
}

.products .box-container .box .image img {
  height: 25rem;
}

.products .box-container .box:hover .image img {
  transform: scale(1.1);
}

.products .box-container .box .image .icons {
  position: absolute;
  bottom: -7rem;
  left: 0;
  right: 0;
  display: flex;
}

.products .box-container .box:hover .image .icons {
  bottom: 0;
}

.products .box-container .box .image .icons a {
  height: 5rem;
  line-height: 5rem;
  font-size: 2rem;
  width: 50%;
  background: var(--pink);
  color: #fff;
}

.products .box-container .box .image .icons .cart-btn {
  border-left: .1rem solid #fff7;
  border-right: .1rem solid #fff7;
  width: 100%;
}

.products .box-container .box .image .icons a:hover {
  background: #333;
}

.products .box-container .box .content {
  padding: 2rem;
  text-align: center;
}

.products .box-container .box .content h3 {
  font-size: 2.5rem;
  color: #333;
}

.products .box-container .box .content .price {
  font-size: 2.5rem;
  color: var(--pink);
  font-weight: bolder;
  padding-top: 1rem;
}

.products .box-container .box .content .price span {
  font-size: 1.5rem;
  color: #999;
  font-weight: lighter;
  text-decoration: line-through;
}
<div class="box">
  <span class="discount">-18%</span>
  <div class="image">
    <img src="OnyCostopProSpray%2036.90.png" alt="">
    <div class="icons">
      <a href="#" class="fas fa-heart"></a>
      <a href="#" class="cart-btn">add to cart</a>
      <a href="#" class="fas fa-share"></a>
    </div>
  </div>
  <div class="content">
    <h3>Costop Pro Spray</h3>
    <div class="price"> 26.90€ <span>31.74€</span> </div>
  </div>
</div>

If anyone could provide assistance with this, I would greatly appreciate it!

javascripthtmlcss

Answer №1

One simple solution is to swap out the anchor link for a button and then utilize JavaScript to dynamically update the price of items in your cart.

.products .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
}

.products .box-container .box{
    flex:1 1 30rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
    border-radius: .5rem;
    border:.1rem solid rgba(0,0,0,.1);
    position: relative;
}

.products .box-container .box .discount{
    position: absolute;
    top:1rem; left:1rem;
    padding:.7rem 1rem;
    font-size: 2rem;
    color:var(--pink);
    background:rgba(255, 51, 153,.05);
    z-index: 1;
    border-radius: .5rem;
}

.products .box-container .box .image{
    position: relative;
    text-align: center;
    padding-top: 2rem;
    overflow:hidden;
}

.products .box-container .box .image img{
    height:25rem;
}

.products .box-container .box:hover .image img{
    transform: scale(1.1);
}

.products .box-container .box .image .icons{
    position: absolute;
    bottom:-7rem; left:0; right:0;
    display: flex;
}

(products .box-container .box:hover .image .icons{
    bottom:0;
}

.products .box-container .box .image .icons a{
    height: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    width:50%;
    background:var(--pink);
    color:#fff;
}

.products .box-container .box .image .icons .cart-btn{
    border-left: .1rem solid #fff7;
    border-right: .1rem solid #fff7;
    width:100%;
}

.products .box-container .box .image .icons a:hover{
    background:#333;
}

.products .box-container .box .content{
    padding:2rem;
    text-align: center;
}

.products .box-container .box .content h3{
    font-size: 2.5rem;
    color:#333;
}

.products .box-container .box .content .price{
    font-size: 2.5rem;
    color:var(--pink);
    font-weight: bolder;
    padding-top: 1rem;
}

.products .box-container .box .content .price span{
    font-size: 1.5rem;
    color:#999;
    font-weight: lighter;
    text-decoration: line-through;
}
<div class="box">
            <span class="discount">-18%</span>
            <div class="image">
                <img src="OnyCostopProSpray%2036.90.png" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <button class="cart-btn" onclick="updateCart(10,12)">add to cart</button>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Costop Pro Spray</h3>
                <div class="price" id='someId'> 0€ <span>0€</span> </div>
            </div>
        </div>

<script type="text/javascript">
    var price1 = 20;
    var price2 = 10;
    function updateCart(num1,num2){
       price1 += num1;
       price2 += num2;
       const el = document.getElementById('someId');
       el.innerHTML = `${price2}€ <span>${price1}€</span>`;
   }
   updateCart(0,0);
   </script>

Answer №2

If you're looking to store information about orders, utilizing the Document Object Model (DOM) would be beneficial. One method is saving the information in local storage by including a script within an eventListener.

const box = document.querySelector('.box')
add.eventListener('submit', () => {
  // your logic here
})
<div class="box">
  <span class="discount">-18%</span>
  <div class="image">
    <img src="OnyCostopProSpray%2036.90.png" alt="">
    <div class="icons">
      <a href="#" class="fas fa-heart"></a>
      <a href="#" class="cart-btn">add to cart</a>
      <a href="#" class="fas fa-share"></a>
    </div>
  </div>
  <div class="content">
    <h3>Costop Pro Spray</h3>
    <div class="price"> 26.90€ <span>31.74€</span> </div>
  </div>
  <button type='submit'>Add to basket</button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I stop a browser from refreshing when I click the mouse?

After taking steps to prevent the browser back button from functioning by clearing history and disabling key events for page refresh, I am now seeking a way to also stop mouse clicks on the browser's refresh button. Can anyone offer assistance with th ...

javascriptjqueryhtml

Steps for creating a basic table filter using jQuery

What is an efficient way to create a basic table filter using jQuery without pagination requirements? I want to retrieve data from a database and display it as a list. I would like to avoid using plugins and instead opt for concise code snippets. For ...

javascriptfilterjqueryjquery-effects

First-character styling not applying to ID in CSS

My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work... #fletter span:first-letter { font-weight: 600; font-size: 25px; } <span id="fletter"> The : ...

htmlcsscss-selectorspseudo-element

Best practices for coding in HTML and CSS

Creating my first website for an internship has been quite a learning experience. Throughout my training, I was always advised to avoid embedding styles directly into the HTML code. However, now that I am actually developing a site, I can't help but f ...

htmlcss

Sequelize transforms any given date object into a local date representation

When running a query with a data replacement, the date is not set as UTC in the query. Here's the code snippet: let startInterval = moment('2020-12-09').toDate(); db.query(` SELECT kv.kpiId FROM kpiValues kv WHERE kv.insertDate ...

javascriptnode.jsormsequelize.js

Navigating a double entry validation in a Java script prompt while utilizing Selenium

Can someone please assist me with the following scenario: I need to complete a double entry check prompt/alert that contains two text boxes. The task is to fill in these two text boxes and then click on the OK button. Potential solutions attempted: I tr ...

javascriptjavaseleniumtestingwebdriver

Is your custom login form in Web2py not submitting properly?

My attempt to customize the login form for web2py has hit a roadblock. Despite adding the necessary fields and submit button, nothing seems to be happening. Here's what the code in the form's view looks like: {{include 'web2py_ajax.html&apo ...

javascriptpythonhtmlformsweb2py

Updating Checkbox Appearance in Angular 6 Based on its Checked Status

I have created a checkbox list and I am trying to style the checked item with an underline. Here is my code snippet: TS file: currentQuarter: string; quarters: Observable<MeseRiferimento[]>; q1: MeseRiferimento = new MeseRiferimento(); q2: MeseRife ...

cssangularcheckboxcss-selectors

Guide to implementing if else statements with Protractor

I am facing some unusual situations and I'm not quite sure how to address them. As a newcomer to testing, I've been tasked with testing a website's cart function for proper functionality. The challenge arises when we add a certain number o ...

javascriptseleniumif-statementjasmineprotractor

Is there a specific minimum height that should be set for the equalHeight function to apply?

Despite trying everything, I can't seem to achieve the dreadful layout my designer has given me without using JavaScript! The issue lies with the positioning of the div #backgr-box, which needs to be absolutely positioned behind the #contenuto ( ...

javascriptjqueryheightcss-positioncalculated-columns

jinja2.exceptions.TemplateSyntaxError: instead of 'static', a ',' was expected

My current project involves using Flask for Python, and I encountered an error when running the project from PyCharm. The error message points to line 192 in my home.html file: jinja2.exceptions.TemplateSyntaxError: expected token ',', got &ap ...

javascriptpythonhtmlflask

Arrange an item independently of surrounding elements

Is it possible to position an element across two columns, starting in the middle of the second column? The columns are defined by divs. Could this be achieved through z-index positioning? ...

css

Embracing the HTML5 Approach to iframes

My question pertains to iframes - I am looking to apply styling to the contents of an iframe using only CSS within the srcdoc attribute. <iframe name="myFrame" srcdoc="<span>Hi</span>"> </iframe> Is it feasible to style the span e ...

csshtmliframe

How can one create parameter information in JavaScript?

Is it possible to automatically generate parameter information in JSDoc style based on function implementation? /**  * Assigns the project to a list of employees.  * @param {Object[]} employees - The employees responsible for the project.  * @param {st ...

javascriptc#

How to create a basic calculator in AngularJS with two textboxes specifically designed for calculating squares?

My code snippet is as follows: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="app"> <div ng-controller="Calcu ...

javascriptangularjs

Encountering difficulties in JavaScript while trying to instantiate Vue Router

After following the guide, I reached the point where creating a Vue instance was necessary (which seemed to work). However, it also required providing a Vue Router instance into the Vue constructor, as shown below. const router = new VueRouter({ routes }) ...

javascriptroutesvue.js.net-corevue-router

If an interface property is set as (), what significance does it hold?

While exploring the Vue.js source code located at packages/reactivity/src/effects.ts, I came across this snippet: export interface ReactiveEffectRunner<T = any> { (): T effect: ReactiveEffect } I'm curious, what does () signify in the code ...

javascripttypescriptvue.jsvuejs2

Preserving chosen options in a dropdown menu using PHP and HTML

I'm facing an issue with my code where the selected values in a dropdown menu revert back to default every time the page refreshes. How can I ensure that the selected values remain unchanged? Unfortunately, I am unable to utilize AJAX as per the user ...

phphtml

The Architecture of a Node.js Application

I'm curious about the efficiency of my nodejs app structure in terms of performance optimization. My main concern lies in how I handle passing around references to my app object across modules. Basically, in my app.js file, I define all my dependenci ...

javascriptnode.jsexpressrestify

altering dimensions in three.js

My question may seem a bit silly, but it's about resolution in THREE.js. I have experience with OpenGL and some frameworks related to it, so naturally, I became interested in webGL and Three.js. After trying out some simple demos, I decided to create ...

javascriptthree.jsresolution