index.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>To-Do List</title>
  <meta name="description" content="A simple to-do list app.">
  <meta name="author" content="Ricky Saull">

  <meta property="og:title" content="To-Do List">
  <meta property="og:type" content="website">
  <!-- <meta property="og:url" content=" "> -->
  <meta property="og:description" content="A simple to-do list app.">
  <!-- <meta property="og:image" content="image.png"> -->

  <link rel="icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <link rel="stylesheet" href="css/styles.css">

</head>

<body>
  <div class="container">
		<h2>To Do List App</h2>
		<p><em> Double click to mark an item off, click on "X" to delete an item, and drag items to reorder.</em></p>

		<form name="toDoList">
			<input type="text" name="ListItem" id="input"/>
		</form>

		<div onclick="newItem()" id="button">Add</div>
		<br/>
		<ol id="list"></ol>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</body>
</html>