Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
Vue 3 Projects

Create a Currency Converter with Vue 3 and JavaScript

yellow labrador puppies in green plastic container

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a currency converter with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create currency-converter

and select all the default options to create the project.

Create the Currency Converter

To create the currency converter, we write:

<template>
  <form @submit.prevent="convert">
    <div>
      <label>value</label>
      <input v-model.number="value" />
    </div>
    <div>
      <label>from currency</label>
      <select v-model="fromCurrency">
        <option v-for="c of fromCurrencies" :key="c">{{ c }}</option>
      </select>
    </div>
    <div>
      <label>to currency</label>
      <select v-model="toCurrency">
        <option v-for="c of toCurrencies" :key="c">{{ c }}</option>
      </select>
    </div>
    <button type="submit">convert</button>
  </form>
  <div>
    {{ value }} {{ fromCurrency }} is {{ result.toFixed(2) }} {{ toCurrency }}
  </div>
</template>

<script>
const currencies = ["EUR", "USD", "CAD"];
export default {
  name: "App",
  data() {
    return {
      value: 0,
      fromCurrency: "",
      toCurrency: "",
      currencies,
      result: 0,
    };
  },
  computed: {
    fromCurrencies() {
      const { toCurrency, currencies } = this;
      return currencies.filter((c) => c !== toCurrency);
    },
    toCurrencies() {
      const { fromCurrency, currencies } = this;
      return currencies.filter((c) => c !== fromCurrency);
    },
    formValid() {
      const { value, fromCurrency, toCurrency } = this;
      return +value >= 0 && fromCurrency && toCurrency;
    },
  },
  methods: {
    async convert() {
      const { fromCurrency, toCurrency, value, formValid } = this;
      if (!formValid) {
        return;
      }
      const res = await fetch(
        `https://api.exchangeratesapi.io/latest?base=${fromCurrency}`
      );
      const { rates } = await res.json();
      this.result = value * rates[toCurrency];
    },
  },
};
</script>

We have a form that has an input to enter the value of the currency to convert form.

The from currency dropdown lets us choose the currency to convert from.

And the to currency dropdown lets us choose the currency to convert to.

We bind all the values from the input and select dropdowns to reactive properties with v-model .

The @submit directive listens to the submit event which is emitted when we click convert.

The prevent modifier lets us do client-side form submission.

In the script tag, we have the currencies array with the currencies list.

The data method returns the reactive properties we use.

The fromCurrencies computed property has the list of currencies we can convert from.

We filter out the one that we chose in the to currency dropdown.

The toCurrencies dropdown is similarly used for the to currency dropdown and filters out the choice chosen in the from currency dropdown.

The formValid computed property checks if value is bigger than or equal to 0.

The convert method gets the exchange rate from the free Foreign exchange rates API.

The base query parameter sets the currency to convert from.

We get the rates with fetch and use that to compute the result.

Conclusion

We can create a currency converter easily with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a Recipe App with Vue 3 and JavaScript

white and brown long coated small dog lying on white textile

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a recipe app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create recipe-app

and select all the default options to create the project.

We also need the uuid package to let us generate unique IDs for our to-do items.

To do this, we run:

npm i uuid

Create the Recipe App

To create the recipe app, we write:

