DEV Community: muncey

How I was able to configure syntax highlighting on my WordPress site

muncey — Mon, 27 Dec 2021 20:27:57 +0000

I like to blog about technical topics and part of this involves providing code snippets with an explanation and further exploration about those code snippets.

When readers are reading a page on my blog I would like any code snippets that are on a page to be formatted with syntax highlighting as per the following image:

The WordPress Gutenberg editor provides a code block which will be used to output HTML tags which are typically used to hold a code snippet.

The problem is that the HTML code block does not have any specific formatting and will require changes to be made to the contents of the code block in order to display with syntax highlighting. The changes are to identify key words in a code snippet and then put tags around those keywords with a specific class applied to each. This can be done fairly easily with a regular expression search applied across a small block of code.

I made a decision that I would use a code library to implement this functionality rather than write my own library. I decided to use the Code Prettify library from the Google archives in GitHub. I haven’t used this library before but according to the readme on the github page for code-prettify it is used to power https://code.google.com/ and http://stackoverflow.com/ which is encouraging.

The code-prettify library can be found here:

https://github.com/googlearchive/code-prettify

And to use the library once it is installed on a page what I need to do is to put a class=”prettyprint” on the pre or code tags on my page:

Now typically you would do this I guess in the functions.php file by providing a content hook and I am thinking in the future I might do this. But for the moment I am applying this functionality through a global search and replace in my client side react code.

function formatPost(post) {
  const rendered = post.content.rendered;
  let result = rendered.replace(/\<code\>/g, '<code class="prettyprint">');
  const parsed = parse(result);
  return parsed;
}

As you can see from the code snippet (hopefully highlighted) above the logic to apply syntax highlighting has now shrunk down to a single line regular expression. The content for each post is returned inside a post.content.rendered string when retrieved via the REST API. So what the formatPost function will do is take that string and apply any client side formatting before the contents of the post are rendered on the page. I should also mention that I am using a react library to convert the post.content.rendered string into a react object for rendering on the page. This library is the react-html-parser.

https://www.npmjs.com/package/react-html-parser

The above code of course will only run if I have included a link to the code-prettify library on my HTML page. For WordPress sites this is typically done using the wp_enqueue_script function call. My first call when linking to a third party library now is to use a CDN. I find that this is a stable and fast way to bring libraries in and also means you should be on a later version.

According to the instructions on the git hub page for code-prettify I need to include a script tag in my document as follows:

Because I am using a WordPress theme I use the following code inside the script_loader_tag hook to add the run_prettify.js file on each page as a linked Javascript library.

    wp_enqueue_script( 'code-prettify', 'https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js' );

Finally if you are more of a content creator than a developer then you may want to link to a plugin to achieve the above functionality. I have found this Code Prettify plugin on the WordPress plugins directory which uses the code-prettify library and might help you if you would like syntax highlighting on your site.

https://wordpress.org/plugins/code-prettify/

I have updated my WordPress REST API to set and return the number of views per post

muncey — Sun, 26 Dec 2021 21:30:23 +0000

The next iteration or feature I have implemented in my react theme is a view counter which shows the number of views each one of my posts is getting on my WordPress site. The number of views is a number value that is held against each post on my WordPress site using what is known as post meta. Post meta is a mechanism that WordPress provides that will let you store some additional data with each post and is normally set behind the scenes for you by custom PHP code running in either a theme or a plugin.

In my case I have set up a filter inside my functions.php file to increment a post views value by 1 each time a request is made to retrieve data for a specific post via the Rest API. The Rest API is a handy out of the box feature that WordPress provides that will let you access your pages and posts as a JSON string. You can try this out by appending /wp/v2/posts/ to the end of your site URL. You can read more information about the Rest API by going to this site: https://developer.wordpress.org/rest-api/. With WordPress programming what you often need to do is search and find an appropriate hook.

I was not able to find an exact hook for what I wanted to do which is to be able to run some custom code when a user requests a single post via the WordPress API. There are some hooks available for when a post is processed for sending to the user but these hooks also ran when the list of posts were retrieved which isn’t ideal particularly as I couldn’t find an easy way to distinguish between a single post and a list of posts.

So what I found was there is a hook called rest_request_before_callbacks which as the name suggest runs before further processing of a rest request occurs. The documentation for this hook can be found here: https://developer.wordpress.org/reference/hooks/rest_request_before_callbacks/. I feel that there will be a job for future Phil to use another hook or write a custom post handling class but for now this hook works quite well.

