showdetails.html

<!DOCTYPE html><html><head>  <title>Show details</title>  <style>  .dropbtn {    background-color: black;    color: white;    padding: 16px;    font-size: 16px;    border: none;} .dropdown {    position: relative;    display: inline-block;} .dropdown-content {    display: none;    position: absolute;    background-color: lightgrey;    min-width: 200px;    z-index: 1;} .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block;} .dropdown-content a:hover {background-color: white;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: grey;} </style>    </head><body><button id="getText"> GETInfo </button><button id="getUsers">GETuserr</button><div id="output"></div><div class="dropdown"><button class="dropbtn">Social Media</button><div class="dropdown-content"> <a href="https://www.google.com">Google</a><a href="https://www.facebook.com">Facebook</a><a href="https://www.youtube.com">YouTube</a><script>	console.log('Script ran');  document.getElementById('getText').addEventListener('click',getText);  document.getElementById('getUsers').addEventListener('click',getUsers);  function getText(){  	console.log('get text');  	fetch('a.txt')  	.then((res)=>res.text());  	.then((data)=>{	  	document.getElementById('output').innerHTML=data;	  })	  }	  function getUsers(){  	fetch('store.json')  	.then((res)=>res.json());  	.then((data)=>{	  	let p=`<h2>Contractors</h2>`;	  	data.forEach(function(user){			  p += `					<ul>					<li>Name: ${user.name}</li>					<li>Phone: ${user.phone}</li>					<li>Block: ${user.block}</li>					<li>City: ${user.city}</li>					</ul>					`;				});				document.getElementById('output').innerHTML=p;	  })	  }	  </script></body></html>