I'm now taking Angela's Bootcamp about web development and when I was coding the JavaScript File using the service from Mailchimp, I ran into some error in the picture: enter image description here
I just can't understand what this error means. And I can sure my api key, list ID and the user name are all true. The value of "email_adress" is consistent with the input name "email" in the HTML file. And I have already input the email adress in the page, but after I submitted, it shows this error. I just follow the video so I don't know where is the problem. Here I paste my code.
const express = require("express");
const bodyParser = require("body-parser");
const request = require("request");
const https = require("https");
//require the newly installed modules inside app.js
const app = express();
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static("public"));
app.get("/", function(req, res) {
res.sendFile(__dirname + "/signup.html");
})
app.post("/", function(req, res) {
const firstName = req.body.firstName;
const lastName = req.body.lastName;
const email = req.body.email;
const data = {
members: [{
email_address: email,
status: "subscribed",
merge_fields: {
FNAME: firstName,
LNAME: lastName
}
}]
}
const jsonData = JSON.stringify(data);
const url = "https://us10.api.mailchimp.com/3.0/lists/bdfa0011db/members"
//the number after "us" should be replaced by your last number of api key
//the string afrer "lists" is your list ID
const options = {
method: "POST",
auth: "Aria0325:16fb2bcb22d07b6cdaebcf505be978dd-us10"
};
const request = https.request(url, options, function(response) {
response.on("data", function(data) {
console.log(JSON.parse(data))
})
});
request.write(jsonData);
request.end();
})
app.listen(3000, function() {
console.log("Server is running on port 3000");
})
//api key
//16fb2bcb22d07b6cdaebcf505be978dd-us10
//list id
//bdfa0011db
HTML:
<!doctype html>
<html lang="en">
<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.101.0">
<title>Newsletter Signup</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/sign-in/">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin w-100 m-auto">
<form action="/" method="post">
<img class="mb-4" src="images/SodaCup.png" alt="" width="150" height="150">
<h1 class="h3 mb-3 fw-normal">Sign up to my Newsletter!</h1>
<input type="text" class="form-control top" placeholder="First Name" name="firstName">
<input type="text" class="form-control middle" placeholder="Last Name" name="lastName">
<input type="email" class="form-control bottom" placeholder="Email" name="email">
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign me up!</button>
<p class="mt-5 mb-3 text-muted">© Aria</p>
</form>
</main>
</body>
</html>