I am trying to deploy my signup web app using MailChimp. However, when I tried to run on port 3000. everytime that it succeeds it will send to success.html but when it's a failure, it suppose to send to failure.html however, it still send to success.html and also sometimes I get [nodemon] app crashed - waiting for file changes before starting...
please help clarify what I did wrong with my code. Thank you so much. I really appreciate this
the below codes are in app.js
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const mailchimp = require('@mailchimp/mailchimp_marketing');
const https = require("https");
const request = require("request");
mailchimp.setConfig({
apiKey: "d7a44647dc9eccdf9ac0ba24c4f38649-us21",
server: "us21",
});
app.use(express.static("public"));
app.use(express.json())
app.use(bodyParser.urlencoded({extended: true}));
const port = 3000;
app.get("/", function(req, res) {
res.sendFile(__dirname + "/signup.html");
});
async function add(member) {
const response = await mailchimp.lists.addListMember("18eb2787d5", member);
};
app.post("/", function(req, res) {
const firstName = req.body.firstName;
const lastName = req.body.lastName;
const emailAddress = req.body.email;
const newMember = {
email_address: emailAddress,
status: "subscribed",
merge_fields: {
FNAME: firstName,
LNAME: lastName
}
};
add(newMember);
if (res.statusCode === 200) {
res.sendFile(__dirname + "/success.html");
} else {
res.sendFile(__dirname + "/failure.html");
}
});
app.post("/failure", function(req, res) {
res.redirect("/");
})
app.listen(port, function() {
console.log(`This server is running on port ${port}!`);
})
// My API Key
// d7a44647dc9eccdf9ac0ba24c4f38649-us21
// List ID
// 18eb2787d5
the below codes are in failure.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Failure</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<div id="pain" class="col-12 mt-5 pt-5">
<img src="./images/fail.JPG">
</div>
<form id="makeItCenter" class="tryAgain" action="index.html" method="post">
<button class="btn btn-lg btn-warning mt-3" type="submit">Try again</button>
</form>
<p id="makeItCenter" class="mt-2 mb-3 text-body-secondary">© Trisha Supannopaj</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
the below codes are in success.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Success</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> -->
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<div id="pain" class="col-12 mt-5 pt-5">
<img src="./images/success.JPG">
</div>
<p id="makeItCenter" class="mt-2 mb-3 text-body-secondary">© Trisha Supannopaj</p>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> -->
</body>
</html>
the below codes are in index.html
<!doctype html>
<html lang="en" data-bs-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.112.5">
<title>Signup</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sign-in/">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body class="d-flex align-items-center py-4 bg-body-tertiary">
<div id="pain" class="col-12">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<img src="./images/songcard.jpg" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="95%" height="95%" loading="lazy">
</div>
<main class="form-signin w-100 m-auto">
<form action="/" method="post">
<div id="makeItCenter">
<img class="mb-2 mt-5" src="./images/avata.PNG" alt="" width="40%" height="40%">
</div>
<h1 id="makeItCenter" class="h4 mb-3 fw-normal">Signup Here!</h1>
<div class="form-floating">
<input type="text" class="form-control mb-1" name="firstName" placeholder="First Name" required autofocus>
<input type="text" class="form-control mb-1" name="lastName" placeholder="Last Name" required>
<input type="email" name="email" class="form-control mb-1" placeholder="Email Address" required>
</div>
<button class="btn btn-primary w-100 py-2" type="submit">Sign Me Up!</button>
<p id="makeItCenter" class="mt-2 mb-3 text-body-secondary">© Trisha Supannopaj</p>
</form>
</main>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