Currently my code for this hook looks like the following:

function my_react_count_views( $response, $handler, WP_REST_Request $request ) {
    $id = $request->get_param('id');
    $route = $request->get_route();
    if ((stristr($route, 'posts') || stristr($route, 'pages')) && isset($id)) {
        $views = get_post_meta($id, 'post_views', true);
        if (!$views) {
            add_post_meta($id, 'post_views', 1);
        } else {
            update_post_meta($id, 'post_views', intval($views) + 1);
        }
    }
    return $response; 
}



add_filter( 'rest_request_before_callbacks', 'my_react_count_views', 10, 3 );

I will walk through the code step by step for you.

The first thing I do is attempt to get the id parameter for the post or page by looking for an id in the page parameters using $request->get_param(‘id’);. This of course will not work in the future when I move to permalinks but in the interests of getting the work done I have taken this approach for now. I haven’t looked too far into how to get this working with permalinks rather than id’s but I have a feeling the concept will be the same, I will just replace looking for an id with looking for a permalink. The reason for doing this is that I needed something to distinguish between someone viewing a post on a page and someone viewing a list of posts. In my original version I was finding that the counter was increasing each time I viewed the list.

The next step is to check that the route contains either posts or pages by using the PHP stristr function.

So this means that for pages or posts with an id I want to then check the post meta by using the WordPress get_post_meta function. This function will either return a value or null. If the value is null I use add_post_meta to assign a value of 1 to the post_views and if the value is set (i.e. > 0) then I use update_post_meta to store an incremented by 1 value into my WordPress site.

You can view this working on my personal site, https://munceyweb.com by clicking on a post:

The post_views counter is available in the Network tools – Preview tab in Chrome, Edge or Brave. You can see that the post_views is returned as part of the meta element and can then be used inside my theme by the React code to render the counter.

In a future post I will show how I used this value inside my React WordPress theme to render the view using Javascript.

OAuth calls for PHP

muncey — Thu, 22 Jul 2021 09:17:00 +0000

If you are in a situation where you need to set up OAuth authentication on a website that you manage you might be wondering where to start and what exactly are the steps you need to follow in order to allow users to authenticate using the authentication scheme of their choice.

If you are wondering what to do then worry no more, this quick article will give you the basic knowledge that you will need to set up your web site to support OAuth. I will also provide a small bit of code to get you started.

Now what is OAuth? OAuth is a way for a 3rd Party web site (commonly called a provider) to tell you that a user is valid and can be allowed to access your web site. If you have ever logged on to a website using your Google or Facebook account then you have used OAuth. You can also use OAuth to request an access token to make future requests for resources from the provider server. The rest of this article will tell you the basics for enabling OAuth on a web site.

To be able to support OAuth on a web site that you manage requires that you create the following four functions:

A page to redirect the home page to the OAuth provider.
A page to accept redirects from the OAuth provider with an access code.
A function to swap the access code for an access token and hold it in memory
A page to log the user out by clearing out the access token from memory

So the easiest way to understand OAuth is that you are building a function that will swap an access code that the OAuth provider gives you in exchange for an access token to be used for future calls. That is basically it and you can apply this pattern to any application or OAuth provider that you work on in the future.

Anyway I promised some code so I will provide two quick snippets.

The first is the code used to set up a redirect to the Google OAuth 2 servers. This code will require that you have set up an OAuth client id in the Google API Console and also that you have enabled the APIs that you would like to call. The code checks for the existence of a session variable called oauth which if set means that the web site has already obtained an access token for this user and can proceed as if they were signed in to the server.

if (!isset($_SESSION['oauth']))
 {

$url = 'https://accounts.google.com/o/oauth2/v2/auth?' .
 'scope=https%3A//www.googleapis.com/auth/drive.file&' .
 'access_type=offline&' .
 'include_granted_scopes=true&' .
 'response_type=code&' .
 'state=state_parameter_passthrough_value&' .
 'redirect_uri=https%3A//localhost:3000/redirect-login.php&' .
 'client_id=' . $client_id;
  header('Location: ' . $url);
  exit;
 }

The next block of code will show how to swap the code (read from the query string using $code = $_GET[‘code’]) for an access token. You will need to have a $client_id and a $client_secret and also make sure the redirect_uri matches the uri of the page containing this code.

$url = 'https://oauth2.googleapis.com/token';

