Last Changes

Also, let's add a background picture to make our website more eye-catching. For that, return our link to the main.css file and move the desired picture to a static folder. Open your base.html and add it to the bottom of your header:

Then open main.css and remove old styles. Add:

Let's check our website. It looks a lot nicer.

Now, need to fix the fields in the edit.html file to make it nicer. We have the form here. We want a new form like we did in our new_recipes.html with all labels and nice text inputs and text area. Let's just copy and paste this in here.

The file's name in the example below doesn't correspond to the file's name in our project.

We have our new form. It's essential to note the difference compared to the create feature. In editcase, we don't want empty forms; we aim to populate each text field or text area with the existing recipe data. Fortunately, it's quite straightforward. Instead of using a simple placeholder, we can set a value="{{ recipe.title }}" to make it more user-friendly. However, for Textarea, things are a bit different. Textareas don't have a 'value' parameter, so we should remove the placeholder. Also, keep in mind that input tags don't have closing tags, but text areas do. Everything within the textarea tags will be part of the content, like this:
<textarea>{{ recipe.description }}</textarea>.

Additionally, we need to update the URL we're posting to in our form action, changing it to:
<form action="/recipes/edit/{{ recipe.id }}"....

And one more detail: the value for <input="submit" value="Save"> should read Save instead of Post.

Now, let's put this to the test. Select any post, head over here to edit, and you can freely make changes, add new lines, or create multiple paragraphs. After you're done, simply hit the Save button.

So we have the Flask application where we have implemented the whole CRUD functionality, added a Database, improved style with Bootstrap and it's fully functional.

It's a good start if you have never used Flask before. And now, you have your first website that you can present to the future interviewer.