## Task

- Clone this repository to explore this project:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <style>
      html {
        box-sizing: border-box;
      }

      *,
      *::after,
      *::before {
        box-sizing: inherit;
      }

      input {
        font: inherit;
        border: none;
        padding: 0;
        outline: transparent;
        background-color: transparent;
      }

      .text-widget {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 10px;
        background-color: #202634;
        border: 1px solid #ccc;
        border-radius: 10px;
        display: flex;
        align-items: center;
      }

      .text-field {
        padding: 5px 12px;
        width: 100%;
        color: #fff;
        background-color: #2f3747;
        border-radius: 3px;
        margin-right: 10px;
      }

      .copy-button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: none;
        background-color: #2f3747;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="text-widget">
      <input
        type="text"
        class="text-field"
        id="widget1-text"
        value="git clone https://github.com/CodefinityPython/docker_challenge3"
      />
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg
          width="20"
          height="20"
          x="0"
          y="0"
          viewBox="0 0 32 32"
          style="enable-background: new 0 0 512 512"
          xml:space="preserve"
          class=""
        >
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
              opacity="1"
              data-original="#000000"
              class=""
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>



    <script>
      const handleClick = (textId, notifyId) => {
        const textField = document.getElementById(textId);
        const text = textField.value;
        navigator.clipboard.writeText(text);
        Notiflix.Notify.Success("Copied to clipboard!", {
          timeout: 2000,
          width: "260px",
          position: "center-top",
          textColor: "#ff5549",
        });
      };
    </script>
  </body>
</html>

- Fill in all the blanks ( ___ ) in the Docker Compose file (`docker-compose.yml`) to configure the web application container. Use parameters to define the build context (`build`), set ports (`ports`), mount volumes (`volumes`), and execute a command (`command`).

To check the task, run the command below:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget31-text" value="python tests/run.py" />
      <button class="copy-button" onclick="handleClick('widget31-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

If the command above doesn't work, try inputting this `python3 tests/run.py`.



- Run the commands below to build the container and start it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <style>
      html {
        box-sizing: border-box;
      }

      *,
      *::after,
      *::before {
        box-sizing: inherit;
      }

      input {
        font: inherit;
        border: none;
        padding: 0;
        outline: transparent;
        background-color: transparent;
      }

      .text-widget {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 10px;
        background-color: #202634;
        border: 1px solid #ccc;
        border-radius: 10px;
        display: flex;
        align-items: center;
      }

      .text-field {
        padding: 5px 12px;
        width: 100%;
        color: #fff;
        background-color: #2f3747;
        border-radius: 3px;
        margin-right: 10px;
      }

      .copy-button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: none;
        background-color: #2f3747;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="text-widget">
      <input
        type="text"
        class="text-field"
        id="widget1-text"
        value="docker-compose build"
      />
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg
          width="20"
          height="20"
          x="0"
          y="0"
          viewBox="0 0 32 32"
          style="enable-background: new 0 0 512 512"
          xml:space="preserve"
          class=""
        >
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
              opacity="1"
              data-original="#000000"
              class=""
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>



    <script>
      const handleClick = (textId, notifyId) => {
        const textField = document.getElementById(textId);
        const text = textField.value;
        navigator.clipboard.writeText(text);
        Notiflix.Notify.Success("Copied to clipboard!", {
          timeout: 2000,
          width: "260px",
          position: "center-top",
          textColor: "#ff5549",
        });
      };
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget30-text" value="docker-compose up" />
      <button class="copy-button" onclick="handleClick('widget30-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

- Navigate in the browser to port `0.0.0.0:8000`.

This course is designed for Python developers looking to master Docker for efficient application containerization. You will learn how to create and configure Dockerfiles, optimize images, and use Docker Compose. The course covers Docker basics, container and network management, container security, and access control. It is ideal for Python developers who want to enhance the development and deployment efficiency of their Python applications.

In this section, we'll explore the fundamental concepts of Docker - a powerful tool for managing containers. Understanding these concepts will help you gain a deeper insight into how Docker works and how to effectively utilize it in your software development and deployment processes.

This section will guide you step by step through the process of creating your first Dockerfiles - text files that contain instructions for automating the building of Docker images. You will learn how to create a Dockerfile for your application, including defining the base image, adding necessary components, configuring the environment, and installing dependencies.

The section titled "Docker for Flask Developers" offers an in-depth exploration of utilizing Docker for developing web applications based on the Flask framework for Python. In this section, you'll learn how to effectively use Docker to create, deploy, and manage Flask applications in an isolated and scalable container environment.

This section delves into Docker Compose, a tool designed to simplify the management of multi-container Docker applications. By utilizing Docker Compose, users can define and run multi-container Docker applications with ease, streamlining the process of container orchestration.

Challenge 3: Docker Compose

Task