JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<div id="container">

  <div id="leftdiv">

    <div id="lectname">
      <p id="lectname1">Lec 01: What is Signal?</p>
      <p id="lectname2">Lec 02: What is an Analog Signal?</p>
      <p id="lectname3">Lec 03: What is Digital Signal?</p>
      <p id="lectname4">Lec 04: Need of Digital Signal</p>
      <p id="lectname5">Lec 05: Introduction to Digital Electronics</p>
      <p id="lectname6">Lec 06: Switch and Bits Intuition</p>
    </div>

  </div>

  <div id="rightdiv">
    <iframe width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>
  </div>

</div>

CSS

body {
  margin: 0px;
}

#leftdiv {
  background-color: #A9F5D0;
  float: left;
  height: 100%;
  width: 30%;
}

#rightdiv {
  background-color: #F8E0F1;
  float: left;
  height: 100%;
  width: 70%;
}

#lectname {
  padding: 10px;
  font-family: "comic sans ms";
}

JavaScript

document.getElementById("lectname1").onclick = function() {
  document.getElementById("rightdiv").innerHTML = '<iframe width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>'
}

document.getElementById("lectname2").onclick = function() {
  document.getElementById("rightdiv").innerHTML = '<iframe width="480" height="270" src="https://www.youtube.com/embed/F5h3z8p9dPg" frameborder="0" allowfullscreen></iframe>'
}

document.getElementById("lectname3").onclick = function() {
  document.getElementById("rightdiv").innerHTML = '<iframe width="480" height="270" src="https://www.youtube.com/embed/jRL9ag3riJY" frameborder="0" allowfullscreen></iframe>'
}

document.getElementById("lectname4").onclick = function() {
  document.getElementById("rightdiv").innerHTML = '<iframe width="480" height="270" src="https://www.youtube.com/embed/izBaDRyqnBk" frameborder="0" allowfullscreen></iframe>'
}

document.getElementById("lectname5").onclick = function() {
  document.getElementById("rightdiv").innerHTML = '<iframe width="480" height="270" src="https://www.youtube.com/embed/2xXErGeeb_Q" frameborder="0" allowfullscreen></iframe>'
}

document.getElementById("lectname6").onclick = function() {
  document.getElementById("rightdiv").innerHTML = '<iframe width="480" height="270" src="https://www.youtube.com/embed/RF9I6UzI4Rc" frameborder="0" allowfullscreen></iframe>'
}