From af8b26cbd51f233427746d4920e8c2831eadf756 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Tue, 10 Oct 2017 20:19:16 -0400
Subject: [PATCH] unified naming of IDs in all lower case

---
 src/templates/app.html      | 101 ++++++++++++++++++------------------
 static/js/add_link.js       |  28 +++++-----
 static/js/convert2html.js   |  42 ---------------
 static/js/encryption.js     |  15 ++----
 static/js/init.js           |   4 +-
 static/js/jump_to_note.js   |  12 ++---
 static/js/note.js           |  30 +++++------
 static/js/note_history.js   |  22 ++++----
 static/js/recent_changes.js |   8 +--
 static/js/recent_notes.js   |  18 +++----
 static/js/settings.js       |  34 ++++++------
 static/js/tree.js           |   6 +--
 static/style.css            |   2 +-
 13 files changed, 136 insertions(+), 186 deletions(-)
 delete mode 100644 static/js/convert2html.js

diff --git a/src/templates/app.html b/src/templates/app.html
index 0346f6ff9..a0140dba1 100644
--- a/src/templates/app.html
+++ b/src/templates/app.html
@@ -51,7 +51,7 @@
           <p>
             <label>Search:</label>
             <input name="search" autocomplete="off">
-            <button id="btnResetSearch">&times;</button>
+            <button id="reset-search-button">&times;</button>
             <span id="matches"></span>
           </p>
         </div>
@@ -65,7 +65,7 @@
           <a onclick="encryptNoteAndSendToServer()"
              title="Encrypt the note so that password will be required to view the note"
              class="icon-action"
-             id="encryptButton"
+             id="encrypt-button"
              style="display: none;">
             <img src="stat/icons/lock.png" alt="Encrypt note"/>
           </a>
@@ -73,121 +73,121 @@
           <a onclick="decryptNoteAndSendToServer()"
              title="Decrypt note permamently so that password will not be required to access this note in the future"
              class="icon-action"
-             id="decryptButton"
+             id="decrypt-button"
              style="display: none;">
             <img src="stat/icons/unlock.png" alt="Decrypt note"/>
           </a>
 
           &nbsp;
 
-          <input autocomplete="off" value="" id="noteTitle" style="font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
+          <input autocomplete="off" value="" id="note-title" style="font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
 
           <button class="btn btn-xs" onclick="showCurrentNoteHistory();">History</button>
         </div>
       </div>
 
       <div style="overflow: auto; grid-area: note-content; padding-left: 10px;">
-        <div id="noteDetail"></div>
+        <div id="note-detail"></div>
       </div>
     </div>
 
-    <div id="recentNotesDialog" title="Recent notes" style="display: none;">
-      <select id="recentNotesSelectBox" size="15" style="width: 100%">
+    <div id="recent-notes-dialog" title="Recent notes" style="display: none;">
+      <select id="recent-notes-select-box" size="15" style="width: 100%">
       </select>
 
       <br/><br/>
 
       <p>
-        <button class="btn btn-sm" id="recentNotesJumpTo">Jump to (enter)</button>
+        <button class="btn btn-sm" id="recent-notes-jump-to">Jump to (enter)</button>
         &nbsp;
-        <button class="btn btn-sm" id="recentNotesAddLink">Add link (l)</button>
+        <button class="btn btn-sm" id="recent-notes-add-link">Add link (l)</button>
       </p>
     </div>
 
-    <div id="insertLinkDialog" title="Insert link" style="display: none;">
-      <form id="insertLinkForm">
+    <div id="insert-link-dialog" title="Insert link" style="display: none;">
+      <form id="insert-link-form">
         <div class="form-group">
-          <label for="noteAutocomplete">Link to note</label>
-          <input id="noteAutocomplete" style="width: 100%;">
+          <label for="note-autocomplete">Link to note</label>
+          <input id="note-autocomplete" style="width: 100%;">
         </div>
 
         <div class="form-group">
-          <label for="linkTitle">Link title</label>
-          <input id="linkTitle" style="width: 100%;">
+          <label for="link-title">Link title</label>
+          <input id="link-title" style="width: 100%;">
         </div>
 
         <button class="btn btn-sm">Add link</button>
       </form>
     </div>
 
-    <div id="jumpToNoteDialog" title="Jump to note" style="display: none;">
-      <form id="jumpToNoteForm">
+    <div id="jump-to-note-dialog" title="Jump to note" style="display: none;">
+      <form id="jump-to-note-form">
         <div class="form-group">
