Google app script Basic phone book
This web app allows users to input their name and mobile number into a form. Upon submission, the data is saved to a Google Sheet. Additionally, users can search for data by name using the search feature provided. The app features a sleek black background with green text, enhancing readability and aesthetics. The table displaying the entered data also has cyan-colored borders for a clean and modern look. Overall, the web app provides a simple yet effective way to input, store, and search for data in a Google Sheet.
Here's a step-by-step guide:
Create a new Google Sheet.
Go to "Extensions" > "Apps Script" to open the Google Apps Script editor.
Replace the code in the editor with the following code:
// Create a function to display the HTML form
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
// Function to save data to Google Sheet
function saveData(name, mobile) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([name, mobile]);
}
// Function to get data from Google Sheet
function getData() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
return data;
}
1. Click on the "File" menu, then "New" > "HTML file" and name it "index".
2. Replace the code in the "index.html" file with the following HTML code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
background-color: #000;
color: #00ff00; /* Green color */
margin: 0;
padding: 20px;
}
h2 {
color: #fff; /* White color */
}
form {
background-color: rgba(255, 255, 255, 0.1); /* Transparent white */
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid cyan;
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.1); /* Transparent white */
color: #00ff00; /* Green color */
}
input[type="button"], input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="button"]:hover, input[type="submit"]:hover {
background-color: #45a049;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
border: 2px solid cyan; /* Set table border color to cyan */
}
th, td {
border: 1px solid cyan; /* Set cell border color to cyan */
padding: 8px;
text-align: left;
}
th {
background-color: #000; /* Set table title background color to black */
color: #fff; /* Set table title text color to white */
}
</style>
</head>
<body>
<h2>Enter Name and Mobile Number:</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" required><br>
<label for="mobile">Mobile:</label><br>
<input type="text" id="mobile" required><br><br>
<input type="button" value="Submit" onclick="saveData()">
</form>
<h2>Search Data by Name:</h2>
<form onsubmit="searchData(); return false;">
<label for="searchName">Enter Name:</label><br>
<input type="text" id="searchName"><br><br>
<input type="submit" value="Search">
</form>
<h2>Entered Data:</h2>
<table id="dataTable">
<tr>
<th>Name</th>
<th>Mobile</th>
</tr>
</table>
<script>
// Function to save data
function saveData() {
var name = document.getElementById("name").value;
var mobile = document.getElementById("mobile").value;
google.script.run.saveData(name, mobile);
document.getElementById("name").value = "";
document.getElementById("mobile").value = "";
updateTable();
}
// Function to update the table with data from Google Sheet
function updateTable() {
google.script.run.withSuccessHandler(function(data) {
var table = document.getElementById("dataTable");
table.innerHTML = "<tr><th>Name</th><th>Mobile</th></tr>";
data.forEach(function(row) {
var newRow = "<tr><td>" + row[0] + "</td><td>" + row[1] + "</td></tr>";
table.innerHTML += newRow;
});
}).getData();
}
// Function to search data by name
function searchData() {
var searchName = document.getElementById("searchName").value;
google.script.run.withSuccessHandler(function(data) {
var table = document.getElementById("dataTable");
table.innerHTML = "<tr><th>Name</th><th>Mobile</th></tr>";
data.forEach(function(row) {
if (row[0].toLowerCase().includes(searchName.toLowerCase())) {
var newRow = "<tr><td>" + row[0] + "</td><td>" + row[1] + "</td></tr>";
table.innerHTML += newRow;
}
});
}).getData();
}
// Call updateTable function on page load
window.onload = function() {
updateTable();
};
</script>
</body>
</html>
Comments
Post a Comment