Angular responsive comment system

Developer
Andres
Size
7,439 Kb
Views
24,288
  1. Angular responsive comment system Previews
  2. Angular responsive comment system HTML Codes
  3. Angular responsive comment system CSS Codes
  4. Angular responsive comment system JS Codes

How do I make an angular responsive comment system?

Not all markdown is supported yet. I know it, and I'm working on it ;)Forked from Jan-Kanty Pawelski's Pen Angular responsive comment system.. What is a angular responsive comment system? How do you make a angular responsive comment system? This script and codes were developed by Andres on 26 August 2022, Friday.

Angular responsive comment system Previews
IQ Test

Angular responsive comment system - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular responsive comment system</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel='stylesheet prefetch' href='css/__pawelski_io_reset_sass.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" style="display:none"> <defs> <path id="love" d="M73.4,6c-10.2,0-19,5.7-23.4,14.1C45.5,11.7,36.7,6,26.6,6C11.9,6,0,18,0,32.7C0,68.9,50,94,50,94 s50-25.1,50-61.3C100,18,88.1,6,73.4,6L73.4,6z"/> <path id="reply" d="M75.9,100C87,79.9,88.9,49.2,45.4,50.2V75L8,37.5L45.4,0v24.3C97.4,22.9,103.2,70.4,75.9,100z"/> </defs>
</svg>
<div ng-app="comments" ng-controller="commentsCtrl"> <ul> <li ng-repeat="comment in comments"> <header> <h1 ng-if="comment.author.website.length == 0" ng-class="{ author: isAuthor(comment.author.email) }">{{ comment.author.name }}</h1> <h1 ng-if="comment.author.website.length > 0" ng-class="{ author: isAuthor(comment.author.email) }"><a ng-href="//{{ comment.author.website }}">{{ comment.author.name }}</a></h1> <div> <button class="love" ng-click="love(comment.id)" ng-class="{ loved: comment.loved }"> <svg viewBox="0 0 100 100"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#love"></use> </svg> </button> <button class="reply" ng-click="reply(comment.author.name)"> <svg viewBox="0 0 100 100"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#reply"></use> </svg> </button> </div> <img ng-src="{{ getGravatar(comment.author.email) }}" /> </header> <p ng-bind-html="parseContent(comment.content)"></p> </li> </ul> <form name="form" ng-submit="form.$valid && addNewComment()" novalidate> <input placeholder="First and second name" type="text" ng-pattern="/[a-zA-Z\.,\-]+/" ng-model="newComment.author.name" required /> <textarea placeholder="Comment" ng-model="newComment.content" required></textarea> <input type="text" placeholder="Email" ng-pattern="/.+@.+\.[a-z]+/" ng-model="newComment.author.email" required /> <input type="text" placeholder="Website" ng-pattern="/.+\.[a-z]+/" ng-model="newComment.author.website" /> <p><a href="//daringfireball.net/projects/markdown/syntax">Markdown</a> supported.</p> <button type="submit">Add comment</button> <img id="newCommentAvatar" ng-src="{{ getGravatar(newComment.author.email) }}" /> </form>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script src='http://www.myersdaily.org/joseph/javascript/md5.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angular responsive comment system - Script Codes CSS Codes

