These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Apr 2018
Kaylee
@kaymonlee
Apr 26 2018 00:33
can someone help me? I am having all kinds of issues with <input type="text">
Christopher McCormack
@cmccormack
Apr 26 2018 00:38
@kaymonlee what issue?
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:00
anyone familiar with jspdf?
Dhaval Vira
@dhavalveera
Apr 26 2018 01:08
I am not familiar with jspdf, sorry
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:11
it's ok :thumbsup:
Moisés Man
@moigithub
Apr 26 2018 01:26
check youtube :P
https://www.youtube.com/watch?v=CnprxD_sJFE <-- part 1 looks soo easy
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:29
@moigithub i did, but my case is a bit complex
the pdf is stretching too much that it goes out of the page
if the content is small
yeah i can export it easily
but if the content is larger than 1 pdf page, it doesn't work for me
here's my code
include*engine
@newtothat
Apr 26 2018 01:38
@brittanyrutherford what is this about?
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:39
@newtothat am having a page with repeated sections that I want to export to pdf
include*engine
@newtothat
Apr 26 2018 01:40
it is really confusing to usee all of those tags ,codes and properties
at once
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:41
what tags and properties?
include*engine
@newtothat
Apr 26 2018 01:42
i mean how you deal when a page getting bigger
with your css html js
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:42
what do u suggest i change?
include*engine
@newtothat
Apr 26 2018 01:43
no i mean look at what i have learned today it was simple
it is onle responsive i mean the hardness was only media but i was confused with that
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:44
aha
include*engine
@newtothat
Apr 26 2018 01:44
how do you deal when codes getting bigger and bigger
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:44
js code or css?
include*engine
@newtothat
Apr 26 2018 01:44
in general
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:45
js, i separate it into functions
include*engine
@newtothat
Apr 26 2018 01:45
when you have jump to one and another and come again
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:45
css i just start from the containers, and go down to more specific stuff
include*engine
@newtothat
Apr 26 2018 01:46
how do you deal with layout
and how long it takes to become middle level pro at it
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:47
am a noob :joy:
so ur asking the wrong person here
Dhaval Vira
@dhavalveera
Apr 26 2018 01:48
hah
include*engine
@newtothat
Apr 26 2018 01:48
well everyone have experience
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:48
yeah, but others can give u better answers than me, if u wanna learn
include*engine
@newtothat
Apr 26 2018 01:48
for example in the future you can tell somebody how to do certain things
from your own experience
or even teach if you wish to
Brad
@bradtaniguchi
Apr 26 2018 01:49
@newtothat I follow in the footsteps of those who have done it more. Usually I look into best practicies for project layouts, cuse I hate it when I can't find anything
include*engine
@newtothat
Apr 26 2018 01:49
but never mind
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:51
uh, if am gonna teach someone something, then they'll forget how to code
since am clueless myself
include*engine
@newtothat
Apr 26 2018 01:51
i meant in the future when you become pro
@bradtaniguchi so you mean if you wanna be the best then learn from the best?
Brad
@bradtaniguchi
Apr 26 2018 01:52
Yes, your problems are (probably) not new to the world, someone has to have ran into it before
include*engine
@newtothat
Apr 26 2018 01:52
what do you mean
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 01:53
.........
include*engine
@newtothat
Apr 26 2018 01:54
@bradtaniguchi by saying "not new to the world "
@brittanyrutherford ok thank you
ok got it
Brad
@bradtaniguchi
Apr 26 2018 01:55
Someone probably has ran into the same issue before you ran into it
include*engine
@newtothat
Apr 26 2018 01:56
im not fluent in english so sometimes to undderstand something i have to read it again and think lol and find what you meant it is like literature
Brad
@bradtaniguchi
Apr 26 2018 01:57
And I'm pretty noob too, but that's usually how I approach everything
include*engine
@newtothat
Apr 26 2018 01:59
but when you watch it again few times and practice more focus on it you easily handle it .i mean tutorial or w3schools and learn the same thing from several resourses
noob like newbie?
Brittany Rutherford
@brittanyrutherford
Apr 26 2018 02:02
guess what? it worked!
Brad
@bradtaniguchi
Apr 26 2018 02:02
I'm young and don't have much experience compared to some 40+ year old person
I usually learn best by doing, I don't watch videos cuse I get distracted or start daydreaming
zootechdrum
@zootechdrum
Apr 26 2018 02:03
hey guys i am having trouble understanding this function
function flatten(arr) {
  if (Array.isArray(arr)) {
  return arr.reduce(function(done,curr){
    return done.concat(flatten(curr));
    }, []);
  } else {
    return arr;
  }
}