$postdata = http_build_query(
  array(
    'code' => $code,
    'client_id' => $client_id,
    'client_secret' => $client_secret,
    'redirect_uri' => 'https://localhost:3000/redirect-login.php',
    'grant_type' => 'authorization_code'
  )
);

$opts = array('http' => 
  array(
    'method' => 'POST',
    'header' => 'Content-Type: application/x-www-form-urlencoded',
    'content' => $postdata
  )
);

$context = stream_context_create($opts);
$result = file_get_contents($url, false, $context);

When google is called as a post provided the $code, $client_id, $client_secret, redirect_uri are correct google will return an access token that will then be able to be passed in the authentication header of future requests to retrieve data from google.

Sorry one more bit of code. This code which can run on any page on your site will get the access_token value from the oauth session variable and then pass it with files request in the Authorization header. Provided the access token remains valid google will respond by returning resources related to files.

$oauth = json_decode($_SESSION['oauth']);
$token = $oauth->access_token;

$url = 'https://www.googleapis.com/drive/v3/files';
$options = array('http' => array(
    'method'  => 'GET',
    'header' => 'Authorization: Bearer '.$token
));
$context  = stream_context_create($options);
$response = file_get_contents($url, false, $context);

So what do you think? Did this help you understand OAuth better? If you liked this article please comment, like or share.

Enabling API Access for Google Sheets

muncey — Wed, 21 Jul 2021 21:15:18 +0000

Before you can connect to Google Sheets what you will need to do is enable API Access for Google Sheets. This involves logging on to Googles Cloud API console and enabling the API for google sheets and google drive. Once you have completed this step you can then create a OAuth client id and client secret so that your users can authenticate to your application using OAuth.

Google didn’t make this step super easy but basically once you have created a new project (let me know in comments if you would like to see how to create a new project), you then need to open the APIs & Services page and select Library.

This brings up a page with all google API services.

Run a search for sheets

Once you select Google Sheets API this will bring up the enable API page.

Clicking on Enable will enable the API for use.

I then repeated the process for Google Drive and you can repeat this process for any API you would like to connect to.

In my next post I will show how to create client credentials for google OAuth so that you can connect via a web application.

Run a local PHP web server

muncey — Wed, 21 Jul 2021 13:10:38 +0000

One of the reasons that I like using PHP is that it is an easy language to pickup and also an easy language to create a new project. I will often times use PHP as a prototyping language and once I am happy with the project move onto a more robust platform such as .NET or Java.

To create a new web server using PHP is actually very easy. All that you need to do is create a file such as index.php with some php and html code in it and then run this command:

php -S localhost:3000

This command will start a local web server that you can then access easily enough at http://localhost:3000 as per the example below.

Using google sheets as a database

muncey — Fri, 16 Jul 2021 22:11:23 +0000

I am planning to write a series of articles which will show how google sheets can be connected to an used as a database for an application. This article will outline the post plan and also provide an overview of how I am going to structure the application.

Now I am using google sheets as a good way to prototype an application and also a lot of my user base are comfortable using google sheets as a way of managing their data.

The application itself will be the my budget tool that I showed how to create in a previous set of articles. What I will be doing is enhancing that application so that it will connect to google sheets to save data there.

The application URL is here if you would like to play around with the current application:

https://my-easy-budget.herokuapp.com/index.php

I am planning to write the following set of articles outlining how I build this application to save data to google sheets.

Testing and planning REST calls using Postman
New pages to handle OAuth authentication
Obtaining an OAuth access token from google
Application design and flow
Future plans

Please let me know in the comments if there is anything else you would like to see me write about.

Deploying my budget tool to Heroku

muncey — Thu, 15 Jul 2021 13:20:18 +0000

I thought I would just make a really quick post about deploying my budget tool to Heroku as a static web application.

Heroku is a hosting platform owned by Salesforce that provides a free hosting tier.

So I have created a free account on Heroku and I have then selected the New app option.

Next I create a pipeline called “deploy-production” and set the Deployment method to GitHub.

I then connect to GitHub and select the muncey/MyBudgetFrontEnd project.

I setup Automatic deploys and kick of a manual deploy

Because I have not set up a buildpack yet, when I attempt to deploy to Heroku I received a no buildpack error.

So to fix this I went to settings and added a php buildpack

I also changed index.html to be index.php without making too many other changes.

I was then able to deploy a branch to Heroku

And I can access my app at url: https://my-easy-budget.herokuapp.com/index.php

So that is about it, I can now deploy my app up to heroku where anyone can access it. In my next article I am going to show a technique for saving and persisting the data for a user.