html { background: #e5e5e5; padding: 20px;
}
body { margin: 0 auto; width: 100%; min-width: 400px; max-width: 800px; color: #000; font: 300 14px/20px "Helvetica Neue", sans-serif;
}
ul { padding-left: 80px; list-style: none;
}
ul li { background: #fff; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); position: relative;
}
ul li:not(:first-child) { margin-top: 20px;
}
ul li:before { content: ""; border-width: 10px 10px 10px 0; border-style: solid; border-color: transparent #fff; position: absolute; top: 10px; left: -10px;
}
ul li header { border-bottom: 1px solid #e5e5e5; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; display: -webkit-box; display: -ms-flexbox; display: flex;
}
ul li header * { display: inline-block;
}
ul li header h1 { padding: 10px 20px; font-weight: 500;
}
ul li header h1 a { text-decoration: none;
}
ul li header h1.author, ul li header h1.author * { color: #9a3;
}
ul li header h1.author:after { content: "Author"; margin-left: 10px; padding: 0 5px; background: #9a3; border-radius: 2px; color: #fff; font-size: 10px; font-weight: normal; text-transform: uppercase; position: absolute;
}
ul li header div { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex;
}
ul li header div button { padding: 10px;
}
ul li header div button svg { width: 20px; height: 20px; display: block;
}
ul li header div button svg * { fill: #999;
}
ul li header div button:hover svg * { fill: #666;
}
ul li header div button.loved svg * { fill: #f66;
}
ul li header img { width: 60px; height: 60px; background: #fff; border: 4px solid #fff; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: -80px;
}
ul li p { padding: 20px; white-space: pre-line; overflow-x: hidden;
}
ul li p .reply { color: #9a3;
}
ul li p strong { font-weight: 500;
}
ul li p em { font-style: italic;
}
ul li p a { text-decoration: underline;
}
ul li p a:hover { text-decoration: none;
}
ul li p code { font-family: "Source Code Pro", monospace;
}
form { margin-top: 20px; padding: 20px 20px 20px 100px; background: #fff; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); position: relative; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex;
}
form:before { content: ""; border-width: 10px 10px 10px 0; border-style: solid; border-color: transparent rgba(229, 229, 229, 0.5); position: absolute; top: 30px; left: 90px;
}
form input, form textarea { padding: 10px 20px; width: 100%; background: rgba(229, 229, 229, 0.5); display: inline-block;
}
form input:not(:first-child), form textarea:not(:first-child) { margin-top: 2px;
}
form input[placeholder='Email'], form textarea[placeholder='Email'] { width: 50%; border-right: 1px solid #fff;
}
form input[placeholder='Website'], form textarea[placeholder='Website'] { width: 50%; border-left: 1px solid #fff;
}
form input::-webkit-input-placeholder, form textarea::-webkit-input-placeholder { color: #666;
}
form input::-moz-placeholder, form textarea::-moz-placeholder { color: #666;
}
form input:-ms-input-placeholder, form textarea:-ms-input-placeholder { color: #666;
}
form input::placeholder, form textarea::placeholder { color: #666;
}
form input.ng-dirty.ng-invalid, form input.ng-dirty.ng-invalid::-webkit-input-placeholder, form textarea.ng-dirty.ng-invalid, form textarea.ng-dirty.ng-invalid::-webkit-input-placeholder { color: #f66;
}
form input.ng-dirty.ng-invalid, form input.ng-dirty.ng-invalid::-moz-placeholder, form textarea.ng-dirty.ng-invalid, form textarea.ng-dirty.ng-invalid::-moz-placeholder { color: #f66;
}
form input.ng-dirty.ng-invalid, form input.ng-dirty.ng-invalid:-ms-input-placeholder, form textarea.ng-dirty.ng-invalid, form textarea.ng-dirty.ng-invalid:-ms-input-placeholder { color: #f66;
}
form input.ng-dirty.ng-invalid, form input.ng-dirty.ng-invalid::placeholder, form textarea.ng-dirty.ng-invalid, form textarea.ng-dirty.ng-invalid::placeholder { color: #f66;
}
form textarea { margin-top: 1px; padding: 20px; height: 120px; resize: none;
}
form p { margin: 10px 10px 0 10px; padding: 10px 0;
}
form p a { text-decoration: underline;
}
form p a:hover { text-decoration: none;
}
form button { margin: 10px 10px 0 auto; padding: 10px 0; width: 200px; background: #9a3; border-radius: 2px; color: #fff; display: block;
}
form img { width: 60px; height: 60px; background: rgba(229, 229, 229, 0.5); border: 4px solid rgba(229, 229, 229, 0.5); border-radius: 2px; position: absolute; top: 20px; left: 20px;
}

Angular responsive comment system - Script Codes JS Codes

