magraweb

import { useState, type Dispatch, type SetStateAction } from 'react';

interface CreateUserFormProps {
  setUserWasCreated: Dispatch<SetStateAction<boolean>>;
}

function CreateUserForm({ setUserWasCreated }: CreateUserFormProps) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [passwordErrors, setPasswordErrors] = useState<string[]>([]);

magraweb

Bulma Coming Soon

Coming soon page built with the Bulma CSS framework. Released as part of my set of free Bulma templates.

A Pen by manoj on CodePen.

License.

magraweb

Card Hover Interactions

Hacking together a solution to show part of an element in a card as a default state, lining up the element headline across each card and then animating the element to the center of its parent element

A Pen by Ryan Mulligan on CodePen.

License.

magraweb

<div class="preloader">
	<div class="spinner">
		<p><div class="double-bounce1"></div></p>
		<p><div class="double-bounce2"></div></p>
	</div>
		<p>Transferring you to payment</p>
</div>

magraweb

Credit Card Payment Form

Wanted to work with some masking so made a payment form so, using vanilla JS and the imask.js library, made a fairly simply payment form that uses regex patterns to detect the credit card type as the user is inputting values and properly applies the relevant spacing associated with that brand. Also wanted to do a smidge of style flair so made a simple SVG card that changes as the user fills out the form.

A Pen by manoj on CodePen.

License.

magraweb

Booking form with a calendar

A Pen by Anastasia on CodePen.

License.

magraweb

<div class="reload">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.011,20c0-0.002,0-0.003,0-0.005c0-4.421,3.578-8.005,7.991-8.005 c2.683,0,5.051,1.329,6.5,3.361l1.26-1.644c-1.834-2.254-4.627-3.696-7.76-3.696c-5.519,0-9.994,4.471-10.001,9.989H8.013 l3.018,4.013L13.987,20H12.011z M32,20l-2.969-3.985L26,20h1.992c-0.003,4.419-3.579,8.001-7.99,8.001 c-2.716,0-5.111-1.36-6.555-3.435l-1.284,1.644c1.832,2.314,4.66,3.803,7.84,3.803c5.524,0,10.001-4.478,10.001-10.001 c0-0.004-0.001-0.008-0.001-0.012H32z"></path>
  </svg>
</div>

<div class="loader">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>

magraweb

var autocompleteApp = angular.module("autocompleteApp");
var autocompleteController = function($scope) {
  //http://jqueryui.com/autocomplete/
	var availableTags = [
		  "ActionScript",
		  "AppleScript",
		  "Asp",
		  "BASIC",
		  "C",
		  "C++",