DEV Community: Vivian

OSD600 - The Final Release

Vivian — Thu, 09 Dec 2021 10:26:10 +0000

1. Tasks

When the modal form is created and showed up in the web app, the next step in the plan is writing some unit tests to make sure that the form works appropriately. If there is no modification needed, I will be able to submit a PR for the maintainer to review.

2. Modification Process

Because the project has currently used Jest for testing, I also made use of this framework to write unit tests.

I wrote two describe blocks for the Stories component and the Modal Form, then in each describe block, there are more detailed test cases.

1) describe block for stories:

should renders form without crashing
should show the Modal Form when Create your story button is clicked

 it("should show form modal when Create your story btn is clicked", () => {
    render(<Stories initShow={true} />);
    const modalForm = screen.getByRole(/modalForm/i);
    expect(modalForm).toBeInTheDocument();
  });

2) describe block for form:

input fields and selected fields should be rendered correctly

 it("should render text fields correctly", () => {
    render(<Stories initShow={true} />);
    userEvent.type(screen.getByRole("title"), "My story");
    expect(screen.getByRole("title")).toHaveValue("My story");
    ...
  });

  it("should render selected fields correctly", () => {
    render(<Stories initShow={true} />);
    userEvent.selectOptions(screen.getByRole("country"), ["Afghanistan"]);
    expect(
      screen.getByRole("option", { name: "Afghanistan" }).selected
    ).toBeTruthy();
    ...
  });

Clear and Close buttons perform appropriately

it("clicks in clear button should clear all fields", () => {
    render(<Stories initShow={true} />);
    userEvent.type(screen.getByRole("title"), "My story");
    userEvent.type(screen.getByRole("desc"), "This is the body of desc");
    expect(screen.getByRole(/clearBtn/i)).toBeTruthy();
    fireEvent.click(screen.getByRole(/clearBtn/i));
    expect(screen.getByRole("title")).toHaveValue("");
    expect(screen.getByRole("desc")).toHaveValue("");
  });

  it("clicks in close button should close the modal form", () => {
    render(<Stories initShow={true} />);
    expect(screen.getByRole(/closeBtn/i)).toBeTruthy();
    fireEvent.click(screen.getByRole(/closeBtn/i));
  });

should be display(show, hidden) appropriately
etc...

3. Submit PR

When all the test cases passed successfully, I tested the modal form once more time to make sure that the provided data inserted successfully to the database.

Before submitting a PR, I also double check the task list provided by the maintainer to see whether there is any task which was accidentally missed.

The maintainer reviewed the PR very quick, he required some minor changes before merging my PR.

4. Overall

In this contribution, I communicated with the maintainer a lot to seek for help. As I mentioned in the previous post, he is very helpful and enthusiastic. I really appreciate that and definitely give a star for his repo.

Thank you for reading the post!
Happy coding!

OSD600 - The Final Release Progress

Vivian — Thu, 09 Dec 2021 07:02:55 +0000

1. Tasks

In the last blog, I have made a plan about how to add new feature to Awesome-Adoption project. Here are some tasks I need to complete in this week:

Create a modal form for user story which has title, description, location(country + region)
Check that the fields are not empty
Have the option to reset fields
Post valid story to the table stories using react-supabase
Display any errors for the user
Use a spinner when posting the data (recommend FetchingButton.jsx in layout)
Success should close the modal
Be sure to clear the fields after closing the modal

2. Modification Process

First of all, I create a pop up modal using Modal components from bootstrap which will contain Form components in its body. As a result, when the Create your story button is clicked, the modal form will show up for user to input.

After creating the form's input, I use useState() hook to control input's value. As the suggestion of the maintainer, I had made use of react-country-region-selector to display two dropdowns for country and region. To make sure that all fields are not empty when the form is submitted, I added required attribute for all of them.

