<!-- HTML start -->

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--Bootstrap-->

<link

rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

/>

<!-- document links -->

<link rel="stylesheet" href="./assets/css/reset.css" />

<link rel="stylesheet" href="./assets/css/style.css" />

<!-- document fonts -->

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link

href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"

rel="stylesheet"

/>

<!-- document title (assists with SEO) -->

<title>

Ever wondered what you can cook with ingredients left in your fridge or

pantry?

</title>

</head>

<!-- top nav section -->

<body>

<header>

<section class="nav-container">

<h1 class="logo">RECIPE FINDR</h1>

<nav>

<ul>

<!-- nav uses ID's to take the user to that section of the page -->

<li><a href="#recipe-finder">Recipe Finder</a></li>

<li><a href="#recipe-history">Previous Recipes</a></li>

</ul>

</nav>

</section>

</header>

<main class="wrap">

<!-- this is the ingredients form -->

<section id="left-wrap">

<article class="recipe-box" id="recipe-finder">

<form>

<!-- <div class="recipe-container"> -->

<h2>ENTER YOUR INGREDIENTS</h2>

<img

src="./assets/images/ingredient-image.jpeg"

alt="stock image of a meal with ingredients"

class="recipe-box__image"

/>

<input

type="text"

class="recipe-box__field"

placeholder="First Ingredient"

id="form1"

/>

<input

type="text"

class="recipe-box__field"

placeholder="Second Ingredient"

id="form2"

/>

<input

type="text"

class="recipe-box__field"

placeholder="Third Ingredient"

id="form3"

/>

<div class="modal" id="myModal">

<div class="modal-content">

<span class="close">&times;</span>

<p>No results found - please try entering some new ingredients</p>

</div>

</div>

<button class="btn" id="searchBtn">Search</button>

</form>

</article>

<!-- recipe history -->

<article id="recipe-history-container">

<h2>RECIPE HISTORY</h2>

<div id="recipe-history"></div>

<ul id="recipe-history-list">

</ul>

<button class="btn" id="clearBtn">Clear recipe history</button>

</article>

</section>

<!-- results -->

<section id="right-wrap">

<article>

<ul id="search-results"></ul>

</article>

<!-- recipe click through -->

<article id="youtube-tutorial">

<!--Insert name of selected recipe into this span element-->

<h2 id="recipe-title"></h2>

<!--Embed youtube video here here via the src url-->

<iframe

id="youtube-video"

width="560"

height="315"

title="YouTube video player"

frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen

></iframe>

<!--Insert previously selected ingredients into this span element-->

<p>

This recipe will be a great way to use up your leftover ingredients.

<span id="selected-ingredients"></span>

</p>

</article>

</section>

</main>

<br />

<br />

<!-- footer of the site -->

<footer>

<div class="footer-container">

<div class="footer">

<div class="footer-email-form">

<h2>Sign up to our mailing list!</h2>

<input

type="email"

placeholder="Enter your email address"

id="footer-email"

/>

<input type="submit" value="send" id="footer-email-btn" />

</div>

</div>

</div>

</footer>

<!--Bootstrap-->

<scripts

src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"

integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"

crossorigin="anonymous"

></script>

<script type="text/javascript" src="./assets/js/script.js"></script>

</body>

</html>