Jairus Joer jairusjoer

Post and reply

Post data to a PHP endpoint and dynamically display a response with Alpine.js

<html x-data="utility">

  <!-- ... -->

	const rasterGlobe = (limit = 1000, x1 = -180, y1 = -180) => {
	type Coordinates = { x: number; y: number };

	let base = Math.pow(limit, 1 / 2);
	let root = Math.floor(base);
	let data: Array<Coordinates> = [];

	const rasterLine = (x2: number) => {
	for (let i = 0; i < root; i++) {
	let y = y1 + ((y1 * -2) / (root - 1)) * i;

	/**
	* @param {object} night Configure night mode controls and targets.
	* @param {string} night.mount Mount theme class to single given DOM element.
	* @param {string} night.targets Match control targets using `querySelectorAll()`.
	* @param {string} [night.theme] Set optional theme name to be mounted. Default: night.
	* @param {function} [night.callback] Optional callback triggered on target interaction.
	* @return {object} Current theme state and targeted DOM elements.
	*/

	const night = ({ mount, targets, theme = "night", callback }) => {

	<?php

	$response = (object) [];
	$json = json_decode(file_get_contents('php://input'));

	//...

	if (!$json) {
	$response->state = [
	'code' => 400,

	<?php

	$response = new \stdClass();

	$response->state = [
	'code' => 200,
	'type' => 'success', // Can be used for CSS indicators classes such as `.is-[type]`
	'message' => 'Your data has ben successfully submitted.'
	];

	// Transform a ISO 8601 format date string to a given locale ―――――――――――――――― //
	const date = (input, locale = "de-DE", options = { dateStyle: "long" }) => {
	const date = Date.parse(input);
	return new Intl.DateTimeFormat(locale, options).format(date);
	};

	// Mount, toggle and store dark mode theme on client ―――――――――――――――――――――――― //
	/**
	* @param {object} night Configure night mode controls and targets.
	* @param {string} night.mount Mount theme class to single given DOM element.

	const scrollVideo = (media, threshold = 1) => {
	const video = document.querySelector(media);
	const target = video.parentNode;

	const scrollDistance = target.clientHeight - window.innerHeight;

	let observer = new IntersectionObserver(
	(entries, observer) => {
	entries.forEach((entry) => {
	if (entry.isIntersecting) {

	import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
	import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

	import {
	AnimationMixer,
	Clock,
	Color,
	DirectionalLight,
	HemisphereLight,
	PerspectiveCamera,

	# https://brew.sh/
	eval "$(/opt/homebrew/bin/brew shellenv)"

	# Add SSH key to macOS keychain
	ssh-add --apple-use-keychain ~/.ssh/id_ed25519 2>/dev/null

	# https://github.com/junegunn/fzf
	source <(fzf --zsh)

	# https://github.com/zsh-users/zsh-autosuggestions