<template>
  <form @submit.prevent="addRecipe">
    <div>
      <label>name</label>
      <input v-model="recipe.name" />
    </div>
    <div>
      <label>ingredients</label>
      <textarea v-model="recipe.ingredients"></textarea>
    </div>
    <div>
      <label>steps</label>
      <textarea v-model="recipe.steps"></textarea>
    </div>
    <button type="submit">add recipe</button>
  </form>
  <div v-for="(r, index) of recipes" :key="r.id">
    <h1>{{ r.name }}</h1>
    <h2>ingredients</h2>
    <div class="content">{{ r.ingredients }}</div>
    <h2>steps</h2>
    <div class="content">{{ r.steps }}</div>
    <button type="button" @click="deleteRecipe(index)">delete</button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "App",
  data() {
    return {
      recipe: {
        name: "",
        ingredients: "",
        steps: "",
      },
      recipes: [],
    };
  },
  computed: {
    formValid() {
      const { name, ingredients, steps } = this.recipe;
      return name && ingredients && steps;
    },
  },
  methods: {
    addRecipe() {
      if (!this.formValid) {
        return;
      }
      this.recipes.push({
        id: uuidv4(),
        ...this.recipe,
      });
    },
    deleteRecipe(index) {
      this.recipes.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.content {
  white-space: pre-wrap;
}
</style>

In the template, we have a form that has the name, ingredients, and steps fields.

We bind the values inputted into the input or textarea with v-model to reactive properties.

The @submit directive lets us submit the form when the add recipe button is clicked.

prevent lets us do client-side form submission instead of server-side.

Below that, we have divs that renders the recipes added with v-for .

We’ve to set the key prop to a unique ID so that Vue 3 can identify the rendered items.

Inside the div, we display the content added, and a button that calls deleteRecipe when we click it to delete an entry.

In the script tag, we have the data method that returns the reactive properties we use.

The formValid reactive property checks whether each field is filled in.

The addRecipe method checks the formValid reactive property to see if the form is valid.

Then we call push if it is to add an entry to the recipes array.

The uuidv4 function generates a unique ID for the entry.

The deleteRecipe method calls splice to remove the entry with the given index.

In the style tag, we have white-space: pre-wrap; applied to preserve whitespace in the divs with the given class.

Conclusion

We can create a recipe app easily with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a PIN Pad with Vue 3 and JavaScript

closeup photo of yellow Labrador retriever puppy

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a PIN pad with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create pin-pad

and select all the default options to create the project.

Create the PIN Pad

To create the PIN pad, we write:

<template>
  <div>{{ pin }}</div>
  <div>
    <div>
      <button @click="pin += '1'">1</button>
      <button @click="pin += '2'">2</button>
      <button @click="pin += '3'">3</button>
    </div>
    <div>
      <button @click="pin += '4'">4</button>
      <button @click="pin += '5'">5</button>
      <button @click="pin += '6'">6</button>
    </div>
    <div>
      <button @click="pin += '7'">7</button>
      <button @click="pin += '8'">8</button>
      <button @click="pin += '9'">9</button>
    </div>
    <div>
      <button @click="pin = pin.slice(0, pin.length - 1)">&lt;</button>
      <button @click="pin += '0'">0</button>
      <button @click="pin = ''">C</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      pin: "",
    };
  },
};
</script>

We display the pin at the top of the template.

Then we add buttons into the div.

In the number keys, we have the @click directive to append the corresponding characters to pin .

The backspace (<) button calls slice to return the pin string without the last character and assign it to pin .

And the C key clears the pin by assigning it to an empty string.

Now when we click on the keys, we see the PIN update.

Conclusion

We can create our own PIN pad easily with Vue 3 and JavaScript.

Categories
React

How to Add a Rich Text Editor into Your React App

yellow Labrador retriever lying on sofa

You can easily add basic rich text editor capabilities to your web app. The capabilities of WordPad, at least, can be added with some simple changes to your app. CKEditor is one of the most popular rich text editors that are incorporated into web apps. There are versions for all the most popular web frameworks, including React.

In this piece, we’ll make an app that lets users enter their document in a rich text editor and generate a PDF from it. We will use Express for back-end and React for front-end.

PDF stands for Portable Document Format. It’s a popular format for exchanging documents. Therefore, a lot of apps feature the ability to create PDFs from other kinds of documents. Creating PDFs is easy in Node.js apps with third party libraries. We can easily make an app from it ourselves.

Back-End

We will start with the back-end. To start, we create a project folder with the backend folder inside. Then in the backend folder run npx express-generator to create the Express app. Then run npm i to install the packages listed in package.json .

Next, we install our own packages. We need Babel to run the app with the latest version of JavaScript, CORS for cross domain requests with front end, HTML-PDF for converting HTML strings to PDF, Multer for file upload, Sequelize for ORM, and SQLite3 for our database.

We install all of these by running npm i @babel/cli @babel/core @babel/node @babel/preset-env cors html-pdf sequelize sqlite3 multer .

After that we change the scripts section of package.json to have:

"start": "nodemon --exec npm run babel-node --  ./bin/www",
"babel-node": "babel-node"

This is so that we run our app with Babel instead of the regular Node runtime.

Then we create a .babelrc file in the backend folder and add this:

{
    "presets": [
        "@babel/preset-env"
    ]
}

This specifies that we run our app with the latest version of JavaScript.

Next we add our database code. Run npx sequelize-cli init in the backend folder to create the Sequelize code.

We should have a config.js in the project now. In there, add this:

{
  "development": {
    "dialect": "sqlite",
    "storage": "development.db"
  },
  "test": {
    "dialect": "sqlite",
    "storage": "test.db"
  },
  "production": {
    "dialect": "sqlite",
    "storage": "production.db"
  }
}