// it will be applied to this array [ 1, 2, 3, [ [ 4 ] ] ]
//this is to help me with sorted union challenge
my question is when does it stop being an array?
more clearly when does arr stop being an array? Is it at the end, I assume
eeflores
@eeflores
Apr 26 2018 02:06
hmm you'll want to iterate through elements of arr - something like if (Array.isArray(arr[0]))
Stephen James
@sjames1958gm
Apr 26 2018 02:06
@zootechdrum well the first three values are not arrays immediately
on the first recursion of the last value you have [[4]] which recurses to [4] which
is 4 in the first loop of the last recursion
eeflores
@eeflores
Apr 26 2018 02:07
looks infinitely loopy
eeflores @eeflores off to lunch
zootechdrum
@zootechdrum
Apr 26 2018 02:07
this is the site i am studing from if it makes any difference
include*engine
@newtothat
Apr 26 2018 02:08
@brittanyrutherford what worked?
zootechdrum
@zootechdrum
Apr 26 2018 02:08
@sjames1958gm even though one is inside an array when it iterates through the values it just shows one ?
include*engine
@newtothat
Apr 26 2018 02:09
@bradtaniguchi if you learn by doing ? then when do you learn? like from books or i mean y ou have to learn somewhere right?
Stephen James
@sjames1958gm
Apr 26 2018 02:10
flatten([ 1, 2, 3, [ [ 4 ] ] ])
flatten(1) - return 1
flatten(2) - return 2
flatten(3) - return 3
flatten([[4]]) - flatten([4]) - flatten(4) - return 4
zootechdrum
@zootechdrum
Apr 26 2018 02:14
@sjames1958i would have thought when it returns 1 in the else statement it would have stopped everything
Stephen James
@sjames1958gm
Apr 26 2018 02:17
When it returns 1 from the recursive call it returns back inside of the reduce
Ignoring the last value the first three get treated like this, so they return 1, 2, 3 from flatten 2
function flatten(arr) {
  if (Array.isArray(arr)) {
  return arr.reduce(function(done,curr){
    return done.concat(flatten2(curr));
    }, []);
  } else {
    return arr;
  }
}
function flatten2(arr) {
  if (Array.isArray(arr)) {
  return arr.reduce(function(done,curr){
    return done.concat(flattenX(curr));
    }, []);
  } else {
    return arr;
  }
}
zootechdrum
@zootechdrum
Apr 26 2018 02:19
let me study real quick
zootechdrum
@zootechdrum
Apr 26 2018 02:26
just to be clear this line if (Array.isArray(arr))
is the same as if (Array.isArray([ 1, 2, 3, [ [ 4 ] ] ]))
Claudio Restifo
@Marmiz
Apr 26 2018 02:27
@zootechdrum depends on what the arr param is :)
zootechdrum
@zootechdrum
Apr 26 2018 02:28
@Marmiz I figured that. when is the else statement executed is it after the number 4
Claudio Restifo
@Marmiz
Apr 26 2018 02:31

@zootechdrum in this case you are passing it an array:

[1,2,3, [4] ]

Is a valid array, so the else won't get executed

zootechdrum
@zootechdrum
Apr 26 2018 02:33
@Marmiz so the else statement is executed when there are no more items passed in the array.
Claudio Restifo
@Marmiz
Apr 26 2018 02:34
@zootechdrum the else is executed if Array.isArray return false
Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false
Array.isArray
zootechdrum
@zootechdrum
Apr 26 2018 02:36
which in the case of [1,2,3, [4] ] are all true until the items run out . right?
Claudio Restifo
@Marmiz
Apr 26 2018 02:36
@zootechdrum nope, since the whole argument is a single array
It's not looping inside: [1,2,3, [4] ] this is a single array
zootechdrum
@zootechdrum
Apr 26 2018 02:42

@Marmiz okay i think i see please tell me if I am right

if we pass in the argument [1,2,3, [4] ] it first executes as an array so it starts to reduce and then it returns whatever previous was and concats it to the current value . When we do the second return i make sure we are starting with no previous values. because curr on its first iteration 1 is not an array the else statement is executed

