Wie man eine Instanz eines div in eine Box einpackt

Question

Ich bin neu in JavaScript, also ertrage mich, wenn ich nicht genau erkläre, was ich will. Im Grunde habe ich ein Formular zum Erstellen von Aktivitäten. Wenn der Benutzer also die Felder füllt und auf Speichern klickt, wird eine Instanz des div mit den Informationen erstellt. Jetzt sind diese Informationen im Grunde nur in Zeilen, und ich möchte sie in einer Box (div) organisieren, aber ich bin mir nicht sicher, wie man es erstellt, ist es mit JS oder HTMl?

Hier ist ein Bild von dem, was ich gerade arbeite.

Und hier ist eine Ansicht des Codes.

window.onload = function() { 
function addAct(nameact, when, where,desc) { 
var buses = document.querySelectorAll(".bus"); 
var curr = document.createElement("div"); 
curr.setAttribute("class", "name"); 
var p0 = document.createElement("p"); 
p0.setAttribute("class", "nameact"); 
p0.innerHTML = nameact; 
var p1 = document.createElement("p"); 
p1.setAttribute("class", "whereisit"); 
p1.innerHTML = when; 
var p2 = document.createElement("p"); 
p2.setAttribute("class", "when"); 
p2.innerHTML = where; 
var p3 = document.createElement("p"); 
p3.setAttribute("class", "describtion"); 
p3.innerHTML = desc; 
curr.appendChild(p0); 
curr.appendChild(p1); 
curr.appendChild(p2); 
curr.appendChild(p3); 
if (buses.length) { 
    buses[buses.length -1].insertAdjacentHTML("afterEnd", curr.outerHTML) 
} else { 
    document.forms[1].insertAdjacentHTML("afterEnd", curr.outerHTML) 
} 
} 

var obj = {nameact: "", when: "", where: "",desc:""}; 

document.forms[1].onchange = function(e) { 
obj[e.target.name] = e.target.value; 
} 

document.forms[1].onsubmit = function(e) { 
e.preventDefault(); 
addAct(obj.nameact, obj.when, obj.where, obj.desc) 
} 
} 

<section id="cd-placeholder-2" class="cd-section cd-container"> 
     <h2>Activities</h2>  
     <div id="Slider" class="slide-up"> 
      <div> 
       <div class="contents" > 


     <form class="form2"> 

         <div class="col-3"> 
         <label> 
          Activity Name 
          <input placeholder="What is your activity?" tabindex="3" name="nameact" /> 
         </label> 
         </div> 

         <div class="col-3"> 
         <label> 
          Where? 
          <input placeholder="Where is it going to be?" tabindex="4" name="when" /> 
         </label> 
         </div> 

         <div class="col-3"> 
         <label> 
          When? 
          <input type="date" placeholder="mm\dd\yy" tabindex="4" name="where"/> 
         </label> 
         </div> 

         <div> 
         <label> 
          Care to share more? 
          <textarea placeholder="describtion of your activity" class="text" name="desc"></textarea> 
         </label> 
         </div> 

         <button type="submit" value="Submit" class="cd-btn" id="col-submit" style="position:relative;float:right;overflow:hidden;margin:10px;margin-top:30px;">Add Activity</button> 


     </form> 

        <div id="name"></div> 

       </div> 
      </div> 
     </div> 

    </section> 

Jede Rückmeldung wird sehr geschätzt.

Answer 1

Sie müssen HTML + CSS + JS

HTML:

<div id="name"></div> 

CSS

.row{ 
    background-color: red; 
    border: 5px solid #333; 
    display: block; 
    position: relative; 
    overflow: hidden; 
} 
.nameact{ 
    background-color:red; 
    height: 40px; 
    display: inline-block; 
} 
.whereisit{ 
    background-color:green; 
    height: 40px; 
    display: inline-block; 
} 
.when{ 
    background-color:blue; 
    height: 40px; 
    display: inline-block; 
} 
.describtion{ 
    background-color:brown; 
    height: 40px; 
    display: inline-block; 
} 

JS

var obj = {nameact: "", when: "", where: "",desc:""}; 

document.forms[1].onchange = function(e) { 
obj[e.target.name] = e.target.value; 
} 

document.forms[1].onsubmit = function(e) { 
e.preventDefault(); 
addAct(obj.nameact, obj.when, obj.where, obj.desc) 
} 

function addAct(nameact, when, where,desc) { 
var myhtml = '<div class="row"><div class="nameact">'+nameact+'</div><div class="whereisit">'+where+'</div><div class="when">'+when+'</div><div class="describtion">'+describtion+'</div></div>'; 

document.getElementById('name').innerHTML += myhtml; 

} 

Sie müssen CSS-Code aktualisieren, basierend auf Ihre Bedürfnisse

Answer 2

Wenn Sie Hilfe benötigen, um dies zu verstehen, lassen Sie es mich bitte wissen. Ich habe ein paar CSS-Stile und das HTML-Markup geschrieben, auf das sie angewendet werden. Lassen Sie Ihr JavaScript dieses Markup erstellen und lesen Sie etwas über CSS, um dies zu einem vollständigen Modul zu extrapolieren.

<style> 
    .activity { 
     width: 645px; 
     height: 160px; 
     border: 2px solid #0000ff; 
    } 

    .activity > div { 
     padding: 20px; 
    } 

    .activity .top { 
     display: inline-block; 
     float: left; 
     width: 174px; 
     height: 30; 
     border-right: 1px solid #0000ff; 
    } 

    .activity .top.end { 
     width: 175px; 
     border-right: none; 
    } 

    .activity .bottom { 
     display: inline-block; 
     float: left; 
     width: 605px; 
     height: 50; 
     border-top: 1px solid #0000ff; 
    } 

    .activity .title { 
     display: block; 
    } 


</style> 


<div class="activity"> 
    <div class="top"> 
     <span class="title">ACTIVITY NAME</span> 
     <span>Skydiving</span> 
    </div> 

    <div class="top"> 
     <span class="title">WHERE?</span> 
     <span>Dubai Palm Island</span> 
    </div> 

    <div class="top end"> 
     <span class="title">2017-06-22</span> 
    </div> 

    <div class="bottom"> 
     <span>CARE TO SHARE MORE?</span> 
     <span class="title">It will be a fun trip!</span> 
    </div> 
</div> 

Ich hoffe, das bringt Sie in die richtige Richtung!