Source code for the modal form:

 <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Create Your Story</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="formContainer">
            <Form onSubmit={handleSubmit}>
              <Form.Group controlId="form.title">
                <Form.Label className="str-form-label">Title</Form.Label>
                <Form.Control
                  type="text"
                  name="title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  required
                />
              </Form.Group>

              <Form.Group controlId="form.description">
                <Form.Label className="str-form-label">Description</Form.Label>
                <Form.Control
                  as="textarea"
                  value={desc}
                  name="desc"
                  onChange={(e) => setDesc(e.target.value)}
                  rows={5}
                  required
                />
              </Form.Group>

              <Form.Group controlId="form.country">
                <Form.Label className="str-form-label">Country</Form.Label>
                <CountryDropdown
                  className="country"
                  name="country"
                  value={country}
                  onChange={(val) => setCountry(val)}
                  required
                />
              </Form.Group>

              <Form.Group controlId="form.region">
                <Form.Label className="str-form-label">Region</Form.Label>
                <RegionDropdown
                  className="region"
                  name="region"
                  blankOptionLabel="No Country Selected"
                  country={country}
                  value={region}
                  onChange={(val) => setRegion(val)}
                  required
                />
              </Form.Group>
              <br />
              <hr />
              <div className="btnContainer">
                <button className="mBtn clearBtn" onClick={clearInput}>
                  Clear
                </button>
                <button className="mBtn closeBtn" onClick={handleClose}>
                  Close
                </button>
                <FetchingButton
                  fetching={fetching}
                  action="Save"
                  type="submit"
                  className="mBtn saveBtn"
                />
              </div>
            </Form>
          </div>
        </Modal.Body>
        {err && (
          <div className="alert alert-danger" role="alert">
            {err}
          </div>
        )}
      </Modal>

Next, I need to add corresponding functions to each button in the form.

Clear button will clear all fields:

<button className="mBtn clearBtn" onClick={clearInput}> Clear </button>

 const clearInput = () => {
    setTitle("");
    setDesc("");
    setCountry("");
    setRegion("");
    setErr("");
  };

Close button will set value of show to false to close the modal form:

<button className="mBtn closeBtn" onClick={handleClose}>Close</button>
const handleClose = () => setShow(false);

Save button will submit the form, if all inputs are valid, the story will be inserted to database using react-supabase otherwise an error will be displayed.

const handleSubmit = async (e) => {
    e.preventDefault();
    const { error } = await execute({
      user_id: user.id,
      title: title,
      description: desc,
      region: region,
      country: country,
    });
    if (!error) {
      // insert successfully
      clearInput();
      handleClose();
    } else {
      // display error
      setErr(error.message);
    }
  };

3. New experience

This is my very first time working with react-supabase, at first I got into some troubles about inserting inputs to the database.
After a couple of hours searching the solution in hopelessness, I decided to communicate with the maintainer to get some suggestions. He is very friendly and willing to give a hand, he helps me to find out the solution quickly. It turned out that he mistook to capitalize one field in the database. Then he gave me some solutions to simplify my work. I really appreciate that, truly give a big thank to him. Open source is extremely great!

Thank you for reading the post!
Happy coding!

OSD600 - Preparing For The Final Release

Vivian — Sun, 28 Nov 2021 23:18:27 +0000

1. Introduction

In the final release, I decided to work on an external project named Awesome-Adoption which is a web application helping users find pets and adopt around their area.

2. The issue

I am going to add new feature to the app, here are some tasks I need to complete:

Coding form and validating user's input
- Create a modal form for user story which has title, description, location
- Check that the fields are not empty
- Have the option to reset fields
- Post valid story to the table stories using react-supabase
- Display any errors for the user
- Use a spinner when posting the data (recommend FetchingButton.jsx in layout)
- Success should close the modal
- Be sure to clear the fields after closing the modal
Write some tests

3. Planning

To complete the tasks successfully, I am going to spend the next week to finish coding the form and validating user's input since the sub-tasks are interrelated.

Then in the final week, when the form and validation code are done, the tests should be written to make sure that there are no unexpected behaviors.

OSD600 - Publishing my-ssg To NPM

Vivian — Sat, 27 Nov 2021 06:39:02 +0000