this happens for 1 2 3
until it reaches number 4
which is an array which recalls the reduce function again and executes until it is no longer in an array
Jeff Lung YK
@jefflung
Apr 26 2018 03:01
hi, which parts of javascript should i master before moving on to a framework?
Brad
@bradtaniguchi
Apr 26 2018 03:02
@jefflung What comes to mind, is data manipulations. Since most of the DOM/CSS/display stuff is handled by the framework in their own way. All the "business logic" is left to you.
I edited that since I could be forgetting something important haha
Jeff Lung YK
@jefflung
Apr 26 2018 03:03
@bradtaniguchi thanks for your advice
Claudio Restifo
@Marmiz
Apr 26 2018 03:24

which parts of javascript should i master before moving on to a framework

javascript

Claudio Restifo
@Marmiz
Apr 26 2018 03:29

just to give you an insight @jefflung , yesterday a guy @ work asked for help since he always got undefined.
he got a class/setup like this:

class a {
  constructor(){
    this.value = [1,2,3];
    this.total = 0;
  }

  method() {
    this.value.forEach(function(val) {
      this.total += val
    })
  }
}

You should spot the error in a second, since many modern frameworks works with classes :)

Brad
@bradtaniguchi
Apr 26 2018 03:35
Yes very true :smile:
Jeff Lung YK
@jefflung
Apr 26 2018 03:39
sorry i am not good with js yet, could you tell me the error so I can learn from this? Thanks
Brad
@bradtaniguchi
Apr 26 2018 03:43
@jefflung If your not good with js yet, then you need to learn js before using a framework.
Claudio Restifo
@Marmiz
Apr 26 2018 03:43

@jefflung

I can learn from this

You got the answer in there :)

Or you can run it and see it yourself:
class a {
  constructor(){
    this.value = [1,2,3];
    this.total = 0;
  }

  method() {
    this.value.forEach(function(val) {
      this.total += val
    })
  }
}

var b = new a();

b.method()
Jeff Lung YK
@jefflung
Apr 26 2018 03:46
Thanks let me try
Jeff Lung YK
@jefflung
Apr 26 2018 03:51
console returns "Uncaught SyntaxError: Identifier 'a' has already been declared" , is it the error of class a declared?
Claudio Restifo
@Marmiz
Apr 26 2018 03:52
nah, you probably have already a fucntion a declared in your console. Don't ask me why
Just rename the class to something with more sense than "a"
just open a new browser tab and paste the code in the developer console :)
(I promise nothing's harmful is in there)
Jeff Lung YK
@jefflung
Apr 26 2018 03:55
ok, now i got "Uncaught TypeError: Cannot read property 'total' of undefined" after I change a to another word
Claudio Restifo
@Marmiz
Apr 26 2018 03:55
bingo
you should know why on the spot, just by looking at the function :)
Jeff Lung YK
@jefflung
Apr 26 2018 03:57
this.total = 0 and this.total += val has conflict?
Claudio Restifo
@Marmiz
Apr 26 2018 03:59

@jefflung not at all :)
When you said that:

I can learn from this

You were pretty close: this

Jeff Lung YK
@jefflung
Apr 26 2018 04:01
total has not defined but this applies?
Claudio Restifo
@Marmiz
Apr 26 2018 04:01
Brad
@bradtaniguchi
Apr 26 2018 04:02
this is some crazy stuff
Claudio Restifo
@Marmiz
Apr 26 2018 04:04
@jefflung just to make it simple: traditional functions in JS have their own this context. So when using
this.arr.map(function(el) {
 // in here this, is now binded to the map callback function.
 // it's no more the class.

 console.log(this) // undefined
})
Jeff Lung YK
@jefflung
Apr 26 2018 04:05
@Marmiz Thanks, I may need some time to digest, and I found on web This is quite convoluted to JS novice.
Claudio Restifo
@Marmiz
Apr 26 2018 04:09
@jefflung well, you got your answer now.
Now you know why in [insert framework here] documentation they show examples mainly with es6 arrow function:
this.arr.map( el => {
  // arrow function don't bind this
  console.log(this) // the class instance
});
Jeff Lung YK
@jefflung
Apr 26 2018 04:13
I thought because of concise
Zebralight
@zebralight
Apr 26 2018 04:17
hello. I was wondering if I want to implement a component with editable text in react, without changing it into an input field, draftjs would be the right tool to use
Jeff Lung YK
@jefflung
Apr 26 2018 04:20
@Marmiz so the framework examples avoid the "this" error in traditional function by using arrow function?
Claudio Restifo
@Marmiz
Apr 26 2018 04:20
@zebralight we use draftJS @ work.
there are components already made based on that
in case you want something easier

