Advertisement
perjespersson

TImeTable

Mar 22nd, 2020
209
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.49 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>Spelschema</title>
  6. <script>
  7. class Artist {
  8. constructor(time,genre,name) {
  9. this.time = time;
  10. this.genre = genre;
  11. this.name = name;
  12. }
  13. }
  14.  
  15. var mainstage = [new Artist("21.00-22.00","DnB","Jesper Persson & Daniel Tyngel"),new Artist("22.00-23.00","Trap","Anders Persson"),new Artist("23.00-00.00","Dubstep","Peps Persson"),new Artist("00.00-01.00","Trap","Anders Persson"),new Artist("01.00-02.00","Trap","Anders Persson"),new Artist("02.00-03.00","Trap","Anders Persson")];
  16. var darkstage = [new Artist("21.00-22.00","Techno","Jesper Persson"),new Artist("22.00-23.00","Tech House","Anders Persson")];
  17.  
  18. function setColor(btn){
  19. var div = document.getElementById('timetable');
  20.  
  21. while(div.firstChild){
  22. div.removeChild(div.firstChild);
  23. }
  24.  
  25. if (btn == 'mainstage') {
  26. document.getElementById('mainstage').style.backgroundColor= 'lightgray';
  27. document.getElementById('darkstage').style.backgroundColor= 'red';
  28. createTimeSlots(mainstage);
  29. }
  30. else {
  31. document.getElementById('mainstage').style.backgroundColor= 'red';
  32. document.getElementById('darkstage').style.backgroundColor= 'lightgray';
  33. createTimeSlots(darkstage);
  34. }
  35. }
  36.  
  37. function createTitle(title){
  38. var para = document.createElement("H1");
  39. para.innerHTML = title;
  40. para.setAttribute("id", "stage");
  41. document.getElementById("timetable").appendChild(para);
  42. }
  43.  
  44. function createTimeSlots(stage){
  45. if(stage == mainstage){
  46. createTitle("Mainstage");
  47. }
  48. else{
  49. createTitle("Darkstage");
  50. }
  51.  
  52. for(var i = 0; i < stage.length; i++){
  53. var node = document.createElement("DIV");
  54. node.setAttribute("id", "timeslot");
  55.  
  56. var textnode = document.createElement("P");
  57. textnode.setAttribute("class", "slot1");
  58. textnode.innerHTML = stage[i].time;
  59. node.appendChild(textnode);
  60.  
  61. textnode = document.createElement("P");
  62. textnode.setAttribute("class", "slot2");
  63. textnode.innerHTML = stage[i].genre;
  64. node.appendChild(textnode);
  65.  
  66. textnode = document.createElement("P");
  67. textnode.setAttribute("class", "slot3");
  68. textnode.innerHTML = stage[i].name;
  69. node.appendChild(textnode);
  70.  
  71. document.getElementById("timetable").appendChild(node);
  72. }
  73. }
  74. </script>
  75.  
  76. <style>
  77. #mainstage{
  78. border:none;
  79. background-color:lightgray;
  80. padding: 20px;
  81. font-size:16px;
  82. }
  83.  
  84. #darkstage{
  85. border:none;
  86. background-color:red;
  87. padding: 20px;
  88. font-size:16px;
  89. }
  90.  
  91. #timetable{
  92. width:800px;
  93. background-color:lightgray;
  94. padding: 20px;
  95. }
  96.  
  97. #stage
  98. {
  99. text-align:center;
  100. }
  101.  
  102. #timeslot
  103. {
  104. width:90%;
  105. margin:0 auto;
  106. display:flex;
  107. border-top: 1px solid gray;
  108. }
  109.  
  110. .slot1
  111. {
  112. justify-content:left;
  113. width:20%;
  114. }
  115.  
  116. .slot2
  117. {
  118. justify-content:left;
  119. width:40%;
  120. }
  121.  
  122. .slot3
  123. {
  124. justify-content:left;
  125. width:40%;
  126. }
  127.  
  128. #timeslot p
  129. {
  130. text-align:center;
  131. font-size:20px;
  132. }
  133.  
  134. </style>
  135. </head>
  136. <body onload="createTimeSlots(mainstage)">
  137. <input type="button" id="mainstage" value="MAINSTAGE" onclick="setColor('mainstage');" />
  138. <input type="button" id="darkstage" value="DARKSTAGE" onclick="setColor('darkstage');" />
  139.  
  140. <div id="timetable">
  141. </div>
  142.  
  143. </body>
  144. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement