need help editing my javascripta and html files. you can delete anything that isnt functional and add something that is better.

1.)I need it so when someone wants to create a "map" it will post to the main webpage.

2.) the search bar is functional to look up "map names" and will hide those that dont match the search function

3.) when mapping list is clicked, it will display all the maps that have been created.

//--------index.html---------------//

Dungeon Mapper

• Home
• Mapping List

About the Page

through this weboage, you are able to look at different maps for the game of dungeons and dragons

below you have the option of pressing the pencil button to create your own personal maps

If you are wanting to find some insperation, below are example maps to help you get started as well

map example name

Create Map

maptext

Map name

//--------index.js----------------//

function createTweet(){

document.getElementById("modal-backdrop").classList.remove("hidden");

document.getElementById("create-modal").style.display ="block";

}

function CloseModal(){

document.getElementById("modal-backdrop").classList.add("hidden");

document.getElementById("create-modal").style.display ="none";

//When the modal is closed, the values of all of the input fields should be cleared

// so they don't appear the next time the modal is opened.

document.getElementById("text-input").value = "";

document.getElementById("attribution-input").value = "";

}

function createMap(){

var text = document.getElementById("text-input").value;

var mapName = document.getElementById("attribution-input").value;

var elem = document.createElement('article');

//Checking whether the fields are left blank or not. if(text=='' || mapName==''){ alert('please make sure to add map, and name of map correctly'); }else{

var articeElem =elem ;

elem.setAttribute('class','Map');

document.getElementById("container-div").append(elem);

var innerelem = document.createElement('div');

innerelem.setAttribute('class','icon');

elem.append(innerelem);

elem = innerelem;

var innerelem = document.createElement('div');

var content_elem = innerelem;

innerelem.setAttribute('class','content');

articeElem.append(innerelem);

elem = innerelem;

var innerelem = document.createElement('p');

innerelem.setAttribute('class','text');

innerelem.textContent = text;

elem.append(innerelem);

elem = innerelem;

var innerelem = document.createElement('p');

innerelem.setAttribute('class','attribution');

content_elem.append(innerelem);

elem = innerelem;

var innerelem = document.createElement('a');

innerelem.setAttribute('href','#');

innerelem.textContent = mapName;

elem.append(innerelem);

elem = innerelem;

CloseModal(); }

}

//searching in the input $(function() { $("#navbar-search-button").click(search); });

//Search Function searching the text function search(){ var searchfield = document.getElementById("navbar-search-input").value;//Captures what user types in the search box //Check for all the contents that is present under .content whether any of those includes the text that user searched for document.querySelectorAll('.content').forEach(function(item){ var a = item.innerText.includes(searchfield); //if it matches then a stores true else false console.log(a); if(!a) { item.parentNode.remove();//removing all other which doe not contain the searched text } }) }

//-----------style.css--------------//

body { font-family: Roboto, Helvetica, sans-serif; margin: 0; background-color: #eee; } a { text-decoration: none; } .site-title { margin: 0; padding: 10px 20px; font-size: 30px; font-weight: 100; background-color: #DC143C; color: #fff; } .navbar { background-color: #fff; font-size: 18px; line-height: 22px; } .navlist { margin: 0 0 0 20px; padding: 0; } .navitem { display: inline-block; } a { color: #343434; } a:hover, a:focus { color: #319df6; } a:focus { outline: none; } .navlink a { padding: 8px 10px; display: inline-block; } .navlink.active { box-shadow: inset 0 -3px #319df6; } .navbar-search { float: right; margin-right: 20px; padding: 0; line-height: 38px; } #navbar-search-input { padding: 4px; font-size: 16px; background-color: #eee; border: 1px solid #dadada; border-radius: 2px; } #navbar-search-input:focus { outline: none; background-color: #fff; } #navbar-search-button { margin-left: -5px; font-size: 16px; background: none; border: none; color: #343434; cursor: pointer; } #navbar-search-button:hover { color: #319df6; } #navbar-search-button:focus { color: #319df6; outline: none; } .map { flex: 0 1 28%; display: flex; margin: 2px; padding: 20px; border: 1px solid #dadada; border-radius: 2px; background-color: #fff; } .icon { font-size: 24px; } .content { flex: 1 1 80%; margin-left: 10px; } .content p { margin: 0; } .content .attribution { margin-top: 8px; text-align: right; font-weight: bold; } #create-button { position: fixed; right: 30px; bottom: 30px; height: 60px; width: 60px; border: none; border-radius: 30px; font-size: 30px; background-color: #ff1010; color: #fff; cursor: pointer; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25); } #create-button:hover, #create-button:focus { right: 27px; bottom: 27px; height: 66px; width: 66px; border-radius: 33px; font-size: 36px; background-color: #319df6; } #create-button:focus { outline: none; } #modal-backdrop { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.85); } #create-modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1010; overflow: scroll; } .hidden { display: none; } .modal-dialog { width: auto; max-width: 600px; min-width: 350px; min-height: 300px; margin: 40px auto; background-color: #fff; border-radius: 15px; } .modal-header { position: relative; padding: 10px 20px; } .modal-header h3 { margin: 0; font-size: 28px; } .modal-close-button { position: absolute; right: 10px; top: 5px; font-size: 24px; border: none; background: none; padding: 0; cursor: pointer; } .modal-body { padding: 20px; } .input-element { display: flex; align-items: center; font-size: 20px; margin: 10px 0; } .input-element label { font-weight: 600; flex: 1 75px; margin-right: 10px; } .input-element input, .input-element textarea { flex: 6 200px; padding: 8px; font-size: 20px; border: 1px solid #aaa; } .input-element textarea { min-height: 64px; } .modal-footer { display: flex; justify-content: flex-end; padding: 10px 10px 20px 10px; } .modal-footer button { font-size: 20px; background-color: #fff; color: #333; border: 1px solid #333; border-radius: 5px; padding: 10px; margin-right: 20px; cursor: pointer; } .modal-footer .modal-cancel-button:hover { background-color: #eee; } .modal-footer .modal-accept-button { background-color: #319df6; color: #fff; } .modal-footer .modal-accept-button:hover { background-color: #087dde; } .error-container { margin-top: 50px; text-align: center; } .error-container h2 { margin: 10px; font-size: 96px; font-weight: 100; } .error-container h3 { margin: 10px 0; font-size: 36px; font-weight: 400; } .aboutPage{ border-color:black; border-style: solid; border-width: 2px; background-color: #b4b4b4; margin:10px; float:left; } .container { margin:auto; } .container-div { float:left; clear:left; } #expandImage:hover{ color: #ADFF2F; } .content {display: none; } #expandImage:focus + .content {display: block;}