Develop Reference

How to abort downloading an audio stream

I hope someone can help with this.
I want to stop/abort audio instead of pause, how would this be done?
I was trying to figure out how to do that.
That is all I am trying to figure out how to do.
How to abort an audio stream instead of pausing it.
How would I be able to do that?
https://jsfiddle.net/s0ae7ph9/
(function iife() {
"use strict";
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function getPlay(button) {
return button;
}
function showPlayButton(button) {
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("active");
}
function pauseAllButtons() {
var buttons = document.querySelectorAll(".playButton");
buttons.forEach(function hidePause(buttons) {
if (isPlaying(buttons)) {
showPlayButton(buttons);
}
});
}
function showPauseButton(button) {
pauseAllButtons();
button.classList.add("active");
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function playButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
playing,
src: button.getAttribute("data-audio")
});
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
playButton(button);
}
const playButtons = document.querySelectorAll(".button");
playButtons.forEach(function addHandler(el) {
el.addEventListener("click", playButtonClickHandler);
});
}());
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.wrap {
position: relative;
width: 190px;
height: 235px;
background: red;
}
.playButton {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 150px;
height: 195px;
background-color: black;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
border-radius: 5px;
padding: 20px;
perspective: 700px;
}
.playButton.active .button {
transform: translateZ(20px) rotateX(25deg);
box-shadow: 0 -10px 20px #ff1818;
}
.playButton.active .button .light {
animation: flicker 0.2s infinite 0.3s;
}
.playButton.active .button .shine {
opacity: 1;
}
.playButton.active .button .shadow {
opacity: 0;
}
.playButton .button {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
transform-origin: center center -20px;
transform: translateZ(20px) rotateX(-25deg);
transform-style: preserve-3d;
background-color: #9b0621;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
background-repeat: no-repeat;
}
.playButton .button::before {
content: "";
background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
background-repeat: no-repeat;
width: 100%;
height: 50px;
transform-origin: top;
transform: rotateX(-90deg);
position: absolute;
top: 0;
}
.playButton .button::after {
content: "";
background-image: linear-gradient(#650000, #320000);
width: 100%;
height: 50px;
transform-origin: top;
transform: translateY(50px) rotateX(-90deg);
position: absolute;
bottom: 0;
box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}
.playButton .light {
opacity: 0;
animation: light-off 1s;
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}
.playButton .dots {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
background-size: 10px 10px;
}
.playButton .characters {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
background-repeat: no-repeat;
}
.playButton .shine {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
opacity: 0.3;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
background-repeat: no-repeat;
}
.playButton .shadow {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
opacity: 1;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
background-repeat: no-repeat;
}
#keyframes flicker {
0% {
opacity: 1;
}
80% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
#keyframes light-off {
0% {
opacity: 1;
}
80% {
opacity: 0;
}
}
<audio></audio>
<div class="outer">
<div class="tcell">
<div class="wrap">
<div class="playButton" data-audio="https://stream.sunfmua.com:8443/rock">
<div class="button">
<div class="light"></div>
<div class="dots"></div>
<div class="characters"></div>
<div class="shine"></div>
<div class="shadow"></div>
</div>
</div>
</div>
</div>
</div>

It seems something like HTML5 audio start over should work. I know this works for audio files locally, but not sure about the one you have in your code. I would assume it should work the same though.

If you want to eventually stop loading the media, you can't use the native HTMLMediaElement.
You should fetch and stream the media yourself, and abort it when you please using an AbortController. Aborting a fetch.
let controller;
// Play button event
playButton.addEventListener('click', playAudio);
// Stop button event
stopButton.addEventListener('click', () => {
controller?.abort();
});
async function playAudio() {
controler = new AbortController();
const response = await fetch(mediaURL, { signal: controller.signal })
const reader = await response.body.getReader();
async function read() {
const { value, done } = await reader.read();
/* value = audioChunk;
Push the audio chunk to audio or video context
*/
}
read();
}
Check this example on streaming the response or this function on streaming an audio.

I'm not sure, but try
audio.currentTime = 0;
audio.play();

Multi-file upload to Amazon S3