This specifies that we use SQLite for our database.

Next we create our model and migration by running this:

npx sequelize-cli model:create --name Document --attributes name:string,document:text,pdfPath:string

This creates a Document model and Documents table.

We then run this to create the database:

npx sequelize-cli db:migrate

Next we create our routes. Create a pdf.js file in the routes folder and add this:

var express = require("express");
var pdf = require("html-pdf");
const models = require("../models");
var multer = require("multer");
const fs = require("fs");
var router = express.Router();
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "./files");
  },
  filename: (req, file, cb) => {
    cb(null, `${file.fieldname}_${+new Date()}.jpg`);
  }
});

const upload = multer({
  storage
});

router.get("/", async (req, res, next) => {
  const documents = await models.Document.findAll();
  res.json(documents);
});

router.post("/", async (req, res, next) => {
  const document = await models.Document.create(req.body);
  res.json(document);
});

router.put("/:id", async (req, res, next) => {
  const id = req.params.id;
  const { name, document } = req.body;
  const doc = await models.Document.update(
    { name, document },
    { where: { id } }
  );
  res.json(doc);
});

router.delete("/:id", async (req, res, next) => {
  const id = req.params.id;
  await models.Document.destroy({ where: { id } });
  res.json({});
});

router.get("/generatePdf/:id", async (req, res, next) => {
  const id = req.params.id;
  const documents = await models.Document.findAll({ where: { id } });
  const document = documents[0];
  const stream = await new Promise((resolve, reject) => {
    pdf.create(document.document).toStream((err, stream) => {
      if (err) {
        reject(reject);
        return;
      }
      resolve(stream);
    });
  });

const fileName = `${+new Date()}.pdf`;
  const pdfPath = `${__dirname}/../files/${fileName}`;
  stream.pipe(fs.createWriteStream(pdfPath));
  const doc = await models.Document.update(
    { pdfPath: fileName },
    { where: { id } }
  );
  res.json(doc);
});

router.post("/uploadImage", upload.single('upload'), async (req, res, next) => {
  res.json({
    uploaded: true,
    url: `${process.env.BASE_URL}/${req.file.filename}`
  });
});

module.exports = router;

We do the standard CRUD operations to the Documents table in the first four routes. We have GET for getting all the Documents , POST for create a Document from post parameters, PUT for updating Document by ID, DELETE for deleting a Document by looking it up by ID. We have the HTML in the document field for generating the PDF later.

The generatePdf is for generating the PDF. We get the ID from the URL and then use the HTML-PDF package to generate the PDF. We generate the PDF by converting the HTML document to a file stream object with the HTML-PDF package and then writing the stream to a file and, finally, saving the path to the file in the Document entry in with the ID in the URL parameter.

We also have an uploadImage route to let user upload images with CKEditor with the CKFinder plugin. The plugin expects uploaded and url in the response, so we return those.

Then we need to add a files folder to the backend folder.

Next in app.js , we replace the existing code with this:

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
var cors = require("cors");

var indexRouter = require("./routes/index");
var pdfRouter = require("./routes/pdf");

var app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));
app.use(express.static(path.join(__dirname, "files")));
app.use(cors());

app.use("/", indexRouter);
app.use("/pdf", pdfRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

// render the error page
  res.status(err.status || 500);
  res.render("error");
});

module.exports = app;

We expose the file folder with this:

app.use(express.static(path.join(__dirname, "files")));

We expose the pdf route with this:

var pdfRouter = require("./routes/pdf");
app.use("/pdf", pdfRouter);

Front-End

Now the back-end is done, we can move onto the front-end. Create the React app by running Create React App. We run npx create-react-app frontend in the root folder of the project.

We then install our packages. We will use CKEditor for our rich text editor, Axios for making HTTP requests, Bootstrap for styling, MobX for simple state management, React Router for routing URLs to components, and Formik and Yup for form value handling and form validation respectively.

Install all the packages by running npm i @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-react axios bootstrap formik mobx mobx-react react-bootstrap react-router-dom yup .

With the packages installed, we can get started. In App.js , we replace the existing code with this:

import React from "react";
import HomePage from "./HomePage";
import { Router, Route } from "react-router-dom";
import { createBrowserHistory as createHistory } from "history";
import TopBar from "./TopBar";
import { DocumentStore } from "./store";
import "./App.css";
const history = createHistory();
const documentStore = new DocumentStore();

