Twitch Browse Page

by KgomDr

HTML

<header><menu><button>Games</button><button>Top Live Channels</button></menu></header>
<main>
<section id='game-list'></section>
<section id='channel-list'></section>
</main>
<footer>
  <div id='params'></div>
  <div id='console'></div>
  <div id='error-console'></div>
</footer>

CSS

* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;
}

body {
  margin: 0;
  display: flex;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  overflow-y: hidden;
}

header {
  background: #4b367c;
  font-family: graphik, sans-serif;
}

menu {
  margin: 0;
}

menu > button {
  background-color: transparent;
  color: #8b76bc;
  border: 0;
  padding: 0 1em;
  font-size: 1.5rem;
  border-radius: 1em 1em 0 0;
  user-select: none;
}

menu > button:hover, menu > button:focus {
  box-shadow: inset 0 0 .5em #ccc;
  text-decoration: underline;
  color: white;
  outline: 0;
}

main {
  flex: 1 1 auto;
  overflow-y: scroll;
}

footer {
  bottom: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover, a:active {
  text-decoration: underline;
}

h4 {
  margin: .2em 0;
  text-overflow: ellipsis;
  white-space: nowrap; 
    overflow: hidden;
  font-size: 1rem;
  height: 1.3em;
}

figure {
  width: 100%;
  margin: 0;
  align-self: center;
  position: relative;
}

figcaption {
  position: absolute;
  color: #FFF;
  top: 0;
  left: 0;
  margin: 0;
  padding: .5em;
  text-shadow: #000 0 0 2em, #000 0 0 .5em, #000 0 0 .1em;
  font-size: 1rem;
}

figcaption:first-child {
  font-weight: 600;
  background: red;
}

figcaption:last-child {
  top: initial;
  bottom: 0;
}

figure > img {
  width: 100%;
}

img.profile-pic {
  float: left;
  width: 4em;
  height: 4em;
  margin-right: .3em;
}

section {
  position: relative;
  overflow-y: visible;
  display: grid;
  width: 100%;
  justify-content: space-around;
  background: #fff;
  
}

#game-list {
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  
}

#channel-list {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(320px, auto));
}

.game-box {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  padding: 1em;
  flex-direction: column;
}

.game-box > a:hover {
  text-decoration: none;
  color: purple;
}

#channel-list {
  
}

.channel-box {
  flex: 1 0 auto;
  display:...

JavaScript

const Langs = {
  ab: {
    name: "Abkhaz",
    nativeName: "аҧсуа"
  },
  aa: {
    name: "Afar",
    nativeName: "Afaraf"
  },
  af: {
    name: "Afrikaans",
    nativeName: "Afrikaans"
  },
  ak: {
    name: "Akan",
    nativeName: "Akan"
  },
  sq: {
    name: "Albanian",
    nativeName: "Shqip"
  },
  am: {
    name: "Amharic",
    nativeName: "አማርኛ"
  },
  ar: {
    name: "Arabic",
    nativeName: "العربية"
  },
  an: {
    name: "Aragonese",
    nativeName: "Aragonés"
  },
  hy: {
    name: "Armenian",
    nativeName: "Հայերեն"
  },
  as: {
    name: "Assamese",
    nativeName: "অসমীয়া"
  },
  av: {
    name: "Avaric",
    nativeName: "авар мацӀ, магӀарул мацӀ"
  },
  ae: {
    name: "Avestan",
    nativeName: "avesta"
  },
  ay: {
    name: "Aymara",
    nativeName: "aymar aru"
  },
  az: {
    name: "Azerbaijani",
    nativeName: "azərbaycan dili"
  },
  bm: {
    name: "Bambara",
    nativeName: "bamanankan"
  },
  ba: {
    name: "Bashkir",
    nativeName: "башҡорт теле"
  },
  eu: {
    name: "Basque",
    nativeName: "euskara, euskera"
  },
  be: {
    name: "Belarusian",
    nativeName: "Беларуская"
  },
  bn: {
    name: "Bengali",
    nativeName: "বাংলা"
  },
  bh: {
    name: "Bihari",
    nativeName: "भोजपुरी"
  },
  bi: {
    name: "Bislama",
    nativeName: "Bislama"
  },
  bs: {
    name: "Bosnian",
    nativeName: "bosanski jezik"
  },
  br: {
    name: "Breton",
    nativeName: "brezhoneg"
  },
  bg: {
    name: "Bulgarian",
    nativeName: "български език"
  },
  my: {
    name: "Burmese",
    nativeName: "ဗမာစာ"
  },
  ca: {
    name: "Catalan; Valencian",
    nativeName: "Català"
  },
  ch: {
    name: "Chamorro",
    nativeName: "Chamoru"
  },
  ce: {
    name: "Chechen",
    nativeName: "нохчийн мотт"
  },
  ny: {
    name: "Chichewa; Chewa; Nyanja",
    nativeName: "chiCheŵa, chinyanja"
  },
  zh: {
    name: "Chinese",
    nativeName: "中文 (Zhōngwén), 汉语, 漢語"
  },
  cv: {
    name: "Chuvash",
    nativeName: "чӑваш чӗлхи"
  },
  kw:...