Creating an online budget tool 5/5

muncey — Thu, 08 Jul 2021 20:18:07 +0000

In this article I am going to add styles to my form so that it looks visually appealing with final version looking like this:

There is still a lot of work to be performed to complete the styling phase but I want to demonstrate the techniques that I used first.

The page is styled using bootstrap and is based of the bootstrap starter form:

https://getbootstrap.com/docs/5.0/getting-started/introduction/

To style the form I have inserted a link to bootstrap styles into the page header

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>My Budget</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

Note that I have also brought in a google font. These are customised fonts that you can use to make your site look a lot better.

https://fonts.google.com/

I have added a navbar to the top of the page:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Budget</a>
  </div>
</nav>

And I have enclosed the budget table in a container. A container is used to centre a group of elements on the page. If you want to have full width for a group of elements you use container-fluid.

    <div class="container bg-white mt-3 rounded">
      <div class="my-budget">
        <table id="budgetTable" class="table">
          <thead>
            <tr>
              <th>Item</th>
              <th>Amount</th>
              <th>Action</th>
            </tr>
            <tr>
              <td><input placeholder="Enter item" type="text" autocomplete="off" id="newItem" class="form-control"></td>
              <td><input placeholder="Enter amount" type="number" autocomplete="off" id="newAmount" class="form-control"></td>
              <td><button id="addButton" type="button" class="btn btn-link">Add</button></td>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
          </tfoot>
        </table>
      </div>
    </div>

I have also moved the new item form into the table so that it appears as the first row and styled the buttons using the btn btn-link class. Note as well that the container is making use of bg-white mt-3 and rounded classes which let you style an element without needing to write your own custom css.

In order to use bootstrap properly you need to include some javascript which I have placed at the bottom of the page.

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Finally I have added a small bit of css into the styles.css file to control the page fonts and backgrounds.

body {
  font-family: 'Noto Serif', serif;
  background: #D3D3D3;
}

And I fixed a bug where the disabled attribute was not being cleared when the user clicked cancel.

const cancelEdit = () => {
  id = 'budgetTable';

  document.getElementById('newItem').disabled = false;
  document.getElementById('newAmount').disabled = false;
  document.getElementById('addButton').disabled = false;

  document.getElementById(id).tBodies[0].innerHTML = renderRows(budgetItems);
}

What I have shown is how easy it is to add bootstrap to a form and then to style that form so that it looks nice. The code for this iteration can be found here:
https://github.com/muncey/MyBudgetFrontEnd/tree/style-form

Creating an online budget tool 4/5

muncey — Thu, 08 Jul 2021 11:08:12 +0000

The next step in creating an online budget tool is to add the ability to save data between sessions. In this case I am using local storage in the browser. It is not the most secure solution but it will demonstrates the techniques that you need to use to create a form that will save your budget.

The key to being able to make is to create a global click handler for the budgetTable table which will map buttons to actions based on the className of each buttons.

document.getElementById('budgetTable').addEventListener('click', function($ev) {
  const idx = $ev.target.dataset.idx;
  if ($ev.target.className.indexOf('edit-button') > -1) {
    editBudgetItem(idx);
  } else if ($ev.target.className.indexOf('delete-button') > -1) {
    deleteItem(idx);
  } else if ($ev.target.className.indexOf('save-button') > -1) {
    save(idx);
  } else if ($ev.target.className.indexOf('cancel-button') > -1) {
    cancelEdit();
  }
});

The end goal of this is a form that looks like this:

It is obviously not styled as yet but it demonstrates the ability to add items, edit and delete items. The data is held for now in localStorage and in future I will look at setting up a back end so that the data can be held securely in a database but for now localStorage will do.

The lower level code to save and load the budget makes use of the window.localStorage object to get and set items. Items in local storage are held using name/value pairs and you will typically use JSON.stringify to prepare items for saving and JSON.parse to read items back. The logic is that if there is no my-budget in local storage I will create a default budget with sample data.

let budgetItems = [{
  item: 'Car',
  amount: 1.00
}]

const loadBudget = (storageKey) => {
  const budget = window.localStorage.getItem(storageKey);
  if (budget) {
    budgetItems = JSON.parse(budget);  
  }
}

const saveBudget = (storageKey) => {
  const budget = JSON.stringify(budgetItems);
  window.localStorage.setItem(storageKey, budget);
}

