1Ring2Find LOTR Search
Languages used
- JavaScript
- HTML
- CSS
Tools used
- Express.js
- Node.js
- The One API
- Bootstrap
Overview
An app that pulls information on the Lord of the Rings series. The Random LOTR Movie Quote NPM Package generates a random quote and The One API provides data on the movies, books, and characters.
Goal
The goal of this project was to create a website using Express.js that fetches information from a Node Package and from a Web API.
Plan
- Step 1: Marathon all Lord of the Rings movies.
- Step 2: Find data source (API and Node package)
- Step 3: Use EJS for page templating in Express.js.
- Step 4: Write fetch requests, add images, create layout with Bootstrap.
Build
In the snippet below, I create a /quote endpoint for fetching a random quote from an existing npm package. Then I render a quote view using the response data and corresponding character image.
// https://www.npmjs.com/package/random-lotr-movie-quote
import randomQuote from 'random-lotr-movie-quote';
// Random Quote
app.get('/quote', async (req, res) => {
let quote = randomQuote();
let image = 'images/ring.jpg'
// If quoted character is in the list of char pictures, add picture
if (charSet.has(quote.char.toLowerCase())) {
image = `../images/char/${quote.char.toLowerCase()}-small.jpg`;
}
res.render('quote', {
'dialog': quote.dialog,
'char': quote.char,
'movie': quote.movie,
'image': image
});
});Here is the quote.ejs view file being rendered, which uses externally defined partial views header, footer, and nav.
<%- include('partials/header.ejs') %>
<%- include('partials/nav.ejs', { active: 'Random Quote'}) %>
<div class="container text-center">
<h1>Random Quote</h1>
<h5>A random quote from Lord of the Rings.</h3>
<img src="<%= image %>" class="img-thumbnail">
<figure class="text-center">
<blockquote class="blockquote">
<p><%= dialog %></p>
</blockquote>
<figcaption class="blockquote-footer">
<%= char %> in <cite title="Source Title"><%= movie %></cite>
</figcaption>
</figure>
</div>
<%- include('partials/footer.ejs') %>Deployment
This web app is currently deployed on Heroku here.