menu.html

{% extends 'layout.html' %}

{% block styles %}
    <link href="./styles/menu.css" rel="stylesheet" type="text/css"/>
    <link href="./styles/cart.css" rel="stylesheet" type="text/css"/>
    <link href="./styles/addtocart.css" rel = "stylesheet" type="text/css"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

    <script src="./scripts/cart.js"></script>
    <script src="./scripts/menu.js"></script>
    <script src="./scripts/addtocart.js"></script>
{% endblock %}

{% block body %}
    <div>
        <h2>Menu:</h2>
        <div class="item-bar" id="item-list"></div>
        <div class = "item-info" id="item-info">
            <div class="scroll" style="float:right">  
                <h4 class = "item-name" > Item name </h2>
                <img class = "item-img" src = ""/> 
                <h1 class = "item-name" id ="large"> Item name</h1>
                <p class = "item-desc"> description daady</p>
                <div class = "reviews-list">
                    <h2> Reviews</h2>
                    <div class="post">
                        <div class="text">Thanks for rating us!</div>
                    </div>
                    
                    <div class ="stars">
                        <input type="radio" name="rate" id ="rate5">
                        <label for="rate5" class="fas fa-star"></label>
                        <input type="radio" name="rate" id ="rate4">
                        <label for="rate4" class="fas fa-star"></label>
                        <input type="radio" name="rate" id ="rate3">
                        <label for="rate3" class="fas fa-star"></label>
                        <input type="radio" name="rate" id ="rate2">
                        <label for="rate2" class="fas fa-star"></label>
                        <input type="radio" name="rate" id ="rate1">
                        <label for="rate1" class="fas fa-star"></label>
                        <form action="#">
                            <header></header>
                            <div class="textarea">
                                <textarea cols="30"></textarea>
                            </div>
                            <div class="btn">
                                <button type="submit">Submit Review</button>
                            </div>
                        </form>
                    </div>  
                    <script>
                        const btn = document.querySelector("button");
                        const post = document.querySelector(".post");
                        const widget = document.querySelector(".stars");
                        const editBtn = document.querySelector(".edit");
                        btn.onclick = ()=>{
                        widget.style.display = "none";
                        post.style.display = "block";
                        editBtn.onclick = ()=>{
                            widget.style.display = "block";
                            post.style.display = "none";
                        }
                        return false;
                        }
                    </script>        
                </div>
                <button onclick= "closeModel()" >Close</button>
                <button onclick="console.log('Pressed button')" id="actbutton">Add to cart</button>
        </div>
        

    </div>
{% endblock %}