I have a webpage and so far it works for single file uploads, but I need to be able to upload multiple files at the same time. Amazon doesn't like this and gives me "POST requires exactly one file upload per request.", I would assume I'd just need to make a seperate POST request for every file, but I don't know how to. I'm just using simple HTML and ajax, and would like to stick to that.
#import " '_normalize.css' ";
#import " '_defaults.css' ";
body,
.ad,
.sm {
font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, Verdana, sans-serif
}
a {
color: currentColor;
text-decoration: none
}
.clearfix::after {
content: '';
display: table;
clear: both
}
.ad {
width: 9.375rem;
color: #444;
color: rgba( 0, 0, 0, .75);
background-color: #fff;
background-color: rgba( 255, 255, 255, .5);
position: fixed;
z-index: 1000;
top: .625rem;
left: .625rem;
padding: .5rem .625rem
}
.ad--dark {
color: #ddd;
color: rgba( 255, 255, 255, .75);
background-color: #111;
background-color: rgba( 0, 0, 0, .5)
}
.ad__close {
width: .625rem;
height: .625rem;
background-color: #777;
background-color: rgba( 0, 0, 0, .5);
border-radius: 50%;
position: absolute;
z-index: 1;
top: -.25rem;
right: -.25rem;
-webkit-transition: -webkit-transform .25s ease-in-out;
transition: transform .25s ease-in-out
}
.ad--dark .ad__close {
background-color: #ddd;
background-color: rgba( 255, 255, 255, .75)
}
.ad__close:hover,
.ad__close:focus {
-webkit-transform: scale( 1.25);
-ms-transform: scale( 1.25);
transform: scale( 1.25)
}
#carbonads {
font-size: .875rem;
letter-spacing: -.071em;
line-height: 1.125rem
}
#carbonads a {
color: currentColor;
display: block;
margin-top: .313rem
}
#carbonads .carbon-poweredby {
font-size: .75rem;
text-transform: uppercase;
color: #aaa;
color: rgba( 0, 0, 0, .25)
}
.ad--dark #carbonads .carbon-poweredby {
color: #999;
color: rgba( 255, 255, 255, .25)
}
.sm {
width: 100%;
height: 2.5rem;
color: #444;
color: rgba( 0, 0, 0, .75);
background-color: #fff;
background-color: rgba( 255, 255, 255, .5);
overflow: hidden;
position: fixed;
z-index: 1001;
bottom: 0;
left: 0;
padding: .625rem 1.25rem 0
}
.sm--dark {
color: #ddd;
color: rgba( 255, 255, 255, .75);
background-color: #111;
background-color: rgba( 0, 0, 0, .5)
}
.sm ul {}
.sm li {
float: right;
margin-left: 1rem
}
.sm li:first-child {
float: left;
margin-left: 0
}
.sm .googleplus-one {
max-width: 60px
}
.sm .twitter-follow>*:not( :first-child),
.sm .twitter-share>*:not( :first-child) {
display: none
}
#media screen {
#media(min-width: 0px) {
.sm li:last-child {
opacity:0;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out
}
.sm:hover li:last-child {
opacity: 1
}
}
}
.sm__back {
font-size: .875rem;
font-weight: 700;
color: currentColor;
text-transform: uppercase;
position: relative
}
.sm__back::before {
width: 0;
height: 0;
border: .313rem solid transparent;
border-left: none;
border-right-color: currentColor;
content: '';
display: inline-block;
position: relative;
left: 0;
margin-right: .313rem;
-webkit-transition: left .25s ease-in-out;
transition: left .25s ease-in-out
}
.sm__back:hover::before,
.sm__back:focus::before {
left: -.313rem
}
#media screen and (max-width:40em),
screen and (max-height:40em) {
.ad,
.sm {
display: none
}
}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,400" />
<style>
html {}
body {
font-family: Roboto, sans-serif;
color: #0f3c4b;
background-color: #e5edf1;
padding: 5rem 1.25rem;
/* 80 20 */
}
.container {
width: 100%;
max-width: 680px;
/* 800 */
text-align: center;
margin: 0 auto;
}
.container h1 {
font-size: 42px;
font-weight: 300;
color: #0f3c4b;
margin-bottom: 40px;
}
.container h1 a:hover,
.container h1 a:focus {
color: #39bfd3;
}
.container nav {
margin-bottom: 40px;
}
.container nav a {
border-bottom: 2px solid #c8dadf;
display: inline-block;
padding: 4px 8px;
margin: 0 5px;
}
.container nav a.is-selected {
font-weight: 700;
color: #39bfd3;
border-bottom-color: currentColor;
}
.container nav a:not( .is-selected):hover,
.container nav a:not( .is-selected):focus {
border-bottom-color: #0f3c4b;
}
.container footer {
color: #92b0b3;
margin-top: 40px;
}
.container footer p+p {
margin-top: 1em;
}
.container footer a:hover,
.container footer a:focus {
color: #39bfd3;
}
.box {
font-size: 1.25rem;
/* 20 */
background-color: #c8dadf;
position: relative;
padding: 100px 20px;
}
.box.has-advanced-upload {
outline: 2px dashed #92b0b3;
outline-offset: -10px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
.box.is-dragover {
outline-offset: -20px;
outline-color: #c8dadf;
background-color: #fff;
}
.box__dragndrop,
.box__icon {
display: none;
}
.box.has-advanced-upload .box__dragndrop {
display: inline;
}
.box.has-advanced-upload .box__icon {
width: 100%;
height: 80px;
fill: #92b0b3;
display: block;
margin-bottom: 40px;
}
.box.is-uploading .box__input,
.box.is-success .box__input,
.box.is-error .box__input {
visibility: hidden;
}
.box__uploading,
.box__success,
.box__error {
display: none;
}
.box.is-uploading .box__uploading,
.box.is-success .box__success,
.box.is-error .box__error {
display: block;
position: absolute;
top: 50%;
right: 0;
left: 0;
-webkit-transform: translateY( -50%);
transform: translateY( -50%);
}
.box__uploading {
font-style: italic;
}
.box__success {
-webkit-animation: appear-from-inside .25s ease-in-out;
animation: appear-from-inside .25s ease-in-out;
}
#-webkit-keyframes appear-from-inside {
from {
-webkit-transform: translateY( -50%) scale( 0);
}
75% {
-webkit-transform: translateY( -50%) scale( 1.1);
}
to {
-webkit-transform: translateY( -50%) scale( 1);
}
}
#keyframes appear-from-inside {
from {
transform: translateY( -50%) scale( 0);
}
75% {
transform: translateY( -50%) scale( 1.1);
}
to {
transform: translateY( -50%) scale( 1);
}
}
.box__restart {
font-weight: 700;
}
.box__restart:focus,
.box__restart:hover {
color: #39bfd3;
}
.js .box__file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.js .box__file+label {
max-width: 80%;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
}
.js .box__file+label:hover strong,
.box__file:focus+label strong,
.box__file.has-focus+label strong {
color: #39bfd3;
}
.js .box__file:focus+label,
.js .box__file.has-focus+label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.js .box__file+label * {
/* pointer-events: none; */
/* in case of FastClick lib use */
}
.no-js .box__file+label {
display: none;
}
.no-js .box__button {
display: block;
}
.box__button {
font-weight: 700;
color: #e5edf1;
background-color: #39bfd3;
display: block;
padding: 8px 16px;
margin: 40px auto 0;
}
.box__button:hover,
.box__button:focus {
background-color: #0f3c4b;
}
</style>
</head>
<body>
<div class="container" role="main">
<form action="https://s3-[removed].amazonaws.com/[removed]" method="post" enctype="multipart/form-data" novalidate class="box">
<input type="hidden" name="key" value="uploads/${filename}">
<input Access Key ID type="hidden" type="input" name="AWSAccessKeyId" value="[removed]">
<input Signature type="hidden" type="password" name="signature" value="[removed]">
<input type="hidden" name="acl" value="private">
<input type="hidden" name="success_action_redirect" value="[removed]">
<input type="hidden" name="x-amz-server-side-encryption" value="AES256" />
<input type="hidden" name="policy" value="[removed]" <!-- Include any additional input fields here -->
<input type="input" class="text-input" name="x-amz-meta-tag" value="" placeholder="Your Name Here" />
<div class="box__input">
<input type="file" name="file" id="file" class="box__file" data-multiple-caption="{count} files selected" multiple />
<label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
<button type="submit" class="box__button">Upload</button>
</div>
<div class="box__uploading">Uploading…</div>
</form>
</div>
<script type="8f8d05b8d77097cd667d97f3-text/javascript">
'use strict';
;
(function(document, window, index) {
// feature detection for drag&drop upload
var isAdvancedUpload = function() {
var div = document.createElement('div');
return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
}();
// applying the effect for every form
var forms = document.querySelectorAll('.box');
Array.prototype.forEach.call(forms, function(form) {
var input = form.querySelector('input[type="file"]'),
label = form.querySelector('label'),
errorMsg = form.querySelector('.box__error span'),
restart = form.querySelectorAll('.box__restart'),
droppedFiles = false,
showFiles = function(files) {
label.textContent = files.length > 1 ? (input.getAttribute('data-multiple-caption') || '').replace('{count}', files.length) : files[0].name;
},
triggerFormSubmit = function() {
var event = document.createEvent('HTMLEvents');
event.initEvent('submit', true, false);
form.dispatchEvent(event);
};
// letting the server side to know we are going to make an Ajax request
var ajaxFlag = document.createElement('input');
ajaxFlag.setAttribute('type', 'hidden');
ajaxFlag.setAttribute('name', 'ajax');
ajaxFlag.setAttribute('value', 1);
form.appendChild(ajaxFlag);
// automatically submit the form on file select
input.addEventListener('change', function(e) {
showFiles(e.target.files);
});
// drag&drop files if the feature is available
if (isAdvancedUpload) {
form.classList.add('has-advanced-upload'); // letting the CSS part to know drag&drop is supported by the browser
['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function(event) {
form.addEventListener(event, function(e) {
// preventing the unwanted behaviours
e.preventDefault();
e.stopPropagation();
});
});
['dragover', 'dragenter'].forEach(function(event) {
form.addEventListener(event, function() {
form.classList.add('is-dragover');
});
});
['dragleave', 'dragend', 'drop'].forEach(function(event) {
form.addEventListener(event, function() {
form.classList.remove('is-dragover');
});
});
form.addEventListener('drop', function(e) {
droppedFiles = e.dataTransfer.files; // the files that were dropped
showFiles(droppedFiles);
});
}
// if the form was submitted
form.addEventListener('submit', function(e) {
// preventing the duplicate submissions if the current one is in progress
if (form.classList.contains('is-uploading')) return false;
form.classList.add('is-uploading');
form.classList.remove('is-error');
if (isAdvancedUpload) // ajax file upload for modern browsers
{
e.preventDefault();
// gathering the form data
var ajaxData = new FormData(form);
if (droppedFiles) {
Array.prototype.forEach.call(droppedFiles, function(file) {
ajaxData.append(input.getAttribute('name'), file);
});
}
// ajax request
var ajax = new XMLHttpRequest();
ajax.open(form.getAttribute('method'), form.getAttribute('action'), true);
ajax.onload = function() {
form.classList.remove('is-uploading');
if (ajax.status >= 200 && ajax.status < 400) {
var data = JSON.parse(ajax.responseText);
form.classList.add(data.success == true ? 'is-success' : 'is-error');
if (!data.success) errorMsg.textContent = data.error;
} else alert(ajax.response);
};
ajax.onerror = function() {
form.classList.remove('is-uploading');
};
ajax.send(ajaxData);
} else // fallback Ajax solution upload for older browsers
{
var iframeName = 'uploadiframe' + new Date().getTime(),
iframe = document.createElement('iframe');
$iframe = $('<iframe name="' + iframeName + '" style="display: none;"></iframe>');
iframe.setAttribute('name', iframeName);
iframe.style.display = 'none';
document.body.appendChild(iframe);
form.setAttribute('target', iframeName);
iframe.addEventListener('load', function() {
var data = JSON.parse(iframe.contentDocument.body.innerHTML);
form.classList.remove('is-uploading')
form.classList.add(data.success == true ? 'is-success' : 'is-error')
form.removeAttribute('target');
if (!data.success) errorMsg.textContent = data.error;
iframe.parentNode.removeChild(iframe);
});
}
});
// restart the form if has a state of error/success
Array.prototype.forEach.call(restart, function(entry) {
entry.addEventListener('click', function(e) {
e.preventDefault();
form.classList.remove('is-error', 'is-success');
input.click();
});
});
// Firefox focus bug fix for file input
input.addEventListener('focus', function() {
input.classList.add('has-focus');
});
input.addEventListener('blur', function() {
input.classList.remove('has-focus');
});
});
}(document, window, 0));
</script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="8f8d05b8d77097cd667d97f3-|49" defer=""></script>
</body>
<div class="background"></div>
</html>

