Working with a templating engine, I have created a repository that contains a src folder, a controller folder, and a routes folder. I am having an issue with my CSS not linking to the page, even though it does connect (because IntelliSense auto-populates the route and hovering over it takes me to the CSS file). The image does appear, but as only the icon. Maybe this indicates an issue with the route.
Now for the bigger issue: my calculator isn't working properly. When I press Calculate, I get an error message "Cannot POST /math". I've redone the code 100 times and can't figure out what's wrong. Here are my codes:
module.exports = () => {
const getIndex = (req, res) => {
res.render('index');
};
const getAbout = (req, res) => {
res.render('about');
};
const getFeedback = (req, res) => {
res.render('feedback');
};
const getMath = (req, res) => {
res.render('math');
};
const postMath = (req, res) => {
let num1 = Number(req.body.Num1Input) || 0;
let num2 = Number(req.body.Num2Input) || 0;
let operator = req.body.operator;
let result;
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default:
result = 'Invalid operator';
break;
}
res.render('math', { num1, num2, operator, result });
};
return {
getIndex,
getAbout,
getFeedback,
getMath,
postMath,
};
};
<!DOCTYPE html>
<html>
<head>
<title>Math Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/src/public/css">
<style>
body {
background-image: url("/src/public/wall.jpg");
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100vh;
padding-top: 20px;
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 10px;
width: 100%;
}
.form-row {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.form-group {
margin-right: 10px;
margin-bottom: 10px;
}
.buttons-container {
display: flex;
justify-content: center;
width: 100%;
margin-top: 10px;
}
.buttons-container .btn {
margin-right: 10px;
}
.answer-container {
text-align: center;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/feedback">Feedback</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/math">Math</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1 class="text-center">Simple Math Calculator</h1>
<div class="form-container">
<form class="form-inline" action="/math" method="post">
<div class="form-row">
<div class="form-group">
<input type="text" class="form-control" id="num1" name="Num1Input" value="<%= typeof num1 !== 'undefined' ? num1 : '' %>">
</div>
<div class="form-group mx-sm-3">
<select class="form-control" id="operator" name="operator">
<option value="+">Addition (+)</option>
<option value="-">Subtraction (-)</option>
<option value="*">Multiplication (*)</option>
<option value="/">Division (/)</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="num2" name="Num2Input" value="<%= typeof num2 !== 'undefined' ? num2 : '' %>">
</div>
</div>
<div class="buttons-container">
<button type="submit" class="btn btn-primary">Calculate</button>
<button type="reset" class="btn btn-danger">Clear</button>
</div>
</form>
</div>
<div class="answer-container">
<% if (typeof result !== 'undefined') { %>
<div class="answer"><%= result %></div>
<div class="sentence">The answer to <%= num1 %> <%= operator %> <%= num2 %> is <%= result %></div>
<% } %>
</div>
<img src="/src/public/wall.jpg" alt="wallpic">
</div>
</body>
</html>