@jefflung that's one way. In react they show the usage of bind(this)

constructor() {
 this.myMethod = this.myMethod.bind(this)
}

Or you can use the good old var that = this :)

Jeff Lung YK
@jefflung
Apr 26 2018 04:22
@Marmiz Thanks for your patient explanation, I have a good lesson.
Claudio Restifo
@Marmiz
Apr 26 2018 04:25
@jefflung :+1: no problem :)
Jeff Lung YK
@jefflung
Apr 26 2018 04:26
@Marmiz :+1:
Lallo Vigil
@lalov1
Apr 26 2018 04:27
Will someone tell me what I'm not doing correctly for setting state? https://codepen.io/lalov1/pen/97756811476267a589a730dc15f881a1?editors=0010
Claudio Restifo
@Marmiz
Apr 26 2018 04:42
@lalov1 well, the structure tree make no sense:
you have a key recipes but what values hold? You have a list of object just written randomly. It's not an array of objects, a map, a list or any other valid data structure
Heathercoraje
@Heathercoraje
Apr 26 2018 05:46
Hey friends
what is ~~ in js? is it for like getting an approximate value?
for example var a = ~~((event.clientY - c.getBoundingClientRect().top) / 40);
Markus Kiili
@Masd925
Apr 26 2018 06:00
@Heathercoraje It is similar to Math.trunc()
Markus Kiili
@Masd925
Apr 26 2018 06:06
Another way to trunc is val>>0.
ES5 JS didn't have a built-in trunc method that also worked on negative numbers, so people used bitwise operator tricks like that.
Heathercoraje
@Heathercoraje
Apr 26 2018 06:55
@Masd925 Awesome Thanks!
Ehsan Shadmehri
@ehsansh
Apr 26 2018 06:56

Hi. I have a vue component and I want to show some items to the users. But I want to show the delete button only to the admin which approach is the best look at these codes

‍‍‍```

    <div v-if="user.admin">
        <div v-for="item in items"></div>
    </div>
    <div v-else="">
        <div v-for="item in items"></div>
    </div>

```
or this way in codes below

‍‍‍```

    <div v-for="item in items">
        <div>
            {item.title}
        </div>
        <div>
            {{item.info}}
        </div>
        <div v-if="user.admin">
            <button>delete item</button>
        </div>
    </div>

```

Or maybe I should make two components for admin or other users?
Shekhar Ramola
@shekharramola
Apr 26 2018 07:01
second approach
  <div v-for="item in items">
        <div>
            {item.title}
        </div>
        <div>
            {{item.info}}
        </div>
        <div v-if="user.admin">
            <button>delete item</button>
        </div>
    </div>
