In this example below you will see how to do a Constellations with some HTML / CSS and Javascript

This awesome code was written by MGK_888, you can see more from this user in the personal repository.
You can find the original code on
Copyright MGK_888 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">



<title> Constellation List </title> </head>

  <h1><u> Alphabetical listing of constellations </u></h1>
  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#" class="header">A</a></li>
  <li> <a href="constellations/Andromeda.html"> Andromeda </a>
  <li> <a href="constellations/Antlia.html"> Antlia </a>
  <li> <a href="constellations/Apus.html"> Apus </a>
  <li> <a href="constellations/Aquarius.html"> Aquarius </a>
  <li> <a href="constellations/Aquila.html"> Aquila </a>
  <li> <a href="constellations/Ara.html"> Ara </a>
  <li> <a href="constellations/Aries.html"> Aries </a>
  <li> <a href="constellations/Auriga.html"> Auriga </a>
  <li><a href="#" class="header">B</a></li>
  <li> <a href="constellations/Bootes.html"> Bo&ouml;tes </a>
  <li><a href="#" class="header">C</a></li>
  <li> <a href="constellations/Caelum.html"> Caelum </a>
  <li> <a href="constellations/Camelopardalis.html"> Camelopardalis </a>
  <li> <a href="constellations/Cancer.html"> Cancer </a>
  <li> <a href="constellations/Canes_Venatici.html"> Canes Venatici </a>
  <li> <a href="constellations/Canis_Major.html"> Canis Major </a>
  <li> <a href="constellations/Canis_Minor.html"> Canis Minor </a>
  <li> <a href="constellations/Capricornus.html"> Capricornus </a>
  <li> <a href="constellations/Carina.html"> Carina </a>
  <li> <a href="constellations/Cassiopeia.html"> Cassiopeia </a>
  <li> <a href="constellations/Centaurus.html"> Centaurus </a>
  <li> <a href="constellations/Cepheus.html"> Cepheus </a>
  <li> <a href="constellations/Cetus.html"> Cetus </a>
  <li> <a href="constellations/Chamaeleon.html"> Chamaeleon </a>
  <li> <a href="constellations/Circinus.html"> Circinus </a>
  <li> <a href="constellations/Columba.html"> Columba </a>
  <li> <a href="constellations/Coma_Berenices.html"> Coma Berenices </a>
  <li> <a href="constellations/Corona_Austrina.html"> Corona Austrina </a>
  <li> <a href="constellations/Corona_Borealis.html"> Corona Borealis </a>
  <li> <a href="constellations/Corvus.html"> Corvus </a>
  <li> <a href="constellations/Crater.html"> Crater </a>
  <li> <a href="constellations/Crux.html"> Crux </a>
  <li> <a href="constellations/Cygnus.html"> Cygnus </a>
  <li><a href="#" class="header">D</a></li>
  <li> <a href="constellations/Delphinus.html"> Delphinus </a>
  <li> <a href="constellations/Dorado.html"> Dorado </a>
  <li> <a href="constellations/Draco.html"> Draco </a>
  <li><a href="#" class="header">E</a></li>
  <li> <a href="constellations/Equuleus.html"> Equuleus </a>
  <li> <a href="constellations/Eridanus.html"> Eridanus </a>
  <li><a href="#" class="header">F</a></li>
  <li> <a href="constellations/Fornax.html"> Fornax </a>
  <li><a href="#" class="header">G</a></li>
  <li> <a href="constellations/Gemini.html"> Gemini </a>
  <li> <a href="constellations/Grus.html"> Grus </a>
  <li><a href="#" class="header">H</a></li>
  <li> <a href="constellations/Hercules.html"> Hercules </a>
  <li> <a href="constellations/Horologium.html"> Horologium </a>
  <li> <a href="constellations/Hydra.html"> Hydra </a>
  <li> <a href="constellations/Hydrus.html"> Hydrus </a>
  <li><a href="#" class="header">I</a></li>
  <li> <a href="constellations/Indus.html"> Indus </a>
  <li><a href="#" class="header">L</a></li>
  <li> <a href="constellations/Lacerta.html"> Lacerta </a>
  <li> <a href="constellations/Leo.html"> Leo </a>
  <li> <a href="constellations/Leo_Minor.html"> Leo Minor </a>
  <li> <a href="constellations/Lepus.html"> Lepus </a>
  <li> <a href="constellations/Libra.html"> Libra </a>
  <li> <a href="constellations/Lupus.html"> Lupus </a>
  <li> <a href="constellations/Lynx.html"> Lynx </a>
  <li> <a href="constellations/Lyra.html"> Lyra </a>
  <li><a href="#" class="header">M</a></li>
  <li> <a href="constellations/Mensa.html"> Mensa </a>
  <li> <a href="constellations/Microscopium.html"> Microscopium </a>
  <li> <a href="constellations/Monoceros.html"> Monoceros </a>
  <li> <a href="constellations/Musca.html"> Musca </a>
  <li><a href="#" class="header">N</a></li>
  <li> <a href="constellations/Norma.html"> Norma </a>
  <li><a href="#" class="header">O</a></li>
  <li> <a href="constellations/Octans.html"> Octans </a>
  <li> <a href="constellations/Ophiuchus.html"> Ophiuchus </a>
  <li> <a href="constellations/Orion.html"> Orion </a>
  <li><a href="#" class="header">P</a></li>
  <li> <a href="constellations/Pavo.html"> Pavo </a>
  <li> <a href="constellations/Pegasus.html"> Pegasus </a>
  <li> <a href="constellations/Perseus.html"> Perseus </a>
  <li> <a href="constellations/Phoenix.html"> Phoenix </a>
  <li> <a href="constellations/Pictor.html"> Pictor </a>
  <li> <a href="constellations/Pisces.html"> Pisces </a>
  <li> <a href="constellations/Piscis_Austrinus.html"> Piscis Austrinus </a>
  <li> <a href="constellations/Puppis.html"> Puppis </a>
  <li> <a href="constellations/Pyxis.html"> Pyxis </a>
  <li><a href="#" class="header">R</a></li>
  <li> <a href="constellations/Reticulum.html"> Reticulum </a>
  <li><a href="#" class="header">S</a></li>
  <li> <a href="constellations/Sagitta.html"> Sagitta </a>
  <li> <a href="constellations/Sagittarius.html"> Sagittarius </a>
  <li> <a href="constellations/Scorpius.html"> Scorpius </a>
  <li> <a href="constellations/Sculptor.html"> Sculptor </a>
  <li> <a href="constellations/Scutum.html"> Scutum </a>
  <li> <a href="constellations/Serpens.html"> Serpens </a>
  <li> <a href="constellations/Sextans.html"> Sextans </a>
  <li><a href="#" class="header">T</a></li>
  <li> <a href="constellations/Taurus.html"> Taurus </a>
  <li> <a href="constellations/Telescopium.html"> Telescopium </a>
  <li> <a href="constellations/Triangulum.html"> Triangulum </a>
  <li> <a href="constellations/Triangulum_Australe.html"> Triangulum Australe </a>
  <li> <a href="constellations/Tucana.html"> Tucana </a>
  <li><a href="#" class="header">U</a></li>
  <li> <a href="constellations/Ursa_Major.html"> Ursa Major </a>
  <li> <a href="constellations/Ursa_Minor.html"> Ursa Minor </a>
  <li><a href="#" class="header">V</a></li>
  <li> <a href="constellations/Vela.html"> Vela </a>
  <li> <a href="constellations/Virgo.html"> Virgo </a>
  <li> <a href="constellations/Volans.html"> Volans </a>
  <li> <a href="constellations/Vulpecula.html"> Vulpecula </a>

<div class="info">
<a href=""> Back to Constellations Home Page </a>

<a href="">
Chris Dolan's Home Page </a>

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



/*Downloaded from */
@import url('|Bungee+Hairline|Codystar|Delius+Swash+Caps|Megrim|Montserrat+Subrayada');
@import url('');

body {
  background-color: rgba(40, 74, 130, 0.3);

h1 {
  font-family: 'Archivo Narrow', sans-serif;

.searchbar {
  float: right;

ul {
  font-family: 'Archivo Narrow', sans-serif;

* {
  box-sizing: border-box;

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block

#myUL li a.header {
  background-color: #e2e2e2;
  cursor: default;

#myUL li a:hover:not(.header) {
  background-color: #eee;

.info {
  font-size: 25px;
  font-family:'Montserrat', sans-serif;

.info a:hover {
  color: rgba(0,0,0,0.5);

font-family: 'Codystar', cursive;
font-family: 'Montserrat Subrayada', sans-serif;
font-family: 'Delius Swash Caps', cursive;
font-family: 'Bungee Hairline', cursive;
font-family: 'Megrim', cursive;
font-family: 'Archivo Narrow', sans-serif; 
font-family: 'Montserrat', sans-serif;

/*Downloaded from */
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";