Untitled

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">

    <title> Purchase |BEATDROP </title>

    <script>
        let total = 0;

        function setTotal() {
            let totElement = document.getElementById("total");

            totElement.innerHTML = total;
        }

        function productOneOnCheck() {
            let isChecked = document.getElementById('product1').checked;
            let quantity = document.getElementById("quantity1");

            let amount = quantity.options[quantity.selectedIndex].value;

            if (isChecked) {
                total += 10 * amount;
            } else {
                total -= 10 * amount;
            }

            setTotal();
        }

        function productTwoOnCheck() {
            let isChecked = document.getElementById('product2').checked;

            let quantity = document.getElementById("quantity2");

            let amount = quantity.options[quantity.selectedIndex].value;


            if (isChecked) {
                total += 8 * amount;
            } else {
                total -= 8 * amount;
            }
            setTotal();

        }

        function productThreeOnCheck() {
            let isChecked = document.getElementById('product3').checked;


            let quantity = document.getElementById("quantity3");

            let amount = quantity.options[quantity.selectedIndex].value;

            console.log(amount);

            if (isChecked) {
                total += 13 * amount;
            } else {
                total -= 13 * amount;
            }
            setTotal();
        }


    </script>
</head>

<body id="content">

<header>

    <nav>


        <ul>
            <li><a class="active" href="D:\Web Coursework sem 2\feedback.html"> Feedback </a></li>
            <li><a class="active" href="D:\Web Coursework sem 2\presentation.html">Presentation</a></li>
            <li><a class="active" href="D:\Web Coursework sem 2\purchase.html">Purchase</a></li>
            <li><a class="active" href="#albumart">AlbumArt</a></li>
            <li><a class="active" href="#quiz">Quiz</a></li>
            <li><a class="active" href="D:\Web Coursework sem 2\home.html">Home</a></li>
            <img class="logo" src="logo.jpg">

        </ul>


    </nav>
</header>

<main>
    <div class="container1">
        <div class="header-img2"></div>
        <div class="centered1">Looking For Music?</div>
    </div>
</main>

