Building and Hosting a To-Do App on AWS S3: A Comprehensive Guide

Intro 🏁

In this blog, I am going to create an app using HTML, CSS, and JavaScript that allows you to add, delete and mark tasks as completed. After that, I will host it app on an AWS S3 bucket. From there, you can share it with others and access it from anywhere, anytime.

Here is a video about this topic 🚀

https://www.youtube.com/watch?v=v8SUfQrGK8M

Creating a To-Do App ✨

A to-do app is a simple application that allows users to create a list of tasks that they need to complete. The app can be created using HTML, CSS, and JavaScript. HTML is used to create the structure of the app, CSS is used to style the app, and JavaScript is used to add functionality to the app.

Step 1: Create the HTML Structure 📝

The first step in creating a to-do app is to create the HTML structure. You need to create a container div to hold all the elements of the app. Inside the container div, you need to create a form element with an input field and a button to add tasks. You also need to create an unordered list to display the tasks.

Here's the HTML code for the to-do app in the index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>To-Do List</h1>
      <form>
        <input type="text" id="new-item" placeholder="Add new item">
        <button type="submit" id="add-btn">Add</button>
      </form>
      <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Step 2: Style the App Using CSS 🍭

Once you have created the HTML structure, the next step is to style the app using CSS. You can use CSS to add colors, fonts, and other styling elements to the app.

Here's the CSS code for the to-do app in the style.css file:

.container {
    width: 50%;
    margin: auto;
    text-align: center;
  }

  h1 {
    font-size: 36px;
    margin-bottom: 20px;
  }

  form {
    display: flex;
    margin-bottom: 20px;
  }

  input[type="text"] {
    width: 70%;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px 0 0 5px;
    border: 2px solid #ccc;
    border-right: none;
  }

  button {
    width: 30%;
    padding: 10px;
    font-size: 18px;
    border-radius: 0 5px 5px 0;
    border: 2px solid #ccc;
    border-left: none;
    background-color: #4CAF50;
    color: white;
  }

  button:hover {
    background-color: #3e8e41;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 18px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
  }

  li:last-child {
    border-bottom: none;
  }

  .checked {
    text-decoration: line-through;
    color: #888;
  }

  .delete-btn {
    background-color: #f44336;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
  }

  .delete-btn:hover {
    background-color: #d32f2f;
  }

Step 3: Add Functionality Using JavaScript 🧁

The final step in creating a to-do app is to add functionality using JavaScript. You can use JavaScript to add and remove tasks from the list.

Here's the JavaScript code for the to-do app in the script.js file:

const newItem = document.getElementById("new-item");
const addBtn = document.getElementById("add-btn");
const todoList = document.getElementById("todo-list");

addBtn.addEventListener("click", addItem);
todoList.addEventListener("click", deleteItem);

function addItem(event) {
  event.preventDefault();
  if (newItem.value !== "") {
    const li = document.createElement("li");
    const itemText = document.createTextNode(newItem.value);
    li.appendChild(itemText);
    todoList.appendChild(li);
    newItem.value = "";
  }
}

function deleteItem(event) {
  const target = event.target;
  if (target.classList.contains("delete-btn")) {
    const li = target.parentNode;
    todoList.removeChild(li);
  } else if (target.tagName === "LI") {
    target.classList.toggle("checked");
  }
}

Uploading to AWS S3 📤

Once we have created the to-do app, we need to upload it to AWS S3. AWS S3 is a cloud-based storage service that allows us to store and retrieve files. It is also a great option for hosting static websites.

To upload our to-do app to AWS S3, we need to create an S3 bucket. An S3 bucket is a container for storing objects, such as files and folders. To create an S3 bucket, we need to log in to the AWS Management Console and navigate to the S3 service.

Once we are in the S3 service, we need to click on the "Create Bucket" button. We will then be prompted to enter a unique bucket name and select a region for the bucket. We will also need to configure the bucket's properties, such as permissions and encryption.

After creating the bucket, we need to upload the files for our to-do app. We can do this by clicking on the bucket name and then clicking on the "Upload" button. We will then be prompted to select the files we want to upload.

Hosting on AWS S3 🚀

Once we have uploaded our to-do app to AWS S3, we need to host it so that people can access it. To do this, we need to configure the bucket policy.

A bucket policy is a set of rules that determine who can access the objects in a bucket. To configure the bucket policy, we need to navigate to the bucket properties and click on the "Permissions" tab. We will then need to click on the "Bucket Policy" button and enter the following policy:

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"PublicReadGetObject",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::your-bucket-name/*"]
    }
  ]
}

Replace "your-bucket-name" with the name of your bucket and click the "Save" button.

Set Up Static Website Hosting 🔥

The final step is to set up static website hosting for your AWS S3 bucket. To do this, select your bucket from the list of buckets and click the "Properties" tab. Click the "Static website hosting" card and scroll down to select "Use this bucket to host a website." In the "Index document" field, enter the name of the HTML file that serves as the entry point to your to-do app (e.g., "index.html"). You can leave the "Error document" field empty unless you have a custom error page.

Once you have set up static website hosting, AWS S3 will provide you with a public endpoint URL that you can use to access your to-do app. You can find the endpoint URL by clicking the "Endpoint" link in the "Static website hosting" card.

Conclusion 🙋‍♀️

Building a To-Do app using HTML, CSS, and JavaScript is a great way to practice web development skills. Hosting the To-Do app on AWS S3 makes it accessible to anyone with an internet connection. By following the steps outlined in this article, you can create and host your own To-Do app on AWS S3.

That's it for now. Did you like this blog? Please let me know.

You can Buy Me a Coffee if you want to and please don't forget to follow me on YouTube, Twitter, and LinkedIn also.

Happy Learning!

Bilal's Blog