<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>DOM manipulation</title>

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;800&display=swap" rel="stylesheet">


 

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

</head>

<body>

    <h1>Shopping List</h1>

    <!-- <p id="first">Get it done today!</p> -->

    <input type="text" placeholder="ENTER ITEMS" name="" id="userinput">

    <button id="enter">ADD TO LIST</button>

    <!-- <input type="range" name="value" id="sliderica"> -->

    <h2>Buy</h2>

    <ul>

        <li random="23">Notebook<span class="removeItem">X</span></li>

        <li>Jello</li>

        <li>Spinach</li>

        <li>Rice</li>

        <li>Birthday Cake</li>

        <li>Candles</li>

    </ul>

    <script src="script.js"></script>

</body>

</html>