1. Lab10 requirement

After a long time updating my-sgg with new features, this time is an appropriate time to provide a release that allows users to install and use the tool easier.

Since the tool is written in NodeJS, I will make use of npm to share the tool.

2. Publishing process

In order to publish a package to npm, I need to create an npm account first. If not, an error code 404 will be appeared.

Next, I verified the email to authenticate the account. After having an authenticated account, I run npm login command then provided username, password and email to sign in the npm account.

When I logged in successfully, a message will be displayed to announce.

Finally, I run npm publish command to publish the package to npm.

After making sure that the package is available in npm I asked my friend to test the tool. Instead of telling her how to install and use the package, I recommended her to read through the README.md file first.
With the instruction on README.md she succeeded in installing the package. On her machine, she tested all the provided features and they all worked as expected.

3. Overall

This is an interesting lab, I have a chance to learn new knowledge about npm package since I never published a package before. Also, this is a good way to share my work with others.

All in all, thank you for reading the post.

Happy coding!

OSD600 - Doing Code Reviews

Vivian — Sat, 20 Nov 2021 01:52:33 +0000

1. Introduction

For reviewing, I did code reviews for 3 other students pull requests on the IPC144 repo. Since I also work on auditing and fixing markdown file, when I check their works I might find out what I have missed to fix for my task.

2. The first issue

The first issue I found were pretty minor. It is almost about some address values were forgot to be wrapped in backticks. Other issues in the repos were addressed well by the contributors or found by other reviewers. PR1 PR2

3. The second issue

The second issue is the redundancy of whitespace in source code. This makes the source code's style become inconsistent. Sometimes, if there is a redundant whitespace before bullet point it will produce different result than we expected. PR3

4. Overall

The review process was very enjoyable. Many people work on the same task will make it be perfect and error-free.

OSD600 - Adding New Feature To Weather App

Vivian — Sat, 20 Nov 2021 00:59:25 +0000

1. The issue

In last contribution for Hacktoberfest, I created a Weather Forecast App. However, users can watch the weather information of one city at a time that is a little inconvenient. I want to update the app so it will have a list of searched locations with some information in another page.

2. Modification process

Here are modifications I did to update the app:

Refactor source code by reconstructing the architecture
Putting all source code in the main class is not a good practice so I decided to split the code into smaller models.
- AppController gets data from API and return the JSON object to other models.
- Main starts the app, prepares views.
- Weather Data stores information of a weather data object
- City Adapter describes how to display each City's info to ListView
- HistoryListAcitivity displays info and listens for event on each ListView item.
Add new List button to the main screen which links to the History List Activity and passes an ArrayList of city's name to this activity.
Design view for History List Activity

View more details in PR

3. Throwback

During the modification process, the hardest part will be splitting the source code. I faced a problem with multi-thread in Java. The data was set to the view before it was returned from API. I tried to apply some knowledge about Thread learning from JAC444 but it did not work well.

As such, I started seeking help from an Android Dev Senior. He is very helpful and enthusiastic. After communicating with him, I found out the solution and got a lot of useful tips for working with Android App.

All in all, thank you so much for reading the post.

Happy coding!

OSD600 - Auditing And Fixing Markdown File

Vivian — Sat, 20 Nov 2021 00:04:40 +0000

1. Issue

The IPC144 notes are written in 30 Markdown files. These files have been automatically translated to Markdown so it might contain typos and some misuse syntaxes. My task is to find and fix those issues to make the Markdown file become consistent and readable.

2. Modification Process

After getting assigned to string-library.md file which I want to work on, I forked, cloned IPC144's repo to my local machine and read through the CONTRIBUTING.md to set up and run the project locally.

Then I created a new branch and started finding and fixing existing errors. Here are some modifications I made:

Fix typo
Replace block quotes with admonitions

Thanks to Docusaurus which supports admonitions, I can make use of this feature to display note for a better readability.

:::note

We have allocated 62 characters to accommodate 30+30 characters plus the blank space separator and the null terminator byte.

