Repeating a codepen

Design help Custom code
1

Hi,

I’m trying to implement this codepen into my site:

https://codepen.io/sunny-lella/pen/dXkLjb

I want to be able to ‘like’ each of the images separately, so that each image corresponds to 1 heart checkbox.

The heart checkbox works fine until I have multiple instances. When I click on, for example, the 2nd or 3rd instance, the 1st checkbox is the only one that ticks.

Could anyone help? I’m pretty novice at coding…

My public share link: https://preview.webflow.com/preview/test-project-f4acfe?utm_source=test-project-f4acfe&preview=0d9bb2e32f81e5af12ad9114ab4f79d0&mode=preview

Published site: https://test-project-f4acfe.webflow.io

2

First solve this idea under codepen (The code you want to use not modular - use #Id. Maybe search for another code).

Stupid solution - write heart2…and 3 and so on//

/* checkbox2 */

[id="heart2"] {
  position: absolute;
  left: -100vw;
}

[for="heart2"] {
  color: #aab8c2;
  cursor: pointer;
  font-size: 6em;
  align-self: center;  
  transition: color 0.2s ease-in-out;
}

[for="heart2"]:hover {
  color: grey;
}

[for="heart2"]::selection {
  color: none;
  background: transparent;
}

[for="heart2"]::moz-selection {
  color: none;
  background: transparent;
}

[id="heart2"]:checked + label {
  color: #e2264d;
  will-change: font-size;
  animation: heart 1s cubic-bezier(.17, .89, .32, 1.49);
}

@keyframes heart2 {0%, 17.5% {font-size: 0;}}

Anyway, this is not really “like” without cookies (You should save somehow user selections. In your case each page refresh will remove the likes).

1 Like
3

Hi @Siton_Systems,

Thanks for your response!

Could you tell me what I would need to do to make this modular? How do I use the #Id?

The images are within a form and I intend for the user to press ‘submit’, so the ‘likes’ are just essentially form responses.

4

I find the problem the #id and for should match (Otherwise the label text not clickable)

<input class="heart" id="heart" type="checkbox" />
<label class="label" for="heart">❤1</label>

<input class="heart" id="heart2" type="checkbox" />
<label class="label" for="heart2">❤2</label>

I change the code (From #id to class) ==> Modular
https://codepen.io/ezra_siton/pen/GaeYRy

“The Problem” - No way to diff id for each collection item on webflow. For this you should use embed html inside collection item (And bind “id” and “for”).

Another example:
https://codepen.io/ezra_siton/pen/XwGPLW

2 Likes
5

That code with the multiple hearts works perfectly, thank you!

Unfortunately I’m likely to need well over 200 of these… so I’m not sure that changing the html in each embed will be very practical. I might have to reconsider using…

Thanks for your help, Ezra!

1 Like
6

Hi @ailsargh,

Based on @Siton_Systems, you could use a little bit of javascript to dynamically itterate through your 200 checkboxes and create + change their id and for attributes. You would only have one markup template for each of them, javascript does the rest for you on DOM ready.

let me know if that helps:
https://codepen.io/anthonysalamin/pen/arMQLK?editors=1012

HTML:

<div class="wrap">
  <input class="heart" type="checkbox" />
  <label class="label">❤️</label>
</div>

<div class="wrap">
  <input class="heart" type="checkbox" />
  <label class="label">❤️</label>
</div>

<div class="wrap">
  <input class="heart" type="checkbox" />
  <label class="label">❤️</label>
</div>

Javascript:

// on DOM loaded
document.addEventListener("DOMContentLoaded", event => {
  // call heartCheckbox function
  heartCheckbox();
});

// heartCheckbox declaration
function heartCheckbox() {
  const hearts = document.getElementsByClassName("heart");
  const labels = document.getElementsByClassName("label");

  // handle "id" attribute
  for (let i = 0; i < hearts.length; i++) {
    let heart = hearts[i];
    let idAttribute = document.createAttribute("id");
    idAttribute.value = `heart_${i}`;
    heart.setAttributeNode(idAttribute);
  }

  // handle "for" attribute
  for (let j = 0; j < labels.length; j++) {
    let label = labels[j];
    let forAttribute = document.createAttribute("for");
    forAttribute.value = `heart_${j}`;
    label.setAttributeNode(forAttribute);
  }

}
7

Amazing!

Thanks so much… works a charm :grin:

Now my issue is with the submit button… when the success message pops up it essentially deletes all the ‘form’ along with the images.

Do you know if it’s possible to have the form state essentially stay the same - perhaps with the ‘submit’ button just displaying ‘success’ or ‘thankyou’?

I guess this is a different topic so I may need to use a different thread…

Thanks for your help!!

8

Good to hear that works for you :slight_smile:

I just pushed the snipet a bit further to help you keep a clean HTML without empty id and for values. Javscript now create and append them for you.

https://codepen.io/anthonysalamin/pen/arMQLK?editors=1012

Regarding the form success after submit, I guess you need another topic yes.
I’d love to hear if someone has a solution for this aswell.

1 Like
9

Fantastic - thanks so much!

1 Like