Activity
great timing!
Posted in How to create a live countdown clock?
Hi Samuel,
I've ended up using vanilla JS. However, you could do the same with Stimulus, that's what I would do when rebuilding it.
Here's roughly the outline of the code that was used.
https://gist.github.com/thomasvanholder/1778df30141e4c47362102518930c043
This might help someone watch the video. The website provided (https://jsonip.org/) didn't work for me. The following error occurred:
SocketError: Failed to open TCP connection to jsonip.org:443 (getaddrinfo: nodename nor servname provided, or not known)
Swapping the website for https://ip.seeip.org/json and all works well.
Posted in How to create a live countdown clock?
Hi all,
We're creating an online auction which has a countdown clock on the show page of a listing.
The timer counts down every second, just like this example: https://countingdownto.com/
I've been looking at Stimulus Reflex, classic JS and action cable.
What's the best way to build this with rails?
Thanks for your feedback.
For anyone else looking to implement a contact from.
Mail_form is indeed an easy way to do it.
I followed this guide and got implementation up and running in 20m.
https://medium.com/@Gabriel.Valle/rails-and-mail-form-f4bc4f991c83
Another possibility to add in Trix into your project is following the 2 steps in the installation guide.
https://edgeguides.rubyonrails.org/action_text_overview.html
The dynamic dropdown with Stimulus JS was a feature I spend a lot of time trying to solve, eventually got it working like this.
import { Controller } from "stimulus";
export default class extends Controller {
static targets = [
"property_id",
"roomId",
"listRooms",
];
updateRooms() {
const property_id = this.targets.find("property_id").value;
Rails.ajax({
type: "GET",
url: "/get_rooms.json",
data: "property_id=" + property_id,
success: (data) => {
this.updateDropdown(data);
},
});
}
updateDropdown(data) {
this.roomIdTarget.innerHTML = "";
const num_rooms = data;
if (num_rooms == 0) {
const option = document.createElement("option");
option.innerHTML = "Entire place";
this.roomIdTarget.appendChild(option);
} else {
data.forEach((room) => {
const option = document.createElement("option");
option.value = room.id;
option.innerHTML = "Room " + room.name;
this.roomIdTarget.appendChild(option);
});
}
}