How to display a specific element of a webpage in my note?

What I’m trying to do

There’s a website that, among other things, displays the amount of time left until an event happens (the event is recurring, therefore the amount of time resets when event happens, and that amount can change). In my note, I want an element that states the amount of days. Simple, just “10 days, 10 hours left”.

Things I have tried

  • Obsidian WebClipper does great job at capturing data from websites, but I don’t want to do this manually every day. It needs to be rendered live, I guess. At least every time the event happens.
  • iframe blocks. I am aware they can be cut to display only a portion of a webpage, but I don’t need that, I need the value of an element in plain text.

I am not afraid of some coding, however, I am not good at JS scripts.
btw: if you think a JS script might be useful, feel free to refer me to some good tutorials on the topic. I have read some of them, but most of them provide examples rather than an actual explanation of what each part of code does.

Not exactly what you had in mind, but…
I think what Obsidian users would most likely recommend is to set up a note for each item. You add properties relevant to what you would want output in a Dataview (or DataviewJs) query. So you’d need to do some math once at note creation/property setup (you add time remaining to current time to make deadlineDate, where you need HH:mm added to the date, right) and the rest would be done by the Dataview plugin.
Then you could put all notes on a Canvas where you’d get time remaining on all items I imagine.

I think that similar Dataview questions relating to times (inline queries pertaining to note created x hours and days ago) were posted and answered on the forum (Help or Share & Showcase sections).

I’m not sure what you mean.
What ‘properties relevant to what I would want output’ are? What the query would look like, simply put?

Also, this is not about ‘note creation x hours ago’. No note creation should be needed. I want this thing to be a part of a predefined note.

Note created property is indeed irrelevant. I meant note creation because you need to set up individual notes for what you are watching.
I’m not sure about what the DV query would be, but you’d need some currentTime variable in javascript and deduct from deadlineDate.
I’d do it with DVJS with a chat bot, prolly (CHATGPT 4o is decent with DVJS), as for timenow or whatever Dataview function you’d need to look up the DV docs or wait for someone to give it to you, if you don’t want to browse the forum.

As for what you want to put in the note, in the props, tags, or an image of some boots you want to buy, that’s up to you.

1 Like

Don’t know how to add a changing date element from a website to a note, but if you can add the event date to a note manually …

> [!question] Countdown to 2025: **`= dur(string(round((date(2025-01-01T00:00) - date(now)).hours)) + " hours") `**

1 Like