index.html

---
title: Home
baseurl: /
layout: default
---

<main class="container">
  <div class="row">
    <div class="col-12 mt-5">
      <div class="card card-body px-3 px-lg-5 form--width">
        <h2 class="h2 h2--todo text-center mb-4">LIST</h2>
        <div id="task-list" class="card card-body mb-3 bg--black-a125">
          <div class="card mb-3">
            <div class="card-header">
              <h3 class="h3">Task title</h3>
            </div>
            <div class="card-body">
              <p class="p">Description of task</p>
            </div>  
          </div>
          <div class="card mb-3">
            <div class="card-header">
              <h3 class="h3">Task title</h3>
            </div>
            <div class="card-body">
              <p class="p">Description of task</p>
            </div>  
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <h3 class="h3">App Status</h3>
          </div>
          <div class="card-body">
            <div class="my-3 p-2 todo__notifications">
              <button type="button" id="clearNotifications" class="btn btn-outline-secondary mb-3 buttons--secondary">Clear App Status</button>
              <ul class="todo__ul" id="notifications">
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 mt-4 mb-5">
      <div class="card card-body py-4 px-3 px-lg-5 form--width">
        <div class="form__wrapper">
          <h2 class="h2 h2--todo text-center mb-4">TODO</h2>
          <form id="Form" class="form" action="{{ site.baseurl }}index.html">
            <div class="form-floating mb-4">
              <input type="text" class="form-control" id="title" placeholder="My task title">
              <label for="title">Title of task</label>
            </div>
            <div class="row mb-4">
              <div class="col-4">
                <div class="form-floating">
                  <select class="form-select" id="yearSelect" aria-label="Floating label select example">
                    <option>Select a year</option>
                    {% assign year = 'now' | date: '%Y' %}
                    <option value="{{ year | minus: 1 }}">{{ year | minus: 1 }}</option>
                    <option selected value="{{ year }}">{{ year }}</option>
                    {% for y in (1..3) %}
                    <option value="{{ year | plus: y }}">{{ year | plus: y }}</option>
                    {% endfor %}
                  </select>
                  <label for="yearSelect">Year</label>
                </div>
              </div>
              <div class="col-4">
                <div class="form-floating">
                  <select class="form-select" id="monthSelect" aria-label="Floating label select example">
                    <option>Select a month</option>
                    {% assign month = 'now' | date: '%m' | times: 1 %}
                    {% comment %}
                    Since {{ 'now' | date: '%m' }} results in a string and not a number we need to convert the month to an integer to do a comparison
                    Multiplying the month string by 1 ( times: 1 ) converts it into a number that we can compare against another number
                    {% endcomment %}
                    {% for m in (1..12) %}
                    <option {% if month == m %}selected{% endif %} value="{{ m }}">{{ m }}</option>
                    {% endfor %}
                  </select>
                  <label for="monthSelect">Month</label>
                </div>
              </div>
              <div class="col-4">
                <div class="form-floating">
                  <select class="form-select" id="daySelect" aria-label="Floating label select example">
                    <option>Select a month</option>
                    {% assign day = 'now' | date: '%d' | times: 1 %}
                    {% for d in (1..31) %}
                    <option {% if day == d %}selected{% endif %} value="{{ d }}">{{ d }}</option>
                    {% endfor %}
                  </select>
                  <label for="daySelect">Day</label>
                </div>
              </div>
            </div>
            <div class="form-floating mb-4">
              <textarea class="form-control" placeholder="Create details for task" id="details" style="height: 100px"></textarea>
              <label for="details">Task details</label>
            </div>
            <div class="text-center">
              <button type="submit" id="submit" class="btn btn-outline-primary">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</main>