DEV Community

Cover image for 📂Portfolio using JavaScript (ES6) Magic✨ | Google Apps Script Sorcery🚀
Baivab Sarkar
Baivab Sarkar

Posted on • Updated on

📂Portfolio using JavaScript (ES6) Magic✨ | Google Apps Script Sorcery🚀

Website is Live:

🚀 Explore the Simplicity of HTML, CSS, and a Touch of JS in Building Your Unique Showcase. Let's Elevate Your Portfolio Game Together! 💼❤️ #InteractiveLearning #CodeYourDreams #ShareTheLove 💬👇

Image description

Source Code GithHub:ThisIs-Developer/Portfolio-old

Key Feature

  • Submit a Form to Google Sheets This Portfolio Contact form can stores the submitted form data in Google Sheets using plain 'ol JavaScript (ES6), Google Apps Script.

Discover the Process: Learn from @jamiewilson Form-to-Google-Sheets Repository 📝🔗 #OpenSource"

Layout of Contact form:

Image description

SCRIPT in the HTML file:

        const scriptURL = ''
        const form = document.forms['submit-to-google-sheet']
        const msg = document.getElementById("msg")
        const waitMsg = document.getElementById("wait-msg")
        form.addEventListener('submit', e => {
            waitMsg.innerHTML = "Please wait...";
            fetch(scriptURL, { method: 'POST', body: new FormData(form) })
                .then(response => {
                    waitMsg.innerHTML = "";
                    msg.innerHTML = "Message sent successfully";
                    setTimeout(function () {
                        msg.innerHTML = "";
                    }, 5000);
                .catch(error => {
                    waitMsg.innerHTML = "";
                    console.error('Error!', error.message);
Enter fullscreen mode Exit fullscreen mode

After clicking the "Submit" buttom.

"Please wait..."

Image description

After sending Message.

"Message sent successfully"

Image description

If You Love It, Show Some ❤️!

Drop a Comment to Show Your Support and Connect. Let's Make Learning and Creating Together! 💬❤️ #ShareYourThoughts #EngageAndConnect
Image description

Top comments (2)

mannu profile image

Good Work ❤

thisisdeveloper profile image
Baivab Sarkar