function App() {
  return (
    <div className="App">
      <Router history={history}>
        <TopBar />
        <Route
          path="/"
          exact
          component={props => (
            <HomePage {...props} documentStore={documentStore} />
          )}
        />
      </Router>
    </div>
  );
}

export default App;

This adds our top bar and route to the home page.

In App.css, we replace the existing code with this:

.page {
  padding: 20px;
}

.content-invalid-feedback {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

nav.navbar {
  background-color: green !important;
}

This adds some padding to our page. It also styles the validation message for the Rich text editor and changes the color of the navbar.

Next we create the form for adding and editing documents. Create a DocumentForm.js in the src file and add this:

import React from "react";
import * as yup from "yup";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import { observer } from "mobx-react";
import { Formik, Field } from "formik";
import { addDocument, editDocument, getDocuments, APIURL } from "./request";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const schema = yup.object({
  name: yup.string().required("Name is required")
});

function DocumentForm({ documentStore, edit, onSave, doc }) {
  const [content, setContent] = React.useState("");
  const [dirty, setDirty] = React.useState(false);

  const handleSubmit = async evt => {
    const isValid = await schema.validate(evt);
    if (!isValid || !content) {
      return;
    }
    const data = { ...evt, document: content };
    if (!edit) {
      await addDocument(data);
    } else {
      await editDocument(data);
    }
    getAllDocuments();
  };

  const getAllDocuments = async () => {
    const response = await getDocuments();
    documentStore.setDocuments(response.data);
    onSave();
  };

  return (
    <>
      <Formik
        validationSchema={schema}
        onSubmit={handleSubmit}
        initialValues={edit ? doc : {}}
      >
        {({
          handleSubmit,
          handleChange,
          handleBlur,
          values,
          touched,
          isInvalid,
          errors
        }) => (
          <Form noValidate onSubmit={handleSubmit}>
            <Form.Row>
              <Form.Group as={Col} md="12" controlId="name">
                <Form.Label>Name</Form.Label>
                <Form.Control
                  type="text"
                  name="name"
                  placeholder="Name"
                  value={values.name || ""}
                  onChange={handleChange}
                  isInvalid={touched.name && errors.name}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.name}
                </Form.Control.Feedback>
              </Form.Group>
            </Form.Row>

            <Form.Row>
              <Form.Group as={Col} md="12" controlId="content">
                <Form.Label>Content</Form.Label>
                <CKEditor
                  editor={ClassicEditor}
                  data={content || ""}
                  onInit={editor => {
                    if (edit) {
                      setContent(doc.document);
                    }
                  }}
                  onChange={(event, editor) => {
                    const data = editor.getData();
                    setContent(data);
                    setDirty(true);
                  }}
                  config={{
                    ckfinder: {
                      uploadUrl:
                        `${APIURL}/pdf/uploadImage`
                    }
                  }}
                />
                <div className="content-invalid-feedback">
                  {dirty && !content ? "Content is required" : null}
                </div>
              </Form.Group>
            </Form.Row>

            <Button type="submit" style={{ marginRight: 10 }}>
              Save
            </Button>
            <Button type="button">Cancel</Button>
          </Form>
        )}
      </Formik>
    </>
  );
}

export default observer(DocumentForm);

We wrap our React Bootstrap Form inside the Formik component to get the form handling function from Formik, which we use directly in the React Bootstrap form fields. We can’t do the same with CKEditor, so we write our own form handlers for the rich text editor. We set the data prop in the CKEditor to set the value of the input of the rich text editor. The onInit function is used with users try to edit an existing document since we have to set the data prop with the editor initialized by running setContent(doc.document); . The onChange prop is the handler function for setting content whenever it is updated — so the data prop will have the latest value, which we will submit when the user clicks Save.

We use the CKFinder plugin to upload images. To make it work, we set the image upload URL to the URL of the upload route in our back-end.

By default, we have simple text styling buttons like bold and italics, we can also add pictures and videos into our document. Also we can add tables and lists without making any changes to our editor.

The form validation schema is provided by the Yup schema object which we create at the top of the code. We need to check if the name field is filled in.

The handleSubmit function is for handling submitting the data to back end. We check both the content and the evt object to check both fields since we cannot incorporate the Formik form handlers directly into the CKEditor component.

If everything is valid, then we add a new document or update it depending on whether the edit prop is true or not.