:::

The above code will be displayed as:

Remove extra white spaces in code blocks
Fix frontmatter

I update the frontmatter with more information:

---
id: string-library
title: "String Library"
sidebar_position: 2
slug: /refinements/string-library
description: "String library is a standard library to process character strings"
---

Add inter-site links to other page

Linking to another page which has related information helps learners to review the knowledge so I decided to add some links to the file:

The standard library that ships with [C compilers](/A-Introduction/compilers#the-c-compiler "C compiler") and processes [character strings](/F-Refinements/character-strings "Character Strings") is called the string library.

Add bold emphasis for some words

3. Getting reviewed

After summitting a PR, Leyang Yu suggested me to replace the headings for String Length, Copy, Compare, and Concatenate with the third level heading. It's totally appropriate so I applied it and here is the final result:

The process was interesting and enjoyable!

OSD600 - Adding Continuous Integration (CI)

Vivian — Fri, 19 Nov 2021 21:51:38 +0000

1. Lab9 requirement

In this lab, I am required to create a GitHub Actions Workflow to my repo. By doing so, the tests I created in the previous lab will be triggered and run whenever a PR is submitted or a commit is pushed.

In addition, I need to add tests to Dustin's project.

2. Setup process

To set up the GitHub workflow, I came to the Action tab and clicked set up this workflow button in the Node.js section.

After that, a new file called node.js.yml is created, I modified some parts to make the build suit my purpose. And its content is:

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm test

Next, I created some e2e tests. Then, submitting a PR to make sure that it did trigger the CI Workflow. After a couple of times modifying the source code. My tests were passed successfully. Successful GitHub Action Run

3. Adding Tests To Another Project

After forking and cloning Dustin's repo to my local machine, I read through the CONTRIBUTING.md to set up and run the tool to make sure it work correctly.

I saw the init() in the readPath module did not have any test so I created a new branch and started working on it.

After all, here are 4 tests I came up with:

Constructor should set the value of path equals to the link passed from arg.
readFile() should return 1 if file path is invalid .
init() should set ext and result values correctly for text file.
init() should set ext and result values correctly for markdown file.

When newly created tests run successfully in the local machine, I submitted a PR to the repo and make sure it passed the repo's CI workflow.

4. Overall

It's interesting to work and learn about CI. I definitely make use of this tool to my future projects.

All in all, thank you for reading the post.

Happy coding!

OSD600 - Adding Testing Tool

Vivian — Sat, 13 Nov 2021 03:32:26 +0000

1. Lab8 requirement

Testing is an important part of developer's community, it helps programmers to test their code, detect unexpected bugs, etc.
In this lab, I will set up a testing framework called Jest to test my-ssg.

Jest is a JavaScript testing framework, it helps JS developers to ensure the correctness of their source code. Jest pays attention to simplicity and that is the reason I make use of it in my project.

2. Modification process

Install Jest:

npm install --save-dev jest

Add script for testing so you can run npm test to run all tests in the command line:

{
  "scripts": {
    "test": "jest --verbose"
  }
}

Write tests:

My-ssg is divided into 6 modules but in this lab I just created testing for 3 modules namely generateHTML, readTextFile and readJson, the rest will be updated later on.

I created generateHTML.test.js, readTextFile.test.js, readJson files which contains all test cases for 3 modules I chose.

In generateHTML.test.js, I came up with some ideas to test the generateHTML(title, body, language, stylesheet, htmlContainer):

Function should create a title.html file inside the specified folder or ./dist by default.
Function will throw an error if the title is an empty string or is not passed to the function
Function will use default value if language, stylesheet and htmlContainer are not passed to the function
Function accepts empty value for language and stylesheet

Before turning these ideas into code, I need to require the function from generateHTML module:

const { generateHTML } = require("./generateHTML");

I will create test cases inside a describe block, I declare some const variables which can be reuse in some test cases (best practice is declare them locally in each test case):

describe("test generateHTML(title, body, language, stylesheet, htmlContainer)", () => {
  const title = "index";
  const body = "Hello World!";
  const lang = "en-CA";
  const stylesheet = "https://cdn.jsdelivr.net/npm/water.css@2/out/water.css";
  const htmlContainer = "./dist";
  const expectedPath = "./dist/index.html";

  // test cases...
}

And here is how the test case look like:

test("function should create new HTML file named ${title}.html inside the ${htmlContainer} folder", () => {
    expect(
      generateHTML(title, body, lang, stylesheet, htmlContainer)
    ).toStrictEqual(expectedPath);
  });


test("function should throw an error when title is an empty string", () => {
    try {
      generateHTML("");
    } catch (err) {
      expect(err).toEqual(
        new Error(chalk.bold.red("***title cannot be empty!***"))
      );
    }
  });

The logic to test readTextFile() and readJson() are very similar, I check how the function behaves when the arg is empty or it is not passed to the function.

To pass all created test cases, I need to make some small modifications to the original source code.

View my commit: 6313fab

3. Overall

Writing test is a painful process, you may never know how many more tests you need to write for a snippet code to make sure that you get all problems it may produce. However, writing good tests helps improve the quality of the source code so this skill is necessary for any programmer to achieve.

All in all, thank you for reading the post.

Happy coding!

OSD600 - Adding Static Analysis Tools

Vivian — Sat, 06 Nov 2021 02:18:23 +0000

1. Lab7 requirement

In this lab, I will make use of Static Analysis Tools which help me maintain the quality of the source code by formatting the code, spotting and warning suspicious errors. Additionally, when other programmers contribute to this project, they can use these tools to ensure a consistent coding style.

2. Adding process

Add Prettier Formatter

Prettier is an opinionated code formatter which will automatically format the source code. As a result, programmers do not have to waste their time to format each code snippet. Moreover, prettier keeps a consistent coding style when there are a lot of contributors who have different coding styles working in the same project.

Install prettier

npm install --save-dev --save-exact prettier

Create configuration file

echo {}> .prettierrc.json

Create .prettierignore which bases on .gitignore and .eslintignore

Create scripts for prettier
In package.json file, add these two lines inside scripts.

"prettier": "npx prettier --write .",
"prettier-check": "npx prettier --check ."

By doing so, I can run npm run prettier to format all files with Prettier and npm run prettier-check to check whether all files are formatted with Prettier.

Initially, I tended to write a statement in a single after using prettier, a statement has been stretched across two more lines.

Add ESlint Linter

ESLint helps analyze the code to quickly find problems and it is able to fix some errors automatically.

Install ESLint

npm install eslint --save-dev

Create configuration file

npx eslint --init

After completing the initiation .eslintrc.js might look some how like below:

module.exports = {
  env: {
    browser: true,
    node: true, // without this, process is undefined
    commonjs: true,
    es2021: true,
  },
  extends: "eslint:recommended",
  parserOptions: {
    ecmaVersion: 13,
  },
  rules: {
    quotes: ["error", "double"], // using double quotes
    semi: ["error", "always"],
  },
};

Create .eslintignore which contains files/folders which don't need to be checked

Create scripts for ESLint
In package.json file, add these two lines inside scripts.

"eslint": "eslint .",
"eslint-fix": "eslint --fix ."

By doing so, I can run npm run eslint to find errors in all files with Eslint and npm run eslint-fix to fix fixable errors.

After using ESLint, I got some errors about not using double quote. To solve the problem, I had added a comment above the line containing error to disable the rule.

 // eslint-disable-next-line quotes
head: '<meta name="viewport" content="width=device-width, initial-scale=1">',

Editor/IDE Integration

To integrate formatter and linter into the editor, I created .vscode folder which has setting.json file to provide the default formatter and extentions.json file to share the extensions.

Add Pre-commit Hook

There are some options available for me to choose, my final pick is using lint-staged.

Lint-staged will require you to have Prettier installed and put into devDependencies before installing it.

Install lint-staged

npx mrm@2 lint-staged

This command will install husky, lint-staged and add proper configuration to package.json file. Then, all supported files will be checked and formatted before I commit new change.

It will display error if there exists one.

View my commit at 8dfbe63b

3. Overall

Static analysis tools help programmers save a lot of time to format and check for vulnerabilities while validating the code. They plays a critical role in keeping code style consistency in large projects.

All in all, thank you for reading the post.

Happy coding!

OSD600 - My Fourth Hacktoberfest Contribution

Vivian — Sat, 30 Oct 2021 08:32:27 +0000

1. Introduction

This semester, I also attend to the Mobile App Development - Android (MAP524) which is about developing mobile applications for the Android platform. I feel quite interested in designing a mobile app so I searched for all android projects with Hacktoberfest label in Git Hub. Luckily, I found one named Androapps, this project contains a lot of Android applications which were contributed by many developers. And I decided to engage in.

2. The issue

The issue I was assigned is to create a Weather forecast application. The maintainer is quite easy-going, he was not be strict about how the app should look like but gave me the freedom to be creative.

3. The solution

Here are steps I did to create my application:

Find a weather API
- After a quick research, I decided to use Open Weather Map which returns JSON objects. For more information about how to use this, please read the guide.
Design the UI
- Since I just learned about some layouts and basic views in MAP524 so I am going to design a simple UI with an EditText to get user input, a Button to submit the input, some TextView to display information and a ImageView for app background.
- The UI design:
Implement Java code

1) Using Volley library to request data from the API.

2) Get JSON objects/data from response:

 // gets JSON objects