Edgar Pan
@edgaryp
Apr 26 2018 07:05
personally I would use separated the components for user and admin, if I have more methods for user or admin in future then the code will be more clean for myself.
Ehsan Shadmehri
@ehsansh
Apr 26 2018 07:15
@shekharramola Thanks. This way is easy for developers but it has a if statement for many items. Does it have any bad effect?
@edgaryp Thanks. Thas is the benefit but in this way we should copy and paste many codes too.
Michael Grienauer
@mgrienauer
Apr 26 2018 09:36
hey, what do you guys think of my completed twitch streamers app? https://mgrienauer.github.io/twitch_streamers/
Stephen James
@sjames1958gm
Apr 26 2018 09:39
@mgrienauer :+1: looks great - works great
Michael Grienauer
@mgrienauer
Apr 26 2018 09:46
@sjames1958gm thanks!
Stephen James
@sjames1958gm
Apr 26 2018 09:50
@mgrienauer :+1:
dinesh
@1532j0004kg
Apr 26 2018 11:24
@mgrienauer great
Donnie
@Donnie-D
Apr 26 2018 12:53
fellas can i adjust the height of the html or body elements in css. I dont see why not but it doesnt work when i try for example
<html>
<head>
<style>
body{background-color:green; height: 50px;}
</style>
</head>
<body>
<div>im a div</div>
</body>
</html>
Nazar
@IsaakNazar
Apr 26 2018 12:57
@Donnie-D maybe U wanna style div to set height of 50px?
Donnie
@Donnie-D
Apr 26 2018 12:59
@IsaakNazar yes that works but as mentioned this is only an example i basically would like to know why it doesnt work :shipit:
@IsaakNazar nope still got the whole page green lol
Nazar
@IsaakNazar
Apr 26 2018 13:01
@Donnie-D U tried smth like this?
div {background-color:green; height: 50px;}
xing
@MingXingTeam
Apr 26 2018 13:01
I need help. I use babel-eslint. but I got this error. Anybody know what happened?
Error: Cannot find module 'escope'
at Function.Module._resolveFilename (module.js:538:15)
at monkeypatch (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\babel-eslint\index.js:41:26)
at Object.exports.parse (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\babel-eslint\index.js:384:5)
at parse (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\eslint\lib\linter.js:565:29)
at Linter._verifyWithoutProcessors (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\eslint\lib\linter.js:957:33)
at preprocess.map.textBlock (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\eslint\lib\linter.js:1046:35)
at Array.map (<anonymous>)
this is my package.json:
{
  "name": "eslint-config-base-mxx",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "keywords": [
    "eslint",
    "eslintconfig"
  ],
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "eslint": "^4.19.1"
  }
}
Donnie
@Donnie-D
Apr 26 2018 13:03
@IsaakNazar yep as mentioned earlier, this works but why when i try to set the body or html tags with same properties, it wouldnt work?
xing
@MingXingTeam
Apr 26 2018 13:03
.eslintrc.js:
module.exports = {
  "parser": 'babel-eslint',
  "rules": {}
};
my npm version is: 4.6.1
LydaTech
@lydatech
Apr 26 2018 13:05
@Donnie-D no you cant set the height on body and html. They are document roots
Nazar
@IsaakNazar
Apr 26 2018 13:07
@Donnie-D just set the height to the div, not to the body, it wont work
Donnie
@Donnie-D
Apr 26 2018 13:08
that explains it then . so how many other tags are document roots. or are these are the only 2 @lydatech
LydaTech
@lydatech
Apr 26 2018 13:09
@Donnie-D basically just the 2 in relation to css. root isnt the exact name but its an easy concept to understand
Donnie
@Donnie-D
Apr 26 2018 13:11
@lydatech rightiho! and i suppose the principle stands the same for width as well?
LydaTech
@lydatech
Apr 26 2018 13:13
@Donnie-D yep
Donnie
@Donnie-D
Apr 26 2018 13:15
@lydatech so would you call it a glitch in the matrix as to why the background is taking the whole window space but width is enforced there?
https://jsbin.com/cubokuqoki/edit?html,output
mustimuu
@mustimuu
Apr 26 2018 13:16
Hey can someone help me?
i want my section to take 100% of the body
how to do so?
LydaTech
@lydatech
Apr 26 2018 13:17
@Donnie-D you mean <meta name="viewport" content="width=device-width">?
Donnie
@Donnie-D
Apr 26 2018 13:17
nah sorry i had to copy the link again. please try and click once more. it was showing up blank before :+1:
@lydatech
LydaTech
@lydatech
Apr 26 2018 13:20
@Donnie-D thats not standard. Though its showing it isnt correct. Like drinking water from a shoe, you could do it but it isnt supposed to be done
Donnie
@Donnie-D
Apr 26 2018 13:21
@lydatech lol yep got it
LydaTech
@lydatech
Apr 26 2018 13:21
@mustimuu you have a 50px padding applied
mustimuu
@mustimuu
Apr 26 2018 13:21
@lydatech i removed it
@lydatech Still not taking the 100% width
LydaTech
@lydatech
Apr 26 2018 13:22
@mustimuu no it hasnt been changed
.elementor-31 .elementor-element.elementor-element-fd1ba23 {
    background-image: url(http://mustidev.beproductive.dk/wp-content/uploads/2018/04/cover-pic-1.png);
    background-position: center center;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    height: 250px;
    padding-left: 30px;
   width: 100%;
   box-sizing: border-box;
   padding: 50px;
}
mustimuu
@mustimuu
Apr 26 2018 13:23
it has
image.png
LydaTech
@lydatech
Apr 26 2018 13:24
@mustimuu not on the link you sent
mustimuu
@mustimuu
Apr 26 2018 13:24
hmm try again sir.
mustimuu
@mustimuu
Apr 26 2018 13:26
Still same ?
LydaTech
@lydatech
Apr 26 2018 13:26
yeah you probably didnt push your changes to the server or something
mustimuu
@mustimuu
Apr 26 2018 13:27
When i open the file, it hasnt those changed your pointing
LydaTech
@lydatech
Apr 26 2018 13:27
@mustimuu look at the path to the css file. You sure youre changing the correct file?
try now
mustimuu
@mustimuu
Apr 26 2018 13:29
site not found
xing
@MingXingTeam
Apr 26 2018 13:31
My eslint and babel-eslint version is not correct. I had solved it. Thanks....
LydaTech
@lydatech
Apr 26 2018 13:36
@mustimuu idk why youre not seeing that... anyway the padding youre getting is from the bootstrap class
col-md-12 content-area
mustimuu
@mustimuu
Apr 26 2018 13:37
you right
@lydatech thank you
LydaTech
@lydatech
Apr 26 2018 13:42
@mustimuu you might want to add background-size: cover;
Kamal
@kpbro
Apr 26 2018 15:03
hello.. i am stuck in portfolio page
here background color in contact section is not covering the entire area
The background color of form is white instead of the color i have set
Gulsvi
@gulsvi
Apr 26 2018 16:05

@Donnie-D @lydatech You *can* set the body height - try adding a border and you'll see the height is applied:

body {
  background-color: green;
  border: 1px solid black;
  height: 50px;
}

The issue you're seeing is with the background-color property. When no background-color is specified for the html element, the body background will cover the entire page. To only have your green background apply to a smaller height body, you would need to apply a background to both the html and body elements, like:

html {
  background-color: white;
}
body {
  background-color: green;
  height: 50px;
}
Daniel Simeonov
@dbsimeonov
Apr 26 2018 19:09

Guys can you tip me what I'm doing wrong with those css animations? On the page you can see demo as well.

When you click on any of the links(top right corner) it opens something like modal that its pain for me to create a smooth animation? What I'm doing wrong?
https://github.com/dbsimeonov/hennessy

markclynch
@markclynch
Apr 26 2018 19:26
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding:0;
  margin:0;
  background-color:rgb(247, 244, 243)
}

