These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Apr 2018
Emil
@aguyinmontreal
Apr 07 2018 01:17
@khaduch thanks! (sorry I didn't see your reply for 2 days)
CamperBot
@camperbot
Apr 07 2018 01:17
aguyinmontreal sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3854 | @khaduch |http://www.freecodecamp.org/khaduch
JoEezy
@JoEeeezy_twitter
Apr 07 2018 02:43
is there a way to return only a specific json object and not the whole data with $.getJSON ?
for example , i get json data from this page https://wind-bow.glitch.me/twitch-api/users/freecodecamp but i only want it to return "bio"
Brad
@bradtaniguchi
Apr 07 2018 02:56
@JoEeeezy_twitter Its up to the API to return what it wants to return, so read the docs for the API (if there are any), otherwise you will get what ya get
JoEezy
@JoEeeezy_twitter
Apr 07 2018 03:01
@bradtaniguchi ok thanks, i was under the impression that jQuery.getJSON( url [, data ] [, success ] ) the data parameter is where you specify what you want to get back , guess not :smile:
CamperBot
@camperbot
Apr 07 2018 03:01
joeeeezy_twitter sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 452 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Claudio Restifo
@Marmiz
Apr 07 2018 03:10
@JoEeeezy_twitter you should check twitch API documentation to know if getUser accepts further params to specify you wants only the bio, or it always reply with the whole object
Claudio Restifo
@Marmiz
Apr 07 2018 04:23
guys, anyone know in which version React.Fragmet has been added?
Rahsheen Porter
@rahsheen
Apr 07 2018 04:49
I thought it was react 16?
Brad
@bradtaniguchi
Apr 07 2018 04:51
Must... Fight... Karma... to .... run ... tests...
Claudio Restifo
@Marmiz
Apr 07 2018 04:51
thought the same but it's not working for me :( perhaps was in 16.2?
JoEezy
@JoEeeezy_twitter
Apr 07 2018 04:52
can anyone tell me why my row id's end up always being the last item in the array
Brad
@bradtaniguchi
Apr 07 2018 04:52
@JoEeeezy_twitter Can you send a link to the pen, im straining trying to read that
JoEezy
@JoEeeezy_twitter
Apr 07 2018 04:53
i was assuming it was because it takes longer to get the json data back then it was to loop through the id's but when i put the id variable in the .getjson callback it just comes back undefined
okay
Claudio Restifo
@Marmiz
Apr 07 2018 04:54
@JoEeeezy_twitter wlcome to async code! You are running a sync loop with an async behaviour inside.
You should defer the append to only when the data actually returns
JoEezy
@JoEeeezy_twitter
Apr 07 2018 04:54
@Marmiz :fearful:
Brad
@bradtaniguchi
Apr 07 2018 04:58
^ @Marmiz nice catch
Claudio Restifo
@Marmiz
Apr 07 2018 04:58

@JoEeeezy_twitter fear not, getJson already return promises.
It's enough to:

getJSON(url, function(data) {console.log(data}).then(append)

or done I don't remeber JQuery exact syntax (haven't used in a while)

Boo Far
@vapidlyrapid
Apr 07 2018 04:58
hello. I was wondering how I can install babel 7 beta using npm
Claudio Restifo
@Marmiz
Apr 07 2018 04:58
or you can use async/await if you prefer :)
JoEezy
@JoEeeezy_twitter
Apr 07 2018 05:01
@Marmiz thanks for the advice ... i'm gonna try that .then or .done as it seems simple enough for a noob like me :grin:
CamperBot
@camperbot
Apr 07 2018 05:01
joeeeezy_twitter sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1199 | @marmiz |http://www.freecodecamp.org/marmiz
JoEezy
@JoEeeezy_twitter
Apr 07 2018 05:01
i need to do more learning on async
Brad
@bradtaniguchi
Apr 07 2018 05:02
omg this package karma-jasmine-html-reporteris messed up I think :/
JoEezy
@JoEeeezy_twitter
Apr 07 2018 05:06
@Marmiz works like a charm :), ty
CamperBot
@camperbot
Apr 07 2018 05:06
joeeeezy_twitter sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
api offline
Claudio Restifo
@Marmiz
Apr 07 2018 05:06

@JoEeeezy_twitter it's pretty easy to use async/await as well since you write your code in a synchronous style:

async myGetDataFunction() {
  const data = await myMethodToObtainData();

   // keep on writing like if it were a sync function
   const newData = normalize(data);
   return aMethodWtih(newData)
}

Anyway if you never used it, defeinitely get confortable with promises bf using async/await

