Chat-GPTを活用してflaskでTo do Listアプリを作ってみる

Chat-GPTを使ってpythonのフレームワークであるflaskを使ったTo do List Appを作りたいと思います。

　このコードは、Flask Webフレームワークを使用して、基本的なToDoリストのウェブサイトを作成します。HTMLコードはウェブサイトのレイアウトを定義し、CSSコードは要素をスタイルし、Pythonコードはデータ処理を実行します。

　このコードを実行するには、HTMLファイルとCSSファイルをそれぞれ「index.html」「style.css」として「templates」という名前のフォルダに保存します。Pythonのコードは、同じフォルダに「app.py」というファイル名で保存しておきます。そして、ターミナルで「python app.py」コマンドを使って「app.py」ファイルを実行してください。これでローカルサーバーが起動し、Webブラウザで「http://localhost:5000/」にアクセスすることでWebサイトを見ることができます。

プログラムファイルへの説明もChat-GPTがしてくれました。

Chat-GPTへのcommand

write code for to-do list website using html, css and python

作成されたプログラムファイルは3つです。

app.py

from flask import Flask, render_template, request, redirect

app = Flask(__name__)

tasks = []

@app.route('/')
def index():
    return render_template('index.html', tasks=tasks)

@app.route('/', methods=['POST'])
def add_task():
    task = request.form['task']
    tasks.append(task)
    return redirect('/')

if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="header">
        <h1>To-Do List</h1>
    </div>
    <div class="form">
        <form method="POST" action="">
            <input type="text" name="task" class="task_input" placeholder
="Add a new task...">
            <button type="submit" class="add_btn">Add</button>
        </form>
    </div>
    <div class="tasks">
        <ul>
            {% for task in tasks %}
            <li>{{ task }}</li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>

style.css

body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}
.header {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}
.form {
    margin-top: 20px;
    text-align: center;
}
.task_input {
    width: 60%;
    height: 35px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}
.add_btn {
    width: 20%;
    height: 35px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.tasks {
    margin-top: 20px;
    text-align: center;
}
.tasks ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.tasks ul li {
    background-color: #fff;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
}

コマンド

python app.py

flaskサーバーが起動します

* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Restarting with windowsapi reloader
* Debugger is active!
* Debugger PIN: 195-643-489
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

ローカルホストにアクセスします

http://127.0.0.1:5000/

このようにTo do Listアプリの作成を行うことが出来ました。

※jinja2.exceptions.TemplateNotFound python flaskとエラーが表示された場合

指定の場所にindex.htmlファイルが存在していない可能性があります。

コマンド: mkdir templetesでディレクトリを作成し、そこにindex.htmlを移動させてください。

Flask---app.py(flaskのプログラムファイル)

---templates---index.html

---style.css

JavasriptでTo do Listアプリを作成する場合

Chat-GPTスクリプト

write code for to-do list website using html. css and javasript

game.js

let taskInput = document.getElementById("taskInput");
let taskList = document.getElementById("taskList");

function addTask() {
  if (taskInput.value === "") {
    alert("Please enter a task!");
  } else {
    let task = document.createElement("li");
    task.innerHTML = taskInput.value;
    task.addEventListener("click", completeTask);
    taskList.appendChild(task);
    taskInput.value = "";
    
    let deleteButton = document.createElement("span");
    deleteButton.innerHTML = "&times;";
    deleteButton.className = "delete";
    deleteButton.addEventListener("click", deleteTask);
    task.appendChild(deleteButton);
  }
}

function completeTask() {
  this.classList.toggle("completed");
}

function deleteTask() {
  this.parentElement.remove();
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Enter task...">
    <button onclick="addTask()">Add</button>
    <ul id="taskList">
    </ul>
    <script src="script.js"></script>
  </body>
</html>

style.css

body {
    font-family: Arial, sans-serif;
  }
  
  h1 {
    text-align: center;
  }
  
  #taskInput {
    width: 60%;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: none;
  }
  
  button {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: none;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #3e8e41;
  }
  
  li {
    list-style-type: none;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
  }
  
  li:hover {
    background-color: #f5f5f5;
    cursor: pointer;
  }
  
  .completed {
    text-decoration: line-through;
    color: #bbb;
  }
  
  .delete {
    float: right;
    color: #f44336;
    font-weight: bold;
    cursor: pointer;
  }
  
  .delete:hover {
    color: #d32f2f;
  }
  