/* GLOBAL */
.container {
  width: 80%;
  margin:auto;
  overflow:hidden;
}

/* HEADER */
header {
  background: #431906;
  color: #ffffff;
  padding-top: 30px;
  min-height:70px;
  border-bottom:#337616 8px solid;
}

header a{
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size:16px;
}

header ul {
  margin:0;
  padding:0;
}

header li{
  float:left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float:left;
}

header #branding h1 {
  margin:0;
}
header nav{
  float:right;
  margin-top: 10px;
}

header .highlight, header .current a{
  color: #46C211;
  font-weight: bold;
}

header a:hover{
  color:rgb(49, 53, 124);
  font-weight: bold;
}

/* SHOWCASE */

#showcase {
  min-height:400px;
  background-img: url('./Images/showcase.jpg') no-repeat 0 -400px;
  text-align: center;
  color:#ffffff;
}

#showcase h1{
  margin-top:100px;
  font-size:55px;
  margin-bottom:10px;
}
Can anyone help me figure out why my #showcase image isn't showing at all?
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Fordyce Custom Carpentry</title>
<!--FAVICON CODE-->

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--END FAVICON CODE-->
<link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1>Fordyce Custom Carpentry</h1>
      </div>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>

  </header>
  <section id="showcase">
    <div class="container">
      <h1>Finish Carpentry at its finest in Santa Barbara</h1>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus quos quidem excepturi nostrum in, quas dignissimos non numquam a laboriosam!</p>
    </div>
  </section>



  <section id="boxes">
    <div class="container">
      <div class="box">
        <img src="./Images/Entry_Door.jpg" alt="">
        <h3>Custom Entryway</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad, id.</p>
      </div>
      <div class="box">
          <img src="./Images/cabinet.jpg" alt="">
        <h3>Cabinetry</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, nam!</p>
      </div>
      <div class="box">
          <img src="./Images/Deck.jpg" alt="">
        <h3>Deck and Railing</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatum voluptate!</p>
      </div>
    </div>
  </section>
