How to make a like button for my webpage?-CodePudding

i'm making a webpage where I have different "pictures" that I want like buttons on and when people like it, the number stays and then they can only like each image once. I found a code that I liked however when I refresh the page, all the likes go away. I want them to stay. I'm not the best at explaining or understanding lol.

Here's the code that I found that I liked, but I want to function as it goes away when I refresh. Function like a "vote" button.

/* 
 * Love button for Design it & Code it
 * http://designitcodeit.com/i/9
 */
$('.btn-counter').on('click', function(event, count) {
  event.preventDefault();
  
  var $this = $(this),
      count = $this.attr('data-count'),
      active = $this.hasClass('active'),
      multiple = $this.hasClass('multiple-count');
  
  // First method, allows to add custom function
  // Use when you want to do an ajax request
  /* if (multiple) {
  $this.attr('data-count',   count);
  // Your code here
  } else {
  $this.attr('data-count', active ? --count :   count).toggleClass('active');
  // Your code here
  } */
  
  // Second method, use when ... I dunno when but it looks cool and that's why it is here
  $.fn.noop = $.noop;
  $this.attr('data-count', ! active || multiple ?   count : --count  )[multiple ? 'noop' : 'toggleClass']('active');
  
});

html {
  background: #f5f5f5;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
  margin: 30px auto 0 auto;
  width: 450px;
  font-size: 75%;
}

h3 {
  margin-top: 30px;
  font-size: 18px;
  color: #555;
}

p { padding-left: 10px; }


/*
 * Basic button style
 */
.btn {
  box-shadow: 1px 1px 0 rgba(255,255,255,0.5) inset;
  border-radius: 3px;
  border: 1px solid;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  padding: 0 8px;
  position: relative;

  font-size: 12px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/*
 * Counter button style
 */
.btn-counter { margin-right: 39px; }
.btn-counter:after,
.btn-counter:hover:after { text-shadow: none; }
.btn-counter:after {
  border-radius: 3px;
  border: 1px solid #d3d3d3;
  background-color: #eee;
  padding: 0 8px;
  color: #777;
  content: attr(data-count);
  left: 100%;
  margin-left: 8px;
  margin-right: -13px;
  position: absolute;
  top: -1px;
}
.btn-counter:before {
  transform: rotate(45deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');

  background-color: #eee;
  border: 1px solid #d3d3d3;
  border-right: 0;
  border-top: 0;
  content: '';
  position: absolute;
  right: -13px;
  top: 5px;
  height: 6px;
  width: 6px;
  z-index: 1;
  zoom: 1;
}
/*
 * Custom styles
 */
.btn {
  background-color: #dbdbdb;
  border-color: #bbb;
  color: #666;
}
.btn:hover,
.btn.active {
  text-shadow: 0 1px 0 #b12f27;
  background-color: #f64136;
  border-color: #b12f27;
}
.btn:active { box-shadow: 0 0 5px 3px rgba(0,0,0,0.2) inset; }
.btn span { color: #f64136; }
.btn:hover, .btn:hover span,
.btn.active, .btn.active span { color: #eeeeee; }
.btn:active span {
  color: #b12f27;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

<h3>Basic button</h3>
<p>
  <a href="#" title="Love it"  data-count="0"><span>&#x2764;</span></a>
  <a href="#" title="Love it"  data-count="0"><span>&#x2764;</span> Love it</a>
</p>

<h3>Button with counter - active/inactive</h3>
<p>
  <a href="#" title="Love it"  data-count="0"><span>&#x2764;</span></a>
  <a href="#" title="Love it"  data-count="0"><span>&#x2764;</span> Love it</a>
</p>

<h3>Button with counter for people who likes to  click</h3>
<p>
  <a href="#" title="Love it"  data-count="0"><span>&#x2764;</span></a>
  <a href="#" title="Love it"  data-count="0"><span>&#x2764;</span> Love it</a>
</p>

CodePudding user response：

You actually need back-end for this, but this is a quick solution.

NOTE: the code will not work in the snippet but it regularly works

W3: Window localStorage
Mozilla Window.localStorage

let btn = document.querySelector('#like');
let result = document.querySelector('#result');

localStorage.setItem('likes', 0);
result.innerHTML = localStorage.getItem('likes');

btn.addEventListener('click', addLike());

function addLike(){
  localStorage.setItem('likes',  parseInt(localStorage.getItem('likes'))   1);
  result.innerHTML = localStorage.getItem('likes');
}

<button id="like">LIKE</button>
<p id="result"></p>

to see the local storage, go to DevTools open application tab, see the local storage there and you can manage it manually

CodePudding user response：

I don't personally get your code or how is it structured, but i can give you one advice. Do not copy and paste code, better go and make a full research on how to make a like button algorithm, there should be plenty of links that will explain you. I would like to help you with this code but i can't seem to understand anything. Watch a tutorial or make a better research, you will get it done. Break down your problem, make the research, forget about copying code. You are not going to learn anything. I hope this helps as a motivation. :)

CodePudding user response：

So let’s start with the HTML & CSS to make our component static. I have created the HTML and CSS for you. But if you want to change it, please go ahead and make your flavor of it.

<button >
    <span >
        <span ></span>
    </span>
    <span >
        <span ></span>
    </span>
    <span >
        Liked
    </span>
    <span >
        Like
    </span>
</button>

We are building everything in a tag like we should do with buttons. I have added some tags for the content and icon of the button for the animations. If we don't do this, the animations won't work.

:root {
    --red: rgb(209, 3, 3);
    --white: #fff;
    --black: #000;
}
.btn {
    width: 200px; height: 88px;
    outline: 0;
    border: 2px solid #ccc;
    color: #000;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display:flex;
    justify-content: space-between;
    box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.05);
    transition: 1.5s cubic-bezier(.21,.04,.26,.99);
}
.btn:hover {
    box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--red);
}
.btn-like {
    padding: 1.5rem 1.5rem 1.5rem 6rem;
    font-size: 2rem;
    border-radius: 10px;
    background: #fff;
    transition: 1.5s cubic-bezier(.21,.04,.26,.99);
}
.btn-like.liked {
    background: var(--red);
    border-color: var(--red);
}
/*-- Button Icon -- */
.btn-icon {
    display: inline-block;
    width: 32px;
    height: 36px;
    position: absolute;
    left: 1.5rem;
    transition: 1s cubic-bezier(.21,.04,.26,.99);
    transform: rotate(0deg)
}
.btn:hover .btn-icon {
    color: var(--red);
}
.btn.liked:hover .btn-icon {
    color: var(--black);
}
.liked .btn--icon-default {
    transform: rotate(-90deg)
}
.btn:not(.liked).btn--icon-liked {
    transform: rotate(-90deg)
}
.liked .btn--icon-default,
.btn--icon-liked {
    opacity: 0;
    color: #fff;
    position: absolute;
}
.btn--icon-default,
.liked .btn--icon-liked {
    opacity: 1;
    left: 1.5rem;
}
/*-- Button Content -- */
.btn-content {
    transition: transform 0.1s ease;
    display: inline-block;
    /* position: absolute;
    right: 0; */
}
.liked .btn-content {
    color: var(--white);
}
.btn:hover.liked .btn-content {
    color: var(--black);
}
.btn:not(.liked) .btn-content--liked {
    transform: translate(110px)
}
.btn:not(.liked) .btn-content--default {
    transform: translate(-56px)
}
.liked .btn-content--default {
    transform: translate(24px)
}

and JS

const button = document.querySelector('.btn')

button.addEventListener('click', () => {
    button.classList.toggle('liked')
})