today-notes/script.js at main · jane-jhu/today-notes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
const initialFacts = [
  {
    id: 1,
    text: "React is being developed by Meta (formerly facebook)",
    source: "https://opensource.fb.com/",
    category: "technology",
    votesInteresting: 24,
    votesMindblowing: 9,
    votesFalse: 4,
    createdIn: 2021,
  },
  {
    id: 2,
    text: "Millennial dads spend 3 times as much time with their kids than their fathers spent with them. In 1982, 43% of fathers had never changed a diaper. Today, that number is down to 3%",
    source:
      "https://www.mother.ly/parenting/millennial-dads-spend-more-time-with-their-kids",
    category: "society",
    votesInteresting: 11,
    votesMindblowing: 2,
    votesFalse: 0,
    createdIn: 2019,
  },
  {
    id: 3,
    text: "Lisbon is the capital of Portugal",
    source: "https://en.wikipedia.org/wiki/Lisbon",
    category: "society",
    votesInteresting: 8,
    votesMindblowing: 3,
    votesFalse: 1,
    createdIn: 2015,
  },
]

const CATEGORIES = [
  { name: "technology", color: "#3b82f6" },
  { name: "science", color: "#16a34a" },
  { name: "finance", color: "#ef4444" },
  { name: "society", color: "#eab308" },
  { name: "entertainment", color: "#db2777" },
  { name: "health", color: "#14b8a6" },
  { name: "history", color: "#f97316" },
  { name: "news", color: "#8b5cf6" },
]

const btn = document.querySelector(".btn-open")
const form = document.querySelector(".fact-form")
const factsList = document.querySelector(".facts-list")

factsList.innerHTML = ""

// load data from supabse
loadFacts()

async function loadFacts() {
  const res = fetch("https://ccgaqinrvkzhlxuijyml.supabase.co", {
    headers: {
      apikey:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNjZ2FxaW5ydmt6aGx4dWlqeW1sIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzkyNDY0MTMsImV4cCI6MTk5NDgyMjQxM30.80uz0KG7BD2V5Td-DnIEiKH4cwKNvmE7G8-AR3vpwW4",
      authorization:
        "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNjZ2FxaW5ydmt6aGx4dWlqeW1sIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzkyNDY0MTMsImV4cCI6MTk5NDgyMjQxM30.80uz0KG7BD2V5Td-DnIEiKH4cwKNvmE7G8-AR3vpwW4",
    },
  })
  const data = await res.json()
  createFactsList(data)
}

function createFactsList(dataArray) {
  // factsList.insertAdjacentHTML("afterbegin", "<li>Jonas</li>");

  const htmlArr = dataArray.map(
    (fact) => `<li class="fact">
    <p>
    ${fact.text}
      <a
        class="source"
        href="${fact.source}"
        target="_blank"
      >(Source)</a>
    </p>
    <span class="tag" style="background-color: ${
      CATEGORIES.find((cat) => cat.name === fact.category).color
    }">${fact.category}</span>
  </li>`
  )
  const html = htmlArr.join("")
  factsList.insertAdjacentHTML("afterbegin", html)
}

btn.addEventListener("click", function () {
  if (form.classList.contains("hidden")) {
    form.classList.remove("hidden")
    btn.textContent = "Close"
  } else {
    form.classList.add("hidden")
    btn.textContent = "Share a fact"
  }
})