</body>
</html>
Relavent CSS then HTML attached :) Thanks!
Brad
@bradtaniguchi
Apr 26 2018 19:35
holy code batman
markclynch
@markclynch
Apr 26 2018 19:36
lol, I thought it would help
Since I've got no clue where the mistake is!
Brad
@bradtaniguchi
Apr 26 2018 19:38
My guess is how your doing your url, or the image doesn't exist at that url at all
Michael Grienauer
@mgrienauer
Apr 26 2018 19:54
@sjames1958gm @1532j0004kg thanks
Zebralight
@zebralight
Apr 26 2018 20:25
hello. what property do non-window elements have that's the equivalent of window.scrollx/scrolly?
Daniel Simeonov
@dbsimeonov
Apr 26 2018 20:46
Guys for creating animation with relative position that pushes my navbar from top, what css properties should I use? Can I do it with changing to absolute or height etc? Been trying for the past 3-4 hours but none of it seems to work smoothly
Daniel Simeonov
@dbsimeonov
Apr 26 2018 21:02
Really appreciate the links, the first one definitely is worth reading it. Kind of waiting for your golden Google skills. The animation is quite similar than the first one, but the menu is outside the window and I want to push the top element. You can see what I've created so far or to understand my issue easier https://dbsimeonov.github.io/hennessy/
Norvin Burrus
@ndburrus
Apr 26 2018 21:18
@dbsimeonov hmmm... what is the "top element"? i see a toggle activated side menu. i don't see any content that would (possibly?) allow me to see the/any issue? i don't think I understand what we're trying to do...
Daniel Simeonov
@dbsimeonov
Apr 26 2018 21:18
try to click on sign up login or ssearch
Norvin Burrus
@ndburrus
Apr 26 2018 21:19
@dbsimeonov ok, will do. btw i only see Log in & Create an account - no search...
Daniel Simeonov
@dbsimeonov
Apr 26 2018 21:20
@ndburrus yes my bad, long day. Those 2 + search icon activating new elements from top
Amit Patel
@AmitP88
Apr 26 2018 21:25
hey guys, on my twitch channels project, the cretetion channel is displaying as offline in the app, but when I click the link the twitch channel is live. I don't get why it's doing this. I thought I did the ajax calls correctly O_o
Norvin Burrus
@ndburrus
Apr 26 2018 21:25
@dbsimeonov ok... i don't see any functionality (yet) on create an account or log in. i do see that Hennesey is sticky. so what are we trying to achieve? do we want the top section (ie everything) to be sticky?
Daniel Simeonov
@dbsimeonov
Apr 26 2018 21:27
@ndburrus idea is just to create smooth animation to open them. I'm not bothered doing the functionality of them now. Only the animations look really bad but that was the closest I could do to smooth or to the original
Norvin Burrus
@ndburrus
Apr 26 2018 22:01

i think your looking for smooth fade in/out?

  • Fade In/Out (scroll down to...)

    ...employ both visibility and opacity style attributes.

include*engine
@newtothat
Apr 26 2018 23:50
im learning php now but dont know most people say you have to learn first js and it's framework
but i enjoy learning php more
am i in the right direction?
Gulsvi
@gulsvi
Apr 26 2018 23:51
@markclynch Use background instead of background-img if you're specifying more than just the image path.
background: url("./Images/showcase.jpg") no-repeat 0 -400px;
not:
background-img: url("./Images/showcase.jpg") no-repeat 0 -400px;
(and, it's really helpful if you can copy/past that into a codepen for us to see rather than spamming walls of code here in chat!). For example: https://s.codepen.io/anon/pen/rvMEBR?editors=1100
include*engine
@newtothat
Apr 26 2018 23:55
@gulsvi sounds like so professional
experienced
Gulsvi
@gulsvi
Apr 26 2018 23:56
I started learning last summer here at FCC
include*engine
@newtothat
Apr 26 2018 23:57
like you were absolute beginner?
Gulsvi
@gulsvi
Apr 26 2018 23:57
I don't know about absolute - I used to write scripts to automate my minecraft farming lol
include*engine
@newtothat
Apr 26 2018 23:57
i see
Gulsvi
@gulsvi
Apr 26 2018 23:57
used a computer every day since I was 8yrs old, but no, never learned javascript before
include*engine
@newtothat
Apr 26 2018 23:58
so where are yu now
i mean what is your technical or coding skills
Gulsvi
@gulsvi
Apr 26 2018 23:58
I'm just waiting for the beta to finish before I get my front-end certificate, thinking about applying for a developer job over the summer
include*engine
@newtothat
Apr 26 2018 23:59
good luck with that
Gulsvi
@gulsvi
Apr 26 2018 23:59
Thanks :)