@JoEeeezy_twitter don't forget to catch any errors! :+1:
coderNewby
@coderNewby
Apr 07 2018 05:11
@DarrenfJ thanks for PM, checked.. great tip
CamperBot
@camperbot
Apr 07 2018 05:11
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2453 | @darrenfj |http://www.freecodecamp.org/darrenfj
Rahsheen Porter
@rahsheen
Apr 07 2018 05:17
Watch out with async/await. You need to use try/catch or you're screwed if any errors happen.
Brad
@bradtaniguchi
Apr 07 2018 05:30
Does anyone know how the npm command view works? Like npm view gulp? Cuse I used it and it said one version, but I manually checked the package's package.json and it said something else
Alexandro Pequeno
@Argestis
Apr 07 2018 06:39
Hi guys, anyone good with JS?
Brad
@bradtaniguchi
Apr 07 2018 06:42
@Argestis I was about to get off but I might be able to help, whats up?
Alexandro Pequeno
@Argestis
Apr 07 2018 06:46
@brad what this would do? $(".counter .something ").data("example"); where .counter is the parent div of .something
from what div would jquery get data "example"?
@bradtaniguchi whoops i called the wrong brad xD
srry
Brad
@bradtaniguchi
Apr 07 2018 06:50
@Argestis All is good, this is more of a Jquery question that JS, but regardless. The double class selector works the same as CSS selectors, so if you have 2 child div with class something, then it would return both
I gotta hit the hay, need to wake up early and its super late XD, if you have any more questions you can always mention me and Ill reply tomorrrow, otherwise someone else might help ya out :)
Alexandro Pequeno
@Argestis
Apr 07 2018 06:53
@bradtaniguchi thanks, man! have a good one.
CamperBot
@camperbot
Apr 07 2018 06:53
argestis sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 453 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
zootechdrum
@zootechdrum
Apr 07 2018 07:25
hey guys
I was wondering how you could place buttons right below images in css
here is the link to my pen
Justin
@Syncthetic
Apr 07 2018 08:03
Just wrap the items in a container div, and have the button element after the image
if it sets next to it, just use display: block, or clear: both
@zootechdrum looks like you set the button styling as clear: "left" when it should just be something like clear: left
Dennis Magnusson
@magnden
Apr 07 2018 08:08
Hey guys, I'm working on the freeCodeCamp weather app. Having some issues getting the latitude and longitude with the navigator object. It takes sooo long. I set up a timer in the app and it takes more than a minute to get the coordinates. Was wondering if you guys get the same if you try it? Link to it: https://codepen.io/dennismagnusson/pen/EEOaZy?editors=0010
Justin
@Syncthetic
Apr 07 2018 08:13
@magnden 59.1s
then 37.96s
Dennis Magnusson
@magnden
Apr 07 2018 08:14
I can't figure out why it takes so long... should be pretty quick, right? I need help if someone can help
thanks @Syncthetic
CamperBot
@camperbot
Apr 07 2018 08:14
magnden sends brownie points to @syncthetic :sparkles: :thumbsup: :sparkles:
:cookie: 297 | @syncthetic |http://www.freecodecamp.org/syncthetic
Ian
@toianw
Apr 07 2018 08:18
@magnden I think those results are out by a factor of ten. Divide ms by 1000 (not 100) to get seconds
Dennis Magnusson
@magnden
Apr 07 2018 08:19
Thats right. Thanks @toianw!
CamperBot
@camperbot
Apr 07 2018 08:19
magnden sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 514 | @toianw |http://www.freecodecamp.org/toianw
Corey Pennington
@JuiceyDuecy
Apr 07 2018 09:13
Guys newbie question: what's the difference between a function and a method?
Markus Kiili
@Masd925
Apr 07 2018 09:18
@JuiceyDuecy If a function is an object property value, it is called a method.
Corey Pennington
@JuiceyDuecy
Apr 07 2018 09:41
@Masd925 thanks... I think that makes sense... I'm using react and didn't quite understand some of the errors I was getting
CamperBot
@camperbot
Apr 07 2018 09:41
juiceyduecy sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4768 | @masd925 |http://www.freecodecamp.org/masd925
Corey Pennington
@JuiceyDuecy
Apr 07 2018 09:41
,
Federico Dente
@fez994
Apr 07 2018 10:43
Hello guys i need help with javascript
Stephen James
@sjames1958gm
Apr 07 2018 10:43
@fez994 Ask away.
Federico Dente
@fez994
Apr 07 2018 10:44
https://codepen.io/fez994/pen/bvQrvZ I would like to get the value of the selcted item of the dropdown menu, but instead i keep getting an empty string, how can i fix this?
@sjames1958gm
even if i type $('.dropdown-menu li:selected').val(); i get the same result
Stephen James
@sjames1958gm
Apr 07 2018 10:47
@fez994 I don't know that <a> has a val() property, I think that is reserved for input elements
var g = $(this).attr("value"); this will get the attribute by name
krckyboy
@krckyboy
Apr 07 2018 10:49
@krckyboy
I need to change the content of an element::before using pure JavaScript with each click? So, when I click on an element, the element::before's content should change / toggle with each click?
Basically it's like a checkbox, but instead of just changing the content of the element itself, in each element I need to generate an icon in the element::before
Stephen James
@sjames1958gm
Apr 07 2018 10:52
@krckyboy I found this pen where it looks like they are trying that
https://codepen.io/felquis/pen/wHAxe
krckyboy
@krckyboy
Apr 07 2018 10:53
@sjames1958gm I don't even know what is Babel, but I'll take a look.
Stephen James
@sjames1958gm
Apr 07 2018 10:54
@krckyboy I think the babel is only allowing ES6 in this pen.
translating from ES6 to ES5
THe key is the data-content attribute, I believe
krckyboy
@krckyboy
Apr 07 2018 10:56
@sjames1958gm I'm looking at CSS attr(data-content), I guess that's the main part in CSS.
Stephen James
@sjames1958gm
Apr 07 2018 10:57
@krckyboy yeah I think so. it is saying that the content is coming from the data-content attribute of the element
krckyboy
@krckyboy
Apr 07 2018 11:01
I see how it could work, but now I need to figure out how to deal with :hover.. Basically, when I hover over an element, it needs to have the icon that would appear if I was to make the element "active" (the icon that toggles on and off each click).
.filter .select-filter ul.list-filter li:hover span:before {
         content: "\e64d"; 
        /*content: attr(data-content);*/
    }
Stephen James
@sjames1958gm
Apr 07 2018 11:02
you could have a different attribute for hover? I don't think data-content is a fixed value
krckyboy
@krckyboy
Apr 07 2018 11:04
Actually, you're right. Makes sense. I'm new at this and first time working with JS in reality.
Thank you!
Stephen James
@sjames1958gm
Apr 07 2018 11:07
@krckyboy :+1: I had not seen this use of attr() in css - so I learned something new as well :)
Spacetime
@justinemar
Apr 07 2018 11:10

Does anyone know why i can't select the same image after deleting it? use this account to test it
email: test@gmail.com
pw: test

I am using the createObjectURL file API
https://jwt-jstinmhar.c9users.io/#/dashboard

