testtest

by nukeboy212

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="row col-sm-12">
    <div class="square">
  <h1 class="boxTitle">Sunday</h1>
  <div class="boxOutputContainer">
    <div class="outputItem" id="b1NameOutput"></div>
    <div class="outputItem" id="b1UserOutput"></div>
    <div class="outputItem" id="b1LinkOutput"></div>
    <button class="myBtn" id="myBtn1">Open Modal</button>
  </div>
</div>

<div class="square">
  <h1 class="boxTitle">Monday</h1>
  <div class="boxOutputContainer">
    <div class="outputItem" id="b2NameOutput"></div>
    <div class="outputItem" id="b2UserOutput"></div>
    <div class="outputItem" id="b2LinkOutput"></div>
    <button class="myBtn" id="myBtn2">Open Modal</button>
  </div>
</div>

<div class="square">
  <h1 class="boxTitle">Tuesday</h1>
  <div class="boxOutputContainer">
    <div class="outputItem" id="b3NameOutput"></div>
    <div class="outputItem" id="b3UserOutput"></div>
    <div class="outputItem" id="b3LinkOutput"></div>
    <button class="myBtn" id="myBtn3">Open Modal</button>
  </div>
 </div>

<div class="square">
<h1 class="boxTitle">Wednesday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b4NameOutput"></div>
<div class="outputItem" id="b4UserOutput"></div>
<div class="outputItem" id="b4LinkOutput"></div>
<button class="myBtn" id="myBtn4">Open Modal</button>
</div>
</div>

</div>

<div class="row col-lg-12">
<div class="square">
<h1 class="boxTitle">Thursday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b5NameOutput"></div>
<div class="outputItem" id="b5UserOutput"></div>
<div class="outputItem" id="b5LinkOutput"></div>
<button...

CSS

.square{
  border: 1px solid black;
  width: 15rem;
  height: 15rem;
  float: left;
  margin:10px;
}

#formContainer {
  position: relative;
  float: left;
}

.boxTitle {
  text-align: center;
  margin-top: 1em;
}

.boxOutputContainer {
  text-align: center;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.myBtn {
  display: none;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;

  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
 ...

JavaScript

var submitBtn = document.querySelector("#submitBtn");
 submitBtn.addEventListener("click", function(){
 alert("test")
  event.preventDefault();
  var boxSelect = document.querySelector("#boxSelect");
  document.querySelector(`#b${boxSelect.value}NameOutput`).innerHTML = "<p>"+document.querySelector("#name").value+"</p>";
  document.querySelector(`#b${boxSelect.value}UserOutput`).innerHTML = "<p>"+document.querySelector("#user").value+"</p>";
  document.querySelector(`#b${boxSelect.value}LinkOutput`).innerHTML = "<p><a target='_blank' href='"+document.querySelector('#link').value+"'>Click Here for Recipe</a></p>";
  document.querySelector(`#myBtn${boxSelect.value}`).style.display = "block";
  });

  // Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.querySelector(`#myBtn${boxSelect.value}`);

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
submitBtn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
 ...