Feedback Page

Developer
Tess DiNapoli
Size
2,836 Kb
Views
8,092
  1. Feedback Page Previews
  2. Feedback Page HTML Codes
  3. Feedback Page CSS Codes
  4. Feedback Page JS Codes

How do I make an feedback page?

Comment/user feedback page utilizing/playing with Javascript, CSS and Bootstrap.. What is a feedback page? How do you make a feedback page? This script and codes were developed by Tess DiNapoli on 14 January 2023, Saturday.

Feedback Page Previews
IQ Test

Feedback Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Feedback Page</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1">
<head>	<title>comment page</title>	<!--googlefont-->	<link href='https://fonts.googleapis.com/css?family=Exo:400,600' rel='stylesheet' type='text/css'>	<!-- bootstrap styles-->	<!-- <link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.css"> -->	<!--CUSTOM STYLES
<link rel="stylesheet" href="css/styles.css"> -->
</head>
<body>	<div class="myDiv">	<h1>got feedback?</h1>	<i class="fa fa-comments-o fa-5x"></i>	<br>	<div class="form-group">	<label for="name">name:</label>	<input class="form-control" rows="1" id="userName" type="text" placeholder="what's your name?">	<br>	<label for="comment">comment:</label>	<textarea class="form-control" rows="2" id="feedbackHere" placeholder="tell me something interesting"></textarea>	<br>	<input class="btn btn-default" type="submit" onclick="submitFeedback()" value="submit">	</button>	</form><br>	<i class="fa fa-bolt fa-4x"></i>	<hr class="soften">	<!--comment displays in ul-->	<ul id="listAll">	</ul>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Feedback Page - Script Codes CSS Codes

body {	background-color: #BF99CC;
}
.myDiv {	text-align: center;
}
#listAll {	list-style: none;	text-align: center;
}
.well-lg {	width: 60%;	margin: 0 auto;
}
.form-control {	width: 40%;	margin: 0 auto;
}
.form-control:focus {	border-color: #8f0f2e;	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .075), 0 0 8px rgba(143, 15, 46, .5);	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .075), 0 0 8px rgba(143, 15, 46 .5);
}
#feedbackHere {	text-align: left;
}
h1,
h4 {	font-family: "Exo", sans-serif;	font-weight: 600;
}
.well-lg {	font-family: Helvetica;	font-size: 16px;	text-align: left;	border-color: #8f0f2e;	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .075), 0 0 8px rgba(143, 15, 46, .5);	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .075), 0 0 8px rgba(143, 15, 46 .5);
}
hr.soften {	height: 1px;	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));	background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));	background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));	background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));	border: 0;
}

Feedback Page - Script Codes JS Codes

function submitFeedback() {	var user = document.getElementById("userName").value //initial user input	var feedback = document.getElementById("feedbackHere").value //user feedback in form	var userName = document.createTextNode(user + " says...")	var comment = document.createTextNode(feedback)	var userContent = document.createElement("h4")	userContent.appendChild(userName)	var commentBody = document.createElement("p")	commentBody.appendChild(comment)	var divWrapper = document.createElement("div") // for wrapping h4 and p in one div	var listUsers = document.createElement("li")	listUsers.className = "userlist"	divWrapper.className= "well well-lg"	divWrapper.appendChild(userContent) //appending h4 and p to div to serve as wrapper	divWrapper.appendChild(commentBody)	listUsers.appendChild(divWrapper) //append to li	document.getElementById("listAll").appendChild(listUsers)
}
Feedback Page - Script Codes
Feedback Page - Script Codes
Home Page Home
Developer Tess DiNapoli
Username TessDiNapoli
Uploaded January 14, 2023
Rating 3
Size 2,836 Kb
Views 8,092
Do you need developer help for Feedback Page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tess DiNapoli (TessDiNapoli) Script Codes
Name
Play with Instagram API
JQuery ui experiments
Daily Task List
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!