krckyboy
@krckyboy
Apr 07 2018 11:13
@sjames1958gm I didn't know it, as well. :D
Federico Dente
@fez994
Apr 07 2018 11:16
@sjames1958gm I see thanks, how can i use the variable g outside of that function?
CamperBot
@camperbot
Apr 07 2018 11:16
fez994 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9174 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 07 2018 11:17
@fez994 What do you mean use it outside the function? I guess you could make the variable "global".
That would probably be considered bad form.
Federico Dente
@fez994
Apr 07 2018 11:25
It means that var g only exsist inside of that function, if i want to use it outside of it i can't
Stephen James
@sjames1958gm
Apr 07 2018 11:28
@fez994 True, but if you called a function from within the click handler you could pass the value to it.
What are you wanting to do with 'g'? Perhaps there is a different way
Daniel
@dbsimeonov
Apr 07 2018 11:56
Guys If I'm creating a page which the different sections are kind of a slider effect, which approach is better, to do the animation with a class, or to control it true javascript and style them from there?
I started with javascript styles but I think when it comes with lots of content it will be nasty code
kerafyrm02
@kerafyrm02
Apr 07 2018 13:32
use both
Liam Docherty
@liamdocherty
Apr 07 2018 13:52
Hi all, very useful video I found https://youtu.be/gVXcqO9A1vo
Nate Mallison
@NJM8
Apr 07 2018 13:56
Can anyone give some feedback on my tictactoe game? https://www.natethedev.com/FreeCodeCampFrontEndProjects/ticTacToe/ The computer is fairly easy to beat, I haven't decided if I am going to make it harder or not
Rob
@PGFracing
Apr 07 2018 14:23
Good morning on www.pgfracing.com at the bottom of the page on Desktop the border has padding can’t figure out why?
Will Foster
@Will5592
Apr 07 2018 14:27
Do you mean the white space in the footer on the right handside?
Moisés Man
@moigithub
Apr 07 2018 14:28
use ur browser devtools.. inspect element to check
Rob
@PGFracing
Apr 07 2018 14:28
I got it fixed thanks for looking at had an extra </div> tag was issue
I don’t know how to get the dev tools feature working in Google Chrome
Will Foster
@Will5592
Apr 07 2018 14:28
press f12
Stephen James
@sjames1958gm
Apr 07 2018 14:29
@PGFracing or option command i on mac
Rob
@PGFracing
Apr 07 2018 14:29
thanks @sjames1958gm
CamperBot
@camperbot
Apr 07 2018 14:29
pgfracing sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9175 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Rob
@PGFracing
Apr 07 2018 14:30
I have 8 warnings
or 8 red x and 5 warnings
Will Foster
@Will5592
Apr 07 2018 14:31
Hi all, Just got onto the build a calculator challenge, coded up the HTML and CSS quickly and now am onto the JS. I want to do this without jQuery, but not really got any idea of where to start. I'd rather not follow a guide but feeling a bit lost as to where to start. I've made a few variables to store inputs and hopefully will output them, but does anyone have a suggestion/resource that might assist without providing the answer?
Rob
@PGFracing
Apr 07 2018 14:35
Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied. Getting this error?
Darren
@DarrenfJ
Apr 07 2018 15:03
@coderNewby good point! thanks for that heh lol!
CamperBot
@camperbot
Apr 07 2018 15:03
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
:cookie: 142 | @codernewby |http://www.freecodecamp.org/codernewby
Danny Chan
@chandanny
Apr 07 2018 15:20
camperbot hello
Hoang Duc Quan
@BlazingRockStorm
Apr 07 2018 15:32
can somebody help me with my function delete, please: BlazingRockStorm/FCCRecipe@a199c2d
it always return message that the dishes are null
Danny Chan
@chandanny
Apr 07 2018 15:46
@BlazingRockStorm is render again?
Moisés Man
@moigithub
Apr 07 2018 15:47

IF I recall,, there was like 3 ways to define a component state since i started to learn react
OLDEst: using getInitialState method

var InterfaceComponent = React.createClass({
  getInitialState : function() {
    return {      name : "chris"    };
  },
  render : function() {
    return <div>      My name is {this.state.name}    </div>;
  }
});

using es6 classes

class InterfaceComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {    name : "chris"  };
  }
  render : function() {
    return <div>      My name is {this.state.name}    </div>;
  }
}

and es7 syntax without constructor, using "Property Initialiazers"

class InterfaceComponent extends React.Component {
    state = {    name : "chris"  };

  render : function() {
    return <div>      My name is {this.state.name}    </div>;
  }
}
Christopher McCormack
@cmccormack
Apr 07 2018 15:48
@moigithub :thumbsup:
@moigithub I imagine that's a hint for @BlazingRockStorm in regards to this.dishes=[]; correct? :D
Moisés Man
@moigithub
Apr 07 2018 15:49
:D
studentzero
@studentzero
Apr 07 2018 16:31
Hello I'm trying to read a file but I get errors. I have this little program.

```var fs = require('fs')

fs.readFileSync('/nodeschool/learnyounode/io.txt')
var a = buf.toString;
console.log(a);```

var fs = require('fs')

