A vanilla JS fork of Lettering.js. Follow along in the tutorial video at https://gomakethings.com/converting-a-jquery-plugin-to-vanilla-js-lettering.js/.
Pass in a selector for the elements you want to run Vanilla Lettering.js on.
Chris Ferdinandi cferdinandi
cferdinandi
/ index.html
Created
March 11, 2021 21:56
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CodePen - Monster flip card</title> | |
| <link rel="stylesheet" href="./style.css"> | |
| </head> | |
| <body> | |
| <!-- partial:index.partial.html --> |
cferdinandi
/ war-refactor.html
Created
January 14, 2021 15:55
https://gomakethings.com/building-a-card-game-with-vanilla-js/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>War</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 40em; | |
| width: 88%; |
cferdinandi
/ caesar-cipher.html
Last active
March 15, 2021 18:42
https://gomakethings.com/building-a-caesar-cipher-with-vanilla-js/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Caesar Cipher</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 40em; | |
| width: 88%; |
cferdinandi
/ react-todos-with-reef.html
Created
November 12, 2020 15:20
https://gomakethings.com/converting-a-vanilla-js-todo-app-to-reefjs/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>React Todos in Vanilla JS</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 40em; | |
| width: 88%; | |
| } |
cferdinandi
/ react-todo-to-vanilla-js.html
Created
November 12, 2020 15:06
https://gomakethings.com/converting-the-react-todo-app-demo-to-vanilla-js/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>React Todos in Vanilla JS</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 40em; | |
| width: 88%; | |
| } |
cferdinandi
/ accordions.html
Created
October 20, 2020 21:30
Source code for https://gomakethings.com/how-to-build-a-progressively-enhanced-accordion-component-with-vanilla-js/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Accordions</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 40em; | |
| width: 88%; |
cferdinandi
/ fitvids-vanilla.html
Created
October 19, 2020 14:36
Code for https://gomakethings.com/converting-a-jquery-plugin-to-vanilla-js-fitvids.js/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Vanilla Fitvids.js</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 40em; | |
| width: 88%; |
cferdinandi
/ dice.html
Created
October 8, 2020 14:01
Code for https://gomakethings.com/vanilla-js-project-creating-digital-dice/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Dice</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 1em auto; | |
| max-width: 40em; | |
| width: 88%; |
cferdinandi
/ print-to-pdf.html
Last active
March 18, 2024 23:53
A boilerplate for building a print-to-PDF HTML page that you can dynamically generate with JS (could also be server-rendered if you prefer).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Print to PDF</title> | |
| <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> | |
| <style type="text/css"> |