</br></br>
<div class="page">
    <h1><b> Purchase Music</b></h1></br>
    <p>
    <h3>
        <j> Listens to <b>millions of songs</b> of up-and-coming artists. Check your favorites and support independent
            artists by buying thier music in our store.</br>
            This is so much appreciated
    </h3>
    </j></p>
    </br></br></br>

    <div class="page1">
        <div class="row">
            <form class="form">
                <div class="column1">
                    <img class="purchase"
                         src="https://geo-media.beatport.com/image/9e7ae98e-34ef-4814-b1c4-da15fc469a49.jpg"
                         alt="TRACK2"> </br></br>
                    <a class="album-name" target="blank"
                       href="https://www.beatport.com/release/addicted-to-drums/2535213"> Addicted To Drums</a></br>
                    <a class="artist-name" target="blank"
                       href="https://www.google.com/search?sa=X&biw=767&bih=712&q=Daddy%27s+Groove&stick=H4sIAAAAAAAAAOPgE-LVT9c3NMwwyC1KKzI1VeLSz9U3MLFMK87L0FLKTrbSzy0tzkzWL0pNzi9KycxLj0_OKS0uSS2ySiwqySwuWcTK55KYklKpXqzgXpSfX5YKAOCWb9hSAAAA&ved=0ahUKEwiFuZDCvbrjAhU1meYKHSuuADQQri4ILDAp">Daddy's
                                                                                                                                                                                                                                                                                                 Groove
                                                                                                                                                                                                                                                                                                 &</a>
                    <a class="artist-name" target="blank"
                       href="https://www.google.com/search?sa=X&biw=767&bih=712&q=addicted+to+drums+ferdy&stick=H4sIAAAAAAAAAOPgE-LVT9c3NMwwyC1KKzI1VYJwk8zji7KrzAy0lLKTrfRzS4szk_WLUpPzi1Iy89Ljk3NKi0tSi6wSi0oyi0sWsYonpqRkJpekpiiU5CukFJXmFiukpRalVAIAxfvIx14AAAA&ved=0ahUKEwi7497MvbrjAhVp_XMBHYmNBDwQri4ILzAV">FERDY</a></br></br>
                    <p class="cost"> Price: 10$</p>
                    <p class="amount"> Quantity:
                        <select name="pdtQuality1" id="quantity1">
                            <option value="1" selected>1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </p>
                    <p class="cart"> Add to Cart: <input type="checkbox" name="product1" id="product1"
                                                         onchange="productOneOnCheck()"></p>
                </div>

                <div class="column1">
                    <img class="purchase"
                         src="https://geo-media.beatport.com/image/2536980c-1bc8-442d-8946-4f320fbd6ab7.jpg"
                         alt="TRACK5"> </br></br>
                    <a class="album-name" target="blank" href="https://www.beatport.com/release/breathe/2429329">
                        Breathe</a></br>
                    <a class="artist-name" target="blank"
                       href="https://www.google.com/search?q=camelphat&oq=camelphat&aqs=chrome..69i57j69i59l2j0l3.2863j1j4&sourceid=chrome&ie=UTF-8">CamelPhat
                                                                                                                                                     &</a>
                    <a class="artist-name" target="blank"
                       href="https://www.google.com/search?ei=KFAuXaqBPY-evQSU1JfABA&q=cristoph&oq=cristoph&gs_l=psy-ab.3..0i10l10.2800.6342..8339...0.0..1.427.3234.0j8j5j1j1....3..0....1..gws-wiz.......0i71j35i39j0i67j0i131j0j0i20i263.KQTwd1K7PsE">Cristoph</a></br></br>
                    <p class="cost"> Price: 8$</p>
                    <p class="amount"> Quantity:
                        <select name="pdtQuality2" id="quantity2">
                            <option value="1" selected>1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </p>
                    <p class="cart"> Add to Cart: <input type="checkbox" name="product2" id="product2"
                                                         onchange="productTwoOnCheck()"></p>
                </div>

                <div class="column1">
                    <img class="purchase"
                         src="https://geo-media.beatport.com/image/5d72f641-41e4-42fc-a0b1-93e3bccb101c.jpg"
                         alt="TRACK4"> </br></br>
                    <a class="album-name" target="blank" href="https://www.beatport.com/release/promised-land/2373039">
                        Promised Land</a></br>
                    <a class="artist-name" target="blank"
                       href="https://www.google.com/search?q=Kinnerman&stick=H4sIAAAAAAAAAOPgE-LVT9c3NEw3ySgyMcwzVYJwk81ySqos0821lLKTrfRzS4szk_WLUpPzi1Iy89Ljk3NKi0tSi6wSi0oyi0sWsXJ6Z-blpRblJuYBABhAmK5QAAAA&sa=X&ved=2ahUKEwiUgczCv7rjAhVEPY8KHfGfClgQmxMoATADegQICRAO&biw=798&bih=694">Kinnerman</a></br></br>
                    <p class="cost"> Price: 13$</p>
                    <p class="amount"> Quantity:
                        <select name="pdtQuality3" id="quantity3">
                            <option value="1" selected>1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </p>
                    <p class="cart"> Add to Cart: <input type="checkbox" name="product3" id="product3"
                                                         onchange="productThreeOnCheck()"></p>
                </div>
            </form>
        </div>
        </br></br>
        <div class="product-cart">
            <p class="txt">Full Name: </p> </br><input class="text1" type="text1" name="custName"
                                                       placeholder="Uvindu Mendis"></br>
            <p class="txt">Address: </p> </br><input class="text1" type="text1" name="custAdd"
                                                     placeholder="No.17/E, Colombo 07, Western Prov., Sri Lanka"></div>
        </br>
    </div>
    <div id="product-selected" class="product-cart">
        <p class="txt">Product Selected: </p></br>
        <p class="txt">None</p>
    </div>
    </br></br>
    <div class="product-cart">
        <p class="txt">Total: </p></br>
        <p class="txt">$ <span id="total">0</span></p>
    </div>

    </br></br></br>

    <div class="pur-button">
        <input type="button" class="button" value="Refresh">
        <input type="Reset" class="button" value="Checkout">
    </div>

</div>
</div>


</br></br></br></br>
<footer class="footer">
    <p>Copyrights 2019 BIS</p>
</footer>

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

</body>
</html>