fs.readFileSync('/nodeschool/learnyounode/io.txt')
var a = buf.toString;
console.log(a);
```
Stephen James
@sjames1958gm
Apr 07 2018 16:32
@studentzero Are you sure about that path?
That is at the root of your file system
studentzero
@studentzero
Apr 07 2018 16:32
No in homefolder.
Stephen James
@sjames1958gm
Apr 07 2018 16:33
Then you probably need /home/user/nodeschool ...
studentzero
@studentzero
Apr 07 2018 16:35
A yes I get a different error now. Great!
Christopher McCormack
@cmccormack
Apr 07 2018 16:35
haha
progress
studentzero
@studentzero
Apr 07 2018 16:35
lol
It says buffer not defined. But I think I put the tekst in the buffer with readFileSync?
Stephen James
@sjames1958gm
Apr 07 2018 16:38
@studentzero You have to assign
buf = fs.readFileSync
studentzero
@studentzero
Apr 07 2018 16:40
A I see.
var fs = require('fs')

fs.readFileSync('/home/futurebug/nodeschool/learnyounode/io.txt')
buf = fs.readFileSync;
var a = buf.toString;
console.log(buf);
```
If I run the program in the terminal I get [Function]
I would think I would get the contants of the file?
(the contents is not [Function]
Nate Mallison
@NJM8
Apr 07 2018 16:44
do you mean to console.log(a);
?
Christopher McCormack
@cmccormack
Apr 07 2018 16:45
invoke your methods
studentzero
@studentzero
Apr 07 2018 16:45
Same thing. Only it gives [Function: toString]
Christopher McCormack
@cmccormack
Apr 07 2018 16:45
toString()
@studentzero if you see that again it's because you're assigning/logging the reference to a function
if toString were a String value then you would get the actual string
studentzero
@studentzero
Apr 07 2018 16:46
A yes
now i get this
function (path, options) {
  options = getOptions(options, { flag: 'r' });
  var isUserFd = isFd(path); // file descriptor ownership
  var fd = isUserFd ? path : fs.openSync(path, options.flag || 'r', 0o666);

  tryStatSync(fd, isUserFd);
  // Use stats array directly to avoid creating an fs.Stats instance just for
  // our internal use.
  var size;
  if ((statValues[1/*mode*/] & S_IFMT) === S_IFREG)
    size = statValues[8/*size*/];
  else
    size = 0;
  var pos = 0;
  var buffer; // single buffer with file data
  var buffers; // list for when size is unknown

  if (size === 0) {
    buffers = [];
  } else {
    buffer = tryCreateBuffer(size, fd, isUserFd);
  }

  var bytesRead;

  if (size !== 0) {
    do {
      bytesRead = tryReadSync(fd, isUserFd, buffer, pos, size - pos);
      pos += bytesRead;
    } while (bytesRead !== 0 && pos < size);
  } else {
    do {
      // the kernel lies about many files.
      // Go ahead and try to read some bytes.
      buffer = Buffer.allocUnsafe(8192);
      bytesRead = tryReadSync(fd, isUserFd, buffer, 0, 8192);
      if (bytesRead !== 0) {
        buffers.push(buffer.slice(0, bytesRead));
      }
      pos += bytesRead;
    } while (bytesRead !== 0);
  }

  if (!isUserFd)
    fs.closeSync(fd);

  if (size === 0) {
    // data was collected into the buffers list.
    buffer = Buffer.concat(buffers, pos);
  } else if (pos < size) {
    buffer = buffer.slice(0, pos);
  }

  if (options.encoding) buffer = buffer.toString(options.encoding);
  return buffer;
}
studentzero
@studentzero
Apr 07 2018 16:51
I don't get what this is. The text file only has 2 lines of tekst.
Christopher McCormack
@cmccormack
Apr 07 2018 16:54
That's your output when you log buf.toString()?
if you're still using your code above, you should notice that you aren't actually reading the file at all
fs.readFileSync('/home/futurebug/nodeschool/learnyounode/io.txt')
buf = fs.readFileSync;
What do you expect buf to be here?
:point_up: April 7, 2018 9:38 AM @sjames1958gm was giving you a partial solution but the implementation was incorrect
studentzero
@studentzero
Apr 07 2018 16:57
The file is
io test operations
foobar mathafuckah
I have this code
var fs = require('fs');
fs.readFileSync('/home/futurebug/nodeschool/learnyounode/io.txt');
var buf = fs.readFileSync;
console.log(buf.toString());
Moisés Man
@moigithub
Apr 07 2018 17:00
so.... readFileSync method returns the content of whatever it readed
studentzero
@studentzero
Apr 07 2018 17:00
I think so.
Reads into the buffer?
Christopher McCormack
@cmccormack
Apr 07 2018 17:00
@studentzero hint - fs.readFileSync('/home/futurebug/nodeschool/learnyounode/io.txt'); this line does nothing
well, nothing you can use
studentzero
@studentzero
Apr 07 2018 17:02
I would think it reads the file io.txt?
This is in the turorial (nodeschool)
  All synchronous (or blocking) filesystem methods in the fs module end with  
  'Sync'. To read a file, you'll need to use  
  fs.readFileSync('/path/to/file'). This method will return a Buffer object  
  containing the complete contents of the file.
Moisés Man
@moigithub
Apr 07 2018 17:02
should be more like...
var buf =fs.readFileSync('/home etc etc.........')
studentzero
@studentzero
Apr 07 2018 17:03
Yeah that works
Christopher McCormack
@cmccormack
Apr 07 2018 17:03
@studentzero it returns a buffer object but you have to store it :)
studentzero
@studentzero
Apr 07 2018 17:03
Yeah
And buf isn't really anything.
Just a variable.
Stephen James
@sjames1958gm
Apr 07 2018 17:05
@studentzero Sorry that I mislead with my post
studentzero
@studentzero
Apr 07 2018 17:06
No worries dude!
Christopher McCormack
@cmccormack
Apr 07 2018 17:06
@studentzero in your previous (not working) code buf was a reference to the function fs.readFileSync. You could actually invoke buf by doing something like
console.log(buf('/home/futurebug/nodeschool/learnyounode/io.txt').toString())
John
@tertiaryidentifier
Apr 07 2018 17:25
Hey folks. Wondering why my for loop correctly updates each element's class but does not correctly place the [users][i] associated with the currently loop/GET call
Christopher McCormack
@cmccormack
Apr 07 2018 17:37
@tertiaryidentifier try replacing the var with let or instead using a clojure
Aditya
@ezioda004
Apr 07 2018 17:38
@tertiaryidentifier Thats because of closure and async nature of $.getJSON() when you use for loop i is not encapsulated and thats why you get only the last element request and appened to your html
As @cmccormack said use let and also assign user = users[i]; inside $.getJSON() callback function.
John
@tertiaryidentifier
Apr 07 2018 17:41
where should I replace var with let?
Christopher McCormack
@cmccormack
Apr 07 2018 17:41
in your for loop initialization and anywhere you're using i in the loop basically
Aditya
@ezioda004
Apr 07 2018 17:41
In for loop let i = 0 well you didnt have var in the first place
John
@tertiaryidentifier
Apr 07 2018 17:43
it worked, thanks all!
Christopher McCormack
@cmccormack
Apr 07 2018 17:44
glad it's working!
Ken Haduch
@khaduch
Apr 07 2018 18:11
@NJM8 - I like the tic-tac-toe - smoooth operation and it looks good. They removed the requirement for the "unbeatable" option? I haven't tried it yet,other than experiment with the styling a little. I'd put the unbeatable option on the "todo" list for a later time... :)
zootechdrum
@zootechdrum
Apr 07 2018 19:15
hey guys into css question here i want my image to have the button on the bottom
I would like the button to be centered on the bottom in relation to the image above
I kinda made it word but when the window resizes it goes all sort of crazt
I does not stay in place
here is the link
kerafyrm02
@kerafyrm02
Apr 07 2018 19:24
hi zoo you still there?
zootechdrum
@zootechdrum
Apr 07 2018 19:25
yes i am
https://codepen.io/zootechdrum/pen/PRxbMN here is where i am at now
kerafyrm02
@kerafyrm02
Apr 07 2018 19:25
I just walked into room., but you're in luck. I'm a css guru.
zootechdrum
@zootechdrum
Apr 07 2018 19:25
@kerafyrm02 Then . you are my best friend right now lol
kerafyrm02
@kerafyrm02
Apr 07 2018 19:25
Which button are you referring to?
zootechdrum
@zootechdrum
Apr 07 2018 19:26
well both really what i would like is for the image to be float left to create the nice style
But I would also like the button stay centered in relation to the image
kerafyrm02
@kerafyrm02
Apr 07 2018 19:26
I don't really understand what you mean by that.
Let's start with mobile.
basicaly trying to achieve the what the link above shows
kerafyrm02
@kerafyrm02
Apr 07 2018 19:27
side by side image with button centered underneath?
zootechdrum
@zootechdrum
Apr 07 2018 19:27
yes lol
kerafyrm02
@kerafyrm02
Apr 07 2018 19:28
lol great one sec
zootechdrum
@zootechdrum
Apr 07 2018 19:28
I achieved it with margin but when i resized it the buttons completly detached from the image it was pointed two

