abhamra · April 9, 2024 20:08
diff --git a/journal.html b/journal.html
 <html class="theme-light" id="content">
  <head>
    <title>Notes</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8" />
   
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      <style>
        
          .centerIMG{
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 50%;
          }
          
          .theme-light {
               --color-primary: #0060df;
               --color-secondary: #fbfbfe;
               --color-accent: #fd6f53;
               --font-color: #000000;
               
               --inverted-secondary: #243133;
               --inverted-font-color: #ffffff
 }
            .theme-dark {
                --color-primary: #17ed90;
                --color-secondary: #243133;
                --color-accent: #12cdea;
                --font-color: #ffffff;
                
                --inverted-secondary: #fbfbfe;
                --inverted-font-color: #000000;
            }
            
            #content{
                background-color: var(--color-secondary);
                color: var(--font-color);
            }
            
            .input{
                background-color: var(--color-secondary);
                color: var(--font-color);
            }
          
      </style>
      
  </head>
  <body>
      <div id="mainContent" class="centerIMG">
          <nav>
            <div class="nav-wrapper">
                    <img src="todolist.png" style="width: 150; height: 68; padding: 5">
                    <ul id="nav-mobile" class="right hide-on-med-and-down">
                        <li><a href="updated-todo.html">To-Do</a></li>
                        <li><a href="journal.html">Journal/Diary</a></li>
                    </ul>
            </div>
          </nav>
          
        <div>
            <h6>Use the dropdown to navigate between notes, and the "New" button to create new notes. When a note is selected, use the "Delete" button to delete it. Return to the "To-Do" page to log out.</h6>
            <select id="notes" class="browser-default" style="border: 2px; border-radius: 5; border-color: black" onchange="changeNote()"></select>
            <a class="waves-effect waves-light btn" onClick="newNote()">New</a>
            
 <!--            <a class='dropdown-trigger btn' href='#' data-target='dropdown1' id="notes">Drop Me!</a>-->
            <a class="waves-effect waves-light btn" onClick="deleteNote()">Delete</a>
            <a class="waves-effect waves-light btn" id="switch" onClick="toggleTheme()">Light/Dark Theme</a>
        </div>
      <textarea id="editor" class="input"style="margin: 5" rows="10" onkeyup="saveNote()"
                onkeydown="checkEmpty()" autofocus></textarea>
      </div>
      
      
    <script>
      
        const notes = document.querySelector('#notes');
        const editor = document.querySelector('#editor');
        
        // Load user's saved notes
        for (let i = 0; i < window.localStorage.length; i++) {
            //the option tag is like a dropdown basically
            const newNote = document.createElement('option');
            newNote.innerText = window.localStorage.key(i);
            notes.appendChild(newNote);
        }
        changeNote();
        
        /**
 * Change editor text to the currently selected note.
 */
        function changeNote() {
            editor.value = window.localStorage.getItem(notes.value);
        }
        
        /**
 * Ask the user to name their new note then create it.
 * Add this note to the select div then focus to it.
 */
        function newNote() {
            const note = prompt('Name of note?');
            window.localStorage.setItem(note, '');

            const noteElem = document.createElement('option');
            noteElem.innerText = note;
            notes.insertBefore(noteElem, notes.firstChild);

            // Focus this note
            notes.value = note;
            changeNote();
        }
        
        /**
 * Delete currently selected note
 */
        function deleteNote() {
            const note = notes.value;
            window.localStorage.removeItem(note);
            editor.value = '';
            for (let i = 0; i < notes.length; i++) {
                const option = notes[i];
                if (option.value === note) {
                    notes.removeChild(option);
                }
        }
        }
        
            /**
 * Check for empty note title.
 */
        function checkEmpty() {
            if (notes.length === 0) {
                const untitled = document.createElement('option');
                untitled.innerText = 'untitled';
                notes.appendChild(untitled);
            }   
        }
        
        /**
 * Save editor text to storage under the current note.
 */
        function saveNote() {
            window.localStorage.setItem(notes.value, editor.value);
        }
        
        
        // function to set a given theme/color-scheme
            function setTheme(themeName) {
                localStorage.setItem('theme', themeName);
                document.documentElement.className = themeName;
            }
            // function to toggle between light and dark theme
            function toggleTheme() {
                if (localStorage.getItem('theme') === 'theme-dark'){
                    setTheme('theme-light');
                } else {
                    setTheme('theme-dark');
                }
            }
            // Immediately invoked function to set the theme on initial load
            (function () {
                if (localStorage.getItem('theme') === 'theme-dark') {
                    setTheme('theme-dark');
                } else {
                    setTheme('theme-light');
                }
            })();
        
        
        
    </script>
  </body>
 </html>
	<html class="theme-light" id="content">
	<head>
	<title>Notes</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8" />

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

	<style>

	.centerIMG{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	}

	.theme-light {
	--color-primary: #0060df;
	--color-secondary: #fbfbfe;
	--color-accent: #fd6f53;
	--font-color: #000000;

	--inverted-secondary: #243133;
	--inverted-font-color: #ffffff
	}
	.theme-dark {
	--color-primary: #17ed90;
	--color-secondary: #243133;
	--color-accent: #12cdea;
	--font-color: #ffffff;

	--inverted-secondary: #fbfbfe;
	--inverted-font-color: #000000;
	}

	#content{
	background-color: var(--color-secondary);
	color: var(--font-color);
	}

	.input{
	background-color: var(--color-secondary);
	color: var(--font-color);
	}

	</style>

	</head>
	<body>
	<div id="mainContent" class="centerIMG">
	<nav>
	<div class="nav-wrapper">
	<img src="todolist.png" style="width: 150; height: 68; padding: 5">
	<ul id="nav-mobile" class="right hide-on-med-and-down">
	<li><a href="updated-todo.html">To-Do</a></li>
	<li><a href="journal.html">Journal/Diary</a></li>
	</ul>
	</div>
	</nav>

	<div>
	<h6>Use the dropdown to navigate between notes, and the "New" button to create new notes. When a note is selected, use the "Delete" button to delete it. Return to the "To-Do" page to log out.</h6>
	<select id="notes" class="browser-default" style="border: 2px; border-radius: 5; border-color: black" onchange="changeNote()"></select>
	<a class="waves-effect waves-light btn" onClick="newNote()">New</a>

	<!-- <a class='dropdown-trigger btn' href='#' data-target='dropdown1' id="notes">Drop Me!</a>-->
	<a class="waves-effect waves-light btn" onClick="deleteNote()">Delete</a>
	<a class="waves-effect waves-light btn" id="switch" onClick="toggleTheme()">Light/Dark Theme</a>
	</div>
	<textarea id="editor" class="input"style="margin: 5" rows="10" onkeyup="saveNote()"
	onkeydown="checkEmpty()" autofocus></textarea>
	</div>


	<script>

	const notes = document.querySelector('#notes');
	const editor = document.querySelector('#editor');

	// Load user's saved notes
	for (let i = 0; i < window.localStorage.length; i++) {
	//the option tag is like a dropdown basically
	const newNote = document.createElement('option');
	newNote.innerText = window.localStorage.key(i);
	notes.appendChild(newNote);
	}
	changeNote();

	/**
	* Change editor text to the currently selected note.
	*/
	function changeNote() {
	editor.value = window.localStorage.getItem(notes.value);
	}

	/**
	* Ask the user to name their new note then create it.
	* Add this note to the select div then focus to it.
	*/
	function newNote() {
	const note = prompt('Name of note?');
	window.localStorage.setItem(note, '');

	const noteElem = document.createElement('option');
	noteElem.innerText = note;
	notes.insertBefore(noteElem, notes.firstChild);

	// Focus this note
	notes.value = note;
	changeNote();
	}

	/**
	* Delete currently selected note
	*/
	function deleteNote() {
	const note = notes.value;
	window.localStorage.removeItem(note);
	editor.value = '';
	for (let i = 0; i < notes.length; i++) {
	const option = notes[i];
	if (option.value === note) {
	notes.removeChild(option);
	}
	}
	}

	/**
	* Check for empty note title.
	*/
	function checkEmpty() {
	if (notes.length === 0) {
	const untitled = document.createElement('option');
	untitled.innerText = 'untitled';
	notes.appendChild(untitled);
	}
	}

	/**
	* Save editor text to storage under the current note.
	*/
	function saveNote() {
	window.localStorage.setItem(notes.value, editor.value);
	}


	// function to set a given theme/color-scheme
	function setTheme(themeName) {
	localStorage.setItem('theme', themeName);
	document.documentElement.className = themeName;
	}
	// function to toggle between light and dark theme
	function toggleTheme() {
	if (localStorage.getItem('theme') === 'theme-dark'){
	setTheme('theme-light');
	} else {
	setTheme('theme-dark');
	}
	}
	// Immediately invoked function to set the theme on initial load
	(function () {
	if (localStorage.getItem('theme') === 'theme-dark') {
	setTheme('theme-dark');
	} else {
	setTheme('theme-light');
	}
	})();



	</script>
	</body>
	</html>