Dynomic Route add new page (✪ω✪) ☺️

When you see this Message . is mean you route miss …or your handlebars of code did mistake .

Step 1 . Create Handlebars file for “ /HAHA/1 “ of html

e.g : Open your VScode , create file under the "views "this folder .
give File name : new.handlbars
and than Edit some word inside for moment to prove route is ok . 

Step 2 . Set Route to new.handlebars .

Because have different Path , must add new  app.get () for ” new.handlebars “  and new render () , 
e.g : 
app.get ( 'HAHA/1' , (req,res) => {  re.render ( ' new ' ) } 

Solve read fail html , that about apper ”Cannot Get /HAHA/1 ~~~(✪ω✪)

Advance : Build New Page insert pictures

step 1 : Set Pictures of Html code

e.g : add this html framework to new.handlebars

<!-- ./views/new.handlebars -->
<div class="container py-5">
  <div class="text-center">
    <h1 class="mb-4">Barry of Legend </h1>
    <img class="rounded mb-4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlaakVsZff9jbghY53cb-K82YftistX6XH-AaINcMQZFn7Lx1Q&s" alt="Card image cap"
      style="max-height: 300px;">
  </div>
  <div class="row">
    <div class="col-12 col-md-10 col-lg-8 mx-auto">
      <p class="text-secondary mb-1">
        <strong>birthday:</strong>
        11/18 
      </p>

      <p>
        Barry of life have a Incredible !!! 
      </p>
    </div>
  </div>
</div>

step 2 : Show network path to browser ” localhost:3000 /HAHA/1 “ ,

Your app.js of app.get （ ）with render （ ）, it route to handlebats ok .

As like this pictures.

Step 3 : Set easy manage of Variables and Array.object

/// create Variables for Array // 
const barrylegend = {
id: 1,
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlaakVsZff9jbghY53cb-K82YftistX6XH-AaINcMQZFn7Lx1Q&s',
title: "Barry of legend",
birthday: "11/18",
discript: "barry of life have a Incredble",
}

Step 4 . Set propert and Route

<!-- ./views/new.handlebars -->
<div class="container py-5">
  <div class="text-center">
    <h1 class="mb-4">{{show.title}}</h1>
    <img class="rounded mb-4" src="{{show.image}}"
 alt="Card image cap"
      style="max-height: 300px;">
  </div>
  <div class="row">
    <div class="col-12 col-md-10 col-lg-8 mx-auto">
      <p class="text-secondary mb-1">
        <strong>birthday:</strong>
       {{show.birthday}}
      </p>

      <p>
        {{show.discript}}
      </p>
    </div>
  </div>
</div>

Stpe 4–1 . Route = render {}

Set Render let handlebars of object ：show .  could be find out  File app.js ，pointing inside  const=barrylegend of Array . 
pointing to Variables on App.js  // const = barrylegend
e.g :  res.render('new', { show: barrylegend })

Many movieList on your project ….. ⬇️

ID 1 — — 1000 movie list ,, likes Netflix your work never finshed…..Savage .

Dynamic Route to your [ file of Pictures.json ].

What is pictures.josn ? it’s your movie list , follow Read Json file to Express

https://medium.com/@placid_olivine_mink_632/read-json-file-to-express-2899e08ab770