These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Apr 2018
M18Ali
@M18Ali
Apr 17 2018 00:01
Hello i have a problem in Tribute Page with img tag i didn't pass it's test
can anyone tell me what's wrong
Tribute Page
X 1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Ken Haduch
@khaduch
Apr 17 2018 00:25
@M18Ali - the error message suggest using max-width for the img
@kyle-kauzlarich - it has been pretty quiet around here lately. How's it going?
Tom
@moT01
Apr 17 2018 00:29
@M18Ali looks like its should be passing that test
looks like its properly responding anyway
kyle-kauzlarich
@kyle-kauzlarich
Apr 17 2018 01:11
@khaduch its going alright yourself?
xing
@MingXingTeam
Apr 17 2018 02:22
@khaduch ok, I check it on eslint-plugin-compat's issues. Currently, it had not a good solution.
Gaurav
@gauravmagan
Apr 17 2018 03:18
    "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
what are the last three parameters
x, y,z
Claudio Restifo
@Marmiz
Apr 17 2018 03:54
@gauravmagan that's a popular way to write path or query variables in url for most libraries
in this case paths
coderNewby
@coderNewby
Apr 17 2018 04:56
@darrenfj check PM thanks
CamperBot
@camperbot
Apr 17 2018 04:56
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2465 | @darrenfj |http://www.freecodecamp.org/darrenfj
Helio Goncalves
@srlhyo
Apr 17 2018 08:47
anyone who uses vim in the building?
Dhaval Vira
@dhavalveera
Apr 17 2018 08:48
vim ?
Helio Goncalves
@srlhyo
Apr 17 2018 08:49
yes, Vim - a text editor
Dhaval Vira
@dhavalveera
Apr 17 2018 08:50
no, I am using Sublime Text
amare16
@amare16
Apr 17 2018 09:34
If someone has a skill on regexp, please help me to respond this question; "Write a regexp that allow capturing all the line finishing by a . or a - "
Stephen James
@sjames1958gm
Apr 17 2018 09:36
@amare16 You need to anchor the regex to the end of the string using $
amare16
@amare16
Apr 17 2018 09:38
@sjames1958gm ... i don't have skill on it , can you respond me this question please?
Stephen James
@sjames1958gm
Apr 17 2018 09:38
@amare16 Are you wanting me to give you the answer?
amare16
@amare16
Apr 17 2018 09:39
@sjames1958gm if you can?
Stephen James
@sjames1958gm
Apr 17 2018 09:39
/[.-]$/
neovks
@neovks
Apr 17 2018 09:46
Hey all, I just started the javascript part (on the mad libs thing right now) but I was wondering is there any way to test or get a "visual preview" of what we're doing without running the tests ?
Stephen James
@sjames1958gm
Apr 17 2018 09:47
@neovks There is a site - pythontutuor that can run your javascript step by step and shows the results.
amare16
@amare16
Apr 17 2018 09:48
@sjames1958gm Thanks... can you give some idea on it? or give me an exact link that explain it specifically...
CamperBot
@camperbot
Apr 17 2018 09:48
amare16 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9206 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 17 2018 09:48
@amare16 [.-] says match either ,. or - and $ says match end of string
so the whole thing says match . or - followed by end of string
neovks
@neovks
Apr 17 2018 09:48
sounds great I'll check that right now thanks @sjames1958gm
CamperBot
@camperbot
Apr 17 2018 09:48
neovks sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9207 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 17 2018 09:48
@neovks :+1:
@amare16 There are many sites for learning regex - https://regexr.com/ for example lets you run the regex live and see the results
neovks
@neovks
Apr 17 2018 09:52
wow pythontutor is amazing this will help A LOT ! thanks again @sjames1958gm
CamperBot
@camperbot
Apr 17 2018 09:52
neovks sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
amare16
@amare16
Apr 17 2018 09:52
@sjames1958gm great...
Stephen James
@sjames1958gm
Apr 17 2018 09:52
@neovks :)
shameem fairooz
@sfshameem5
Apr 17 2018 10:07
I just completed the Sum All Primes challenge in Intermediate Algorithm Scripting.
My code doesn't follow the DRY principle. Can anyone explain how to make it efficient ?
The Code
function sumPrimes(num) {
    // a boolean to check whether less than 10.
    var counter = 0;
    // a holder to store numbers to check prime numbers.
    var numbers = [];
    // an array to check prime numbers.
    var truth = [];
    // a holder to store prime numbers.
    var prime = [];
    // a dividend for for loops.
    var dividend = 0;

    // fill numbers[] with numbers.
    for (var i = 0; i <= num; i++) {
        numbers.push(i);
    }

    // if num is less than 50 then return a set of numbers.
    if (num > 0 && num <= 10) {
        numbers = [];
        numbers.push(2, 3, 5, 7);
    }

    if (num > 10 && num <= 20 ) {
        numbers = [];
        numbers.push(2, 3, 5, 7, 11, 13, 17, 19);
    }

    if (num > 20 && num <= 30) {
        numbers = [];
        numbers.push(2, 3, 5, 7, 11, 13, 17, 19, 23, 29);
    }

    if (num > 30 && num <= 40) {
        numbers = [];
        numbers.push(2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37);
    }

    if (num > 40 && num <= 50) {
        numbers = [];
        numbers.push(2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47);
    }




    // if num is greater than 50, then check for prime numbers.
    if (num > 50) {




        // check increments of 2.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 2 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 3.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 3 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 4.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 4 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 5.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 5 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 6.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 6 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 7.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 7 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 8.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 8 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 9.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 9 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 10.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 10 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 11.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 11 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 12.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 12 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 13.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 13 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 14.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 14 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 15.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 15 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 16.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 16 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 17.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 17 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 18.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 18 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 19.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 19 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 20.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 20 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 21.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 21 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 22.
        for (var i = 0; i <= numbers.length; i++) {
            if (numbers[i] % 22 === 0) {
                numbers.splice(i, 1);
            }
        }

        // check increments of 23.
        for (var i =
The code limit has exceeded
on gitter.
Markus Kiili
@Masd925
Apr 17 2018 10:13
@sfshameem5 I think that you have just hardcoded the function to work with small enough input numbers. What you should do is first to figure out an algorithm for testing if a number is a prime. One brute force way is to loop all the smaller numbers from 2 up, and check if the candidate prime is evenly divisible by any of the looped numbers. If it is not, it is a prime. That way you could test all the numbers for primality, and sum them, up to given upper limit.
So a good idea is first to make a function that tests given number for primality: isPrime(val){...}.
Then use that function to solve the challenge.
shameem fairooz
@sfshameem5
Apr 17 2018 10:21
@Masd925 I really did something like that.
I made the function check for divisibles of 2, 3, 5, 7, 9. Everything works except for the last test case.
Markus Kiili
@Masd925
Apr 17 2018 10:22
@sfshameem5 You should loop all the smaller numbers, not hardcode them in the code. That would avoid repeating the same code.
That would also make the function work however big the input number is. Your code gets longer and longer as you make it work with bigger input numbers.
shameem fairooz
@sfshameem5
Apr 17 2018 10:23
@Masd925 I get it. I'll try using loops and will let you know.
Markus Kiili
@Masd925
Apr 17 2018 10:24
@sfshameem5 A function that tests an input number for primality, only needs one loop and one test. Don't overcomplicate it.
shameem fairooz
@sfshameem5
Apr 17 2018 10:25
@Masd925 How is that possible.
?
@Masd925 I think the best way would be for me to come up with a simpler solution and you guide me through it.
Markus Kiili
@Masd925
Apr 17 2018 10:27
@sfshameem5 I think that you should first write a function that tests a number for primality: function isPrime (val) {...}. I can guide you through the process.
shameem fairooz
@sfshameem5
Apr 17 2018 10:28
@Masd925 I'll write the function now.
Markus Kiili
@Masd925
Apr 17 2018 10:30
A number val is a prime, if it is not evenly divisible by any of the numbers 2,...,val-1, so make a loop that goes through those numbers (inside the function you created).
@sfshameem5
Nicolas Ramirez
@kamatheuska
Apr 17 2018 10:31
Hi everyone! I would like to know if there is any problem if I submit the project assignments on FCC in a heroku hosted site, like this https://nikameush-work.herokuapp.com/#/ and not in CodePen
Stephen James
@sjames1958gm
Apr 17 2018 10:33
@kamatheuska Should be fine.
Nicolas Ramirez
@kamatheuska
Apr 17 2018 10:33
I use vuejs and is all minified with webpack, so I though that could be an issue...
@sjames1958gm
Stephen James
@sjames1958gm
Apr 17 2018 10:36
@kamatheuska Is your code served from a github repo? You may need to have the source public.
Nicolas Ramirez
@kamatheuska
Apr 17 2018 10:37
yep, it is. But I can't add that link on the challenge...this is it: https://github.com/kamatheuska/portafolio
shameem fairooz
@sfshameem5
Apr 17 2018 10:40
@Masd925 I Just implemented the prime number function.
function isPrime(number) {
    for (var i = 2; i < number; i++) {
        if (number % i === 0) {
            return false;
        }
    }
    return true;
}
Markus Kiili
@Masd925
Apr 17 2018 10:41
@sfshameem5 That is just what is needed. You can then solve the challenge with one loop and that function.
shameem fairooz
@sfshameem5
Apr 17 2018 10:42
@Masd925 Thanks a lot man!! You just taught me to divide my work using functions.
CamperBot
@camperbot
Apr 17 2018 10:42
sfshameem5 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4781 | @masd925 |http://www.freecodecamp.org/masd925
Donnie
@Donnie-D
Apr 17 2018 10:42
i want to change the background colour of my toggle switch from grey to green when its on the right but not sure which selector to use. Anyone?
https://jsbin.com/ruqiledege/edit?html,output
Nicolas Ramirez
@kamatheuska
Apr 17 2018 10:45
@Donnie-D I am looking at it, and is a bit hard to read...but let me see.
Donnie
@Donnie-D
Apr 17 2018 10:46
@kamatheuska cheers bud
Nicolas Ramirez
@kamatheuska
Apr 17 2018 10:47
If I am not mistaken, ~ doesnt traget parent elements...
not sure
I would use some javascript
Donnie
@Donnie-D
Apr 17 2018 10:48
@kamatheuska yes if you close the page and click on the link again, you'll see i added a comment stating thats where i am probably wrong but not sure of the correct way
cant we target parent elements in css?
Nicolas Ramirez
@kamatheuska
Apr 17 2018 10:50
not sure, but...you want a pure css answer? I mean, is javascript out of the question?
Donnie
@Donnie-D
Apr 17 2018 10:50
how about both ways :smile:
shameem fairooz
@sfshameem5
Apr 17 2018 10:51
@Masd925 My final solution. I know it could be optimized further. But please let me know if it is needed.
// Function to check whether a number is prime.  
function isPrime(number) {
    for (var i = 2; i < number; i++) {
        if (number % i === 0) {
            return false;
        }
    }
    return true;
}


// Function to add all prime numbers. 
function sumPrimes(num) {
    // counter to add all prime numbers. 
    var counter = 0; 

    // an array to hold numbers till num
    var numbers = [];

    // an array to store prime numbers. 
    var prime = [];

    // generate numbers. 
    for (var i = 0; i <= num; i++) {
        numbers.push(i);
    }

    // check for prime numbers. 
    for (var i = 0; i < numbers.length; i++) {
        if (isPrime(numbers[i]) === true) {
            prime.push(numbers[i]);
        }
    }

    // remove 0 and 1 since they are not prime. 
    prime.shift();
    prime.shift();

    for (var i = 0; i < prime.length; i++) {
        counter += prime[i];
    }

    return counter;

}

sumPrimes(10);
no parent selectors, for starters
Markus Kiili
@Masd925
Apr 17 2018 10:52
@sfshameem5 You should loop candidate numbers from 2 up. Not from zero. Also no arrays are needed and they just slow down the code. Just loop candidate numbers, test them and add them to the result number if they pass.
Donnie
@Donnie-D
Apr 17 2018 10:53
lol yup that answers the question
@kamatheuska
shameem fairooz
@sfshameem5
Apr 17 2018 10:53
@Masd925 Will do and let you know.
Donnie
@Donnie-D
Apr 17 2018 10:55
@kamatheuska so since there are no parent selectors in css, we ought to use JS to fill in the hole i suppose?
shameem fairooz
@sfshameem5
Apr 17 2018 10:57
@Masd925 Optimized.
// Function to check whether a number is prime.  
function isPrime(number) {
    for (var i = 2; i < number; i++) {
        if (number % i === 0) {
            return false;
        }
    }
    return true;
}

// Function to add all prime numbers. 
function sumPrimes(num) {
    var counter = 0; 

    for (var i = 2; i <= num; i++) {
        if (isPrime(i)) {
            counter += i;
        }
    }
    return counter;
}

sumPrimes(10);
amare16
@amare16
Apr 17 2018 10:57
SELECT a.authorId, a.name, count(b.bookId), FROM books b INNER JOIN author a USING authorId how to fix this SQL sentence to return number of books by Author?
Markus Kiili
@Masd925
Apr 17 2018 10:59
@sfshameem5 That looks good now. That would still be too slow for very large input numbers, but should pass the challenge (not totally sure). I can help you make a more efficient solution if you like.
shameem fairooz
@sfshameem5
Apr 17 2018 10:59
@Masd925 Can you teach me ?
amare16
@amare16
Apr 17 2018 11:01

SELECT a.authorId, a.name, count(b.bookId), FROM books b INNER JOIN author a USING authorId

how to fix this SQL sentence to return number of books by Author

Nicolas Ramirez
@kamatheuska
Apr 17 2018 11:04
@Donnie-D man this is a pain without any library xD
vainilla javascript DOM manipulation is a PAIN haha
Donnie
@Donnie-D
Apr 17 2018 11:05
lol @kamatheuska it confused me so much you have no idea.
i saw the comments in the link you shared where everyone is asking that in what circumstances one might ever need a parent selector (reason a parent selector is not included in css or css3). We have one right here :smile:
Donnie
@Donnie-D
Apr 17 2018 11:15
sorry all just a random question :smile: I want my function to fire when i click on the toggle only and its checked (or on position)
https://jsbin.com/ruqiledege/edit?html,js,output
neovks
@neovks
Apr 17 2018 11:16
hmmm I'm confused with something guys

var ourArray = ["Stimpson", "J", ["cat"]];
removedFromOurArray = ourArray.shift();

removedFromOurArray is equals to "Stimpson" right

so why

var myArray = [["John", 23], ["dog", 3]];
var removedFromMyArray = myArray.shift();

removedFromMyArray is equals to ["John", 23] and not "John" ?

amare16
@amare16
Apr 17 2018 11:17

someone can answer my question, SELECT a.authorId, a.name, count(b.bookId), FROM books b INNER JOIN author a USING authorId

how to fix this SQL sentence to return number of books by Author

Markus Kiili
@Masd925
Apr 17 2018 11:18
@neovks The first element of myArray is an array ["John", 23]
neovks
@neovks
Apr 17 2018 11:19
but isn't the first element of ourArray an array too ?
Markus Kiili
@Masd925
Apr 17 2018 11:19
@neovks No, it is a string.
Nicolas Ramirez
@kamatheuska
Apr 17 2018 11:24
@Donnie-D here, i have the solution
JS:
var checkboxes = document
  .getElementsByClassName('switch');

Array.prototype.forEach.call(checkboxes, function(element) {
  var input = element.children[0]
  input.addEventListener('change', function() {
    if (input.checked) {
      element.classList.add("checked")
    } else {
      element.classList.remove("checked")

    }
  })
})
on your CSS just add this class .checked { background-color: green }
neovks
@neovks
Apr 17 2018 11:26
ok so @Masd925
element = ["string" , [array]]
and
element = [[array], [array]]
right ?
Markus Kiili
@Masd925
Apr 17 2018 11:27
@neovks Yes.
neovks
@neovks
Apr 17 2018 11:27
ok thank you @Masd925
CamperBot
@camperbot
Apr 17 2018 11:27
neovks sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4782 | @masd925 |http://www.freecodecamp.org/masd925
Claudio Restifo
@Marmiz
Apr 17 2018 11:28
@amare16 depends a lot on how it's organised your DB.
Perhaps WHERE or HAVING may help you
Helio Goncalves
@srlhyo
Apr 17 2018 11:45
I need some help with VIM. Anyone to help?
shameem fairooz
@sfshameem5
Apr 17 2018 11:50
@srlhyo Here to help
@srlhyo I'm okay with the basics.
Helio Goncalves
@srlhyo
Apr 17 2018 11:51
@sfshameem5 great!
Claudio Restifo
@Marmiz
Apr 17 2018 11:51
<3 vim
shameem fairooz
@sfshameem5
Apr 17 2018 11:51
I use sublime with vintage.
Helio Goncalves
@srlhyo
Apr 17 2018 11:52
@Marmiz do you use tmux with vim?
Claudio Restifo
@Marmiz
Apr 17 2018 11:52
@srlhyo yep
nvim actually. But it's pretty much the same
@srlhyo I'm about to go afk, drop me your question, I'll reply when I can (hoping that I know how to reply)
Claudio Restifo
@Marmiz
Apr 17 2018 11:59
my tmux.conf in case it can be useful for now:
# Set prefix to Ctrl + a
unbind C-b
set -g prefix C-a
bind C-a send-prefix

# Fix to change cursor size in nvim
set -ga terminal-overrides ',*:Ss=\E[%p1%d q:Se=\E[2 q'

# Remove lag from inset/normal mode
set -sg escape-time 0

# Highlight the active window in the status bar.
set-window-option -g window-status-current-bg yellow
set-window-option -g window-status-current-fg black

# Window numbering starts with 1
set -g base-index 1
set-window-option -g pane-base-index 1
set -g renumber-windows on
amare16
@amare16
Apr 17 2018 11:59
@Marmiz ... it is an interview question and i can't find the error
Helio Goncalves
@srlhyo
Apr 17 2018 12:03
@sfshameem5 thanks for your help
CamperBot
@camperbot
Apr 17 2018 12:03
srlhyo sends brownie points to @sfshameem5 :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @sfshameem5 |http://www.freecodecamp.org/sfshameem5
Helio Goncalves
@srlhyo
Apr 17 2018 12:17
I am trying to install openssh-server but somehow it doesn't work
any ideas?
shameem fairooz
@sfshameem5
Apr 17 2018 13:00
Guy's I'm currently stuck in Smallest Common Multiple question in Intermediate Algorithmic Scripting.
According to this site, https://www.mathsisfun.com/least-common-multiple-tool.html my program works fine.
Here's the code

function smallestCommons(arr) {
    // find the highest and lowest values. 
    var highest, lowest;
    if (arr[0] > arr[1]) {
        highest = arr[0]
        lowest = arr[1];
    }else {
        highest = arr[1];
        lowest = arr[0];
    }

    // counter for both values. 
    var highest_counter = 0, lowest_counter = 0

    // arrays to store both values. 
    var highest_array = [], lowest_array = [];

    for (var i = 1; i < 100; i++) {
        highest_array.push(highest * i);
        lowest_array.push(lowest * i);
    }


    for (var i = 1; i < highest_array.length; i++) {
        // console.log(highest_array.indexOf(lowest_array[i]))
        if (highest_array.indexOf(lowest_array[i]) !== -1) {
            console.log(lowest_array[i]);
            return lowest_array[i];
            // break;
        }
    }
}


smallestCommons([13, 1])
Nitin
@thenm
Apr 17 2018 13:10
I want to take in filename and content of that file from user and save that in an folder in my project
So far i am able to create a file from taking in name and content from user but unable to save that in project directory. I am save as window after clicking on the generate file
<template>
  <span>
    <div class="">
      <input type="text" v-model="fileName" placeholder="File Name">
    </div>
    <div class="">

      <textarea type="text" v-model="fileContent" placeholder="File Content"></textarea>
    </div>
    <br>
    <a href="" ref="link">click here to download your file</a>
    <button @click="downloadF">Create file</button>
    <!-- <button @click="this.downloadF">Create file</button> -->

  </span>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      fileContent: '',
      fileType: 'text/plain',
      fileName: ''
    }
  },
  created() {
    //do something after creating vue instance
    // this.WriteToFile()
  },
  methods: {
    downloadF: function () {
      console.log('content', this.fileContent)
      // console.log('download', text, name, type)
      var file = new Blob([this.fileContent], {type: this.fileType});
      this.$refs.link.href = URL.createObjectURL(file);
      this.$refs.link.download = this.fileName;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
Nicolas Ramirez
@kamatheuska
Apr 17 2018 13:19
@thenm is that a .vue file?
yep, I think it is.
Nitin
@thenm
Apr 17 2018 13:21
yes
Nicolas Ramirez
@kamatheuska
Apr 17 2018 13:21
you would need some backend there I guess...
nodejs, for example
but not sure :D
Nitin
@thenm
Apr 17 2018 13:23
@kamatheuska ok but I want to store locally currently
Nicolas Ramirez
@kamatheuska
Apr 17 2018 13:23
still, I don't get what you are tring to do....that the user creates a file in their system?
Nitin
@thenm
Apr 17 2018 13:23
yes
create a file and store where my project reside. With interrupting user to choose a path.
Aditya
@ezioda004
Apr 17 2018 13:28
@sfshameem5 Actually, the algorithm asks you to find the least common multiple in the range of the given numbers, not just those two numbers. Example for arr = [1, 5] you have to find least common multiple for 1, 2, 3, 4, 5 and you're finding it only for 1 and 5.
Nicolas Ramirez
@kamatheuska
Apr 17 2018 13:28
on that link the second answer works like a charm. Still, you would have to specify a path
Nitin
@thenm
Apr 17 2018 13:30
That's where I am stuck. I am able to do the rest.
Tony Hudson
@ngohungphuc
Apr 17 2018 15:48
Code_2018-04-17_22-47-54.png
chrome_2018-04-17_22-48-08.png
the data inside render function is being render 2 times. any idea guys ?
Tony Hudson
@ngohungphuc
Apr 17 2018 16:13
solve using componentWillMount
Jeremy Bean
@Jeremywbean_twitter
Apr 17 2018 18:16
Good afternoon, everyone. I am currently working on the Wikipedia Viewer lesson. Anyone have any information on doing an api request with just javascript?
Keep getting NetworkError
Nate Mallison
@NJM8
Apr 17 2018 18:34
@Jeremywbean_twitter How are you making your request?
I would use fetch, easy and supports promises
ijhar
@ijhar8
Apr 17 2018 18:36
https://codepen.io/ijhar8/pen/aGoYNg help me make it outside <th> every email with border..
Jeremy Bean
@Jeremywbean_twitter
Apr 17 2018 18:38
@NJM8 Hey, Nate. I am trying to do it with just plain JavaScript, but having no luck.
function get(){
  var api = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=";
  var userInput = "dog"
  var callback = "&callback=?";
  var address = api + userInput + callback;

  var xhr = XMLHttpRequest();
  xhr.open("get",address,false);
  xhr.send();
  console.log(xhr.response);
}
I have found ways to make it work with jQuery using ajax, but would like to be able to make this work.
Nate Mallison
@NJM8
Apr 17 2018 18:39
@ijhar8
th {
  border: 1px solid #999;
}
@Jeremywbean_twitter Get a shovel for XMLHttprequest and bury it where it belongs, haha
Jeremy Bean
@Jeremywbean_twitter
Apr 17 2018 18:41
Haha, ouch. Any particular reason for that?
ijhar
@ijhar8
Apr 17 2018 18:41
@NJM8 thanks bt i my teacher said i cant use css and jquery only plain html and js
CamperBot
@camperbot
Apr 17 2018 18:41
ijhar8 sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @njm8 |http://www.freecodecamp.org/njm8
Nate Mallison
@NJM8
Apr 17 2018 18:42
  function getQuery(query) {
    const request = new Request(`https://en.wikipedia.org/w/api.php?action=opensearch&search=${query}&limit=6&origin=*`);

    fetch(request).then(function(response){
      return response.json().then(function(data){
        // do work
    }).catch(error => {
      console.log(error);
    })
  }
@Jeremywbean_twitter Fetch is just much easier to read and work with.
@ijhar8 Just to clarify even if you add styling with JS you are still adding CSS, only CSS can style things
Paul Borawski
@iAmNawa
Apr 17 2018 18:44
const request = async () => {
    const response = await fetch('https://api.com/values/1');
    const json = await response.json();
    console.log(json);
}
how about fetch with async await?
ijhar
@ijhar8
Apr 17 2018 18:44
only inline css
Jeremy Bean
@Jeremywbean_twitter
Apr 17 2018 18:45
Thanks @NJM8 . I'll give this a look over.
CamperBot
@camperbot
Apr 17 2018 18:45
jeremywbean_twitter sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @njm8 |http://www.freecodecamp.org/njm8
Jeremy Bean
@Jeremywbean_twitter
Apr 17 2018 18:45
Hey, @iAmNawa . I am going to give yours a look too. Thanks to you both.
CamperBot
@camperbot
Apr 17 2018 18:45
jeremywbean_twitter sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 593 | @iamnawa |http://www.freecodecamp.org/iamnawa
Nate Mallison
@NJM8
Apr 17 2018 18:46
@iAmNawa Doesn't fetch already support promises so you are just adding more layers of stuff? I did a little learning on async await but maybe you can tell me more!
Paul Borawski
@iAmNawa
Apr 17 2018 18:46
fetch with async await can do a full XHR request and response in 3 lines @Jeremywbean_twitter
Nate Mallison
@NJM8
Apr 17 2018 18:48
@ijhar8 with JS:
let theads = document.querySelectorAll('th);
for (const th of theads) {
  th.style.border = '1px solid black';
}
Jeremy Bean
@Jeremywbean_twitter
Apr 17 2018 18:51
@NJM8 @iAmNawa So, I am trying this, but still not getting anything. I feel like I am doing something incorrectly when requesting from Wikipedia.
Paul Borawski
@iAmNawa
Apr 17 2018 18:51
@NJM8 True, It’s still a promise. Just less code
Jeremy Bean
@Jeremywbean_twitter
Apr 17 2018 18:51
function get(query){
  var api = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search="+query+"&callback=?";

  fetch(api).then(function(response){
    return response.json().then(function(data){
      console.log(data);
    }).catch(error=> {
      console.log(error);
    });
  });
}
ijhar
@ijhar8
Apr 17 2018 18:51
@NJM8 its not working
Jeremy Bean
@Jeremywbean_twitter
Apr 17 2018 18:52
@ijhar8 What are you trying to accomplish?
Nate Mallison
@NJM8
Apr 17 2018 18:53
@Jeremywbean_twitter What is the response?
Jeremy Bean
@Jeremywbean_twitter
Apr 17 2018 18:53
@NJM8 undefined. It never fires any of the console.logs
ijhar
@ijhar8
Apr 17 2018 18:55
@Jeremywbean_twitter its collage Assignment
Nate Mallison
@NJM8
Apr 17 2018 18:55
try adding this at the end: &origin=*
Paul Borawski
@iAmNawa
Apr 17 2018 18:57
@Jeremywbean_twitter SyntaxError: Unexpected token / in JSON at position 0
Nate Mallison
@NJM8
Apr 17 2018 18:57
@ijhar8 I think you just need to add solid to the style you defined
the border needs to know its shape
Paul Borawski
@iAmNawa
Apr 17 2018 19:01
I’ll be back in like 20 min and I’ll help you solve this problem
Nate Mallison
@NJM8
Apr 17 2018 19:04
@Jeremywbean_twitter the best I can say is to use my api url exactly. wikipedias api documentation is really hard to understand
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:20
hi all, I want to use css grids, but I want to support IE 11
I am reading on mozilla docs, and they say I can prefix the properties like -ms- ..
but even when I do that, it doesn't work
Nate Mallison
@NJM8
Apr 17 2018 19:22
@brittanyrutherford Maybe try Autoprefixer?
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:23
I did, I took the code generated from autoprefixer
added it to codepen, opened IE11, didn't work
Nate Mallison
@NJM8
Apr 17 2018 19:23
ah
some good links at the end of this: https://gridbyexample.com/browsers/
Also a user alert to push the poor sucker to use Chrome would help too, haha
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:27
@NJM8 i saw that link too
I can't add a popup message, it's for an internal site for a company, and they use IE11 as their main browser
I am not sure why it's mentioned on many pages online that u can use the prefixes, but they don't actually work
Paul Borawski
@iAmNawa
Apr 17 2018 19:29
@Jeremywbean_twitter You there?
hensn5250
@hensn5250
Apr 17 2018 19:30
@brittanyrutherford As far as I know CSS grid works with Edge not IE
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:30
OK, so another question, can I make it with flexbox, that a specific dev, in the middle of the page, to appear at the very top on mobiles?
this is the reason I wanna use css grids, since it makes u able to do that easily
will that be easy in flexbox?
hensn5250
@hensn5250
Apr 17 2018 19:30
even though its derived from Microsoft technology
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:30
@hensn5250 can u send me a link to a codepen that uses css grids where it's compatible with IE11?
Paul Borawski
@iAmNawa
Apr 17 2018 19:30
Flexbox can do that
You jsut want oen centered div?
one*
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:31
@iAmNawa no
I want to have a layout
Kirk Clemons
@kcclemo
Apr 17 2018 19:31
@brittanyrutherford: I always like to checkout caniuse.com. For example - https://caniuse.com/#search=flexbox
hensn5250
@hensn5250
Apr 17 2018 19:31

https://codepen.io/rachelandrew/

CSS grid central on codepen

Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:31
on the right, there are 3 sidebars, I want the one in the middle to appear at the very top when opening the page on mobile
I can do that with css grids, but can I do it with flexbox?
@kcclemo yeah, I always check it, they say it's partially supported with -ms- ..
on mozilla site, they say I can use it with -ms prefixes, but it doesn't actually work
couldn't find any codepen or working example online where css grids are used and works with IE11
it's kinda misleading what they say
if I can do that with flexbox, that's gonna be great
hensn5250
@hensn5250
Apr 17 2018 19:34
@brittanyrutherford you have a link to the code?
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:34
@hensn5250 her css grid sample doesn't work with IE
Paul Borawski
@iAmNawa
Apr 17 2018 19:34
the prefixes should work
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:34
@iAmNawa can you send me a sample showing how it works in IE11?
Paul Borawski
@iAmNawa
Apr 17 2018 19:34
Send us your code and we can look into it
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:35
ok
I'll put it on codepen shortly
here
try to open it in IE and see
hensn5250
@hensn5250
Apr 17 2018 19:40
dont have windows
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:40
uh
:(
basically, it works in chrome 100%, took the css put it in autoprefixer, then took the css again to codepen
which from what I read online, supposed to work
hensn5250
@hensn5250
Apr 17 2018 19:40
lets assume you can't use CSS grid in IE11. What problem are you having?
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:41
I will have in my design, multiple divs on the sidebar
let's say 5 divs on top of each other representing the sidebar
I want that when users open their mobile phones
to show the 4th div in that section as the very first thing in the view
Kirk Clemons
@kcclemo
Apr 17 2018 19:42
Looks like you are running into a limitation of IE11. IE11 supports this older implimentation of the spec:
https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:42
with CSS grid, u can target a specific div and say: show it to me on column 1 row 4
why do they say in mozilla docs that I can use it with prefixes?
hensn5250
@hensn5250
Apr 17 2018 19:43
@brittanyrutherford you can always use media queries instead
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:44
@hensn5250 yeah, I'll use media queries for sure, but to change divs order on page, wouldn't that be hard with css and I'd need JS?
or even if it's done with css would be slow for performance?
hensn5250
@hensn5250
Apr 17 2018 19:46
@brittanyrutherford maybe. but at this point you have to a either change the code or not use IE11
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:46
ok
but I just want to understand, what are people talking about on their blogs or on mozilla's docs, when they say use -ms prefix? when do u use that?
hensn5250
@hensn5250
Apr 17 2018 19:48
I don't know. Even if it worked partially on IE11 it would be a bad idea to use it since itwould be unstable.
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:48
umm
ok
Alvin
@AlvinW89
Apr 17 2018 19:49
tumblr_maz1zoBF7X1ra9a3to1_500.jpg
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:49
@hensn5250 thanks!
CamperBot
@camperbot
Apr 17 2018 19:49
brittanyrutherford sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @hensn5250 |http://www.freecodecamp.org/hensn5250
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:49
@AlvinW89 :joy: true story
Alvin
@AlvinW89
Apr 17 2018 19:50
:P
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:50
@hensn5250 can I achieve this requirement using flexbox?
hensn5250
@hensn5250
Apr 17 2018 19:50
@brittanyrutherford good luck
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:52
yeah I know that site, but before me digging into flexbox, would it help changing div location based on media queries like css grid does?
hensn5250
@hensn5250
Apr 17 2018 19:52
@brittanyrutherford Flexbox can't move divs and arrange them in different locations like CSS Grid can.
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:53
aha
alright
thanks again!
hensn5250
@hensn5250
Apr 17 2018 19:53
Its limited to up or down where as CSS Grid can do up and down
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:53
yeah, that's why I liked css grid
it was also easier to learn tbh
she says some stuff flexbox can do, u can't do with css grid, but am not sure if that's correct, css grid is so flexbile, I think it covers all what flexbox can do
hensn5250
@hensn5250
Apr 17 2018 19:55
@brittanyrutherford you are going through a 6 stages of developer's grief
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:55
what's that? :joy:
hensn5250
@hensn5250
Apr 17 2018 19:56
realizing IE is the devil
well good luck , later
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 19:58
looks like flexbox does it
way to go, thanks all @kcclemo @hensn5250 @iAmNawa @NJM8
CamperBot
@camperbot
Apr 17 2018 19:59
brittanyrutherford sends brownie points to @kcclemo and @hensn5250 and @iamnawa and @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 202 | @kcclemo |http://www.freecodecamp.org/kcclemo
:cookie: 594 | @iamnawa |http://www.freecodecamp.org/iamnawa
api offline
:cookie: 409 | @njm8 |http://www.freecodecamp.org/njm8
Paul Borawski
@iAmNawa
Apr 17 2018 20:05
@Jeremywbean_twitter The problem is with your query string
Keggatron
@Keggatron
Apr 17 2018 20:06

Hi guys, I'm confused as to how to run a component that has a path name in one sense then reuse that component in my header. for example a search bar, I keep getting a 'cannot read property path of undefined'
which is what I use in the Link section of the component
but how can I get around this when it's in my header?
here's the code

import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap'
import Search from './Search';

function Header() {
  return (
    <Navbar className='navigation'>
      <Navbar.Header>
        <Navbar.Brand>
          <h1>Clever Title</h1>
        </Navbar.Brand>
      </Navbar.Header>
      <Nav pullRight>
        <NavItem>
          <Search />
        </NavItem>
      </Nav>      
    </Navbar>
  )
}


export default Header;

here's my search component:

import React, { Component } from 'react';
import { Redirect, Link } from 'react-router-dom';
import Forecast from './Forecast';

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
      city: '',
      cityData: null,
      fireRedirect: false
    }

    this.handleChange = this.handleChange.bind(this)

  }

  handleChange(event) {
    var value = event.target.value;

    this.setState(() => {
      return {
        city: value
      }
    });
  }


  render() {
    const match = this.props.match;
    const city = this.state.city;


    return (
      <div className='container boxing' align='center'>
        <form className='column' onSubmit={this.handleSubmit}>
          <label> <h1>Enter a City</h1> </label>
          <input 
            id='city'
            type='text' 
            placeholder='enter city' 
            onChange={this.handleChange}
            value={this.state.city}
          />
          </form>
          <Link
            className='btn btn-success'
            to = {
              {
                pathname: match.path + 'forecast',
                search: `?city=` + city
              }
            }
              disable={!this.state.city}
          >
            Get Weather
          </Link>

      </div>
    )
  }
}

export default Search

Here's the App component:

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from './Header';
import Search from './Search';
import Forecast from './Forecast';
import Details from './Details'

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Header path='/' /> 
          <Switch>
            <Route exact path='/' component={Search} />
            <Route exact path='/forecast' component={Forecast} />
            <Route exact path='/details' component={Details} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

export default App;
Kirk Clemons
@kcclemo
Apr 17 2018 20:07
@brittanyrutherford To answer your previous question about the mozilla article you referenced, I believe the limitation is due to the auto-placement ability:
blob
ijhar
@ijhar8
Apr 17 2018 20:10

just got a mail
1:21 AM (14 minutes ago)
to me
Dear ijhar,

Thank you for your application for the Software Engineer Trainee position.

Our selection process involves multiple coding and interview rounds. You can get a significant advantage by making progress on FreeCodeCamp Front End Developer Track. https://www.freecodecamp.org/. If you get a score of 300+, you get additional marks in the selection process and/or bypass coding rounds

Paul Borawski
@iAmNawa
Apr 17 2018 20:10
@Jeremywbean_twitter HERE is a working example of what you are trying to do.
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <button id="hello">CLICK ME</button>
  </body>
  <script>
  function get(query){
  var api = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + query + "&origin=*";
  fetch(api).then(function(resp) {
    console.log(resp);
    return resp.json()
}).then(function(data) {
    console.log(data);
})}
  document.querySelector('#hello').addEventListener('click', get('cryptocurrency'))
  </script>
</html>
That works
Obviously the function is firing when you load the page instead of when you click the button but the request response part works correctly
@Keggatron what component are you trying to reuse
?
Keggatron
@Keggatron
Apr 17 2018 20:15
the Search component
I'd liek to have a search bar in the header as well as in the index route
Paul Borawski
@iAmNawa
Apr 17 2018 20:16
You ahve it on github? send the repo
Keggatron
@Keggatron
Apr 17 2018 20:16
I don't sorry
do you have a cloud9 account?
Paul Borawski
@iAmNawa
Apr 17 2018 20:19
no
So in the header component it says Search is undefined?
You also shouldn’t need all those exacts unless you are navigating deeper into those paths
the only use you should need exact on is ‘/'
Keggatron
@Keggatron
Apr 17 2018 20:20
yeah I know
Paul Borawski
@iAmNawa
Apr 17 2018 20:21
I’m just trying to figure out what exactly is returning as undefined
Keggatron
@Keggatron
Apr 17 2018 20:21
so in the Header component it is saying cannot read path of undefined
Paul Borawski
@iAmNawa
Apr 17 2018 20:21
??
Keggatron
@Keggatron
Apr 17 2018 20:21
one sec
Paul Borawski
@iAmNawa
Apr 17 2018 20:21
The header IS loading though?
Keggatron
@Keggatron
Apr 17 2018 20:22
So basically in this Link:
<Link
            className='btn btn-success'
            to = {
              {
                pathname: match.path + 'forecast',
                search: `?city=` + city
              }
            }
              disable={!this.state.city}
          >
the path is coming from App here:
<Route exact path='/' component={Search} />
but there is no route that I specify for the Header so there are no props.path for it
which is what is coming back as cannot read path of undefined
the app crashes when I load it up
it worked prior to this when I didn't have the Search component tied into the Header component
Paul Borawski
@iAmNawa
Apr 17 2018 20:26
Instead of using search as a path why don’t you just include it in the places you want it?
It seems like you want search in two different places right? SO have a parent container and then implement search where you need it
Keggatron
@Keggatron
Apr 17 2018 20:27
here's the repo
Paul Borawski
@iAmNawa
Apr 17 2018 20:28
I have a phone call at 1:30 but I can help you after
Keggatron
@Keggatron
Apr 17 2018 20:28
yeah but I'm thinking that the <Link> is included in it so if I separate it out I'm going to get the same issue
Keggatron
@Keggatron
Apr 17 2018 20:40
Ok nevermind
thanks for the help, I separated the component out then gave it a path prop of '/' when being called from their respective places. seems to be working now
thanks @iAmNawa
CamperBot
@camperbot
Apr 17 2018 20:41
keggatron sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 595 | @iamnawa |http://www.freecodecamp.org/iamnawa
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 20:55
what does this mean when applied to an element:
width: 100%; 
max-width: 960px;
shameem fairooz
@sfshameem5
Apr 17 2018 21:16
@ezioda004 Thank You
CamperBot
@camperbot
Apr 17 2018 21:16
sfshameem5 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 539 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Why does this not center vertically & horizontally?
driving me mad
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 21:21
Mark Kubik
@KUBIX90
Apr 17 2018 21:23
@brittanyrutherford Thanks, should have said, but i want to use CSS grid to do it
Needs to appear in the center of the page
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 21:24
u can't do that with ur existing code
ur calculator needs to be part of the grid, not the grid itself to position it
in ur case, u have the calculator = display: grid
so either u move this whole grid to the middle
or make the calculator as part of a parent grid
and position it
Mark Kubik
@KUBIX90
Apr 17 2018 21:28
OK I think i get you
Thanks for the help
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 21:29
:thumbsup:
krckyboy
@krckyboy
Apr 17 2018 21:32
Vue.js or React and why? :)
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 21:32
angular
krckyboy
@krckyboy
Apr 17 2018 21:33
@brittanyrutherford Why?
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 21:34
because u didn't mention it :joy:
Adel
@AdelMahjoub
Apr 17 2018 21:36
the three have the same 'problem' too much cpu and memory usage, especially React, this https://sapper.svelte.technology/ is very promising
Coy Sanders
@coymeetsworld
Apr 17 2018 22:42
@krckyboy try them all, see which you like better. Haven't used Vue but personally like React
Paul Borawski
@iAmNawa
Apr 17 2018 23:10
Angular has a steeper learning curve and React is closer to Vanilla JavaScript. You can find a job doing either. Vue isn’t used as much as those yet so it’s a gamble learning it. Angular has more set rules and React gives more freedom to do what you want. You should decide if you want to be a part of a team where things are strict and are mostly done a certain way, or a team that has more freedom and does things how they want. It’s a trade off, following certain patterns makes the code easier to reason about, but it can also become monotonous. @krckyboy
Brian
@BrianCodes33
Apr 17 2018 23:17
is anyone here familiar with wordpress
Gulsvi
@gulsvi
Apr 17 2018 23:17
What's your question @BrianCodes33 ?
Brian
@BrianCodes33
Apr 17 2018 23:18
a client wants me to develop a site on his domain. do i need access to his cpanel and hosting to migrate the database i developed on my local server or can i do this through wp-admin panel
Gulsvi
@gulsvi
Apr 17 2018 23:18
You'll have to use their cpanel for sql access
For security reasons, they don't let you do too much to the database from the front end
Brian
@BrianCodes33
Apr 17 2018 23:20
im thinking i should just redo it on his server rather than screwing up the migration . he wants to use a theme so im not doing everything from scratch
do i need to even touch the cpanel if i build it on his admin
Gulsvi
@gulsvi
Apr 17 2018 23:22
That sounds like a safer option - usually no need to touch cpanel unless you're doing backup/restore or need terminal access
Brian
@BrianCodes33
Apr 17 2018 23:22
ok thanks
Gulsvi
@gulsvi
Apr 17 2018 23:22
If it's a dedicated server, that's a different story - then I'd stay away from cpanel and do it all with the terminal :) but sounds like a shared hosting environment
Brian
@BrianCodes33
Apr 17 2018 23:23
whats a dedicated server
Gulsvi
@gulsvi
Apr 17 2018 23:24
A server that only hosts your client's wordpress, nothing else
Most hosting providers give cheap websites to people with shared hosting - they manage the server and put hundreds of other wordpress installs on it
dedicated server - you manage the server and the website on it
Brian
@BrianCodes33
Apr 17 2018 23:28
is this something i should ask the client
@BrianCodes33 Check that out
Brittany Rutherford
@brittanyrutherford
Apr 17 2018 23:51
hi all
M18Ali
@M18Ali
Apr 17 2018 23:52

can anyone help me pass this test please?

  1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

link to codepen

Brittany Rutherford
@brittanyrutherford
Apr 17 2018 23:52
why can't I align the social media names to the far right side?
I thought justify-content: space-between should push the 2nd item to the far right, it's not doing that
Nate Mallison
@NJM8
Apr 17 2018 23:55
@M18Ali I think you need to know the size of the image, then you could set a max-width.
M18Ali
@M18Ali
Apr 17 2018 23:57
@NJM8 i made the img width 100%.. and i resize it's parent based on screen size,, this is not right?
Nate Mallison
@NJM8
Apr 17 2018 23:58
well it's failing the test, so no, haha. I think the key is they don't want it to be larger than the original
so what you want is something like max-width: 800px, or whatever the size of the picture is