JSONObject mainWeather = response.getJSONObject("main");
JSONObject weather = response.getJSONArray("weather").getJSONObject(0);
JSONObject windInfo = response.getJSONObject("wind");
JSONObject sunInfo = response.getJSONObject("sys");
int humidity = mainWeather.getInt("humidity");
double windSpeed = windInfo.getDouble("speed");

3) Calculate data:

// converts unix time stamp to date
Date dateInfo = new Date(response.getLong("dt")*1000);
Date sunRiseD = new Date(sunInfo.getLong("sunrise") * 1000);
Date sunSetD = new Date(sunInfo.getLong("sunset") * 1000);
int timezone = response.getInt("timezone");

 // formats output and changes timezone
@SuppressLint("SimpleDateFormat") SimpleDateFormat dateFormat = new SimpleDateFormat("EEEE, dd MMM yyyy");         
dateFormat.setTimeZone(TimeZone.getTimeZone(ZoneOffset.ofTotalSeconds(timezone)));

@SuppressLint("SimpleDateFormat") SimpleDateFormat timeFormat = new SimpleDateFormat("HH:mm a");           
timeFormat.setTimeZone(TimeZone.getTimeZone(ZoneOffset.ofTotalSeconds(timezone)));

 int tempC = (int) (Math.round(mainWeather.getDouble("temp") - 273.15));
 int feelTemp = (int)(Math.round(mainWeather.getDouble("feels_like") - 273.15));

4) Display data appropriately to the UI:

currentDate.setText(dateStr);
currentTime.setText(timeStr);
temperature.setText(tempC + "°");
location.setText(city.toUpperCase());          
displayWeather.setText(weather.getString("main"));
feels.setText("Feels like: " + feelTemp + "°C");
humid.setText(humidity + "%");
wind.setText(windSpeed + "m/s");
sunRise.setText(sunRiseStr);
sunSet.setText(sunSetStr);

5) Function to set ImageView and text color based on time

void setBackground(int hour, ImageView imgV){...}

View the app

The maintainer reviewed the PR very quick, he merged my PR without any requirements.

If you want to get more information about the app, please take a look to this PR.

4. Overall

I gained a lot of new information after completing this issue. It was painful and enjoyable at the same time.
Thank you for reading the post.

Happy coding!

OSD600 - My Third Hacktoberfest Contribution

Vivian — Sat, 30 Oct 2021 06:48:11 +0000

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 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 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:

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

The result:

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:

The maintainer reviewed the PR very quick, he merged my PR 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!