Then, when saving is successful, we call getAllDocuments to populate the latest documents into our MobX store by running documentStore.setDocuments(response.data);.

Next, we make our home-page by creating HomePage.js in the src folder and add this:

import React, { useState, useEffect } from "react";
import { withRouter } from "react-router-dom";
import DocumentForm from "./DocumentForm";
import Modal from "react-bootstrap/Modal";
import ButtonToolbar from "react-bootstrap/ButtonToolbar";
import Button from "react-bootstrap/Button";
import Table from "react-bootstrap/Table";
import { observer } from "mobx-react";
import { getDocuments, deleteDocument, generatePDF, APIURL } from "./request";

function HomePage({ documentStore, history }) {
  const [openAddModal, setOpenAddModal] = useState(false);
  const [openEditModal, setOpenEditModal] = useState(false);
  const [initialized, setInitialized] = useState(false);
  const [doc, setDoc] = useState([]);

  const openAddTemplateModal = () => {
    setOpenAddModal(true);
  };

  const closeAddModal = () => {
    setOpenAddModal(false);
    setOpenEditModal(false);
  };

  const cancelAddModal = () => {
    setOpenAddModal(false);
  };

  const cancelEditModal = () => {
    setOpenEditModal(false);
  };

  const getAllDocuments = async () => {
    const response = await getDocuments();
    documentStore.setDocuments(response.data);
    setInitialized(true);
  };

  const editTemplate = d => {
    setDoc(d);
    setOpenEditModal(true);
  };

  const onSave = () => {
    cancelAddModal();
    cancelEditModal();
  };

  const deleteSingleDocument = async id => {
    await deleteDocument(id);
    getAllDocuments();
  };

  const generateSinglePdf = async id => {
    await generatePDF(id);
    alert("PDF Generated");
    getAllDocuments();
  };

  useEffect(() => {
    if (!initialized) {
      getAllDocuments();
    }
  });

  return (
    <div className="page">
      <h1 className="text-center">Documents</h1>
      <ButtonToolbar onClick={openAddTemplateModal}>
        <Button variant="primary">Add Document</Button>
      </ButtonToolbar>

      <Modal show={openAddModal} onHide={closeAddModal}>
        <Modal.Header closeButton>
          <Modal.Title>Add Document</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <DocumentForm
            onSave={onSave.bind(this)}
            cancelModal={cancelAddModal.bind(this)}
            documentStore={documentStore}
          />
        </Modal.Body>
      </Modal>

      <Modal show={openEditModal} onHide={cancelEditModal}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Document</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <DocumentForm
            edit={true}
            doc={doc}
            onSave={onSave.bind(this)}
            cancelModal={cancelEditModal.bind(this)}
            documentStore={documentStore}
          />
        </Modal.Body>
      </Modal>
      <br />
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Name</th>
            <th>PDF</th>
            <th>Generate PDF</th>
            <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {documentStore.documents.map(d => {
            return (
              <tr key={d.id}>
                <td>{d.name}</td>
                <td>
                  <a href={`${APIURL}/${d.pdfPath}`} target="_blank">
                    Open
                  </a>
                </td>
                <td>
                  <Button
                    variant="outline-primary"
                    onClick={generateSinglePdf.bind(this, d.id)}
                  >
                    Generate PDF
                  </Button>
                </td>
                <td>
                  <Button
                    variant="outline-primary"
                    onClick={editTemplate.bind(this, d)}
                  >
                    Edit
                  </Button>
                </td>
                <td>
                  <Button
                    variant="outline-primary"
                    onClick={deleteSingleDocument.bind(this, d.id)}
                  >
                    Delete
                  </Button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
}

export default withRouter(observer(HomePage));

We have a React Bootstrap table for listing the documents with buttons to edit, deleting documents, and generating PDFs. Also, there’s an “open” link for opening the PDF in each row. We have a “create” button on top of the table.

When the page loads, we call getAllDocuments and populate them in the MobX store. We open and close the add and edit modals with the openAddTemplateModal, closeAddModal, cancelAddModal, cancelEditModal functions.

Next, create request.js in the src folder and add this:

export const APIURL = "http://localhost:3000";
const axios = require("axios");

export const getDocuments = () => axios.get(`${APIURL}/pdf`);

export const addDocument = data => axios.post(`${APIURL}/pdf`, data);

export const editDocument = data => axios.put(`${APIURL}/pdf/${data.id}`, data);

export const deleteDocument = id => axios.delete(`${APIURL}/pdf/${id}`);

export const generatePDF = id => axios.get(`${APIURL}/pdf/generatePdf/${id}`);

This adds the functions to make requests to our routes in the back end.

Then we create our MobX store. Create store.js in the src folder and put this in it:

import { observable, action, decorate } from "mobx";

class DocumentStore {
  documents = [];

setDocuments(documents) {
    this.documents = documents;
  }
}

DocumentStore = decorate(DocumentStore, {
  documents: observable,
  setDocuments: action
});

export { DocumentStore };

We have the function setDocuments to put the photo data in the store. We used it in HomePage and DocumentForm and we instantiated it before exporting so that we only have to do it in one place.

This block:

DocumentStore = decorate(DocumentStore, {
  documents: observable,
  setDocuments: action
});

designates the documents array in DocumentStore as the entity that can be watched by components for changes. The setDocuments function is designated as the function that can be used to set the documents array in the store.

Next, we create the top bar by creating a TopBar.js file in the src folder and add:

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import { withRouter } from "react-router-dom";

function TopBar({ location }) {
  return (
    <Navbar bg="primary" expand="lg" variant="dark">
      <Navbar.Brand href="#home">PDF App</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/" active={location.pathname == "/"}>
            Home
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default withRouter(TopBar);

This contains the React Bootstrap Navbar to show a top bar with a link to the home page and the name of the app. We only display it with the token present in local storage. We check the pathname to highlight the right links by setting the active prop.

Next in index.html , we replace the existing code with this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>PDF App</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

This adds the Bootstrap CSS and changes the title.

After writing all that code, we can run our app. First, install nodemon by running npm i -g nodemon so that we don’t have to restart the back-end ourselves when the files change.

Then run the back-end by running npm start in the backend folder and npm start in the frontend folder. Choose ‘yes’ if you’re asked to run it from a different port.

Categories
Vue 3 Projects

Create a Tic Tac Toe with Vue 3 and JavaScript

short-coated white and beige puppy on the floor

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a tic tac toe game with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create tic-tac-toe

and select all the default options to create the project.

Create the Tic Tac Toe

To create the tic tac toe game, we write:

<template>
  <div v-if="xWins || oWins">
    <div v-if="xWins">x wins</div>
    <div v-if="oWins">o wins</div>
    <button @click="restart">restart</button>
  </div>
  <form v-else>
    <div v-for="i in 3" :key="i">
      <span v-for="j in 3" :key="j">
        <input v-model.trim="board[i - 1][j - 1]" style="width: 20px" />
      </span>
    </div>
  </form>
</template>

<script>
const board = [[], [], []];

export default {
  name: "App",
  data() {
    return {
      board,
    };
  },
  computed: {
    xWins() {
      return this.isWinner("x");
    },
    oWins() {
      return this.isWinner("o");
    },
  },
  methods: {
    restart() {
      this.board = [[], [], []];
    },
    isWinner(player) {
      const { board } = this;
      return (
        (board[0][0] === player &&
          board[0][1] === player &&
          board[0][2] === player) ||
        (board[1][0] === player &&
          board[1][1] === player &&
          board[1][2] === player) ||
        (board[2][0] === player &&
          board[2][1] === player &&
          board[2][2] === player) ||
        (board[0][0] === player &&
          board[1][0] === player &&
          board[2][0] === player) ||
        (board[0][1] === player &&
          board[1][1] === player &&
          board[2][1] === player) ||
        (board[0][2] === player &&
          board[1][2] === player &&
          board[2][2] === player) ||
        (board[0][0] === player &&
          board[1][1] === player &&
          board[2][2] === player) ||
        (board[0][2] === player &&
          board[1][1] === player &&
          board[2][0] === player)
      );
    },
  },
};
</script>

In the template, we have a div that displays the outcome of the game if there is one.

If either x or o wins, we display who wins.

Also, we add a restart button so that the game can be restarted.

Otherwise, we display the game board.

We use v-for to render 3 inputs.

And we render inputs to let players enter the value.

We bind the inputted value to the board nested array entry with v-model .

The trim modifier lets us trim the leading and trailing whitespace of the inputted value.

In the script tag, we have the board array, which we use as the initial value of the board reactive property.

Then we have the xWins and oWins computed properties to determine who wins.

The winner is determined by the isWinner method, which checks if any player has their marker on the board either diagonally, vertically, or horizontally.

Conclusion

We can create a tic tac toe game easily with Vue 3 and JavaScript.