Question

I need to have someone design a website using

• Code one JavaScript server application using Node.js for routing, Express.jsfor framework and Handlebars.js for templating
• Necessary npm modules are: express, express-handlebars, path and body-parser

- it willl have a drop down box with 5 names of titles of a picture.

- highlite 1 name in dropdown box and there is a select button to make web site go to that picture stored on server..

this is my third question on this site and i have yet to receive any help. so I really need help on this now because i am so far behind

Answer 1

/* So we will use express to design you website, follow step by step instructions of given below steps

So first generate app using "express --view=hbs appname" command( i hope you have every related package installed), now inside app run "npm i" to install related packages .now run npm start (You will see server running at localhost:3000

Now open views/index.hbs and copy paste following code

*/

index.hbs

<form>

<select id="img" value="">

    <option value="">Select...</option>

    <option value="/first">Paradise</option>

    <option value="/second">Coldplay</option>

    <option value="/third">Paradise1</option>

    <option value="/fourth">Coldplay2</option>

    <option value="/fifth">Coldplay2</option>

</select>

<button type="button" onclick="myfunc()">Submit</button>

</form>

<script>

function myfunc(){

var j=document.getElementById("img").value;

window.location=j;

}

</script>

/*Now in app.js add following line */

app.use(express.static('public'));

/* In the routes folder open index.js */

index.js

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index');

});

router.get('/first', function(req, res, next) {

  res.render('images',{path:'pardeep.png'});

});

router.get('/second', function(req, res, next) {

  res.render('images',{path:'pardeep.png'});

});

router.get('/third', function(req, res, next) {

  res.render('images',{path:'pardeep.png'});

});

router.get('/fourth', function(req, res, next) {

  res.render('images',{path:'pardeep.png'});

});

router.get('/fifth', function(req, res, next) {

  res.render('images',{path:'pardeep.png'});

});

module.exports = router;

/* Now create file inside views folder as images.hbs */

images.hbs

<img src="/images/{{path}}"/>

/*You can change url of images, if you select any field you will se you will be taken to specific page */

/* Feel free to ask any doubt in commenst */

C INeed To Have Someone Design Express X localhost:3000 Select Select Paradise Coldplay 23:59 ^ D ) ENG 05-10-2019 Type here to search e3 O