OSD600 - My Third Hacktoberfest Contribution
Tags: hacktoberfest, opensource
Published: 2021-10-30 06:48:11

## 1. Introduction
This time, I am working on a project which pays attention to make API for food ordering system. The project used JavaScript, CSS and Embedded JavaScript(EJS).

EJS is a templating language allowing users to generate HTML markup with plain JavaScript. This language is totally new to me so I want to give myself a chance to learn about it.

## 2. The issue
At first, I was assigned to the [issue](https://github.com/MSTC-DA-IICT/REST-API-Node/issues/41) where I need to check the user authentication before allowing them to create a comment. However when I started working on it, I realized that this issue is related to an unsolved issue. As a result, I decided to communicate with the maintainer and move to another issue in the project.
 
My new [issue](https://github.com/MSTC-DA-IICT/REST-API-Node/issues/59) is about creating a menu page, its `url` will receive a query string and display corresponding pictures based on the provided query string.

## 3. The solution
Here are some steps I made to solve the issue:

* Create a slider at the top of the page showing the most popular food or new food.
 - Create some `<div><img></div>` tags to contain pictures
 - Create css styling
 - Create `slider.js` to control the slider
```
// slider.js
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace("active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 4000); 
}
```
The result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05r7jt4qk7pcgh6akm9v.png)
 

* Create food items with some information such as name, price, etc.
 - Make use of `grid` to create food items
 - Create css styling

The result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcbfisv78xyn6m8fbzlo.png)
 
* Update `href` liking to the menu page, read the query string and pass it to the template `menu.ejs`
 - Update `href` in menu section so they will link to the menu page and also pass a proper query string
```
<li class="mb-2"><a href="/menu?type=starters">Starters</a></li>
<li class="mb-2"><a href="/menu?type=burgers">Burgers</a></li>
<li class="mb-2"><a href="/menu?type=pastas">Pastas</a></li>
<li class="mb-2"><a href="/menu?type=wraps">Wraps</a></li>
<li class="mb-2"><a href="/menu?type=desserts">Desserts</a></li>
```
 - Get the query string and pass it to the template `menu.ejs`
```
router.get('/menu', verifyUser,  function(req, res, next) {
  let loggedIn = false;
  if (req.cookies && req.cookies.user && req.cookies.login) {
    loggedIn = isUserValid(req.cookies.user, req.cookies.login);
  } 
  let type  = req.query.type;
  res.render('menu', { title: 'Express', type ,loggedIn});

});
```
* Retrieve data and check data in the template `menu.ejs`

To be honest, this is the most tricky part since I never expose to EJS before. It takes me about 10 minutes to find documentation of this language and read through some code examples to understand how its syntax means. 

I used some `if` statements to display corresponding heading to the string query.
**Note**: With the same code but I got stuck at this step about 10 mins for the error **"type" is undefined** and when I found out the solution, just don't know what to say :x . **JUST RESTART THE SERVER!!**

```
  <% if (type == 'starters') { %>
   <div class="title"><h1>Starters</h1></div>
  <%} %>

  <% if (type == 'burgers') { %>
   <div class="title"><h1>Burgers</h1></div>
  <%} %>

  <% if (type == 'pastas') { %>
   <div class="title"><h1>Pastas</h1></div>
  <%} %>

  <% if (type == 'wraps') { %>
   <div class="title"><h1>Wraps</h1></div>
  <%} %>

  <% if (type == 'desserts') { %>
   <div class="title"><h1>Desserts</h1></div>
  <%} %>   
```

Then, I use the value of the string query to get the corresponding path to the correct picture.

```
<div class="grid-item">
 <img src="/images/<%= type%>2.jpg"> 
 ...
</div>
```
The result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcklujqoacipyufy8k7q.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z85uo56pi67pfvg6mpf8.png)

The maintainer reviewed the PR very quick, he merged my [PR](https://github.com/MSTC-DA-IICT/REST-API-Node/pull/60) without any requirements.

## 4. Overall
In my opinion, EJS's syntax will make you confused at first but working with it is still fun. 
Thank you for reading the post.

Happy coding!