-          <label for="jumpToNoteAutocomplete">Jump to note</label>
-          <input id="jumpToNoteAutocomplete" style="width: 100%;">
+          <label for="jump-to-note-autocomplete">Jump to note</label>
+          <input id="jump-to-note-autocomplete" style="width: 100%;">
         </div>
 
         <button class="btn btn-sm">Jump</button>
       </form>
     </div>
 
-    <div id="encryptionPasswordDialog" title="Encrypted note" style="display: none;">
-      <form id="encryptionPasswordForm">
+    <div id="encryption-password-dialog" title="Encrypted note" style="display: none;">
+      <form id="encryption-password-form">
         <div class="form-group">
-          <label for="encryptionPassword">This note is encrypted. Enter password to show it:</label>
-          <input id="encryptionPassword" style="width: 250px;" type="password">
+          <label for="encryption-password">This note is encrypted. Enter password to show it:</label>
+          <input id="encryption-password" style="width: 250px;" type="password">
           <button class="btn btn-sm">Show</button>
         </div>
       </form>
     </div>
 
-    <div id="settingsDialog" title="Settings" style="display: none;">
-      <div id="settingsTabs">
+    <div id="settings-dialog" title="Settings" style="display: none;">
+      <div id="settings-tabs">
         <ul>
-          <li><a href="#changePassword">Change password</a></li>
-          <li><a href="#encryptionTimeout">Encryption timeout</a></li>
-          <li><a href="#historySnapshotTimeInterval">History snapshots</a></li>
+          <li><a href="#change-password">Change password</a></li>
+          <li><a href="#encryption-timeout">Encryption timeout</a></li>
+          <li><a href="#history-snapshot-time-interval">History snapshots</a></li>
         </ul>
-        <div id="changePassword">
-          <form id="changePasswordForm">
+        <div id="change-password">
+          <form id="change-password-form">
             <div class="form-group">
-              <label for="oldPassword">Old password</label>
-              <input class="form-control" id="oldPassword" type="password">
+              <label for="old-password">Old password</label>
+              <input class="form-control" id="old-password" type="password">
             </div>
 
             <div class="form-group">
-              <label for="newPassword1">New password</label>
-              <input class="form-control" id="newPassword1" type="password">
+              <label for="new-password1">New password</label>
+              <input class="form-control" id="new-password1" type="password">
             </div>
 
             <div class="form-group">
-              <label for="newPassword2">New password once more</label>
-              <input class="form-control" id="newPassword2" type="password">
+              <label for="new-password2">New password once more</label>
+              <input class="form-control" id="new-password2" type="password">
             </div>
 
             <button class="btn btn-sm">Change password</button>
           </form>
         </div>
-        <div id="encryptionTimeout">
+        <div id="encryption-timeout">
           <p>Encryption timeout is a time period after which the encryption key and encrypted data is wiped out from
             browser's memory. This is measured from the last encryption / decryption activity.</p>
 
-          <form id="encryptionTimeoutForm">
+          <form id="encryption-timeout-form">
             <div class="form-group">
-              <label for="encryptionTimeoutInSeconds">Encryption timeout (in seconds)</label>
-              <input class="form-control" id="encryptionTimeoutInSeconds" type="number">
+              <label for="encryption-timeout-in-seconds">Encryption timeout (in seconds)</label>
+              <input class="form-control" id="encryption-timeout-in-seconds" type="number">
             </div>
 
             <button class="btn btn-sm">Save</button>
           </form>
         </div>
-        <div id="historySnapshotTimeInterval">
+        <div id="history-snapshot-time-interval">
           <p>History snapshot time interval is time in seconds after which new history record will be created for the note.</p>
 
-          <form id="historySnapshotTimeIntervalForm">
+          <form id="history-snapshot-time-interval-form">
             <div class="form-group">
-              <label for="historySnapshotTimeIntervalInSeconds">History snapshot time interval (in seconds)</label>
-              <input class="form-control" id="historySnapshotTimeIntervalInSeconds" type="number">
+              <label for="history-snapshot-time-interval-in-seconds">History snapshot time interval (in seconds)</label>
+              <input class="form-control" id="history-snapshot-time-interval-in-seconds" type="number">
             </div>
 
             <button class="btn btn-sm">Save</button>
@@ -196,20 +196,20 @@
       </div>
     </div>
 