When I add a new CSS style with Javascript, the JS that's there stops working

I have a JavaScript to-do list that works until I add the below code to it. style to it. (The entire code is saved at https://codepen.io/hmcka/pen/vYBgZVN). Yes, I want to use plain JS.
function toggleShimmer(e) {
box.classList.add("shimmer");
}
I don't understand why what's there originally stops working, but I wonder if it has something to do with the fact that my CSS that I am adding is attached to a wrapper and the JavaScript is attached to the items within the wrapper.
I have tried a few things to fix this. First I tried to put a timer on the add.classList so that the style could be removed afterwards. When I did this, however, the style would show up again when I clicked on the check boxes. The other thing that I tried to do was adjust the z-index of the list items.
Any suggestions would be appreciated by this beginner.
const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = JSON.parse(localStorage.getItem('items')) || [];
const box = document.querySelector('#rectWrapper');
function addItem(e) {
e.preventDefault();
const text = (this.querySelector('[name=item]')).value;
const item = {
text,
done: false
};
items.push(item);
populateList(items, itemsList);
localStorage.setItem('items', JSON.stringify(items));
this.reset();
}
function populateList(plates = [], platesList) {
platesList.innerHTML = plates.map((plate, i) => {
return `
<li>
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
<label for="item${i}">${plate.text}</label>
</li>
`;
}).join('');
}
function toggleDone(e) {
if (!e.target.matches('input')) return; // skip this unless it's an input
const el = e.target;
const index = el.dataset.index;
items[index].done = !items[index].done;
localStorage.setItem('items', JSON.stringify(items));
populateList(items, itemsList);
}
function toggleShimmer(e) {
box.classList.add("shimmer");
}
window.addEventListener("load", toggleShimmer);
box.addEventListener('mouseenter', toggleShimmer);
addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);
populateList(items, itemsList);
html {
/* background-color: #B01E84B01E84; */
background: rgba(153, 25, 117, 1);
background: -moz-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(153, 25, 117, 1)), color-stop(100%, rgba(212, 19, 157, 1)));
background: -webkit-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: linear-gradient(135deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
box-sizing: border-box;
/* background: url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat; */
/* background-size: cover; */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* svg {
fill:white;
background: rgba(0,0,0,0.1);
padding: 20px;
border-radius: 50%;
width: 200px;
margin-bottom: 50px;
} */
.wrapper {
padding: 20px;
max-width: 350px;
background-color: #7A0857;
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
}
.shimmer {
position: relative;
overflow: hidden;
/* width: 50px; */
/* height: 50px; */
display: inline-block;
/* margin: 25px 0 25px 25px; */
/* border-radius: 5px; */
color: #fff;
}
/*The "shine" element */
.shimmer:after {
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
opacity: 0;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
/* display: none; */
display: block;
/* display: inline; */
}
/* Hover state - trigger effect */
.shimmer:hover:after {
opacity: 1;
top: -40%;
left: -40%;
transition-property: left, top, opacity;
transition-duration: 1.4s, 1.4s, 0.3s;
transition-timing-function: ease;
}
/* Active state */
.shimmer:active:after {
opacity: 0;
}
h2 {
text-align: center;
margin: 0;
font-weight: 200;
}
.plates {
margin: 0;
padding: 0;
text-align: left;
list-style: none;
}
.plates li {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 0;
font-weight: 100;
display: flex;
}
.plates label {
flex: 1;
cursor: pointer;
}
.plates input {
display: none;
}
.plates input+label:before {
content: '⬜️';
margin-right: 10px;
}
.plates input:checked+label:before {
content: '🌮';
}
.add-items {
margin-top: 20px;
}
.add-items input {
padding: 10px;
outline: 0;
border: 1px solid rgba(0, 0, 0, 0.1);
}
<div id="rectWrapper" class="wrapper">
<h2>TO-DO LIST</h2>
<p></p>
<ul class="plates">
<li>Loading Tapas...</li>
</ul>
<form class="add-items">
<input type="text" name="item" placeholder="Item Name" required>
<input type="submit" value="+ Add Item">
</form>
</div>

There is a pseudo element (shimmer:after) over the form, preventing you from clicking on the input field or add button.
The easiest solution is to use pointer-events to make the shimmer "transparent" to mouse events:
.shimmer:after {
pointer-events: none;
}

Linking video to an HTML anchor tag

I am trying to make a website that has an anchor link to "watch the video", what I want to do is to link a video to the anchor tag and when someone clicks on the link, the video appears on the same webpage but upon webpage and behind the video, page should be lightened. Help me to figure this out.
<div class="button">
Watch Video
Explore More
</div>

var $iframe = $('iframe'),
$videoLink = $('.video-link'),
playerTemplate = '<div class="player"><div class="player__video"><div class="video-filler"></div><button class="video-close">×</button><iframe class="video-iframe" src="{{iframevideo}}" frameborder="0" allowfullscreen></iframe></div><div/>';
$videoLink.on('click', function(e) {
var localTemplate = '',
videoWidth = parseInt($(this).data('width')),
videoHeight = parseInt($(this).data('height')),
videoAspect = ( videoHeight / videoWidth ) * 100,
// elements
$player = null,
$video = null,
$close = null,
$iframe = null;
e.preventDefault();
localTemplate = playerTemplate.replace('{{iframevideo}}', $(this).prop('href'));
$player = $(localTemplate);
$player
.find('.video-filler')
.css('padding-top', videoAspect + '%');
$close = $player
.find('.video-close')
.on('click', function() {
$(this).off().closest('.player').hide().remove();
});
$player.appendTo('body').addClass('js--show-video');
});
.video-link {
display: inline-block;
padding: 5px 10px;
border-radius: 4px;
text-decoration: none;
color: white;
background-color: #f03;
box-shadow: 0 5px 10px -3px rgba(0,0,0,.5);
}
/* --- */
.player {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,1) 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%,rgba(0,0,0,1) 100%);
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.player__video {
position: relative;
top: 50%;
left: 50%;
width: auto;
max-width: 75%;
background-color: #fff;
box-shadow: 0 0 50px rgba(0,0,0,.95);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.js--show-video { opacity: 1; }
.video-filler {
display: block;
width: 100%;
}
.video-close {
position: absolute;
z-index: 0;
top: 0;
right: -30px;
padding: 5px 10px;
border: none;
outline: none;
border-radius: 0 50% 50% 0;
cursor: pointer;
font-size: 24px;
color: #000;
background-color: #fff;
box-shadow: 0 0 20px rgba(0,0,0,.75);
}
.video-iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 10px solid #fff;
}
<a class="video-link" href="https://www.youtube.com/embed/ONaPq2L-MRg?html5=1" data-width="1920" data-height="1080">Open video</a>