it would be like
<img>
<img>

<button>

<button>

when i resized the window
kerafyrm02
@kerafyrm02
Apr 07 2018 19:33
did you just move div around?
zootechdrum
@zootechdrum
Apr 07 2018 19:34
@kerafyrm02 yeah i am still messing with it
kerafyrm02
@kerafyrm02
Apr 07 2018 19:34
i had the solution
but it wont work if you change divs around
let me know when youre done and ill look at it
zootechdrum
@zootechdrum
Apr 07 2018 19:34
ah shit
done
new link
im thinking what if I added height and width to the container where the image and button are under and floated the whole container to the left
I wonder if that would work
@kerafyrm02 u still there?
kerafyrm02
@kerafyrm02
Apr 07 2018 19:41
yes im here but this thing keepschangig
if you want me to fix it man you have to stop changing the layout
zootechdrum
@zootechdrum
Apr 07 2018 19:41
okay have not touched it
ill step out
going to play splatoon for 5 min
kerafyrm02
@kerafyrm02
Apr 07 2018 19:52
ok
kerafyrm02
@kerafyrm02
Apr 07 2018 20:02
I did some tweaks
i had to redo some of it
to allow it to work mobile -> desktop
you still there?
you are welcomed of course to change colors ect-
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #83878e;">
      <a class="navbar-brand" href="#"><img src ="https://www.towerhamlets.gov.uk/images_and_video/Business/Enterprise/code_club_uk.png" height="67" alt="fender logo"/></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">ABOUT<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">PORTFOLIO</a> 
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">EXPERIANCE</a>
          </li>
        </ul>
        <span class="navbar-text">
          Navbar text with an inline element
        </span>
      </div>
    </nav>
  </div>
  <!--End of Navbar-->

  <div class="site_container">

  <div class="img_content_container">
   <div class="img_container">
    <img src="https://scontent-lax3-1.xx.fbcdn.net/v/t1.0-9/21272101_1554891554568374_1794390751516768223_n.jpg?_nc_cat=0&oh=afaec440ab2b7ac4cbdd6f71ae52e429&oe=5B32CF66" height="280" width="270"alt="A photo of a geek">
  </div>
  <div class="content_container">
    <p>Up and Coming web developer with experiance in both Front-end and Back-end technologies. Past experiance includes front end developer for Fender Musical Instruments Corporation. I have provided ownership for development, maintenance, and understanding of Applications in a Functional Business environment</p>
  </div>
  </div> 


    <div id="part_2">
    <h2>Profile</h2>
    <div class="codepen_container"> 
      <div class="codepen_img_container">
      <img src="https://lisamuel.files.wordpress.com/2014/10/responsivephotogallery.png" alt="codepen image1"/>
      </div>

      <div class="image-button"> 
      <button id="button1" type="button" class="btn btn-primary">Primary</button>         
      </div>
      <div class="codepen_img_container">
      <img src="https://lisamuel.files.wordpress.com/2014/10/responsivephotogallery.png" alt="codepen image1"/>
      </div>
      <div>
      <button id="image-button" type="button" class="btn btn-primary">Primary</button>         
    </div>
  </div>
  </div>
  </div>
  <!--End of Part2-->
  <div id="part3">
    <h2>CONTACT ME</h2>
</body>
</html>
body {
  background:black;
}

h2{
  text-align:center;
  color:white;
}
.navbar{
  border-radius:5.5px;
}


li .nav-link {
    box-sizing:border-box;
    float:left;
    line-height: 1px;
    padding-top: 12px;
    height:25px;
    border-right:solid 1.5px #000000;
}
/*Used for Brand image in navbar*/

.site_container {
  padding: 20px;
  max-width: 1140px;
  margin: auto;
  margin-top: 50px;
}

.img_content_container {
  display: flex;
}

.img_container {
  padding-right: 50px;
}

.img_container img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  width: 200px;
  height: 200px;
}

