I am trying to make a simple Nodejs/Express app that will show an image of a beach when the SHOW button is clicked and then show an image of a lake when the SHOW button is clicked again.
It works as a simple js app but I am trying out Nodejs and Express for the first time.
The beach and lake photos are stored in the images folder of my app. Here is my code
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
users.js
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
index.pug
extends layout
block content
h1= title
h4= "Click button below to see a photo of a beach"
<form id="show">
<button type="submit" class="btn btn-primary btn-margin">Show</button>
</form>
<div id="img">
</div>
<div class="image1">
<img src="img/beach-pic.jpg" alt="photo of beach" id="img1">
<img src="img/lake-pic.jpg" alt="photo of lake" id="img2">
</div>
javascript/jquery
$(document).ready(function(){
$("form#show").submit(function(){
event.preventDefault();
$("#img1").toggle();
if($("#img1").css('display') == 'inline'){
$("#img2").hide();
} else {
$("#img2").show();
}
});
});
css
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
#img1 {
display: none;
}
#img2 {
display: none;
height: 500px;
width: 650px;
}
