ayushgp / web-components-tutorial Goto Github PK
View Code? Open in Web Editor NEWHTML Web Component using Vanilla JavaScript
Home Page: https://ayushgp.github.io/html-web-components-using-vanilla-js/
HTML Web Component using Vanilla JavaScript
Home Page: https://ayushgp.github.io/html-web-components-using-vanilla-js/
Hi, i just followed your instructions but after running static-server and going on localhost:9080 it shows a message Forbidden and nothing else.
Also the terminal shows
- Static server successfully started.
- Serving files at: http://localhost:9080
- Press Ctrl+C to shutdown.
<-- [GET] /
--> 403 / (4.607ms)
<-- [GET] /favicon.ico
--> 404 /favicon.ico (0.706ms)
<-- [GET] /favicon.ico
--> 404 /favicon.ico (0.446ms)
any help?
https://rawgit.com/ayushgp/web-components-tutorial/master/Part%201/UserCard/UserCard.html
This should be changed to show it properly. e.g. ./UserCard/UserCard.js
<script src="/UserCard/UserCard.js"></script>
Also, what is your solution for packaging with lots of custom elements. e.g. 100s with separate js/css/html?
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.range {
width:500px;
height:10px;
border-radius: 4px;
background-color: #ddd;
}
.range__button_1, .range__button_2 {
position: absolute;
top: 50%;
width: 20px;
height: 20px;
cursor: pointer;
transform: translateY(-50%);
border-radius: 50%;
background-color: white;
border: 1px solid gray;
}
.range__between
{
position: absolute;
height: 5px;
width:0px;
margin-top:3px;
border: none;
background-color: blue;
}
.range_inpt1, .range_inpt2
{
margin-top:20px;
width: 50px;
}
</style>
function init2slider(idX, btwX, btn1X, btn2X, input1, input2) {
var slider = document.getElementById(idX);
var between = document.getElementById(btwX);
var button1 = document.getElementById(btn1X);
var button2 = document.getElementById(btn2X);
var inpt1 = document.getElementById(input1);
var inpt2 = document.getElementById(input2);
var min=inpt1.min;
var max=inpt1.max;
/*init*/
var sliderCoords = getCoords(slider);
button1.style.marginLeft = '0px';
button2.style.marginLeft = (slider.offsetWidth-button1.offsetWidth) + 'px';
between.style.width = (slider.offsetWidth-button1.offsetWidth) + 'px';
inpt1.value = min;
inpt2.value = max;
inpt1.onchange= function(evt)
{
var sliderCoords = getCoords(slider);
var per1 = parseInt(inpt1.value-min)*100/(max-min);
var per2 = parseInt(inpt2.value-min)*100/(max-min);
var left1 = per1*(slider.offsetWidth-button1.offsetWidth)/100;
var left2 = per2*(slider.offsetWidth-button1.offsetWidth)/100;
button1.style.marginLeft = left1 + 'px';
button2.style.marginLeft = left2 + 'px';
if (left1 > left2)
{
between.style.width = (left1-left2 +1) + 'px';
between.style.marginLeft = left2 + 'px';
}
else
{
between.style.width = (left2-left1) + 'px';
between.style.marginLeft = left1 + 'px';
}
}
inpt2.onchange= function(evt)
{
if (parseInt(inpt2.value) < min)
inpt2.value = min;
if (parseInt(inpt2.value) > max)
inpt2.value = max;
if (parseInt(inpt1.value) > parseInt(inpt2.value))
{
var temp = inpt1.value;
inpt1.value = inpt2.value;
inpt2.value = temp;
}
var sliderCoords = getCoords(slider);
var per1 = parseInt(inpt1.value-min)*100/(max-min);
var per2 = parseInt(inpt2.value-min)*100/(max-min);
var left1 = per1*(slider.offsetWidth-button1.offsetWidth)/100;
var left2 = per2*(slider.offsetWidth-button1.offsetWidth)/100;
button1.style.marginLeft = left1 + 'px';
button2.style.marginLeft = left2 + 'px';
if (left1 > left2)
{
between.style.width = (left1-left2) + 'px';
between.style.marginLeft = left2 + 'px';
}
else
{
between.style.width = (left2-left1) + 'px';
between.style.marginLeft = left1 + 'px';
}
}
/*mouse*/
button1.onmousedown = function(evt) {
var sliderCoords = getCoords(slider);
var betweenCoords = getCoords(between);
var buttonCoords1 = getCoords(button1);
var buttonCoords2 = getCoords(button2);
var shiftX2 = evt.pageX - buttonCoords2.left;
var shiftX1 = evt.pageX - buttonCoords1.left;
document.onmousemove = function(evt) {
var left1 = evt.pageX - shiftX1 - sliderCoords.left;
var right1 = slider.offsetWidth - button1.offsetWidth;
if (left1 < 0) left1 = 0;
if (left1 > right1) left1 = right1;
button1.style.marginLeft = left1 + 'px';
shiftX2 = evt.pageX - buttonCoords2.left;
var left2 = evt.pageX - shiftX2 - sliderCoords.left;
var right2 = slider.offsetWidth - button2.offsetWidth;
if (left2 < 0) left2 = 0;
if (left2 > right2) left2 = right2;
var per_min = 0;
var per_max = 0;
if (left1 > left2)
{
between.style.width = (left1-left2) + 'px';
between.style.marginLeft = left2 + 'px';
per_min = left2*100/(slider.offsetWidth-button1.offsetWidth);
per_max = left1*100/(slider.offsetWidth-button1.offsetWidth);
}
else
{
between.style.width = (left2-left1) + 'px';
between.style.marginLeft = left1 + 'px';
per_min = left1*100/(slider.offsetWidth-button1.offsetWidth);
per_max = left2*100/(slider.offsetWidth-button1.offsetWidth);
}
inpt1.value= (parseInt(min)+Math.round((max-min)*per_min/100));
inpt2.value= (parseInt(min)+Math.round((max-min)*per_max/100));
};
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
};
return false;
};
button2.onmousedown = function(evt) {
var sliderCoords = getCoords(slider);
var betweenCoords = getCoords(between);
var buttonCoords1 = getCoords(button1);
var buttonCoords2 = getCoords(button2);
var shiftX2 = evt.pageX - buttonCoords2.left;
var shiftX1 = evt.pageX - buttonCoords1.left;
document.onmousemove = function(evt) {
var left2 = evt.pageX - shiftX2 - sliderCoords.left;
var right2 = slider.offsetWidth - button2.offsetWidth;
if (left2 < 0) left2 = 0;
if (left2 > right2) left2 = right2;
button2.style.marginLeft = left2 + 'px';
shiftX1 = evt.pageX - buttonCoords1.left;
var left1 = evt.pageX - shiftX1 - sliderCoords.left;
var right1 = slider.offsetWidth - button1.offsetWidth;
if (left1 < 0) left1 = 0;
if (left1 > right1) left1 = right1;
var per_min = 0;
var per_max = 0;
if (left1 > left2)
{
between.style.width = (left1-left2) + 'px';
between.style.marginLeft = left2 + 'px';
per_min = left2*100/(slider.offsetWidth-button1.offsetWidth);
per_max = left1*100/(slider.offsetWidth-button1.offsetWidth);
}
else
{
between.style.width = (left2-left1) + 'px';
between.style.marginLeft = left1 + 'px';
per_min = left1*100/(slider.offsetWidth-button1.offsetWidth);
per_max = left2*100/(slider.offsetWidth-button1.offsetWidth);
}
inpt1.value= (parseInt(min)+Math.round((max-min)*per_min/100));
inpt2.value= (parseInt(min)+Math.round((max-min)*per_max/100));
};
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
};
return false;
};
button1.ondragstart = function() {
return false;
};
button2.ondragstart = function() {
return false;
};
function getCoords(elem) {
var box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
}
</script>
Really nice article. A bit sad you didn't evolve it (you could add unit and integration testing for instatnce). Kindly, could you explain why you update your first article? If you don't mind, could you try answer my question https://stackoverflow.com/questions/57379900/vanilla-webcomponents-aproaches-is-there-any-real-diference-between-importing ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.