LrpxvR

index.html

<script src="https://apis.google.com/js/api.js"></script>
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="header">
Test application Spreadsheets API
</div>

<div id="app"><br><br><br>
  
  <div class="card">
    <i class="material-icons md-18">face</i>
  
  <input type="text" id="firstName" placeholder="First Name"> <br>
  <input id="secondName" placeholder="Second Name"> <br>
    
    <p id="errorMsg"><i class="material-icons md-14"> error_outline </i> Fill the forms first</p>
    
    <div id="panel">
      <button id="log">LOGIN</button>
      <button id="write">WRITE</button>
      <button id="load">READ</button>
    </div>
    
  </div>
  <div id="content"></div>
</div>

lrpxvr.markdown

LrpxvR

A Pen by SadMonster on CodePen.

License.

script.js

window.onload = () => {
  let logBut = document.getElementById("log"),
      loadBut = document.getElementById("load"),
      writeBut = document.getElementById("write"),
      panel = document.getElementById("panel");
  
  let first, second,
      values = [];

 let CLIENT_ID = '346026596864-j0hi4cs3ooo5l19nb4sau3ccruikcfnh.apps.googleusercontent.com',
     API_KEY = 'AIzaSyAeMSNvcyu55OYZt9HzyjP2DbOL5LqbDZk',
     SCOPES = "https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/spreadsheets",
     DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
     SHEETID = "1YlkbH0OR_V1zeuXWwE1h_stKQGj3yvvNAcJW2HPbF7M";
  

document.getElementById("errorMsg").style.display = "none";
gapi.load('client:auth2', function() {
  gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          discoveryDocs: DISCOVERY_DOCS,
          scope: SCOPES
  }).then(function () {
         console.log(gapi.auth2.getAuthInstance().isSignedIn);
  });
    console.log("auth loaded");
});
  
panel.addEventListener("click", (event) => {
  console.log(event.target.innerHTML);
  
  if(event.target.type === "submit"){
    switch (event.target.innerHTML) {
      case "LOGIN":
        gapi.auth2.getAuthInstance().signIn();
        break;
        
      case "WRITE":
        writeForm();
        break;
        
      case "READ":
        readData();
        break;
        
      default:
        break;
    }
  }
 
} );
  
  function writeForm() {
    if (document.getElementById("firstName").value === "" || document.getElementById("secondName").value === "")  document.getElementById("errorMsg").style.display = "block";
    else {
      document.getElementById("errorMsg").style.display = "none";
      
      first = document.getElementById("firstName").value;
    second = document.getElementById("secondName").value;
    values = [[first,second,"Timestamp"]];
      
    document.getElementById("firstName").value = "";
    document.getElementById("secondName").value = "";
    
    gapi.client.sheets.spreadsheets.values.append({
      "spreadsheetId": SHEETID,
      "range": "List!A1:D3",
      "includeValuesInResponse": "false",
      "insertDataOption": "INSERT_ROWS",
      "responseDateTimeRenderOption": "FORMATTED_STRING",
      "valueInputOption": "RAW",
      "resource": { values: values}
      
    }).then(function(response) {
                console.log("Response", response);
                readData();
              },
              function(err) { console.error("Execute error", err); });
    }
  }
  
  function createCard(message) {
    var card = document.createElement('div');
    card.setAttribute("class", "card");
    card.textContent = message;
    document.getElementById("content").appendChild(card);
  }
  
  function readData() {
    document.getElementById("content").innerHTML = "";
    
        gapi.client.sheets.spreadsheets.values.get({
          spreadsheetId: SHEETID,
          range: 'List!A2:B',
        }).then(function(response) {
          var range = response.result;
          if (range.values.length > 0) {
            for (i = range.values.length - 1; i > 0 ; i--) {
              var row = range.values[i];
              createCard(`${row[0]} ${row[1]}`);
            }
          } else {
            createCard('No data found.');
          }
        }, function(response) {
          createCard('Error: ' + response.result.error.message);
        });
      }
  
}

style.css

input {
  margin-bottom: 10px;
  border-width: 0 0 1px 0;
  padding: 5px;
  width: 250px;
}

.inputBad {
  border-color: red;
}

.card {
  box-shadow: 0.4px 1px 3px rgba(0,0,0,.3);
  margin: 6px;
  border-radius: 0;
  padding: 20px;
  max-width: 400px;
  color: grey;
}

.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background-color: #546e7a;
  padding: 17px;
  margin: 0;
}

#content {
  color: black;
}

body {
  font-family: "Product Sans";
  background-color: white;
  color: white;
  font-family: 'Roboto', sans-serif;
  
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease;
}

#app {
  text-align: center;
  margin: auto;
  max-width: 400px;
  border-width: 5px;
}

button {
  border-radius: 3px;
  border-width: 0;
  color: rgb(20,20,20);
  padding: 10px 15px;
  margin: 0 10px;
  
  font-weight: bold;
  
  box-shadow: 0 0.5px 2px rgba(0,0,0,0.5);
}

p {
  color:red;
}

.material-icons.md-18 { font-size: 114px; }
.material-icons.md-14 { font-size: 14px; }