marriott review portal

websiite portal to help generate more revews

by teewelk

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: c
-->
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">


<div class="container">
  <div class="row">
    <div class="col">
    <h3>
    thanks for staying with us!
    </h3>
    <h4 style="text-transform: lowercase;">
      LEAVE US A REVIEW ON MULTIPLE CHANNELS TO EARN MARRIOTT REWARDS POINTS!
    </h4>
    <br>
      <textarea class="col-lg-12" id="textinfo">Type your message here
      </textarea>
      
    <div class="container" >
    
    <script type="text/javascript">
	function checkTotal() {
		document.listForm.total.value = '';
		var sum = 0;
		for (i=0;i<document.listForm.choice.length;i++) {
		  if (document.listForm.choice[i].checked) {
		  	sum = sum + parseInt(document.listForm.choice[i].value);
		  }
		}
		document.listForm.total.value = sum;
	}
</script>

    
    
    <form name="listForm" class="row" >
    
       <ul id="channels" data-toggle="tooltip" data-placement="top" title="TripAdvisor" name="reviewchannel">
          <input  type="checkbox" name="choice"  value="150" onchange="checkTotal()"/>
          <img class="tripadvisor" height="24" width="24" color="692245" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/tripadvisor.svg" />

          
      </ul>
          
       <ul...

CSS

body{
  background-color: #fff;
}

p{
  font-family: 'Montserrat', sans-serif;

  letter-spacing: 0.04em;
  text-transform: ;
  font-size: 20px;
}

h3{
  font-family: 'Montserrat', sans-serif;

  letter-spacing: 2px;
  text-transform: uppercase;
}

h4{
  font-family: 'Didact Gothic', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 16px;
}

h5{
  font-family: 'Didact Gothic', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

textarea{
  font-family: 'Didact Gothic', sans-serif;
  letter-spacing: 2px;
  text-transform: italic;
}

.row {
  background: #ffffff;
  margin-top: 20px;
}

.col {

  padding: 10px;
   box-shadow: 1px 1px 1px 1px #363636;
 
}

.btn-residence-maroon{
  background-color: #692245;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-family: 'Didact Gothic', sans-serif;

}

.retrobold{
 
  padding: 4px 8px 8px 8px;
  color: #151823;
  text-transform: uppercase;
}



input{
  border:none;
  text-align: center;
  color: #3dc4c0;
  font-size: 20px;
  
  
}

#pointCounter{
  background-color: #ffffff;
  box-shadow: none;
  text-align: right;
  border: #364646;
 
}

#form1 {

display:none;

}

#review-box{
  background-color: #54d6d1;
  padding: 16px 16px 16px 16px;
  width: 100%;
}

JavaScript

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});



$("#formButton").click(function(){
        $("#form1").toggle();
    });
    
var checkboxes = $("input[type='checkbox']"),
    submitButt = $("button[type='button']"),
    reviewLink = $("div[class|='top']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
    
});

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};