JSFiddle - React, Tailwind, and code Playground

by Pasky Org

HTML

<form id="rendered-form">
  <div class="rendered-form">
    <div class="formbuilder-text form-group field-text-1649755461588-0">
      <label for="text-1649755461588-0" class="formbuilder-text-label">Ficha</label>
      <input type="text" class="form-control" name="text-1649755461588-0" id="text-1649755461588-0">
    </div>
    <div class="formbuilder-text form-group field-text-1649755480189-0">
      <label for="text-1649755480189-0" class="formbuilder-text-label">Título del proyecto</label>
      <input type="text" class="form-control" name="text-1649755480189-0" id="text-1649755480189-0">
    </div>
    <div class="formbuilder-text form-group field-text-1649755519961-0">
      <label for="text-1649755519961-0" class="formbuilder-text-label">Entidad que propone</label>
      <input type="text" class="form-control" name="text-1649755519961-0" id="text-1649755519961-0">
    </div>
    <div class="formbuilder-textarea form-group field-textarea-1649755542379-0">
      <label for="textarea-1649755542379-0" class="formbuilder-textarea-label">Breve descripción</label>
      <textarea class="form-control" name="textarea-1649755542379-0" id="textarea-1649755542379-0"></textarea>
    </div>
    <div class="formbuilder-text form-group field-text-1649755582848-0">
      <label for="text-1649755582848-0" class="formbuilder-text-label">Tipo/Categoría</label>
      <input type="text" class="form-control" name="text-1649755582848-0" id="text-1649755582848-0">
    </div>
    <div class="formbuilder-text form-group field-text-1649755594609-0">
      <label for="text-1649755594609-0" class="formbuilder-text-label">Presupuesto</label>
      <input type="text" class="form-control" name="text-1649755594609-0" id="text-1649755594609-0">
    </div>
    <div class="formbuilder-button form-group field-button-1649755947336-0">
      <button type="button" class="btn-default btn" name="button-1649755947336-0" style="default" id="button-1649755947336-0">Generar</button>
      <button...

CSS

.rendered-form * {
    box-sizing: border-box;
}
.rendered-form .form-group {
    margin-left: 0px;
    margin-bottom: 15px;
}
#rendered-form .form-group>label {
    font-weight: 700;
    font-size: 1em;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
}
.rendered-form .btn, .rendered-form .form-control {
    background-image: none;
}
.rendered-form .form-control {
    height: 34px;
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.42857143;
    border-radius: 4px;
}

JavaScript

const botonGenerar = document.querySelector('#button-1649755947336-0');
const botonLimpiar = document.querySelector('#button-1649755947337-0');
botonLimpiar.onclick = function(){
	document.querySelector('#text-1649755461588-0').value = '';
  document.querySelector('#text-1649755480189-0').value = '';
  document.querySelector('#text-1649755519961-0').value = '';
  document.querySelector('#textarea-1649755542379-0').value = '';
  document.querySelector('#text-1649755582848-0').value = '';
  document.querySelector('#text-1649755594609-0').value = '';
}
botonGenerar.onclick = function(){
	const ficha = document.querySelector('#text-1649755461588-0').value;
  const titulo = document.querySelector('#text-1649755480189-0').value;
  const entidad = document.querySelector('#text-1649755519961-0').value;
  const descripcion = document.querySelector('#textarea-1649755542379-0').value;
  const tipo = document.querySelector('#text-1649755582848-0').value;
  const presupuesto = document.querySelector('#text-1649755594609-0').value;
  const res1 = document.querySelector('#res1');
  const res2 = document.querySelector('#res2');
  res1.textContent = `
  <h2>Proyecto ${ficha} - ${entidad}</h2> \n\
\n\
<ul><li><strong>Título del proyecto</strong></li></ul> \n\
<p>${titulo}</p> \
\
<ul><li><strong>Entidad que propone</strong></li></ul> \
<p>${entidad}</p> \
\
<ul><li><strong>Breve descripción</strong></li></ul> \
<p>${descripcion}</p> \
\
<ul><li><strong>Tipo/Categoría</strong></li></ul> \
<p>${tipo}</p> \
\
<ul><li><strong>Presupuesto</strong></li></ul> \
<p>${presupuesto}</p>`;
	res2.textContent = `
<p>${ficha} - ${titulo}</p><p style="margin-left: 40px;">Entidad que propone - ${entidad}</p>`;

};