Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Podcast</title>
Style sheet link here
<link href="style.css" rel="stylesheet" type="text/css" />
Bootstrap Link Here
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand px-4">SaeeAM Podcast</a>
<!-- <a class="navbar-brand" href="https://google.com">Add Podcast</a> -->
<button type="button" class="navbar-brand btn btn-primary" data-toggle="modal" data-target="#addpodcast">
Add Podcast
</button>
</nav>
</div>
<div class="px-4 py-5 my-5 text-center">
<img class="d-block mx-auto mb-4"
src="https://static.vecteezy.com/system/resources/thumbnails/002/157/610/small/illustrations-concept-design-podcast-channel-free-vector.jpg"
alt="" width="72" height="57">
<h1 class="display-5 fw-bold">SaeeAM Podcast</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">SaeeAM Podcast</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addpodcast">
Add Podcast
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#joinus">
Join Us
</button>
</div>
</div>
</div>
<hr>
<div class="container">
<h1 class="display-5 fw-bold text-center">Live Podcasts</h1>
<div id="datafetch" class="s-vertical overflow-auto row">
<!-- <div class="col-12 col-sm-8 col-md-6 col-lg-4">
</div> -->
</div>
</div>
<!-- start model -->
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#joinus">
Joinus
</button> -->
<!-- Modal -->
<div class="modal fade" id="joinus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Join Us Podcast</h5>
<button type="button" class="close btn btn-primary" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<form method="post">
<div id="form">
<div class="form-group">
<label for="pwd">Name</label>
<input type="text" name="name" class="form-control" id="name" required>
</div>
<div class="form-group">
<label for="email">Mobile</label>
<input type="number" name="mobile" class="form-control" id="mobile" required>
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" name="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="pwd">Message</label>
<textarea type="text" name="msg" class="form-control" id="msg" required> </textarea>
</div>
<div class="text-center mt-4">
<input type="submit" class="btn btn-outline-success" id="sub" value="Submit" />
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end model her -->
<!-- start model -->
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="addpodcast" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Podcast</h5>
<button type="button" class="close btn btn-primary" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<form
action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScIrc4lpP-wZhEx6pcu8YQkoG9oCDJs8CYI_uBqRIpxOwlgyQ/formResponse"
target="_blanks">
<div id="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" name="entry.1900762092" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="pwd">Podcast Title</label>
<input type="text" name="entry.438571787" class="form-control" id="name" required>
</div>
<div class="form-group">
<label for="email">Podcast Description</label>
<textarea type="text" name="entry.1911805347" class="form-control" id="mobile" required></textarea>
</div>
<div class="form-group">
<label for="email">Podcast link</label>
<input type="text" name="entry.1169883789" class="form-control" id="mobile" required>
</div>
<div class="form-group">
<label for="pwd">Message</label>
<textarea type="text" name="entry.736699989" class="form-control" id="msg" required> </textarea>
</div>
<div class="text-center mt-4">
<input type="submit" class="btn btn-outline-success" id="sub" value="Submit" />
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24">
<use xlink:href="#bootstrap" />
</svg>
</a>
<span class="mb-3 mb-md-0 text-muted">© 2022 SaeeAM Podcast, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"> </a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24">
<use xlink:href="#instagram" />
</svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24">
<use xlink:href="#facebook" />
</svg></a></li>
</ul>
</footer>
</div>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
/Bootstrap
<link href="style.css" rel="stylesheet" type="text/css" />
html {
height: 100%;
width: 100%;
}
.s-vertical {
height: 500px;
overflow-y: scroll;
}
.d-vertical {
height: 150px;
overflow-y: scroll;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
Js(API Request)
let form = document.querySelector("form");
form.addEventListener('submit', (e) => {
e.preventDefault();
document.querySelector("#sub").value = "Submiting..";
let data = new FormData(form);
fetch('https://script.google.com/macros/s/AKfycbwWMi-U1Ybnj87f23jSrLwDsJ4P_d6xZx-uL4zSpeQYD1lKoYfNtcEahpqFxnNmbVfW/exec', {
method: "POST",
body: data
})
.then(res => res.text())
.then(data => {
alert(data);
document.querySelector("#sub").value = "Submit"
form.reset();
});
});
const api_url =
"https://script.google.com/macros/s/AKfycbwWMi-U1Ybnj87f23jSrLwDsJ4P_d6xZx-uL4zSpeQYD1lKoYfNtcEahpqFxnNmbVfW/exec";
// Defining async function
async function classapi(url) {
// Storing response
const response = await fetch(url);
// Storing data in form of JSON
var data = await response.json();
classdatashow(data);
}
// Defining async function
// Calling that async function
classapi(api_url);
// Function to define innerHTML for HTML table
function classdatashow(data) {
console.log(data);
let tab =
``;
// Loop to access all rows
for (let r of data.content) {
tab += `
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top"
src="${r[4]}" height="150px"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">${r[2]}</h5>
<h6 class="card-subtitle mb-2 text-muted">${r[5]}</h6>
<p class="card-text d-vertical overflow-auto">${r[3]}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#joinus">
Join Us
</button>
</div>
<small class="text-muted">${r[0].slice(0, 10)}</small>
</div>
</div>
</div>
</div>
`;
}
// Setting innerHTML as tab variable
document.querySelector("#datafetch").innerHTML = tab;
};
Replit(Hosting)
https://podcast-project.saeeamstartup.repl.co/
Google App Scripts(Database)
const sheet = SpreadsheetApp.openByUrl("excel sheet link here")
// const sheets = sheet.getSheetByName("form");
function doGet(e){
let obj = {};
let data = sheet.getDataRange().getValues();
obj.content = data;
return ContentService.createTextOutput(JSON.stringify(obj)).setMimeType(ContentService.MimeType.JSON);
}
const datasave = SpreadsheetApp.openByUrl("sheet link here")
const fillform = datasave.getSheetByName("form");
function doPost(e){
let data = e.parameter;
fillform.appendRow([data.name, data.mobile,data.email,data.msg]);
return ContentService.createTextOutput("Success");
}
No comments:
Post a Comment