Develop Reference

Expanding searchbar - keep expanded state if text is entered

Working on a searchbar that has a default collapsed state and, when clicked, expands with an animation, and collapses again when it is no longer focused.
How do I make it so that when you have entered some text into the search field, and you click outside of the input, the searchbar maintains its expanded state if text is present?
body {
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height 100vh;
width: 100%;
padding: 3rem 0;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<form id="demo-2">
<input type="search" placeholder="Search">
</form>

Use :valid selector and minlength and required attribute.
body {
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height 100vh;
width: 100%;
padding: 3rem 0;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:valid, /* added */
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<form id="demo-2">
<input type="search" placeholder="Search" minlength="1" required>
</form>

To anyone looking for a js solution because they need to target inputs containers and can't use :focus :valid and such css elements, here is a solution (css not done)
const events = () => {
document.addEventListener('click', event => {
if (event.target.closest('input')) {
event.target.closest('.field').classList.add('open');
} else {
document.querySelectorAll('.field').forEach(el => {
if (el.querySelector('input').value.length == 0) {
el.classList.remove('open');
}
})
}
})
}
events();
<form>
<div class="field">
<input type="text" value="">
</div>
<div class="field">
<input type="text" value="">
</div>
</form>

Stripe Element Quickstart example not rendering correctly

I am just getting started with Stripe's Element Quickstart. I have the following fiddle. As you can see, it looks nothing like the example. I've even loaded their https://js.stripe.com/v3/ file but have no idea what I'm missing:
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>

The page that the example is on here defines styles for the form, button, label, etc. You can find this css if you open up the console on their example site and search for this style tag <style media="screen"> embedded in the html. Add the css to your fiddle and it will look like their example.
body, html {
height: 100%;
background-color: #f7f8f9;
color: #6b7c93;
}
*, label {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-variant: normal;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
button {
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
float: left;
margin-left: 12px;
margin-top: 28px;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
form {
padding: 30px;
height: 120px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#card-errors {
height: 20px;
padding: 4px 0;
color: #fa755a;
}
.form-row {
width: 70%;
float: left;
}
.token {
color: #32325d;
font-family: 'Source Code Pro', monospace;
font-weight: 500;
}
.wrapper {
width: 670px;
margin: 0 auto;
height: 100%;
}
#stripe-token-handler {
position: absolute;
top: 0;
left: 25%;
right: 25%;
padding: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0 15px 35px rgba(50, 50, 93, 0.15),
0 5px 15px rgba(0, 0, 0, 0.1);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transform: translateY(0);
opacity: 1;
background-color: white;
}
#stripe-token-handler.is-hidden {
opacity: 0;
transform: translateY(-80px);
}
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
background-color: white;
height: 40px;
padding: 10px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}

Display Tooltip after a Click instead when Hover

I have a Clipboard Tooltip button script that display tooltip when hover with the cursor on it.
In the Clipboard page under Copy text from attribute example, it display tooltip after a click to copy, while hover do nothing.
And that exactly what i want to achive. Cuz i only success display tooltip when hover.
I have tried to play with the Clipboard page main.css and primer.css and didnt got it to work as i want (display tooltip after clicking)
Also looked at the tooltip creator documentation but even there it has only hover tooltips.
Here is the HTML code:
<div id="example-text" class="example">
<div class="table">
<div class="table-row">
<div class="table-cell">ebay</div>
<div class="table-cell">amazon</div>
</div>
<div class="table-row"><p></p></div>
<div class="table-row">
<div class="table-cell"><button class="btn" data-clipboard-text="ebay">ebay-link</button></div>
<div class="table-cell"><button aria-label="copied!" class="btn tooltipped tooltipped-e border p-2 mb-2 mr-2 left" data-clipboard-text="amazon">amazon-link</button></div>
</div>
</div>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
</script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
And here is the CSS:
#example-text {width: 500px;}
.table
{
display:table;
text-align: center;
}
.table-row
{
display:table-row;
width: 400px;
}
.table-cell
{
display:table-cell;
width: 200px;
color: black;
font-family: arial;
font-size: 14px;
}
.btn[disabled] .clippy {
opacity: .3;
}
.example {
position: relative;
margin: 15px 0 0;
padding: 39px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
z-index: 2;
}
.example p {
color: #666;
}
.example:after {
content: "copy the link";
position: absolute;
top: 0;
right: 0;
padding: 2px 8px;
font-size: 14px;
font-weight: bold;
background-color: #f5f5f5;
color: #9da0a4;
border-radius: 4px 0 4px 0;
}
.example+.snippet {
background: #f8f8f8;
border-radius: 4px;
border: 1px solid #ddd;
clear: both;
top: -20px;
padding: 20px 0 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
.form-control.focus,
.form-control:focus,
input[type="text"].focus,
input[type="text"]:focus,
input[type="password"].focus,
input[type="password"]:focus,
input[type="email"].focus,
input[type="email"]:focus,
input[type="number"].focus,
input[type="number"]:focus,
input[type="tel"].focus,
input[type="tel"]:focus,
input[type="url"].focus,
input[type="url"]:focus,
select.focus,
select:focus,
textarea.focus,
textarea:focus {
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
select:not([multiple]) {
height: 34px;
vertical-align: middle
}
input.input-contrast,
.input-contrast {
background-color: #fafafa
}
input.input-contrast:focus,
.input-contrast:focus {
background-color: #fff
}
::-webkit-input-placeholder {
color: #aaa
}
::-moz-placeholder {
color: #aaa
}
:-ms-input-placeholder {
color: #aaa
}
::placeholder {
color: #aaa
}
input.input-mini {
min-height: 26px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px
}
input.input-large {
padding: 6px 10px;
font-size: 16px
}
.input-block {
display: block;
width: 100%
}
.input-monospace {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
}
.select {
display: inline-block;
max-width: 100%;
padding: 7px 24px 7px 8px;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
background-size: 8px 10px;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 8px \9;
background-image: none \9
}
.select:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
.select::-ms-expand {
opacity: 0
}
.select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px
}
.select-sm:not([multiple]) {
height: 26px;
min-height: 26px
}
.clearfix:before {
display: table;
content: ""
}
.clearfix:after {
display: table;
clear: both;
content: ""
}
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: bold;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none
}
.btn i {
font-style: normal;
font-weight: 500;
opacity: 0.6
}
.btn .octicon {
vertical-align: text-top
}
.btn .counter {
text-shadow: none;
background-color: #e5e5e5
}
.btn:focus {
text-decoration: none;
border-color: #51a7e8;
outline: none;
box-shadow: 0 0 5px rgba(81, 167, 232, 0.5)
}
.btn:focus:hover,
.btn.selected:focus {
border-color: #51a7e8
}
.btn:hover,
.btn:active,
.btn.zeroclipboard-is-hover,
.btn.zeroclipboard-is-active {
text-decoration: none;
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc
}
.btn:active,
.btn.selected,
.btn.zeroclipboard-is-active {
background-color: #dcdcdc;
background-image: none;
border-color: #b5b5b5;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15)
}
.btn.selected:hover {
background-color: #cfcfcf
}
.btn:disabled,
.btn:disabled:hover,
.btn.disabled,
.btn.disabled:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
border-color: rgba(197, 197, 197, 0.5);
box-shadow: none
}
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941
}
.btn-primary .counter {
color: #60b044;
background-color: #fff
}
.btn-primary:hover {
color: #fff;
background-color: #569e3d;
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e
}
.btn-primary:active,
.btn-primary.selected {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
background-color: #569e3d;
background-image: none;
border-color: #418737
}
.btn-primary.selected:hover {
background-color: #4c8b36
}
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary.disabled,
.btn-primary.disabled:hover {
color: #fefefe;
background-color: #add39f;
background-image: linear-gradient(#c3ecb4, #add39f);
border-color: #b9dcac #b9dcac #a7c89b
}
.btn-danger {
color: #900
}
.btn-danger:hover {
color: #fff;
background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630);
border-color: #cd504a
}
.btn-danger:active,
.btn-danger.selected {
color: #fff;
background-color: #b33630;
background-image: none;
border-color: #9f312c
}
.btn-danger.selected:hover {
background-color: #9f302b
}
.btn-danger:disabled,
.btn-danger:disabled:hover,
.btn-danger.disabled,
.btn-danger.disabled:hover {
color: #cb7f7f;
background-color: #efefef;
background-image: linear-gradient(#fefefe, #efefef);
border-color: #e1e1e1
}
.btn-danger:hover .counter,
.btn-danger:active .counter,
.btn-danger.selected .counter {
color: #b33630;
background-color: #fff
}
.btn-outline {
color: #4078c0;
background-color: #fff;
background-image: none;
border: 1px solid #e5e5e5
}
.btn-outline .counter {
background-color: #eee
}
.btn-outline:hover,
.btn-outline:active,
.btn-outline.selected,
.btn-outline.zeroclipboard-is-hover,
.btn-outline.zeroclipboard-is-active {
color: #fff;
background-color: #4078c0;
background-image: none;
border-color: #4078c0
}
.btn-outline:hover .counter,
.btn-outline:active .counter,
.btn-outline.selected .counter,
.btn-outline.zeroclipboard-is-hover .counter,
.btn-outline.zeroclipboard-is-active .counter {
color: #4078c0;
background-color: #fff
}
.btn-outline.selected:hover {
background-color: #396cad
}
.btn-outline:disabled,
.btn-outline:disabled:hover,
.btn-outline.disabled,
.btn-outline.disabled:hover {
color: #767676;
background-color: #fff;
background-image: none;
border-color: #e5e5e5
}
.btn-with-count {
float: left;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn-sm {
padding: 2px 10px
}
.tooltipped {
position: relative
}
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
display: inline-block;
text-decoration: none
}
.tooltipped-multiline:hover:after,
.tooltipped-multiline:active:after,
.tooltipped-multiline:focus:after {
display: table-cell
}
.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw:after {
margin-right: -15px
}
.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw:after {
margin-right: -15px
}
.tooltipped-s:after,
.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-multiline:after {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 250px;
word-break: break-word;
word-wrap: normal;
white-space: pre-line;
border-collapse: separate
}
.tooltipped-multiline.tooltipped-s:after,
.tooltipped-multiline.tooltipped-n:after {
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.tooltipped-multiline.tooltipped-w:after,
.tooltipped-multiline.tooltipped-e:after {
right: 100%
}
#media screen and (min-width: 0\0) {
.tooltipped-multiline:after {
width: 250px
}
}
.tooltipped-sticky:before,
.tooltipped-sticky:after {
display: inline-block
}
.tooltipped-sticky.tooltipped-multiline:after {
display: table-cell
}
.fullscreen-overlay-enabled.dark-theme .tooltipped:after {
color: #000;
background: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before {
border-bottom-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before {
border-top-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before {
border-right-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before {
border-left-color: rgba(255, 255, 255, 0.8)
}
EDIT: Getting closer:
This is the related code:
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<pre class="snippet">
<button class="btn" data-clipboard-snippet="">
<img class="clippy" width="13" src="./index_files/clippy.svg" alt="Copy to clipboard">
</button>
<code class="html hljs xml">
<span class="hljs-comment"><!-- Trigger --></span>
<span class="hljs-tag"><<span class="hljs-title">button</span>
<span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span>
<span class="hljs-attribute">data-clipboard-text</span>=<span class="hljs-value">"Just because you can doesn't mean you should — clipboard.js"</span>></span>
Copy to clipboard
<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
</code>
</pre>
Tried and still without success- Wonder what exactly triger that.
How do i get tooltip After i click (like in the clipboardpage)?
Here's a live one:

Got it. It was hiding in the demoes.js file.
And especially that line:
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
This is the corrected code:
<script src="https://clipboardjs.com/assets/scripts/demos.js"></script>
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
Now it is working.
Here's the result: HERE

How to make dropdown menu

I find this dropdown menu on internet.The problem is dropdown is always open and it doesnt work.When i paste all default code from http://codepen.io/Jeplaa/pen/IzAvx
it doesn't work.Please can you help me.How i can make when user click button it show dropdown menu and stay until user click on button again.
I include 2 scripts
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="assets/js/menu.js"></script>
Also the the code of dropdown menu:
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Replace this line:
$( ".cog, .admin-text" ).on( "click", function()
With this line:
$( ".admin-panel" ).on( "click", function()
... and it will work.
You can check it on Codepen: http://codepen.io/catalin586/pen/LRbELV
You may also want to add a display none by default to your menu:
.menu {display: none;}

you use in JQ
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
.cog and .admin-text do not exist in your HTML . i guess you want your .menu to appear ( fadeIn ) after you click the .arrow or on the text with class ".user_text"
also you say that the .menu always appears, ofcourse that happens if you don't hide it. in this example i've hidden it by setting {display:none} in CSS
see code below
let me know if this is what you want.
$(".down,.user_text").click(function(){
$(".menu").fadeToggle( "fast" );
})
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
.menu { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics
Settings
Logout
</div>
</div>
</div>

.down & .user_text
Try it:
$( ".down, .user_text" ).on( "click", function() {
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img">
<b class="user_text">Curtis Jackson</b>
</div>
<span class="down">
<img src="http://i.imgur.com/bLXw2RL.png">
</span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Remove the .cog and change .admin-text to .admin-panel
$( ".cog, .admin-text" ).on( "click", function()
to
$( ".admin-panel" ).on( "click", function()
Hope it helps!
$( ".admin-panel" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

You are not having any elements with classes either cog or admin-text. You are using onclick on these. The codePen example which you have provided contains an element with admin-text class

you can use fadeIn and fadeOut in jquery
see the documentation in jquery

"Error: $injector:nomod Module Unavailable"

Hello does anyone know why my it doesn't display 3 instead of {{remain}} ? I got the error :
"Error: $injector:nomod Module Unavailable".
My snippet work here but I don't know why it does not work to my side
/index.html
/app.js
/MyTodoList.js
/style.css
//Inside app.js
var app = angular.module("myapp", []);
//Inside MyTodoList.js
app.controller('TodoCtrl', ['$scope', function ($scope) {
$scope.remain = 3;
}]);
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
color: #4d4d4d;
width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTv, .sapUiBtnS {
font: inherit;
font-size: inherit;
}
#todoapp {
background: #fff;
background: rgba(255, 255, 255, 0.9);
margin: 130px 0 40px 0;
border: 1px solid #ccc;
position: relative;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before {
content: '';
border-left: 1px solid #f5d6d6;
border-right: 1px solid #f5d6d6;
width: 2px;
position: absolute;
top: 0;
left: 40px;
height: 100%;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#todoapp input:-moz-placeholder {
font-style: italic;
color: #a9a9a9;
}
#todoapp h1 {
position: absolute;
top: -120px;
width: 100%;
font-size: 70px;
font-weight: bold;
text-align: center;
color: #b3b3b3;
color: rgba(255, 255, 255, 0.3);
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#header {
padding-top: 15px;
border-radius: inherit;
}
#header:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 15px;
z-index: 2;
border-bottom: 1px solid #6c615c;
background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px;
border-top-right-radius: 1px;
}
#main {
position: relative;
z-index: 2;
border-top: 1px dotted #adadad;
}
#new-todo,
.sapUiTfBrd.sapUiTfRo.todo,
.sapUiTfBrd.sapUiTfStd.todo {
position: relative;
margin: 0;
margin-right: 153px;
width: 100%;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
background-color: transparent;
border: 0;
outline: none;
color: #4D4D4D;
padding: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTfBrd.sapUiTfStd.todo {
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
}
.sapUiTfBrd.sapUiTfRo.todo[data-completed="true"] {
color: #a9a9a9;
text-decoration: line-through;
}
#toggle-all {
display: block;
outline: none;
}
#toggle-all input {
z-index: 3;
position: absolute;
text-align: center;
top: 9px;
left: -15px;
width: 65px;
height: 41px;
-webkit-transform: rotate(90deg);
/* transform: rotate(90deg); */
-webkit-appearance: none;
appearance: none;
}
#toggle-all input:before {
content: '»';
font-size: 28px;
color: #d9d9d9;
padding: 0 25px 7px;
}
#toggle-all input:checked:before {
color: #737373;
}
#new-todo {
padding: 15px 15px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.02);
z-index: 2;
box-shadow: none;
}
#todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.checkbox-align {
padding-top: 7px;
margin-bottom: 0;
vertical-align: middle;
}
#todo-list li {
position: relative;
font-size: 24px;
border-top: 1px dotted #ccc;
}
#todo-list input[type='checkbox'] {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
/*
position: absolute;
top: 0;
bottom: 0;
*/
margin: auto 0;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#todo-list input[type='checkbox']:after {
content: '✔';
line-height: 62px;
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
#todo-list input[type='checkbox']:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
#todo-list input:not([type='checkbox']) {
word-break: break-word;
padding: 15px;
margin-left: 45px;
display: block;
line-height: 1.2em;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#todo-list li .destroy {
outline: none;
background-color: transparent;
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 22px;
color: #a88a8a;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#todo-list li .destroy:hover {
text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
#todo-list li .destroy:after {
content: '✖';
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list .sapUiRrNoData,
#todo-list .sapUiRrPtb,
#todo-list .sapUiRrFtr {
display: none;
}
#footer {
color: #777;
padding: 0 15px;
position: absolute;
right: 0;
bottom: -31px;
left: 0;
height: 20px;
z-index: -1;
text-align: center;
}
#footer:before {
content: '';
position: absolute;
right: 0;
bottom: 31px;
left: 0;
height: 50px;
z-index: -1;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 6px 0 -3px rgba(255, 255, 255, 0.8),
0 7px 1px -3px rgba(0, 0, 0, 0.3),
0 43px 0 -6px rgba(255, 255, 255, 0.8),
0 44px 2px -6px rgba(0, 0, 0, 0.2);
}
#footer #AllTodos, #footer #ActiveTodos, #footer #CompletedTodos {
color: #83756f;
}
#footer #clear-completed {
color: inherit;
}
#footer .sapUiHLayoutChildWrapper:nth-of-type(1) {
float: left;
text-align: left;
}
#todo-count {
vertical-align: 1px;
}
#todo-count:first-letter {
font-weight: bold;
}
#filters {
margin: 0;
padding: 0 2px 0 0;
position: absolute;
right: 0;
left: 0;
outline: none;
}
#filters .sapUiBtnStd,
#filters .sapUiBtnFoc {
background-color: transparent;
font-weight: normal;
outline: none;
padding-right: 3px;
margin-top: -1px;
}
#filters .sapUiSegButtonSelected.sapUiBtnStd,
#filters .sapUiSegButtonSelected.sapUiBtnAct.sapUiBtnFoc {
font-weight: bold;
}
#footer .sapUiHLayoutChildWrapper:nth-of-type(3) {
float: right;
}
#clear-completed {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
font-size: 11px;
padding: 0 10px;
border-radius: 3px;
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
height: 20px;
outline: none;
}
#-moz-document url-prefix() {
#clear-completed {
top: -22px;
}
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}
#info {
margin: 65px auto 0;
color: #a6a6a6;
font-size: 12px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
text-align: center;
}
#info a {
color: inherit;
}
.hidden{
display:none;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px dashed #C5C5C5;
border-bottom: 1px dashed #F7F7F7;
}
.learn a {
font-weight: normal;
text-decoration: none;
color: #b83f45;
}
.learn a:hover {
text-decoration: underline;
color: #787e7e;
}
.learn h3,
.learn h4,
.learn h5 {
margin: 10px 0;
font-weight: 500;
line-height: 1.2;
color: #000;
}
.learn h3 {
font-size: 24px;
}
.learn h4 {
font-size: 18px;
}
.learn h5 {
margin-bottom: 0;
font-size: 14px;
}
.learn ul {
padding: 0;
margin: 0 0 30px 25px;
}
.learn li {
line-height: 20px;
}
.learn p {
font-size: 15px;
font-weight: 300;
line-height: 1.3;
margin-top: 0;
margin-bottom: 0;
}
.quote {
border: none;
margin: 20px 0 60px 0;
}
.quote p {
font-style: italic;
}
.quote p:before {
content: '“';
font-size: 50px;
opacity: .15;
position: absolute;
top: -20px;
left: 3px;
}
.quote p:after {
content: '”';
font-size: 50px;
opacity: .15;
position: absolute;
bottom: -42px;
right: 3px;
}
.quote footer {
position: absolute;
bottom: -40px;
right: 0;
}
.quote footer img {
border-radius: 3px;
}
.quote footer a {
margin-left: 5px;
vertical-align: middle;
}
.speech-bubble {
position: relative;
padding: 10px;
background: rgba(0, 0, 0, .04);
border-radius: 5px;
}
.speech-bubble:after {
content: '';
position: absolute;
top: 100%;
right: 30px;
border: 13px solid transparent;
border-top-color: rgba(0, 0, 0, .04);
}
/**body*/.learn-bar > .learn {
position: absolute;
width: 272px;
top: 8px;
left: -300px;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, .6);
transition-property: left;
transition-duration: 500ms;
}
#media (min-width: 899px) {
/**body*/.learn-bar {
width: auto;
margin: 0 0 0 300px;
}
/**body*/.learn-bar > .learn {
left: 8px;
}
/**body*/.learn-bar #todoapp {
width: 550px;
margin: 130px auto 40px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form">
<input type="text" id="new-todo" placeholder="New task" autofocus autocomplete="off" ng-model="remain">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li>
<div class="view">
<input type="checkbox" class="toggle">
<label>Etendre le linge</label>
<button class="destroy"></button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<span id="todo-count"><strong> {{ remain }} </strong> Tasks remaining
</span>
</footer>
</section>
<script src="MyTodoList.js"></script>
<script src="app.js"></script>
</body>
</html>

The problem is with your cdn as it gives error. Use the below angularjs cdn. It will solve your problem.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js
See plunkr demo for this :
https://plnkr.co/edit/S6RYmyJE1BPIRpXtldRg?p=preview