JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CollectX</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    
    <form id="forms">
        <input id="title" type="text" placeholder="Collection name">
        <br>
        <br>
         <input id="describe" type="text" placeholder="Description">
        <button id="clickIt"> Submit </button>
      </form>
      
     <div id="demo">

     </div>

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

CSS

body{
    background-color: #000;
}
.collects{
    width: 150px;
    height: 100px;
    padding: 10px 5px 10px 5px;
    margin-right: 20px;
    border-radius: 10px;
    display: inline-block;
    background-color: #fff;
    
}

JavaScript

//get form values 
// create an object of the form values
//create an empty array
//append object of the form values to the empty array
//display array object values

showCollection();

var getButton = document.getElementById('clickIt');
var collectionTitle = document.getElementById("title");
var collectionDescription = document.getElementById('describe')


getButton.addEventListener('click', function(e){
    e.preventDefault()
    var collections = {
        title: collectionTitle.value,
        description: collectionDescription.value,
        collectedWebsites:[]
    }

    let webCollections = localStorage.getItem('collectx');
    if(webCollections == null){
        var collectionObj = []
        alert('storage is empty')
    }
    else{
        collectionObj = JSON.parse(webCollections);
    }
    collectionObj.push(collections);
    localStorage.setItem("collectx", JSON.stringify(collectionObj));
    showCollection()
});


function showCollection(){
    let webCollections =  localStorage.getItem('collectx')
    if(webCollections == null){
        var collectionObj = []
        alert('storage is empty')
    }
    else{
        collectionObj = JSON.parse(webCollections);
    }
    let html= ''
    var demos = document.getElementById('demo');
    collectionObj.forEach(function(item, index){
        html += `<div class="collects"> 
        Title: ${item.title} <br>
        Description: ${item.description} </div>`
      })
      demos.innerHTML = html
   
    
}