I have added two new functions renderActions and renderEditRow. The renderActions will render the edit and delete button and the renderEditRow will render a budget item row as a form with a save and cancel button. Note the use of a specific class on both which will be used in the table click handler.

const renderActions = (idx) => {
  return `
  <button type="button" class="edit-button" data-idx="${idx}">Edit</button>
  <button type="button" class="delete-button" data-idx="${idx}">Delete</button>`
}


const renderEditRow = (data, idx) => {

  return `<tr>
            <td><input type="text" id="editItem" value="${data.item}"></td>
            <td><input type="number" id="editAmount" value="${parseFloat(data.amount)}"></td>
            <td>
              <button type="button" class="save-button" data-idx="${idx}">Save</button>
              <button type="button" class="cancel-button" data-idx="${idx}">Cancel</button>
            </td>
          </tr>`
}

I have made a small change to renderRow to add an additional column for actions (edit/delete). Because the renderRow is also used for the totals row I also configure the function to only renderActions when idx is not null.

const renderRow = (data, idx) => {
  return `<tr>
            <td>${data.item}</td>
            <td>$${data.amount}</td>
            <td>${idx != null ? renderActions(idx) : '' }</td>
          </tr>`
};

The renderRows function becomes a bit more complicated:

const renderRows = (data, idx) => {
  const html = [];
  for (let i=0; i<data.length; i++) {
    if (idx != null && idx == i) {
      html.push(renderEditRow(data[i], i));
    } else if (idx != null && idx != i) {
      html.push(renderRow(data[i]));
    } else {
      html.push(renderRow(data[i], i));
    }
  }
  return html.join('');
}

This change is to render an edit row if the user wants to edit a certain row.

Next I add some utility functions to edit, save, delete and cancel.

const addBudgetItem = () => {
  const budgetItem = {
    item: document.getElementById('newItem').value,
    amount: document.getElementById('newAmount').value
  }
  budgetItems.push(budgetItem);
  document.getElementById('newItem').value = null;
  document.getElementById('newAmount').value = null;
}

const editBudgetItem = (idx) => {
  id = 'budgetTable';

  document.getElementById('newItem').setAttribute('disabled', true);
  document.getElementById('newAmount').setAttribute('disabled', true);
  document.getElementById('addButton').setAttribute('disabled', true);

  document.getElementById(id).tBodies[0].innerHTML = renderRows(budgetItems, idx);
}

const cancelEdit = () => {
  id = 'budgetTable';

  document.getElementById('newItem').setAttribute('disabled', false);
  document.getElementById('newAmount').setAttribute('disabled', false);
  document.getElementById('addButton').setAttribute('disabled', false);

  document.getElementById(id).tBodies[0].innerHTML = renderRows(budgetItems);
}

const save = (idx) => {

  budgetItems[idx].item = document.getElementById('editItem').value;
  budgetItems[idx].amount = parseFloat(document.getElementById('editAmount').value);

  saveBudget('my-budget');
  renderPage('budgetTable');

  document.getElementById('newItem').setAttribute('disabled', false);
  document.getElementById('newAmount').setAttribute('disabled', false);
  document.getElementById('addButton').setAttribute('disabled', false);
}

const deleteItem = (idx) => {
  const temp = [];
  for (let i=0; i < budgetItems.length; i++) {
    if (i != idx) {
      temp.push(budgetItems[i]);
    }
  }
  budgetItems = temp;

  saveBudget('my-budget');
  renderPage('budgetTable');
}

At the end of each function if I change data in budgetItems I call saveBudget followed by renderPage.

So this gives me a functional form which can be used for personal use. In my next article I am planning to discuss how to style the form so that it looks great and is ready for dropping into a CMS (WordPress, Wix, Joomla) of your choice.

I have saved changes into a local-storage branch.

https://github.com/muncey/MyBudgetFrontEnd/tree/local-storage

Creating an online budget tool 3/5

muncey — Thu, 08 Jul 2021 09:48:37 +0000

In this short instalment I am going to demonstrate how to total all the budget items and render the totals at the bottom of the budget table.

Code for this iteration has been saved to the add-totals branch available here: https://github.com/muncey/MyBudgetFrontEnd/tree/add-totals

First I have made updates to the budgetTable to remove the contents of the tfoot element.

        <table id="budgetTable">
          <thead>
            <tr>
              <th>Item</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
          </tfoot>
        </table>

Next I have added in a calculateTotals function:

