2. Understanding and Updating the Application

Open the application’s code in the Sublime text editor

  • Open the Sublime text editor by clicking on the Sublime icon in the left dock.
  • From within Sublime open the product-registry-01 folder.
  • Click on File in the top left corner and select Open Folder... in the menu.
  • Select Desktop/blg/product-registry-01 to open, and we can get to coding!

Open up the index.html file within the product-registry-01 folder

  • View the contents of the file.

  • Don’t worry too much about what is being linked within the <head> of the file, the core to focus on is between the <body></body> tags beneath

  • The core of the application may be simplified to the following:

    <div>
  <h1>Welcome! Your first task, CHANGE ME :)</h1>
  <div id="content"></div>
</div>
    • Simply a title <h1> and one <div> that contains the content of the application. Remember this content <div> as we will see it again soon!

  • Update the title <h1></h1> where your first task is noted

  • Update the title to be your Product registry, for example Adam's Product Registry

  • Example Code:

    <h1 class="ui dividing centered header">Adam's Product Registry</h1>

  • Save the file! This may be done by selecting the File menu in the top left corner and selecting save, or with the keyboard shortcut ctrl + s`

  • View the updated title in the browser!

https://raw.githubusercontent.com/Blockchain-Learning-Group/course-resources/master/product-registry-01/images/02-renamed-header.png

Reverting to a Blank app.js file to get started!

  • Note within the open index.html file that app-complete.js is linked in a <script> tag within the <body>

  • Update this to link app.js instead of app-complete.js, which is the blank template you will begin with.

  • Don’t forget to save!

  • Example Code:

    <script
  type="text/babel"
  data-plugins="transform-class-properties"
  src="app.js"
></script>

  • Complete solution may be found here