diff --git a/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/README.md b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/README.md new file mode 100644 index 00000000..f10a3f83 --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/README.md @@ -0,0 +1,64 @@ +

đŸ’Ĩ Email Subscription form with Google Sheet đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+

This project is HTML,CSS and Javascript implementation of a Email Subscription Form with Google Sheets.It aims to Creating an email subscription form with Google Sheets using HTML, CSS, and JavaScript involves building a simple front-end form where users can input their email addresses, and then using JavaScript to send the data to a Google Sheet.This Showcases the power of HTML,CSS and Javascript.

+
+ + + +## :zap: How to run it? 🕹ī¸ + +
+

To run this project locally, follow these steps: + +- Fork this repository. +- Clone the forked repository. +- Open index.html in your web browser to start your culinary exploration. + +

+
+ + + + +## :zap: Screenshots 📸 + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Damini Chachane

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/bg.jpeg b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/bg.jpeg new file mode 100644 index 00000000..e4b03347 Binary files /dev/null and b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/bg.jpeg differ diff --git a/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/icon.png b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/icon.png new file mode 100644 index 00000000..df53b905 Binary files /dev/null and b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/icon.png differ diff --git a/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/index.html b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/index.html new file mode 100644 index 00000000..4a580e8c --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/index.html @@ -0,0 +1,28 @@ + + + + + + Email Subscription + + + + + + +
+

Coming Soon!

+

Stay tuned,
Our exciting new website is launching soon!!!!

+

Subscribe for more details.

+
+ + +
+ +
+ + + + + + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/screenshot.webp b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/screenshot.webp new file mode 100644 index 00000000..ccc6ca08 Binary files /dev/null and b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/script.js b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/script.js new file mode 100644 index 00000000..4ac68577 --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/script.js @@ -0,0 +1,16 @@ + +const scriptURL = 'https://script.google.com/macros/s/AKfycbxzo8cvSyjB9Ad7cxfwYKMRnyUQ8W_ckB_nGTsE2InLaoTJaIVf8Wwz7-EuovV4AWWE/exec' + const form = document.forms['submit-to-google-sheet'] +const msg=document.getElementById("msg") + form.addEventListener('submit', e => { + e.preventDefault() + fetch(scriptURL, { method: 'POST', body: new FormData(form)}) + .then(response => { + msg.innerHTML="Thank You For Subscribing!" + setTimeout(function(){ + msg.innerHTML="" + },5000) + form.reset() + }) + .catch(error => console.error('Error!', error.message)) + }) diff --git a/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/style.css b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/style.css new file mode 100644 index 00000000..3d57c464 --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/style.css @@ -0,0 +1,59 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Poppins','sans-serif'; + box-sizing: border-box; +} +.container{ + width: 100%; + height: 100vh; + background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.7)),url('bg.jpeg'); + background-size: cover; + background-position: center; + padding: 10px 10%; + color: #fff; +} + +.container h3{ +margin-top: 15%; +font-weight: 400; +font-size: 30px; +} +.container h1{ + margin-top: 30px; + font-size: 50px; +} +.container p{ + margin: 10px 0 60px 0; + font-size: 25px; +} +form{ + background: #fff; + display: flex; + width: fit-content; +} +form input{ + border: 0; + outline: none; + padding: 10px 20px; + height: 70px; + width: 400px; + font-size: 16px; +} +form button{ + background: #22062e; + border: none; + outline: none; + height: 70px; + width: 100px; + cursor: pointer; + +} +img{ + border-radius: 70%; +} +span{ + color: #61b752; + margin-top: 10px; + display: block; +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index b3058e66..ce441139 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -49,7 +49,8 @@ | 22 | [Joke Telling Website](./Basic/Joke-Telling-Website/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 23 | [Interval Timer](./Intermediate/Interval_Timer/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 24 | [Language Translator](./Intermediate/Language-Translator/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | - +| 25 | [Ceaser-Cipher](./Intermediate/Ceaser-Cipher/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 26 | [Email-Subscription-form-with-google-sheet](./Intermediate/Email-Subscription-form-with-google-sheet/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |