Videos + Audio

scratch

by rsolomonjr1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
 	<div class="infosite_tool_layout">
 	  <h1>Infosite Starter Tool</h1>
 	  <h4><em>*Basic Kit for Initial Infosite Build</em></h4>
 	  <form id="forms">
 	    <div id="infosite_page_module">
 	      <h3>Number of Article Pages</h3>
 	      <div id="infosite_number_of_pages">
 	        <div>
 	          <div><select id="number_of_pages" name="number_of_pages" onchange="changePages()">
 	              <option value="1">1</option>
 	              <option value="2">2</option>
 	              <option value="3">3</option>
 	              <option value="4">4</option>
 	              <option value="5">5</option>
 	              <option value="6">6</option>
 	            </select>
 	          </div>
 	        </div>
 	        <div>*one page means only home page</div>
 	      </div>

 	      <h3>Description and Title of Pages</h3>
 	      <div id="infosite_page_titles">
 	        <div class="infosite_table_header">
 	          <div>
 	            <div>Title</div>
 	            <div>Internal<br>Page?</div>
 	            <div>External<br>Link?</div>
 	            <div>External URL</div>
 	          </div>
 	        </div>
 	        <div id="page_titles_table">
 	          <div id="page1">
 	            <div><input type="text" name="description" placeholder="page_title" value="Homepage" /></div>
 	            <div id="radioButtons1">
 	              <div><input type="radio" name="radio1" class="radio" value="first" checked required></div>
 	              <div><input type="radio" name="radio1" value="second" class="radio" required></div>
 	            </div>
 	            <div><input type="text" name="page_url" placeholder="page_url" /></div>
 	          </div>
 	        </div>
 	      </div>
 	    </div>
 	    <h3>Sponsorship Line</h3>
 	    <div id="infosite_sponsorship">
 	      <label for="sponsorship">Pharma Co.</label>
 	      <div><input type="text" id="sponsorship"...

CSS

:root {
  --main-color: #484848;
  --tool-blue: #007cb0;
  --tool-red: #a64452;
}

body {
  font-size: 14px;
  font-family: monospace;
  color: var(--main-color);
  margin: 2em auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 501px;
}

.infosite_tool_layout {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

input,
h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  margin: 0.5em 0;
}

form {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}

div[id^="infosite_"],
input[type="text"],
select,
option {
  border: thin solid var(--tool-blue);
  border-radius: 5px;
  box-shadow: 1px 1px steelblue;
}

button[type="submit"] {
  border: thin solid var(--tool-blue);
  border-radius: 5px;
  box-shadow: 1px 1px #007cb0;
  background: #fff;
  font-size: 16px
}

div[id^="infosite_"],
select {
  padding: 1em;
  margin: 1em auto;
}

input[type="text"] {
  padding: 0.25em 0;
}

#infosite_tracking>div,
#infosite_sponsorship,
#infosite_poll>.polls-section,
#infosite_number_of_media>div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#infosite_tracking label,
#infosite_sponsorship label,
#infosite_poll label,
#infosite_number_of_media label {
  margin-right: 1em;
}

#infosite_header>div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 2);
  margin: auto;
}

#infosite_number_of_pages,
#infosite_number_of_polls {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#infosite_number_of_pages> :last-child,
#infosite_number_of_polls> :last-child {
  font-size: 75%;
}

#pages_titles_table {
  width: 311px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

#page_titles_table>div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
}

#page_titles_table>div * {
  overflow: hidden;
}

#page_titles_table>div div {
  margin: 1em auto;
}

#infosite_page_titles input {
 ...

JavaScript

function getNumberOfVideos() {
  const videoTable =
    "<div class='media_table'><div><input type='text' id='video_title' name='video_title' placeholder='video_title'/></div><div><input type='text' id='video_poster_image_name' name='video_poster_image_name' placeholder='video_poster_image_name'/></div><div><input type='text' id='video_duration' name='video_duration' placeholder='video_duration' /></div></div>";
  const errorText = "<dir class='errorText'>Numbers only</dir>";

  var selector = document.getElementById("number_of_videos");
  var value = parseInt(selector.value);

  if (isNaN(value) || value == "") {
    document.getElementById("videos_table").innerHTML = errorText;
  } else {
    let arr = Array.from(new Array(value), (_, index) => index + 1);

    arr = arr.map((i) => "Video " + i);

    let videosTable = arr.map(function(element) {
      return `<div>${element}</div>`.concat(videoTable);
    });
    let videosOutTable = videosTable.join("");
    document.querySelector("#videos_table").innerHTML = videosOutTable;
  }
}

function getNumberOfAudio() {
  const audioTable =
    "<div class='media_table'><div><input type='text' id='audio_title' name='audio_title' placeholder='audio_title'/></div><div><input type='text' id='audio_poster_image_name' name='audio_poster_image_name' placeholder='audio_poster_image_name'/></div><div><input type='text' id='audio_duration' name='audio_duration' placeholder='audio_duration' /></div></div>";
  const errorText = "<dir class='errorText'>Numbers only</dir>";

  var selector = document.getElementById("number_of_audios");
  var value = parseInt(selector.value);

  if (isNaN(value) || value == "") {
    document.getElementById("audios_table").innerHTML = errorText;
  } else {
    let arr = Array.from(new Array(value), (_, index) => index + 1);

    arr = arr.map((i) => "Audio " + i);

    let audiosTable = arr.map(function(element) {
      return `<div>${element}</div>`.concat(audioTable);
    });
    let...