const calculateTotals = () => {
  let total = 0.00;
  for (let i=0; i<budgetItems.length; i++) {
    total+=parseFloat(budgetItems[i].amount);
  }
  return { item: 'Total', amount: total }
}

Notice the use of the parseFloat function which ensures each amount is treated as a number.

Then I assign the innerHTML of the tFoot element to the result of the renderRow and calculateTotals function.

const renderPage = (id) => {
  document.getElementById(id).tBodies[0].innerHTML = renderRows(budgetItems);
  document.getElementById(id).tFoot.innerHTML = 
              renderRow(calculateTotals());
}

This leaves us with a functional, but not very good looking budget tool.

In the next article I will be looking into saving the budget using local storage.

Creating an online budget tool 2/5

muncey — Wed, 07 Jul 2021 21:04:52 +0000

In my last post I showed how to layout the HTML for creating an online budget tool. In this post I am going to show how to add JavaScript to make the form dynamic.

First, I modify the add form at the top of the page by adding id’s to the input fields and the button. I also change the button to have a type of button to stop the form from submitting when the button is clicked.

      <form>
          <label>Item</label>
          <input type="text" id="newItem">
          <label>Amount</label>
          <input type="number" id="newAmount">
          <button id="addButton" type="button">Add</button>
        </form>

Next, I add an id to the table and remove the contents of the tbody.

        <table id="budgetTable">
          <thead>
            <tr>
              <th>Item</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfooter>
            <tr>
              <td>Total</td>
              <td>$1.00</td>
            </tr>
          </tfooter>
        </table>

I then add a renderRow function to my Javascript:

const renderRow = (data) => {
  return `<tr>
            <td>${data.item}</td>
            <td>$${data.amount}</td>
          </tr>`
};

And a renderRows:

const renderRows = (data) => {
  const html = [];
  for (let i=0; i<data.length; i++) {
    html.push(renderRow(data[i]));
  }
  return html.join('');
}

Then I add a budgetItems array to the Javascript and also add an addBudgetItem function.

const budgetItems = [{
  item: 'Car',
  amount: 1.00
}]

const addBudgetItem = () => {
  const budgetItem = {
    item: document.getElementById('newItem').value,
    amount: document.getElementById('newAmount').value
  }
  budgetItems.push(budgetItem);
}

I add a renderPage function that will link everything together to produce HTML for the table body and then assign the contents of the table body using the innerHTML property:

const renderPage = (id) => {
  document.getElementById(id).tBodies[0].innerHTML = renderRows(budgetItems);
}

Finally, I add two event listeners, one called DOMContentLoaded that will call renderPage when the page loads and one being a click event on the add button to add a new item.

document.addEventListener('DOMContentLoaded', function($ev) {
  renderPage('budgetTable');
});

document.getElementById('addButton').addEventListener('click', function($ev) {
  addBudgetItem();
  renderPage('budgetTable');
});

I can now start to keep track of all my subscriptions:

Clicking add will add a new item to the budgetItems array and then generate html to insert into the table body.

The biggest thing I had to remember when doing this was to use tBodies as spelt as it is case sensitive.

In my next post I will show how to create the total row and will start looking at how to style the form.

The code for the budget tool can be found here: https://github.com/muncey/MyBudgetFrontEnd

Creating an online budget form 1/5

muncey — Mon, 05 Jul 2021 19:58:47 +0000

Keeping track of spending is an ongoing chore. It is also a good first step in getting on top of your finances and can be fun to see where all the money is going. To help in keeping track of spending I am building an online budget form that will let me enter in monthly spending and total the amounts so I have a good idea of what my normal expenses are.

The first step in creating this online budget form is to set up the basic html.

First part is a form containing the option to add a new item.

        <form>
          <label>Item</label>
          <input type="text">
          <label>Amount</label>
          <input type="number">
          <button>Add</button>
        </form>
        <h3>Items</h3>

The second part is to add a table that will contain the budget items.

        <table>
          <thead>
            <tr>
              <th>Item</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Car</td>
              <td>$1.00</td>
            </tr>
          </tbody>
          <tfooter>
            <tr>
              <td>Total</td>
              <td>$1.00</td>
            </tr>
          </tfooter>
        </table>

The table is split into 3 parts thead, tbody and tfooter. And the form currently looks like this:

Not much to look at obviously but in the coming posts I will show how to add dynamic functionality to the form and how to style the form so that it looks professional. Finally I will show how to use the form to feed into a submission to a CRM so that this could be used on the website of a financial counsellor.