.content_container {
  color: #fff;
  background: #83878e;
  padding: 20px;
  border-radius: 10px;
  font-size: 18px;
  font-family: "Open Sans", sans-serif;

}

#part_2 {
  margin-top: 80px;

}

.codepen_container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.codepen_img_container img { 
  width: 100%;
}

.codepen_img_container {
  max-width: 700px;
  margin: 40px
}
Good luck.
zootechdrum
@zootechdrum
Apr 07 2018 20:05
@kerafyrm02 yeah i am
kerafyrm02
@kerafyrm02
Apr 07 2018 20:06
If you want me to redo the whole thing - i can- i just didn't want to remorph your project
Some of the containers you selected were bootstrap names so i renamed them-
plus avoid using height on elements
float: left / right are out-dated
avoid inline-css
zootechdrum
@zootechdrum
Apr 07 2018 20:09
what are the kids using now instead of float:left?
kerafyrm02
@kerafyrm02
Apr 07 2018 20:09
flexbox and grid
zootechdrum
@zootechdrum
Apr 07 2018 20:09
ah I c
kerafyrm02
@kerafyrm02
Apr 07 2018 20:10
experience is spelled incorrectly
zootechdrum
@zootechdrum
Apr 07 2018 20:10
Okay, it looks good . How can i set the image so the images are sitting by side.
I would like to look like that you you did it for mobile but on desktops or tablets I would the images to sit side by side with the button centered accordingly
kerafyrm02
@kerafyrm02
Apr 07 2018 20:12
ok add this
or replace rather
.codepen_container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
actually just use this
zootechdrum
@zootechdrum
Apr 07 2018 20:15
@kerafyrm02 I have to get out of here man
Listen thank you for all your help
kerafyrm02
@kerafyrm02
Apr 07 2018 20:15
do thse final two things
zootechdrum
@zootechdrum
Apr 07 2018 20:15
I really do appreicate it
okay
i copied and pasted it
and now th buttons are on the side
kerafyrm02
@kerafyrm02
Apr 07 2018 20:17
ok add two divs
<div class="img_button>container"><div class="codepen_img_container">
      <img src="https://lisamuel.files.wordpress.com/2014/10/responsivephotogallery.png" alt="codepen image1">
    </div></div>
add img_button_container around both codepen_img_container and the button
should be two of them
zootechdrum
@zootechdrum
Apr 07 2018 20:18
okay i posted in the java scetion to implement late
r
again man thank you
@kerafyrm02 you might be a woman so just thank you
CamperBot
@camperbot
Apr 07 2018 20:18
zootechdrum sends brownie points to @kerafyrm02 :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @kerafyrm02 |http://www.freecodecamp.org/kerafyrm02
kerafyrm02
@kerafyrm02
Apr 07 2018 20:20
body {
  background:black;
}

h2{
  text-align:center;
  color:white;
}
.navbar{
  border-radius:5.5px;
}

.img_button_container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

li .nav-link {
    box-sizing:border-box;
    float:left;
    line-height: 1px;
    padding-top: 12px;
    height:25px;
    border-right:solid 1.5px #000000;
}
/*Used for Brand image in navbar*/

.site_container {
  padding: 20px;
  max-width: 1140px;
  margin: auto;
  margin-top: 50px;
}

.img_content_container {
  display: flex;
}

.img_container {
  padding-right: 50px;
}

.img_container img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  width: 200px;
  height: 200px;
}

.content_container {
  color: #fff;
  background: #83878e;
  padding: 20px;
  border-radius: 10px;
  font-size: 18px;
  font-family: "Open Sans", sans-serif;

}

#part_2 {
  margin-top: 80px;

}