You do need a video tag and also use some JavaScript.
Not sure if that what you meant, but here is a simple implemnation of what I think you meant.
<a href="javascript:openVideo()"
https://jsfiddle.net/awkbawgs/2/

How to redirect autocomplete?

I'm using awesomplete autocomplete plugin and I want to open autocomplete list when I focus myinput but when I clicked any choice than my choice must redirect any link what I want.how can I do that?
.box{
width:960px;
}
.awesomplete > ul {
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0,0%,100%,.9);
background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
border: 1px solid rgba(0,0,0,.3);
box-shadow: .05em .2em .6em rgba(0,0,0,.2);
text-shadow: none;
}
#supports (transform: scale(0)) {
.awesomplete > ul {
transition: .3s cubic-bezier(.4,.2,.5,1.4);
transform-origin: 1.43em -.43em;
}
.awesomplete > ul[hidden],
.awesomplete > ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
.awesomplete > ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0; height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.awesomplete > ul > li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
.awesomplete > ul > li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
.awesomplete > ul > li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
.awesomplete mark {
background: hsl(65, 100%, 50%);
}
.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}
<div class="box">
<input class="awesomplete" list="mylist"/>
<datalist id="mylist">
<option>Ada</option>
<option>Java</option>
<option>JavaScript</option>
<option>Brainfuck</option>
<option>LOLCODE</option>
<option>Node.js</option>
<option>Ruby on Rails</option>
</datalist>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>
For example when I type Javascript or when I selected Javascript than page must redirect http://www.blabla.com

Add a callback to the oninput event into to your input
<input class="awesomplete" oninput="callBack()" list="mylist"/>
And then add an script function:
function callBack(){
window.location.href = "http://stackoverflow.com";
}

$("#datalist").change(function(){
console.log("working");
});
set id like this for the input.
<input class="awesomplete" list="mylist" id="datalist"/>