(function() { angular.module('comments', []).controller('commentsCtrl', function($scope, $sce) { var markdown, postAuthorEmail; postAuthorEmail = '[email protected]'; $scope.comments = [ { id: 1, author: { name: 'Jan-Kanty Pawelski', email: '[email protected]', website: 'pawelski.io' }, content: 'I made it! My awesome angular comment system. What do you think?', loved: false }, { id: 2, author: { name: 'Tomasz Jakut', email: '[email protected]', website: 'comandeer.pl' }, content: 'Nice looking. Good job dude ;)', loved: true }, { id: 3, author: { name: 'Jan-Kanty Pawelski', email: '[email protected]', website: 'pawelski.io' }, content: '<span class="reply">@Tomasz Jakut</span> Thanks man. I tried hard.', loved: false }, { id: 4, author: { name: 'Grzegorz Bąk', email: '[email protected]', website: 'gregbak.com' }, content: 'Third! Amazing system man! By the way check my new website: <a href="//gregbak.com">http://gregbak.com</a>.', loved: false } ]; $scope.newComment = {}; markdown = function(string) { string = string.replace(/(@[^@.]+)@/g, '<span class="reply">$1</span>'); string = string.replace(/\*\*([^*.]+)\*\*/g, '<strong>$1</strong>'); string = string.replace(/__([^_.]+)__/g, '<strong>$1</strong>'); string = string.replace(/\*([^*.]+)\*/g, '<em>$1</em>'); string = string.replace(/_([^_.]+)_/g, '<em>$1</em>'); string = string.replace(/``([^`.]+)``/g, '<code>$1</code>'); string = string.replace(/`([^`.]+)`/g, '<code>$1</code>'); return string; }; $scope.parseContent = function(content) { return $sce.trustAsHtml(content); }; $scope.isAuthor = function(email) { return email === postAuthorEmail; }; $scope.getGravatar = function(email) { var hash; if (email === void 0) { email = ''; } hash = email.trim(); hash = hash.toLowerCase(); hash = md5(hash); return '//gravatar.com/avatar/' + hash + '?s=60&d=identicon'; }; $scope.love = function(commentId) { var comment, i, len, ref, results; ref = $scope.comments; results = []; for (i = 0, len = ref.length; i < len; i++) { comment = ref[i]; if (comment.id === commentId) { results.push(comment.loved = !comment.loved); } else { results.push(void 0); } } return results; }; $scope.reply = function(author) { if ($scope.newComment.content === void 0) { $scope.newComment.content = ''; } if ($scope.newComment.content.search('@' + author + '') === -1) { if ($scope.newComment.content[0] === '@') { $scope.newComment.content = ', ' + $scope.newComment.content; } else { $scope.newComment.content = ' ' + $scope.newComment.content; } return $scope.newComment.content = '@' + author + '@' + $scope.newComment.content; } }; $scope.addNewComment = function() { $scope.newComment.id = $scope.comments.length + 1; $scope.newComment.author.website = $scope.newComment.author.website.replace(/https?:\/\/(www.)?/g, ''); $scope.newComment.content = markdown($scope.newComment.content); $scope.newComment.loved = false; $scope.comments.push($scope.newComment); return $scope.newComment = {}; }; return $scope.$watch('newComment.email', function(newValue, oldValue) { var newCommentAvatar; newCommentAvatar = document.getElementById('newCommentAvatar'); return newCommentAvatar.src = $scope.getGravatar($scope.newComment.email); }); });
}).call(this);
Angular responsive comment system - Script Codes
Angular responsive comment system - Script Codes
Home Page Home
Developer Andres
Username Angelfire
Uploaded August 26, 2022
Rating 3
Size 7,439 Kb
Views 24,288
Do you need developer help for Angular responsive comment system?

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!

Andres (Angelfire) Script Codes
Name
Vue 2.0 Intro
Social Media Button
CSS3 animated Pricing tables
Simple HTML5 CSS3 JS Project
A Pen by Andres
JQuery Payment
Latest Posts Widget
Flexbox Admin Template
Weather App
Calendar Widget
Create amazing web content 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!