Notes with angular-js

Developer
Joanez Andrades
Size
3,697 Kb
Views
4,048
  1. Notes with angular-js Previews
  2. Notes with angular-js HTML Codes
  3. Notes with angular-js CSS Codes
  4. Notes with angular-js JS Codes

How do I make an notes with angular-js?

What is a notes with angular-js? How do you make a notes with angular-js? This script and codes were developed by Joanez Andrades on 25 January 2023, Wednesday.

Notes with angular-js Previews
IQ Test

Notes with angular-js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Notes with angular-js</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://izzyweb.com.br/Grids/grid-izzy.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <!-- Fonts --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- js --> <script src="https://izzyweb.com.br/public/codepen/penPostsAngular.js"></script> </head> <body ng-app="postsApp" ng-controller="newsCtrl"> <header class="grd-50"> <div class="grd-100 logo"> <h1 class="title">Notes</h1>
<!-- <span id="chama-form" class="fa fa-plus-circle fa-2x" title="Adicionar Post"></span> --> </div>
<!-- <input type="text" class="search" placeholder="Filtre por: Nome, data, autor ou palavra!" ng-model="busca" /> --> </header> <section id="posts" class="grd-50"> <form name="adc-post"> <input type="text" name="titulo" ng-model="postar.title" placeholder="Title" /> <input class= type="text" name="autor" ng-model="postar.author" placeholder="Name" /> <textarea name="preview" ng-model="postar.preview" id="content" cols="30" rows="3" placeholder="Note"></textarea> </form> <button class="btn-circle fa fa-check" name="adc-post" ng-click="adcPost(postar)"></button> <button class="btn-circle fa fa-remove"></button> <article class="post-thumb col-3" ng-repeat="post in posts | filter:busca "> <h2 class="post-title">{{post.title}}</h2> <p>{{post.preview | limitTo:300}}</p>
<!-- <div class="like col-1"> <i class="fa fa-thumbs-up" ng-click="like = like + 1" ng-init="like=0">{{like}}</i> <i class="fa fa-thumbs-down" ng-click="deslike = deslike + 1" ng-init="deslike=0">{{deslike}}</i> </div> --> <div class="desc"> <span>{{post.date | date:d/M/y}}</span> <span>{{post.author}}</span> </div> </article> </section> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Notes with angular-js - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
html{ margin: 0 auto; background: #66cda1;
}
h1, h2, h3, h4, h5, input, textarea, p{ font-family: 'Josefin Sans', sans-serif;
}
h1{ font-size: 3em;
}
h3{ font-size: 1.9em; color: #fff; padding: .5%;
}
/* Botões */
.btn-adc{ width: 60px; height: 60px; margin-left: 47%; margin-top: 1%; text-align: center; color: rgba(255, 255, 255, .9); cursor: pointer;
}
.btn-adc span{ transition: .5s all;
}
.btn-circle{ background: rgba(255, 255, 255, .2); width: 50px; height: 50px; color: #fff; margin: 0 1%; border: rgba(26, 188, 156, 0); border-radius: 50%; display: block; overflow: hidden; transition: .4s all;
}
.btn-circle:hover{ transform: rotate(360deg); background: rgba(26, 188, 156, .2) ; color: rgba(22, 160, 133,1.0); border: 1px solid rgba(26, 188, 156, 1);
}
/* Header */
header{ background-color: none; height: 10vh; border-bottom: 1px solid #41bf89; margin-left: 25%; text-align: center;
}
header .title{ color: #fff; text-align: center; padding-top: 1%; text-shadow: 1px 1px 5px #fff;
}
header i.fa-commenting{ color: rgba(26, 188, 156, .2); text-shadow: 0px 0px 0px rgba(22, 160, 133,1.0); float: right;
}
header .logo{ height: 100%; padding-top: 2%; text-align: center;
} form input{ background: rgba(255, 255, 255, .1); width: 100%; font-size: 1.2em; text-align: center; color: #fff;
/* border: 1px solid rgba(255, 255, 255, .4); */ border: none; margin: 1% .5%; padding: 1%; display: inline-block;
}
form textarea{ background: rgba(255, 255, 255, .1); width: 100%; font-size: 1.2em; color: #fff;
/* border: 1px solid rgba(255, 255, 255, .4); */ border: none; margin: 1% .5%; padding: 1%;
}
::-webkit-input-placeholder { color: rgba(255, 255, 255, .6);
}
:-moz-placeholder { color: rgba(255, 255, 255, .6);
}
input:focus,
textarea:focus{
/* display: none; */
}
input.search{ background: rgba(18, 96, 178, .9) ; width: 50%; font-size: 1.5em ; color: rgba(255, 255, 255, .5); padding: 1%; margin: 2% 24% 2% 24%; border: none; border-radius: 5px; box-shadow: 1px 1px 10px rgba(141, 153, 174, .5) ;
}
.adc{ height: 10%; text-align: center;
}
/* Secão */
section#posts{ margin-top: 1%; margin-left: 25%; display:;
}
h2{ font-size: 2em ; text-align: center;
}
p{ width: 90%; height: 30px; color: rgba(192, 57, 43,1.0); font-size: .9em; margin: 1% 2.5% 1% 2.5%; padding: 3% 2%; border-bottom: 2px solid rgba(44, 62, 80, .1);
}
article.post-thumb{ background: rgba(255, 255, 255, .2); height: 100px; border-radius: 5px; margin-bottom: 2%; box-shadow: 0px 0px 50px rgba(44, 62, 80,.2); overflow: hidden; cursor: crosshair; transition: .3s all;
}
.post-thumb:hover{ height: 150px; box-shadow: 0px 0px 10px rgba(44, 62, 80, 1); position: relative;
}
.post-title{ background: rgba(44, 62, 80,1.0); border-bottom: 1px solid #ccc; width: 100%; height: 45px; padding-left: 3%; color: #fff; line-height: 1.3; border-top-radius: 5px;
}
article.post-thumb div.like{ display: block; color: red; text-align: center;
}
article.post-thumb div.like i{ color: black; cursor: pointer;
}
div.desc { width: 50%; height: 15%; text-align: center; border-radius: 4px; position: relative; margin-bottom: 0;
}
div.desc span{ background: rgba(178, 113, 0, .2); text-align: center; color: rgba(255, 255, 255, 1); border-radius: 5px; margin: 1%; padding: 2%;
}

Notes with angular-js - Script Codes JS Codes

var postsApp = angular.module("postsApp", []);
//Controler de posts
postsApp.controller("newsCtrl", function($scope, $http) {
// Array de contatos $scope.posts = [];
// Função para carregar os posts var carregarPosts = (function() { $http.get("https://izzyweb.com.br/public/codepen/json/posts.txt").success(function(data){ $scope.posts = data; }) }) ();
// Função que adiciona post $scope.adcPost = function(postar){ postar.date = new Date() $scope.posts.push(angular.copy(postar)); delete $scope.postar; }
})
Notes with angular-js - Script Codes
Notes with angular-js - Script Codes
Home Page Home
Developer Joanez Andrades
Username JoanezAndrades
Uploaded January 25, 2023
Rating 3
Size 3,697 Kb
Views 4,048
Do you need developer help for Notes with angular-js?

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!

Joanez Andrades (JoanezAndrades) Script Codes
Name
A Pen by Joanez Andrades
Slide page simple with jquery
Pricing Table
Message App Ui
Redesign concept IMDB series page
Social buttons
Contact form
Slider Animation css3
Contact Form validation with Angularjs
Cover Page
Create amazing video scripts 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!