You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
2.0 KiB
48 lines
2.0 KiB
{% extends 'base.html' %}
|
|
|
|
{% block title %}New Recipe{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>New Recipe</h1>
|
|
<form action="{{ url_for('paginas.new_recipe') }}" method="post">
|
|
<label for="title">Title:</label>
|
|
<input type="text" id="title" name="title" required>
|
|
<label for="description">Description:</label>
|
|
<textarea id="description" name="description" required></textarea>
|
|
<h2>Ingredients</h2>
|
|
<div id="ingredients">
|
|
<div class="ingredient">
|
|
<input type="text" name="ingredient" placeholder="Ingredient" required>
|
|
<input type="text" name="quantity" placeholder="Quantity" required>
|
|
</div>
|
|
</div>
|
|
<button type="button" onclick="addIngredient()">Add Ingredient</button>
|
|
<h2>Instructions</h2>
|
|
<div id="instructions">
|
|
<div class="instruction">
|
|
<input type="text" name="step" placeholder="Step Number" required>
|
|
<textarea name="step_description" placeholder="Step Description" required></textarea>
|
|
</div>
|
|
</div>
|
|
<button type="button" onclick="addInstruction()">Add Instruction</button>
|
|
<button type="submit">Create Recipe</button>
|
|
</form>
|
|
|
|
<script>
|
|
function addIngredient() {
|
|
var ingredientsDiv = document.getElementById('ingredients');
|
|
var newIngredientDiv = document.createElement('div');
|
|
newIngredientDiv.className = 'ingredient';
|
|
newIngredientDiv.innerHTML = '<input type="text" name="ingredient" placeholder="Ingredient" required> <input type="text" name="quantity" placeholder="Quantity" required>';
|
|
ingredientsDiv.appendChild(newIngredientDiv);
|
|
}
|
|
|
|
function addInstruction() {
|
|
var instructionsDiv = document.getElementById('instructions');
|
|
var newInstructionDiv = document.createElement('div');
|
|
newInstructionDiv.className = 'instruction';
|
|
newInstructionDiv.innerHTML = '<input type="text" name="step" placeholder="Step Number" required> <textarea name="step_description" placeholder="Step Description" required></textarea>';
|
|
instructionsDiv.appendChild(newInstructionDiv);
|
|
}
|
|
</script>
|
|
{% endblock %}
|