https://next-millennium.netlify.app/script.js

1const series = [
2  {asin: "B00480O9L4", title: "The Girl With The Dragon Tattoo"},
3  {asin: "B002RHGYOA", title: "The Girl Who Played With Fire"},
4  {asin: "B002RI9ZPY", title: "The Girl Who Kicked The Hornets' Nest"},
5  {asin: "B00SJPZCWE", title: "The Girl in the Spider's Web"},
6  {asin: "B01LX8OSYH", title: "The Girl Who Takes an Eye for an Eye"},
7  {asin: "B07BF9W69M", title: "The Girl Who Lived Twice"},
8]
9
10// this gets blocked by adblockers
11// const src_pattern = "//ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN={ASIN}&Format=&ID=AsinImage&MarketPlace=GB&ServiceVersion=20070822&WS=1&tag=noplonbbra6mu-21&language=en_GB"
12// const src_pattern = "https://cdn.glitch.global/d22aa8a0-186c-4e84-9a60-c42af2b55e50/{ASIN}.jpg"
13const src_pattern = "/images/{ASIN}.jpg"
14
15const href_pattern = "//www.amazon.co.uk/dp/{ASIN}/ref=nosim?tag=noplonbbra6mu"
16
17$(document).ready(function(){
18  series.forEach(function(i){
19    //console.log(i)
20    let src = src_pattern.replace("{ASIN}", i.asin);
21    let href = href_pattern.replace("{ASIN}", i.asin);
22    
23    let img_class = ""
24    let input_checked = ""
25    
26    if (localStorage.getItem(i.asin) == 'read') {
27      // console.log('already read/reading it: ' + i.asin)
28      // $(".book[data-asin=' + i.asin ']").find("input[type=checkbox]").click()
29      // markAsRead(i.asin)
30      img_class = 'class="read"'
31      input_checked = 'checked'
32    }
33    
34    $("#books").append('<div class="book" data-asin="' + i.asin + '"><a href="' + href + '"><img src="' + src + '" alt="' + i.title + '" ' + img_class + '></a><p><label><input type="checkbox" ' + input_checked + '>Read it / reading it');
35    
36  });
37  
38  $("input[type=checkbox]").change(function(e){
39    // console.log(e)
40    let asin = $(e.currentTarget).closest(".book").data('asin')
41    // console.log(asin)
42    
43    let img = $(e.currentTarget).closest(".book").find("img")
44    // console.log(img)
45    
46    if (!img.hasClass("read")) {
47      localStorage.setItem(asin, 'read');
48      img.addClass("read");
49    }
50    else {
51      localStorage.removeItem(asin);
52      img.removeClass("read");
53    }
54    // toggleAsRead(asin)
55  });
56  
57});
58
59// function markAsRead(asin){
60//   console.log('mark as read ' + asin)
61  
62//   $(".book[data-asin=\"' + asin '\"]").find("img").addClass("read")
63  
64//   console.log("done")
65  
66// //   let img = $(".book[data-asin=' + asin ']").find("img")
67// //   img.addClass("read");
68  
69// //   let checkbox = $(".book[data-asin=' + asin ']").find("input[type=checkbox]")
70// //   checkbox.checked = true
71// }
72
73// function toggleAsRead(asin){
74//   console.log('toggle as read ' + asin)
75//   let img = $(".book[data-asin=' + asin ']").find("img")
76//   console.log(img)
77//   if (!img.hasClass("read")) {
78//     localStorage.setItem(asin, 'read');
79//     img.addClass("read");
80//   }
81//   else {
82//     localStorage.removeItem(asin);
83//     img.removeClass("read");
84//   }
85// }