33 |
34 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/examples/5-weather/styles.css:
--------------------------------------------------------------------------------
1 | .form {
2 | margin-top: 2rem;
3 | background: var(--clr-white);
4 | max-width: 600px;
5 | padding: 2rem 2.5rem;
6 | border-radius: var(--radius);
7 | }
8 | label {
9 | display: block;
10 | text-transform: capitalize;
11 | margin-top: 1.5rem;
12 | margin-bottom: 0.5rem;
13 | color: var(--clr-grey-5);
14 | font-size: 1.15rem;
15 | }
16 | input[type='text'] {
17 | width: 100%;
18 | background: var(--clr-grey-10);
19 | border-color: transparent;
20 | padding: 0.35rem 0.75rem;
21 | border-radius: var(--radius);
22 | font-size: 1.25rem;
23 | }
24 | .submit-btn {
25 | width: 100%;
26 | background: var(--clr-primary-5);
27 | margin-top: 1.5rem;
28 | text-transform: capitalize;
29 | letter-spacing: var(--spacing);
30 | border-radius: var(--radius);
31 | border-color: transparent;
32 | font-size: 1rem;
33 | color: var(--clr-white);
34 | padding: 0.25rem 0.5rem;
35 | cursor: pointer;
36 | transition: var(--transition);
37 | }
38 | .submit-btn:hover {
39 | background: var(--clr-primary-3);
40 | }
41 |
42 | .result {
43 | margin-top: 3rem;
44 | }
45 | .result h3 {
46 | margin-bottom: 1.5rem;
47 | }
48 | .result p {
49 | text-transform: capitalize;
50 | margin-bottom: 0.5rem;
51 | }
52 | .alert {
53 | color: var(--clr-red-dark);
54 | margin-bottom: 0;
55 | margin-top: 1rem;
56 | /* display: none; */
57 | }
58 |
--------------------------------------------------------------------------------
/examples/6-newsletter/app.js:
--------------------------------------------------------------------------------
1 | const form = document.querySelector('.form')
2 | const emailInput = document.querySelector('.email-input')
3 | const alert = document.querySelector('.alert')
4 | alert.style.display = 'none'
5 |
6 | form.addEventListener('submit', async function (e) {
7 | e.preventDefault()
8 | form.classList.add('loading')
9 | alert.style.display = 'none'
10 | const email = emailInput.value
11 | try {
12 | await axios.post('/api/6-newsletter', { email })
13 | form.innerHTML =
14 | '
25 | Stripe Payment
26 |
27 |
43 |
44 |
45 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/examples/8-stripe/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | margin-bottom: 2rem;
3 | }
4 | form {
5 | width: 30vw;
6 | min-width: 500px;
7 | align-self: center;
8 | box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
9 | 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
10 | border-radius: 7px;
11 | padding: 40px;
12 | }
13 |
14 | input {
15 | border-radius: 6px;
16 | margin-bottom: 6px;
17 | padding: 12px;
18 | border: 1px solid rgba(50, 50, 93, 0.1);
19 | height: 44px;
20 | font-size: 16px;
21 | width: 100%;
22 | background: white;
23 | }
24 |
25 | .result-message {
26 | line-height: 22px;
27 | font-size: 16px;
28 | }
29 |
30 | .result-message a {
31 | color: rgb(89, 111, 214);
32 | font-weight: 600;
33 | text-decoration: none;
34 | }
35 |
36 | .hidden {
37 | display: none;
38 | }
39 |
40 | #card-error {
41 | color: rgb(105, 115, 134);
42 | text-align: left;
43 | font-size: 13px;
44 | line-height: 17px;
45 | margin-top: 12px;
46 | }
47 |
48 | #card-element {
49 | border-radius: 4px 4px 0 0;
50 | padding: 12px;
51 | border: 1px solid rgba(50, 50, 93, 0.1);
52 | height: 44px;
53 | width: 100%;
54 | background: white;
55 | }
56 |
57 | #payment-request-button {
58 | margin-bottom: 32px;
59 | }
60 |
61 | /* Buttons and links */
62 | button {
63 | background: #5469d4;
64 | color: #ffffff;
65 | font-family: Arial, sans-serif;
66 | border-radius: 0 0 4px 4px;
67 | border: 0;
68 | padding: 12px 16px;
69 | font-size: 16px;
70 | font-weight: 600;
71 | cursor: pointer;
72 | display: block;
73 | transition: all 0.2s ease;
74 | box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
75 | width: 100%;
76 | }
77 | button:hover {
78 | filter: contrast(115%);
79 | }
80 | button:disabled {
81 | opacity: 0.5;
82 | cursor: default;
83 | }
84 |
85 | /* spinner/processing state, errors */
86 | .spinner,
87 | .spinner:before,
88 | .spinner:after {
89 | border-radius: 50%;
90 | }
91 | .spinner {
92 | color: #ffffff;
93 | font-size: 22px;
94 | text-indent: -99999px;
95 | margin: 0px auto;
96 | position: relative;
97 | width: 20px;
98 | height: 20px;
99 | box-shadow: inset 0 0 0 2px;
100 | -webkit-transform: translateZ(0);
101 | -ms-transform: translateZ(0);
102 | transform: translateZ(0);
103 | }
104 | .spinner:before,
105 | .spinner:after {
106 | position: absolute;
107 | content: '';
108 | }
109 | .spinner:before {
110 | width: 10.4px;
111 | height: 20.4px;
112 | background: #5469d4;
113 | border-radius: 20.4px 0 0 20.4px;
114 | top: -0.2px;
115 | left: -0.2px;
116 | -webkit-transform-origin: 10.4px 10.2px;
117 | transform-origin: 10.4px 10.2px;
118 | -webkit-animation: loading 2s infinite ease 1.5s;
119 | animation: loading 2s infinite ease 1.5s;
120 | }
121 | .spinner:after {
122 | width: 10.4px;
123 | height: 10.2px;
124 | background: #5469d4;
125 | border-radius: 0 10.2px 10.2px 0;
126 | top: -0.1px;
127 | left: 10.2px;
128 | -webkit-transform-origin: 0px 10.2px;
129 | transform-origin: 0px 10.2px;
130 | -webkit-animation: loading 2s infinite ease;
131 | animation: loading 2s infinite ease;
132 | }
133 |
134 | @-webkit-keyframes loading {
135 | 0% {
136 | -webkit-transform: rotate(0deg);
137 | transform: rotate(0deg);
138 | }
139 | 100% {
140 | -webkit-transform: rotate(360deg);
141 | transform: rotate(360deg);
142 | }
143 | }
144 | @keyframes loading {
145 | 0% {
146 | -webkit-transform: rotate(0deg);
147 | transform: rotate(0deg);
148 | }
149 | 100% {
150 | -webkit-transform: rotate(360deg);
151 | transform: rotate(360deg);
152 | }
153 | }
154 |
155 | @media only screen and (max-width: 600px) {
156 | form {
157 | width: 80vw;
158 | }
159 | }
160 |
--------------------------------------------------------------------------------
/functions/1-hello.js:
--------------------------------------------------------------------------------
1 | // domain/.netlify/functions/1-hello
2 | // exports
3 | // const person = { name: 'john' }
4 |
5 | exports.handler = async (event, context, cb) => {
6 | return {
7 | statusCode: 200,
8 | body: 'Our First Netlify Function Example',
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/functions/2-basic-api.js:
--------------------------------------------------------------------------------
1 | const items = require('../assets/data')
2 |
3 | exports.handler = async (event, context, cb) => {
4 | return {
5 | headers: {
6 | 'Access-Control-Allow-Origin': '*',
7 | },
8 | statusCode: 200,
9 | body: JSON.stringify(items),
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/functions/3-airtable.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | const Airtable = require('airtable-node')
3 |
4 | const airtable = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY })
5 | .base('appRpwOOjOyiPQHi9')
6 | .table('products')
7 |
8 | exports.handler = async (event, context, cb) => {
9 | try {
10 | const { records } = await airtable.list()
11 | const products = records.map((product) => {
12 | const { id } = product
13 | const { name, image, price } = product.fields
14 | const url = image[0].url
15 | return { id, name, url, price }
16 | })
17 | return {
18 | statusCode: 200,
19 | body: JSON.stringify(products),
20 | }
21 | } catch (error) {
22 | return {
23 | statusCode: 500,
24 | body: 'Server Error',
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/functions/3-product.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | const Airtable = require('airtable-node')
3 |
4 | const airtable = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY })
5 | .base('appRpwOOjOyiPQHi9')
6 | .table('products')
7 | exports.handler = async (event, context, cb) => {
8 | const { id } = event.queryStringParameters
9 | if (id) {
10 | try {
11 | const product = await airtable.retrieve(id)
12 | if (product.error) {
13 | return {
14 | statusCode: 404,
15 | body: `No product with id: ${id}`,
16 | }
17 | }
18 | return {
19 | statusCode: 200,
20 | body: JSON.stringify(product),
21 | }
22 | } catch (error) {
23 | return {
24 | statusCode: 500,
25 | body: `Server Error`,
26 | }
27 | }
28 | }
29 | return {
30 | statusCode: 400,
31 | body: 'Please provide product id',
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/functions/3-z-complete.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | const Airtable = require('airtable-node')
3 |
4 | const airtable = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY })
5 | .base('appRpwOOjOyiPQHi9')
6 | .table('products')
7 |
8 | exports.handler = async (event, context, cb) => {
9 | const { id } = event.queryStringParameters
10 | if (id) {
11 | try {
12 | const product = await airtable.retrieve(id)
13 | if (product.error) {
14 | return {
15 | statusCode: 404,
16 | body: `No product with id: ${id}`,
17 | }
18 | }
19 | return {
20 | statusCode: 200,
21 | body: JSON.stringify(product),
22 | }
23 | } catch (error) {
24 | return {
25 | statusCode: 500,
26 | body: `Server Error`,
27 | }
28 | }
29 | }
30 | try {
31 | const { records } = await airtable.list()
32 | const products = records.map((product) => {
33 | const { id } = product
34 | const { name, image, price } = product.fields
35 | const url = image[0].url
36 | return { id, name, url, price }
37 | })
38 | return {
39 | statusCode: 200,
40 | body: JSON.stringify(products),
41 | }
42 | } catch (error) {
43 | return {
44 | statusCode: 500,
45 | body: 'Server Error',
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/functions/4-survey.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | const Airtable = require('airtable-node')
3 |
4 | const airtable = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY })
5 | .base('appRpwOOjOyiPQHi9')
6 | .table('survey')
7 |
8 | exports.handler = async (event, context, cb) => {
9 | const method = event.httpMethod
10 | if (method === 'GET') {
11 | try {
12 | const { records } = await airtable.list()
13 | const survey = records.map((item) => {
14 | const { id } = item
15 | const { room, votes } = item.fields
16 | return { id, room, votes }
17 | })
18 | return {
19 | statusCode: 200,
20 | body: JSON.stringify(survey),
21 | }
22 | } catch (error) {
23 | return {
24 | statusCode: 500,
25 | body: 'Server Error',
26 | }
27 | }
28 | }
29 | if (method === 'PUT') {
30 | try {
31 | const { id, votes } = JSON.parse(event.body)
32 | if (!id || !votes) {
33 | return {
34 | statusCode: 400,
35 | body: 'Please provide id and votes values',
36 | }
37 | }
38 | const fields = { votes: Number(votes) + 1 }
39 | const item = await airtable.update(id, { fields })
40 | console.log(item)
41 | if (item.error) {
42 | return {
43 | statusCode: 400,
44 | body: JSON.stringify(item),
45 | }
46 | }
47 | return {
48 | statusCode: 200,
49 | body: JSON.stringify(item),
50 | }
51 | } catch (error) {
52 | return {
53 | statusCode: 400,
54 | body: 'Please provide id and votes values',
55 | }
56 | }
57 | }
58 | // Default Response
59 | return {
60 | statusCode: 405,
61 | body: 'Only GET and PUT Requests Allowed',
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/functions/5-weather.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | const axios = require('axios')
3 |
4 | const url = `http://api.openweathermap.org/data/2.5/weather?appid=${process.env.OPEN_WEATHER_API_KEY}&units=imperial&q=`
5 |
6 | exports.handler = async (event, context, cb) => {
7 | const method = event.httpMethod
8 |
9 | if (method !== 'POST') {
10 | return {
11 | statusCode: 405,
12 | body: 'Only POST Requests Allowed',
13 | }
14 | }
15 |
16 | const { city } = JSON.parse(event.body)
17 | try {
18 | const resp = await axios.get(`${url}${city}`)
19 | return {
20 | statusCode: 200,
21 | body: JSON.stringify(resp.data),
22 | }
23 | } catch (error) {
24 | return {
25 | statusCode: 404,
26 | body: JSON.stringify(error),
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/functions/6-newsletter.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | const axios = require('axios')
3 | const url = 'https://api.buttondown.email/v1/subscribers'
4 |
5 | exports.handler = async (event, context, cb) => {
6 | const method = event.httpMethod
7 | if (method !== 'POST') {
8 | return {
9 | statusCode: 405,
10 | body: 'Only POST Requests Allowed',
11 | }
12 | }
13 | const { email } = JSON.parse(event.body)
14 | if (!email) {
15 | return {
16 | statusCode: 400,
17 | body: 'Please provide email value',
18 | }
19 | }
20 | try {
21 | const data = await axios.post(
22 | url,
23 | { email },
24 | {
25 | headers: {
26 | Authorization: `Token ${process.env.EMAIL_KEY}`,
27 | },
28 | }
29 | )
30 | console.log(data)
31 | return {
32 | statusCode: 201,
33 | body: 'Success',
34 | }
35 | } catch (error) {
36 | return {
37 | statusCode: 400,
38 | body: JSON.stringify(error.response.data),
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/functions/7-email.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | const nodemailer = require('nodemailer')
3 |
4 | const { EMAIL_HOST, EMAIL_PORT, EMAIL_USER, EMAIL_PASSWORD } = process.env
5 | const transporter = nodemailer.createTransport({
6 | host: EMAIL_HOST,
7 | port: EMAIL_PORT,
8 | secure: false, // true for 465, false for other ports
9 | auth: {
10 | user: EMAIL_USER, // generated ethereal user
11 | pass: EMAIL_PASSWORD, // generated ethereal password
12 | },
13 | })
14 |
15 | exports.handler = async (event, context, cb) => {
16 | const method = event.httpMethod
17 | if (method !== 'POST') {
18 | return {
19 | statusCode: 405,
20 | body: 'Only POST Requests Allowed',
21 | }
22 | }
23 | const { name, email, subject, message } = JSON.parse(event.body)
24 | if (!name || !email || !subject || !message) {
25 | return {
26 | statusCode: 400,
27 | body: 'Please Provide All Values',
28 | }
29 | }
30 | const data = {
31 | from: 'John Doe 
31 |