-    <div id="noteHistoryDialog" title="Note history" style="display: none;">
+    <div id="note-history-dialog" title="Note history" style="display: none;">
       <div style="display: flex;">
-        <select id="noteHistoryList" size="25" style="width: 150px; height: 630px;">
+        <select id="note-history-list" size="25" style="width: 150px; height: 630px;">
         </select>
 
-        <div id="noteHistoryContentWrapper" style="flex-grow: 1; margin-left: 20px;">
-          <h3 id="noteHistoryTitle" style="margin: 3px;"></h3>
+        <div id="note-history-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
+          <h3 id="note-history-title" style="margin: 3px;"></h3>
 
-          <div id="noteHistoryContent" style="height: 600px; width: 600px; overflow: auto;"></div>
+          <div id="note-history-content" style="height: 600px; width: 600px; overflow: auto;"></div>
         </div>
       </div>
     </div>
 
-    <div id="recentChangesDialog" title="Recent changes" style="display: none; padding: 20px;">
+    <div id="recent-changes-dialog" title="Recent changes" style="display: none; padding: 20px;">
     </div>
 
     <script type="text/javascript">
@@ -271,6 +271,5 @@
     <script src="stat/js/recent_changes.js"></script>
 
     <script src="stat/js/utils.js"></script>
-    <script src="stat/js/convert2html.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/static/js/add_link.js b/static/js/add_link.js
index b5ae56e43..0b92d4e75 100644
--- a/static/js/add_link.js
+++ b/static/js/add_link.js
@@ -1,30 +1,30 @@
 $(document).bind('keydown', 'alt+l', () => {
-    $("#noteAutocomplete").val('');
-    $("#linkTitle").val('');
+    $("#note-autocomplete").val('');
+    $("#link-title").val('');
 
-    const noteDetail = $('#noteDetail');
+    const noteDetail = $('#note-detail');
     noteDetail.summernote('editor.saveRange');
 
-    $("#insertLinkDialog").dialog({
+    $("#insert-link-dialog").dialog({
         modal: true,
         width: 500
     });
 
-    function setDefaultLinkTitle(noteId) {
+    function setDefaultlinkTitle(noteId) {
         const noteTitle = getNoteTitle(noteId);
 
-        $("#linkTitle").val(noteTitle);
+        $("#link-title").val(noteTitle);
     }
 
-    $("#noteAutocomplete").autocomplete({
+    $("#note-autocomplete").autocomplete({
         source: getAutocompleteItems(globalAllNoteIds),
         minLength: 0,
         change: () => {
-            const val = $("#noteAutocomplete").val();
+            const val = $("#note-autocomplete").val();
             const noteId = getNodeIdFromLabel(val);
 
             if (noteId) {
-                setDefaultLinkTitle(noteId);
+                setDefaultlinkTitle(noteId);
             }
         },
         // this is called when user goes through autocomplete list with keyboard
@@ -38,20 +38,20 @@ $(document).bind('keydown', 'alt+l', () => {
 });
 
 $("#insertLinkForm").submit(() => {
-    let val = $("#noteAutocomplete").val();
+    let val = $("#note-autocomplete").val();
 
     const noteId = getNodeIdFromLabel(val);
 
     if (noteId) {
-        const linkTitle = $("#linkTitle").val();
-        const noteDetail = $('#noteDetail');
+        const linkTitle = $("#link-title").val();
+        const noteDetail = $('#note-detail');
 
-        $("#insertLinkDialog").dialog("close");
+        $("#insert-link-dialog").dialog("close");
 
         noteDetail.summernote('editor.restoreRange');
 
         noteDetail.summernote('createLink', {
-            text: linkTitle,
+            text: link-title,
             url: 'app#' + noteId,
             isNewWindow: true
         });
diff --git a/static/js/convert2html.js b/static/js/convert2html.js
deleted file mode 100644
index 43348c9a4..000000000
--- a/static/js/convert2html.js
+++ /dev/null
@@ -1,42 +0,0 @@
-function convertNoteToHtml(noteId, failedNotes) {
-    $.ajax({
-        url: baseApiUrl + 'notes/' + noteId,
-        type: 'GET',
-        async: false,
-        success: note => {
-            const noteNode = getNodeByKey(noteId);
-
-            if (noteNode.data.is_clone) {
-                // we shouldn't process notes twice
-                return;
-            }
-
-            note.formatting = [];
-
-            for (const link of note.links) {
-                delete link.type;
-            }
-
-            $.ajax({
-                url: baseApiUrl + 'notes/' + noteId,
-                type: 'PUT',
-                data: JSON.stringify(note),
-                contentType: "application/json",
-                async: false,
-                success: () => {
-                    console.log("Note " + noteId + " converted.")
-                },
-                error: () => {
-                    console.log("Note " + noteId + " failed when writing");
-
-                    failedNotes.push(noteId);
-                }
-            });
-        },
-        error: () => {
-            console.log("Note " + noteId + " failed when reading");
-
-            failedNotes.push(noteId);
-        }
-    });
-}
\ No newline at end of file
diff --git a/static/js/encryption.js b/static/js/encryption.js
index 3eab8d9a6..e8eefb4f7 100644
--- a/static/js/encryption.js
+++ b/static/js/encryption.js
@@ -4,11 +4,7 @@ function handleEncryption(requireEncryption, modal, callback) {
     if (requireEncryption && globalDataKey === null) {
         globalEncryptionCallback = callback;
 
-        if (!modal) {
-            $("#noteDetailWrapper").hide();
-        }
-
-        $("#encryptionPasswordDialog").dialog({
+        $("#encryption-password-dialog").dialog({
             modal: modal,
             width: 400,
             open: () => {
@@ -72,13 +68,12 @@ function computeScrypt(password, salt, callback) {
     });
 }
 
-$("#encryptionPasswordForm").submit(() => {
-    const password = $("#encryptionPassword").val();
-    $("#encryptionPassword").val("");
+$("#encryption-password-form").submit(() => {
+    const password = $("#encryption-password").val();
+    $("#encryption-password").val("");
 
     getDataKey(password).then(key => {
-        $("#noteDetailWrapper").show();
-        $("#encryptionPasswordDialog").dialog("close");
+        $("#encryption-password-dialog").dialog("close");
 
         globalDataKey = key;
 
diff --git a/static/js/init.js b/static/js/init.js
index d5e9c3546..2781f2f02 100644
--- a/static/js/init.js
+++ b/static/js/init.js
@@ -7,8 +7,6 @@ $(document).bind('keydown', 'alt+m', () => {
     const hidden = toggle.css('display') === 'none';
 
     toggle.css('display', hidden ? 'block' : 'none');
-
-    $("#noteDetailWrapper").css("width", hidden ? "750px" : "100%");
 });
 
 // hide (toggle) everything except for the note content for distraction free writing
@@ -16,7 +14,7 @@ $(document).bind('keydown', 'alt+t', () => {
     const date = new Date();
     const dateString = formatDateTime(date);
 
-    $('#noteDetail').summernote('insertText', dateString);
+    $('#note-detail').summernote('insertText', dateString);
 });
 
 $(window).on('beforeunload', () => {
diff --git a/static/js/jump_to_note.js b/static/js/jump_to_note.js
index c3c15a677..a31b92f5d 100644
--- a/static/js/jump_to_note.js
+++ b/static/js/jump_to_note.js
@@ -1,25 +1,25 @@
 $(document).bind('keydown', 'alt+j', () => {
-    $("#jumpToNoteAutocomplete").val('');
+    $("#jump-to-note-autocomplete").val('');
 
-    $("#jumpToNoteDialog").dialog({
+    $("#jump-to-note-dialog").dialog({
         modal: true,
         width: 500
     });
 
-    $("#jumpToNoteAutocomplete").autocomplete({
+    $("#jump-to-note-autocomplete").autocomplete({
         source: getAutocompleteItems(globalAllNoteIds),
         minLength: 0
     });
 });
 
-$("#jumpToNoteForm").submit(() => {
-    const val = $("#jumpToNoteAutocomplete").val();
+$("#jump-to-note-form").submit(() => {
+    const val = $("#jump-to-note-autocomplete").val();
     const noteId = getNodeIdFromLabel(val);
 
     if (noteId) {
         getNodeByKey(noteId).setActive();
 
-        $("#jumpToNoteDialog").dialog('close');
+        $("#jump-to-note-dialog").dialog('close');
     }
 
     return false;
diff --git a/static/js/note.js b/static/js/note.js
index 966628f44..30acf7e2f 100644
--- a/static/js/note.js
+++ b/static/js/note.js
@@ -42,11 +42,11 @@ function saveNoteIfChanged(callback) {
 setInterval(saveNoteIfChanged, 5000);
 
 $(document).ready(() => {
-    $("#noteTitle").on('input', () => {
+    $("#note-title").on('input', () => {
         noteChanged();
     });
 
-    $('#noteDetail').summernote({
+    $('#note-detail').summernote({
         airMode: true,
         height: 300,
         callbacks: {
@@ -81,11 +81,11 @@ function parseHtml(contents, note) {
 }
 
 function updateNoteFromInputs(note) {
-    let contents = $('#noteDetail').summernote('code');
+    let contents = $('#note-detail').summernote('code');
 
     parseHtml(contents, note);
 
-    let title = $('#noteTitle').val();
+    let title = $('#note-title').val();
 
     getNodeByKey(note.detail.note_id).setTitle(title);
 
@@ -179,13 +179,13 @@ function setTreeBasedOnEncryption(note) {
 function setNoteBackgroundIfEncrypted(note) {
     if (note.detail.encryption > 0) {
         $(".note-editable").addClass("encrypted");
-        $("#encryptButton").hide();
-        $("#decryptButton").show();
+        $("#encrypt-button").hide();
+        $("#decrypt-button").show();
     }
     else {
         $(".note-editable").removeClass("encrypted");
-        $("#encryptButton").show();
-        $("#decryptButton").hide();
+        $("#encrypt-button").show();
+        $("#decrypt-button").hide();
     }
 
     setTreeBasedOnEncryption(note);
@@ -198,30 +198,30 @@ function loadNote(noteId) {
         if (newNoteCreated) {
             newNoteCreated = false;
 
-            $("#noteTitle").focus().select();
+            $("#note-title").focus().select();
         }
 
         handleEncryption(note.detail.encryption > 0, false, () => {
-            $("#noteDetailWrapper").show();
+            $("#note-detail-wrapper").show();
 
             // this may fal if the dialog has not been previously opened
             try {
-                $("#encryptionPasswordDialog").dialog('close');
+                $("#encryption-password-dialog").dialog('close');
             }
             catch(e) {}
 
-            $("#encryptionPassword").val('');
+            $("#encryption-password").val('');
 
             decryptNoteIfNecessary(note);
 
-            $("#noteTitle").val(note.detail.note_title);
+            $("#note-title").val(note.detail.note_title);
 
             noteChangeDisabled = true;
 
             // Clear contents and remove all stored history. This is to prevent undo from going across notes
-            $('#noteDetail').summernote('reset');
+            $('#note-detail').summernote('reset');
 
-            $('#noteDetail').summernote('code', note.detail.note_text);
+            $('#note-detail').summernote('code', note.detail.note_text);
 
             document.location.hash = noteId;
 
diff --git a/static/js/note_history.js b/static/js/note_history.js
index 81892139b..2805355bc 100644
--- a/static/js/note_history.js
+++ b/static/js/note_history.js
@@ -5,14 +5,14 @@ function showCurrentNoteHistory() {
 }
 
 function showNoteHistoryDialog(noteId, noteHistoryId) {
-    $("#noteHistoryDialog").dialog({
+    $("#note-history-dialog").dialog({
         modal: true,
         width: 800,
         height: 700
     });
 
-    $("#noteHistoryList").empty();
-    $("#noteHistoryContent").empty();
+    $("#note-history-list").empty();
+    $("#note-history-content").empty();
 
     $.ajax({
         url: baseApiUrl + 'notes-history/' + noteId,
@@ -23,7 +23,7 @@ function showNoteHistoryDialog(noteId, noteHistoryId) {
             for (const row of result) {
                 const dateModified = getDateFromTS(row.date_modified);
 
-                $("#noteHistoryList").append($('<option>', {
+                $("#note-history-list").append($('<option>', {
                     value: row.id,
                     text: formatDateTime(dateModified)
                 }));
@@ -31,10 +31,10 @@ function showNoteHistoryDialog(noteId, noteHistoryId) {
 
             if (result.length > 0) {
                 if (!noteHistoryId) {
-                    noteHistoryId = $("#noteHistoryList option:first").val();
+                    noteHistoryId = $("#note-history-list option:first").val();
                 }
 
-                $("#noteHistoryList").val(noteHistoryId).trigger('change');
+                $("#note-history-list").val(noteHistoryId).trigger('change');
             }
         },
         error: () => alert("Error getting note history.")
@@ -43,10 +43,10 @@ function showNoteHistoryDialog(noteId, noteHistoryId) {
 
 $(document).bind('keydown', 'alt+h', showCurrentNoteHistory);
 
-$("#noteHistoryList").on('change', () => {
-    const optVal = $("#noteHistoryList").find(":selected").val();
-    const historyItem = globalHistoryItems.find(r => r.id == optVal); // non-strict comparison is important here!!!s
+$("#note-history-list").on('change', () => {
+    const optVal = $("#note-history-list").find(":selected").val();
+    const historyItem = globalHistoryItems.find(r => r.id == optVal); // non-strict comparison is important here!!!
 
-    $("#noteHistoryTitle").html(historyItem.note_title);
-    $("#noteHistoryContent").html(historyItem.note_text);
+    $("#note-history-title").html(historyItem.note_title);
+    $("#note-history-content").html(historyItem.note_text);
 });
\ No newline at end of file
diff --git a/static/js/recent_changes.js b/static/js/recent_changes.js
index 3fdbbe911..cfef4c7f9 100644
--- a/static/js/recent_changes.js
+++ b/static/js/recent_changes.js
@@ -1,5 +1,5 @@
 function showRecentChanges() {
-    $("#recentChangesDialog").dialog({
+    $("#recent-changes-dialog").dialog({
         modal: true,
         width: 400,
         height: 700
@@ -69,7 +69,7 @@ function showRecentChanges() {
                         .append(' (').append(revLink).append(')'));
                 }
 
-                $("#recentChangesDialog").append(dayEl);
+                $("#recent-changes-dialog").append(dayEl);
             }
         },
         error: () => alert("Error getting recent changes.")
@@ -78,8 +78,8 @@ function showRecentChanges() {
 
 $(document).bind('keydown', 'alt+r', showRecentChanges);
 
-$(document).on('click', '#recentChangesDialog a', e => {
+$(document).on('click', '#recent-changes-dialog a', e => {
     goToInternalNote(e, () => {
-        $("#recentChangesDialog").dialog('close');
+        $("#recent-changes-dialog").dialog('close');
     });
 });
\ No newline at end of file
diff --git a/static/js/recent_notes.js b/static/js/recent_notes.js
index 8aa429039..c1862675c 100644
--- a/static/js/recent_notes.js
+++ b/static/js/recent_notes.js
@@ -13,14 +13,14 @@ function addRecentNote(noteTreeId, noteContentId) {
 }
 
 function showRecentNotes() {
-    $('#noteDetail').summernote('editor.saveRange');
+    $('#note-detail').summernote('editor.saveRange');
 
-    $("#recentNotesDialog").dialog({
+    $("#recent-notes-dialog").dialog({
         modal: true,
         width: 500
     });
 
-    let recentNotesSelectBox = $('#recentNotesSelectBox');
+    let recentNotesSelectBox = $('#recent-notes-select-box');
 
     recentNotesSelectBox.find('option').remove();
 
@@ -50,7 +50,7 @@ function showRecentNotes() {
 $(document).bind('keydown', 'alt+q', showRecentNotes);
 
 function getSelectedNoteIdFromRecentNotes() {
-    return $("#recentNotesSelectBox option:selected").val();
+    return $("#recent-notes-select-box option:selected").val();
 }
 
 function setActiveNoteBasedOnRecentNotes() {
@@ -58,16 +58,16 @@ function setActiveNoteBasedOnRecentNotes() {
 
     getNodeByKey(noteId).setActive();
 
-    $("#recentNotesDialog").dialog('close');
+    $("#recent-notes-dialog").dialog('close');
 }
 
 function addLinkBasedOnRecentNotes() {
     const noteId = getSelectedNoteIdFromRecentNotes();
 
     const linkTitle = getNoteTitle(noteId);
-    const noteDetail = $('#noteDetail');
+    const noteDetail = $('#note-detail');
 
-    $("#recentNotesDialog").dialog("close");
+    $("#recent-notes-dialog").dialog("close");
 
     noteDetail.summernote('editor.restoreRange');
 
@@ -78,7 +78,7 @@ function addLinkBasedOnRecentNotes() {
     });
 }
 
-$('#recentNotesSelectBox').keydown(e => {
+$('#recent-notes-select-box').keydown(e => {
     const key = e.which;
 
     if (key === 13)// the enter key code
@@ -92,7 +92,7 @@ $('#recentNotesSelectBox').keydown(e => {
     e.preventDefault();
 });
 
-$('#recentNotesSelectBox').dblclick(e => {
+$('#recent-notes-select-box').dblclick(e => {
     setActiveNoteBasedOnRecentNotes();
 });
 
diff --git a/static/js/settings.js b/static/js/settings.js
index 8c0e2699d..0e6ca7240 100644
--- a/static/js/settings.js
+++ b/static/js/settings.js
@@ -3,30 +3,30 @@ function displaySettings() {
         url: baseApiUrl + 'settings',
         type: 'GET',
         success: result => {
-            $("#encryptionTimeoutInSeconds").val(result['encryption_session_timeout']);
-            $("#historySnapshotTimeIntervalInSeconds").val(result['history_snapshot_time_interval']);
+            $("#encryption-timeout-in-seconds").val(result['encryption_session_timeout']);
+            $("#history-snapshot-time-interval-in-seconds").val(result['history_snapshot_time_interval']);
         },
         error: () => alert("Error getting settings.")
     });
 
-    $("#settingsDialog").dialog({
+    $("#settings-dialog").dialog({
         modal: true,
         width: 600
     });
 
-    $("#settingsTabs").tabs();
+    $("#settings-tabs").tabs();
 }
 
-$("#changePasswordForm").submit(() => {
-    const oldPassword = $("#oldPassword").val();
-    const newPassword1 = $("#newPassword1").val();
-    const newPassword2 = $("#newPassword2").val();
+$("#change-password-form").submit(() => {
+    const oldPassword = $("#old-password").val();
+    const newPassword1 = $("#new-password1").val();
+    const newPassword2 = $("#new-password2").val();
 
-    $("#oldPassword").val('');
-    $("#newPassword1").val('');
-    $("#newPassword2").val('');
+    $("#old-password").val('');
+    $("#new-password1").val('');
+    $("#new-password2").val('');
 
-    if (newPassword1 != newPassword2) {
+    if (newPassword1 !== newPassword2) {
         alert("New passwords are not the same.");
         return false;
     }
@@ -48,7 +48,7 @@ $("#changePasswordForm").submit(() => {
 
                 alert("Password has been changed.");
 
-                $("#settingsDialog").dialog('close');
+                $("#settings-dialog").dialog('close');
             }
             else {
                 alert(result.message);
@@ -60,8 +60,8 @@ $("#changePasswordForm").submit(() => {
     return false;
 });
 
-$("#encryptionTimeoutForm").submit(() => {
-    const encryptionTimeout = $("#encryptionTimeoutInSeconds").val();
+$("#encryption-timeout-form").submit(() => {
+    const encryptionTimeout = $("#encryption-timeout-in-seconds").val();
 
     $.ajax({
         url: baseApiUrl + 'settings',
@@ -82,8 +82,8 @@ $("#encryptionTimeoutForm").submit(() => {
     return false;
 });
 
-$("#historySnapshotTimeIntervalForm").submit(() => {
-    const historySnapshotTimeInterval = $("#historySnapshotTimeIntervalInSeconds").val();
+$("#history-snapshot-time-interval-form").submit(() => {
+    const historySnapshotTimeInterval = $("#history-snapshot-time-interval-in-seconds").val();
 
     $.ajax({
         url: baseApiUrl + 'settings',
diff --git a/static/js/tree.js b/static/js/tree.js
index 1e77c1319..94c78d803 100644
--- a/static/js/tree.js
+++ b/static/js/tree.js
@@ -36,7 +36,7 @@ const keybindings = {
     },
     "return": node => {
         // doesn't work :-/
-        $('#noteDetail').summernote('focus');
+        $('#note-detail').summernote('focus');
     }
 };
 
@@ -215,13 +215,13 @@ function resetSearch() {
     tree.clearFilter();
 }
 
-$("button#btnResetSearch").click(resetSearch);
+$("button#reset-search-button").click(resetSearch);
 
 $("input[name=search]").keyup(e => {
     const searchString = $(this).val();
 
     if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(searchString) === "") {
-        $("button#btnResetSearch").click();
+        $("button#reset-search-button").click();
         return;
     }
 
diff --git a/static/style.css b/static/style.css
index fdb1694bd..018a4508e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -78,7 +78,7 @@ span.fancytree-node.encrypted.fancytree-folder > span.fancytree-icon {
     text-decoration: none;
 }
 
-#encryptButton, #decryptButton {
+#encrypt-button, #decrypt-button {
     display: none;
 }