.codepen_container {
    display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.codepen_img_container img { 
  width: 100%;
}

.codepen_img_container {
  max-width: 700px;
  margin: 40px
}
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #83878e;">
      <a class="navbar-brand" href="#"><img src ="https://www.towerhamlets.gov.uk/images_and_video/Business/Enterprise/code_club_uk.png" height="67" alt="fender logo"/></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">ABOUT<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">PORTFOLIO</a> 
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">EXPERIANCE</a>
          </li>
        </ul>
        <span class="navbar-text">
          Navbar text with an inline element
        </span>
      </div>
    </nav>
  </div>
  <!--End of Navbar-->

  <div class="site_container">

  <div class="img_content_container">
   <div class="img_container">
    <img src="https://scontent-lax3-1.xx.fbcdn.net/v/t1.0-9/21272101_1554891554568374_1794390751516768223_n.jpg?_nc_cat=0&oh=afaec440ab2b7ac4cbdd6f71ae52e429&oe=5B32CF66" height="280" width="270"alt="A photo of a geek">
  </div>
  <div class="content_container">
    <p>Up and Coming web developer with experiance in both Front-end and Back-end technologies. Past experiance includes front end developer for Fender Musical Instruments Corporation. I have provided ownership for development, maintenance, and understanding of Applications in a Functional Business environment</p>
  </div>
  </div> 


    <div id="part_2">
    <h2>Profile</h2>
    <div class="codepen_container">
     <div class="img_button_container">
      <div class="codepen_img_container">
      <img src="https://lisamuel.files.wordpress.com/2014/10/responsivephotogallery.png" alt="codepen image1"/>
      </div>

      <div class="image-button"> 
        <button id="button1" type="button" class="btn btn-primary">Primary</button>      </div>
      </div>
<div class="img_button_container">
      <div class="codepen_img_container">
      <img src="https://lisamuel.files.wordpress.com/2014/10/responsivephotogallery.png" alt="codepen image1"/>
      </div>
      <div>
      <button id="image-button" type="button" class="btn btn-primary">Primary</button>         
    </div>
  </div>
      </div>
  </div>
  </div>
  <!--End of Part2-->
  <div id="part3">
    <h2>CONTACT ME</h2>
</body>
</html>
final result
.codepen_container {
    display: flex;
    /* flex-flow: row wrap; */  <-- remove this
    align-items: center;
}
and it will be side by side centered
Anyone else need help?
Alexander R Bott
@Abott1222
Apr 07 2018 20:40
my js needs a doctor
Nate Mallison
@NJM8
Apr 07 2018 20:55
thanks for the feedback @khaduch
CamperBot
@camperbot
Apr 07 2018 20:55
njm8 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3855 | @khaduch |http://www.freecodecamp.org/khaduch
kerafyrm02
@kerafyrm02
Apr 07 2018 21:19
anyone need help/
im here for about 10mins
Emil
@aguyinmontreal
Apr 07 2018 21:37
Hi all! Is this valid Javascript/Jquery code? I've never seen that before, especially the |= part.
function markErrorRows($rows, add) { var added = false; $rows.each(function () { added |= markErrorRow($(this), add); }); return added; }
creator0323
@Amasian
Apr 07 2018 21:39
How can I change the text of P element after getting P element through document.getElementBy~?n could you give me short example code? thank you
kerafyrm02
@kerafyrm02
Apr 07 2018 21:44
<div id="some_container">
  <p id="p_tag">This is text</p>
</div>

var x = document.getElementById('p_tag');
x.innerHTML = 'This is an example';
@emil it's jquery
it goes through each row and using recurssion.
Emil
@aguyinmontreal
Apr 07 2018 21:45
|= is recursion?
kerafyrm02
@kerafyrm02
Apr 07 2018 21:45
no.
Emil
@aguyinmontreal
Apr 07 2018 21:46
what is |= ?
kerafyrm02
@kerafyrm02
Apr 07 2018 21:46
Likely a typo. Where do you see that
| means or
creator0323
@Amasian
Apr 07 2018 21:46
@kerafyrm02 oh it works! thank you
CamperBot
@camperbot
Apr 07 2018 21:46
amasian sends brownie points to @kerafyrm02 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @kerafyrm02 |http://www.freecodecamp.org/kerafyrm02
Emil
@aguyinmontreal
Apr 07 2018 21:46
function markErrorRows($rows, add) { var added = false; $rows.each(function () { added |= markErrorRow($(this), add); }); return added; }
kerafyrm02
@kerafyrm02
Apr 07 2018 21:47
I mean where are you copying that from?
Emil
@aguyinmontreal
Apr 07 2018 21:47
some project someone else did
kerafyrm02
@kerafyrm02
Apr 07 2018 21:47
It's likely an typo
Emil
@aguyinmontreal
Apr 07 2018 21:48
what do you think is the correct code?
just = ?
kerafyrm02
@kerafyrm02
Apr 07 2018 21:48
I= is c# language
Emil
@aguyinmontreal
Apr 07 2018 21:48
what does it mean in c#?
basically the same as:
var x = 3;
x += 3; // x = x + 3;
but instead you use | (or). Whichever is true gets left-assigned
ie
Emil
@aguyinmontreal
Apr 07 2018 21:51
so most likely he meant added += markErrorRow($(this), add);
but the var added = false; is making me confuse
because I don't think false += markErrorRow($(this), add); works
kerafyrm02
@kerafyrm02
Apr 07 2018 21:52
Actually i just tested it- it works in JS.
var x = 3;
x |= 4; // x = 7
nevermind it doesnt lol
weird results;
kerafyrm02
@kerafyrm02
Apr 07 2018 21:55
Anyhow-- what's your Q
Stephen James
@sjames1958gm
Apr 07 2018 21:55
@kerafyrm02
3 is 011 and 4 is 100 so |= is 111 which is 7
kerafyrm02
@kerafyrm02
Apr 07 2018 21:55
^
Yeah- please never do that in your code.. lol.
Emil
@aguyinmontreal
Apr 07 2018 21:55
I'm trying to find it's a typo of what
what did he really mean?
kerafyrm02
@kerafyrm02
Apr 07 2018 21:56
The bitwise part or the recurssion part?
Emil
@aguyinmontreal
Apr 07 2018 21:56
what is the non-bitwise equivalent of "|="?
I think the recursion part is fine, so yes, the weird bitwise typo part.
kerafyrm02
@kerafyrm02
Apr 07 2018 21:57
well he was probably trying to be fancy and used the bitwise part- it may not be a typo
you rarely use bitwise in programming. except for maybe a few exceptions
at least in JS
Stephen James
@sjames1958gm
Apr 07 2018 21:58
Rarely use it in web programming for sure :)
kerafyrm02
@kerafyrm02
Apr 07 2018 21:58
That's all i do btw-
Emil
@aguyinmontreal
Apr 07 2018 21:58
function markErrorRows($rows, add) { var added = false; $rows.each(function () { added |= markErrorRow($(this), add); }); return added; }
Stephen James
@sjames1958gm
Apr 07 2018 21:58
@aguyinmontreal Look like he is using so that if any return true then the final answer is true where false is 0 and true is non-zero
kerafyrm02
@kerafyrm02
Apr 07 2018 21:59
yeah so its base is if added is t/f
Stephen James
@sjames1958gm
Apr 07 2018 21:59
Probably could do ||= and it might be slightly clearer
Emil
@aguyinmontreal
Apr 07 2018 22:00
@sjames1958gm are you sure ||= is valid? I don't see it in the list https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators
Stephen James
@sjames1958gm
Apr 07 2018 22:00
@aguyinmontreal maybe not :(
kerafyrm02
@kerafyrm02
Apr 07 2018 22:00
nope-
Stephen James
@sjames1958gm
Apr 07 2018 22:01
nope
Emil
@aguyinmontreal
Apr 07 2018 22:01
so what is the non-bitwise equivalent of |= ?
kerafyrm02
@kerafyrm02
Apr 07 2018 22:02
It seems to me it does two things
Stephen James
@sjames1958gm
Apr 07 2018 22:02
Well in this case added = added || markErrorRow()
But there is no non-bitwise equivalent of that
kerafyrm02
@kerafyrm02
Apr 07 2018 22:02
if its < 0 then it returns that value
if it's >= 0 then it adds it
that's from testing it myself
ie
(function(){

 var x = 3;
 x |= 4; // x = 7

  but if
   x |= -3; // x = -3

})();
Emil
@aguyinmontreal
Apr 07 2018 22:04
alright! thanks guys! @kerafyrm02 @sjames1958gm
CamperBot
@camperbot
Apr 07 2018 22:04
aguyinmontreal sends brownie points to @kerafyrm02 and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @kerafyrm02 |http://www.freecodecamp.org/kerafyrm02
:star2: 9179 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
kerafyrm02
@kerafyrm02
Apr 07 2018 22:06
weird- nvr came across that before
Emil
@aguyinmontreal
Apr 07 2018 22:08
@kerafyrm02 everyday we learn something new :D
kerafyrm02
@kerafyrm02
Apr 07 2018 22:09
It seems like an unintended each function though.
Emil
@aguyinmontreal
Apr 07 2018 22:10
function markErrorRows($rows, add) { var added = false; $rows.each(function () { added |= markErrorRow($(this), add); }); return added; }
What do you mean by "unintended"? $rows.each is pretty clear for me
kerafyrm02
@kerafyrm02
Apr 07 2018 22:11
added will get overwritten multiple times.
at least that what it seems to me
each differs from map -- because it will stop the each if one false is encountered.
Emil
@aguyinmontreal
Apr 07 2018 22:12
you mean an unintended each function inside the $rows.each function?
yes, maybe :D
kerafyrm02
@kerafyrm02
Apr 07 2018 22:12
im curious as to what the main goal is
Emil
@aguyinmontreal
Apr 07 2018 22:13
it's part of a form validation
kerafyrm02
@kerafyrm02
Apr 07 2018 22:14
Why not just use regex functions?
Emil
@aguyinmontreal
Apr 07 2018 22:16

it's then used here:

if (markErrorRows($rows, !hideErrors)) {
errors.push("Office Locations" + ": " + "Please fill the fields labelled in red.");
}

Ken Haduch
@khaduch
Apr 07 2018 22:16
@kerafyrm02 - the representation of negative numbers in binary, especially something like -1 is 1111111111111 - mostly ones. So if you OR those values together, most of the bits are already set to 1, which likely result in not much of a change in the final numeric value.
kerafyrm02
@kerafyrm02
Apr 07 2018 22:17
@Emil I still dont see how that function does form validation.
Emil
@aguyinmontreal
Apr 07 2018 22:18
@kerafyrm02 me too :D, it's part of a bigger form validation system
kerafyrm02
@kerafyrm02
Apr 07 2018 22:18
there's like 5 types total. so much easier imo to do regex for each one
Not even 5 that need to be validated ., lol.
Emil
@aguyinmontreal
Apr 07 2018 22:19
@kerafyrm02 yes, regex is definitely used somewhere :D
kerafyrm02
@kerafyrm02
Apr 07 2018 22:19
email / number
are $rows the input fields?
Emil
@aguyinmontreal
Apr 07 2018 22:23
yes :D
kerafyrm02
@kerafyrm02
Apr 07 2018 22:24
what's the point of add?
doesnt even get used
Emil
@aguyinmontreal
Apr 07 2018 22:24
I think it's the system that puts the fields in red when the value is incorrect
kerafyrm02
@kerafyrm02
Apr 07 2018 22:25
but i mean the function never uses it
no point of passing it to it
what kind of input field do you use
Emil
@aguyinmontreal
Apr 07 2018 22:27
yes in markErrorRow
function markErrorRow($row, add) { var $cols = $row.find('.col:not(.optional)'); var filled = rowFilled($row); var added = false; $cols.each(function () { var $self = $(this); if (!getValue($self) && filled === -1) { if (add) { added = true; $self.addClass('empty_error'); } } else { $self.removeClass('empty_error'); } }); return added; }
markErrorRow and markErrorRows are not the same
kerafyrm02
@kerafyrm02
Apr 07 2018 22:29
Can you do this in your console on your page that has the form?
var inputs = $("input");
$.each(inputs, function(_, e){

console.log(e.type);

});
kerafyrm02
@kerafyrm02
Apr 07 2018 22:38
So custom made validation..
creator0323
@Amasian
Apr 07 2018 22:40
Wh I insert some images, I use URL which is sometimes very long usually because I copy the URL from free icon web site. But I noticed that some people using image for their web development, They only use simple src such as '~.png'. How can i user simple and short src like them?
kerafyrm02
@kerafyrm02
Apr 07 2018 22:41
depends on which icons you use
it's better to save the images to your server. place them all in one folder
ie
<img src="/images/down_arrow.png" alt="down_arrow">
or
creator0323
@Amasian
Apr 07 2018 22:43
Do I need to install my private server for that?
kerafyrm02
@kerafyrm02
Apr 07 2018 22:43
Well.. to display your website you need one-- just use same one
place the folder on the public side though
it's usually called public_html
but only place images in it
/public_html/images
or
<div style="background:url('/images/downarrow') no-repeat center center;"></div>
creator0323
@Amasian
Apr 07 2018 22:45
so the public html will be site personal web server and I can store my images on it?
is it related to concept called FTP?
kerafyrm02
@kerafyrm02
Apr 07 2018 22:46
In order to display your website to the public you need a webserver. You can create one or you can buy one. It's far easier to just buy one. Once you buy one it will have various folders., one of which is likely called "public_html". Create a folder called images and then place only your images in it.
FTP allows you to move files from your home computer to a remote server.
File Transfer Protocol.
creator0323
@Amasian
Apr 07 2018 22:48
ah then It will be better for me to buy one too
Do you have any recommending company providing personal web server company?
kerafyrm02
@kerafyrm02
Apr 07 2018 22:50
Sure one sec.
Ill send you a PM
creator0323
@Amasian
Apr 07 2018 22:51
@kerafyrm02 I really appreciate your help! thank you :)
CamperBot
@camperbot
Apr 07 2018 22:51
amasian sends brownie points to @kerafyrm02 :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @kerafyrm02 |http://www.freecodecamp.org/kerafyrm02