karimamd/basic html notes queue

## basic html notes queue
<!DOCTYPE html>
<html>
<head>
	<title>Note Taking App</title>
</head>
<body>
	<h1>Note Taking App</h1>

	<div id="note">
		<h2 id="note-title">Note Title</h2>
		<p id="note-body">Note Body</p>
	</div>

	<div id="navigation">
		<button id="previous-note">&larr; Previous Note</button>
		<button id="next-note">Next Note &rarr;</button>
	</div>

	<script>
		// Define an array of notes
		var notes = [
			{
				title: "Note 1",
				body: "This is the first note"
			},
			{
				title: "Note 2",
				body: "This is the second note"
			},
			{
				title: "Note 3",
				body: "This is the third note"
			}
		];

		// Initialize the current note index to 0
		var currentNoteIndex = 0;

		// Function to display the current note
		function displayNote() {
			var note = notes[currentNoteIndex];
			document.getElementById("note-title").innerHTML = note.title;
			document.getElementById("note-body").innerHTML = note.body;
		}

		// Function to navigate to the previous note
		function previousNote() {
			if (currentNoteIndex > 0) {
				currentNoteIndex--;
				displayNote();
			}
		}

		// Function to navigate to the next note
		function nextNote() {
			if (currentNoteIndex < notes.length - 1) {
				currentNoteIndex++;
				displayNote();
			}
		}

		// Add click event listeners to the arrow buttons
		document.getElementById("previous-note").addEventListener("click", previousNote);
		document.getElementById("next-note").addEventListener("click", nextNote);

		// Display the initial note
		displayNote();
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Note Taking App</title>
	</head>
	<body>
	<h1>Note Taking App</h1>

	<div id="note">
	<h2 id="note-title">Note Title</h2>
	<p id="note-body">Note Body</p>
	</div>

	<div id="navigation">
	<button id="previous-note">← Previous Note</button>
	<button id="next-note">Next Note →</button>
	</div>

	<script>
	// Define an array of notes
	var notes = [
	{
	title: "Note 1",
	body: "This is the first note"
	},
	{
	title: "Note 2",
	body: "This is the second note"
	},
	{
	title: "Note 3",
	body: "This is the third note"
	}
	];

	// Initialize the current note index to 0
	var currentNoteIndex = 0;

	// Function to display the current note
	function displayNote() {
	var note = notes[currentNoteIndex];
	document.getElementById("note-title").innerHTML = note.title;
	document.getElementById("note-body").innerHTML = note.body;
	}

	// Function to navigate to the previous note
	function previousNote() {
	if (currentNoteIndex > 0) {
	currentNoteIndex--;
	displayNote();
	}
	}

	// Function to navigate to the next note
	function nextNote() {
	if (currentNoteIndex < notes.length - 1) {
	currentNoteIndex++;
	displayNote();
	}
	}

	// Add click event listeners to the arrow buttons
	document.getElementById("previous-note").addEventListener("click", previousNote);
	document.getElementById("next-note").addEventListener("click", nextNote);

	// Display the initial note
	displayNote();
	</script>
	</body>
	</html>