ayushgp / web-components-tutorial Goto Github PK

View Code? Open in Web Editor NEW

40.0 3.0 19.0 9 KB

HTML Web Component using Vanilla JavaScript

Home Page: https://ayushgp.github.io/html-web-components-using-vanilla-js/

CSS 7.59% HTML 23.35% JavaScript 69.07%

html dom-standards shadow-dom tutorials web-components

web-components-tutorial's People

Contributors

Stargazers

Watchers

web-components-tutorial's Issues

'Forbidden' when running static-server

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?

URL issue without a server, and packaging discussion

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?

.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>

Vanilla WebComponents aproaches: is there any real diference between “importing js from html” and “fetching html from js” file

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 ?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.