homepagejs.js
// creates elements to put worker information in
creates elements to put worker information in
creates elements to put worker information in
function renderWorkers(doc) {
    let li = document.createElement('li');
    let a_tag = document.createElement('a');
    let distance = document.createElement('p');
    let name = document.createElement('p');
    let image = document.createElement('img');
    let star_out = document.createElement('div');
    let star_in = document.createElement('div');
    name.textContent = doc.data().name;
    rating = doc.data().rating;
    km = doc.data().distance; 
    imageUrl = doc.data().imageUrl; 
    let conv_rating = "width:" + rating.toString() * 20 + "%";
    workerlist.appendChild(li);
    li.appendChild(a_tag); 
    a_tag.appendChild(image).setAttribute('style', 'background-image: url(' + imageUrl + ");");
    a_tag.href = "#" + name.textContent;
    a_tag.appendChild(name);
    name.classList.add('name');
    a_tag.appendChild(distance);
    distance.textContent = km.toString() + " km";
    distance.classList.add('distance');
    a_tag.appendChild(star_out);
    star_out.classList.add('star_out');
    star_out.appendChild(star_in);
    star_in.classList.add('star_in');
    star_in.setAttribute('style', conv_rating);
}
function renderWorkers ( doc ) { let li = document . createElement ( 'li' ) ; let a_tag = document . createElement ( 'a' ) ; let distance = document . createElement ( 'p' ) ; let name = document . createElement ( 'p' ) ; let image = document . createElement ( 'img' ) ; let star_out = document . createElement ( 'div' ) ; let star_in = document . createElement ( 'div' ) ; name . textContent = doc . data ( ) . name ; rating = doc . data ( ) . rating ; km = doc . data ( ) . distance ; imageUrl = doc . data ( ) . imageUrl ; let conv_rating = "width:" + rating . toString ( ) * 20 + "%" ; workerlist . appendChild ( li ) ; li . appendChild ( a_tag ) ; a_tag . appendChild ( image ) . setAttribute ( 'style' , 'background-image: url(' + imageUrl + ");" ) ; a_tag . href = "#" + name . textContent ; a_tag . appendChild ( name ) ; name . classList . add ( 'name' ) ; a_tag . appendChild ( distance ) ; distance . textContent = km . toString ( ) + " km" ; distance . classList . add ( 'distance' ) ; a_tag . appendChild ( star_out ) ; star_out . classList . add ( 'star_out' ) ; star_out . appendChild ( star_in ) ; star_in . classList . add ( 'star_in' ) ; star_in . setAttribute ( 'style' , conv_rating ) ; }
creates elements to put worker information in
creates elements to put worker information in
// get name // get rating //get distance //imageurl /*rating from firebase is out of 5 stars. this line 
    converts it to a % value to be used as a width 
    attribute of star_in*/ //adds the li element to the ul element for workers //these are the contents of the li element: //clicking area //name of worker //distance from worker //outer stars (the outline) //inner star (the yellow part) /* This is how it will look in HTML:
    <li>
    <a>
    <img>
    <p class = "name"></p>
    <p class = "distance"></p>
    <p class = "name"></p>
    <div class = "star_out"><div class = "star_in">
    </a>
    </li>
    */