These are chat archives for FreeCodeCamp/HelpFrontEnd

16th
Mar 2018
Gulsvi
@gulsvi
Mar 16 2018 00:41

@Kingwindie use:

li:hover a {
  color: teal;
}

instead of:

li:hover {
  color: teal;
  background-color: white;
}
a:hover {
  color: teal;
}
And to answer your other question, it's "acceptable", but there are other things you can add to make it use best practices, like <nav> tags, for example
Michael Cordero
@CyberPutty
Mar 16 2018 02:30
hey i need help with the recipe app I have a problem with getting react to rerender the components without having to manually click the component when i edit it and update the state.
anyone familiar with react
Johnny
@JohnnyBizzel
Mar 16 2018 02:53
@CyberPutty Which line of code does the edit?
Michael Cordero
@CyberPutty
Mar 16 2018 02:58
when you run edit, what happens is it gets the localstorage json and updates it. that works all fine but i can't figure out how to pass information down to the child to say you need to update. my dropdown menue only seems to update when it is clicked.
@JohnnyBizzel so like how do i send information to the child component to re-render.
Johnny
@JohnnyBizzel
Mar 16 2018 02:59
@CyberPutty usually with a setState it forces a re-render.
Johnny
@JohnnyBizzel
Mar 16 2018 03:05
@CyberPutty The recipe title gets updated on edit but not the ingredients.
Michael Cordero
@CyberPutty
Mar 16 2018 03:05
@JohnnyBizzel it doesn't in this case i guess. the parent with the main json from local storage is creating a bunch of child components that get ingredients passed into them. that component creates a dropdown component when you click with those ingredients. but those ingredients only get updated when you click on the dropdown button.
Johnny
@JohnnyBizzel
Mar 16 2018 03:06
@CyberPutty Dropdown button? You mean the recipe title?
Michael Cordero
@CyberPutty
Mar 16 2018 03:08
so the recipe component gets passed title and ingredients from the main app. but the recipe component has a button that creates the dropdown component and it passes its ingredients. so what happens is that the recipe component gets the update but the dropdown component wont re-render unless clicked on.
so i need the dropdown component to rerender when the recipe component gets new ingredients from the parent.
@JohnnyBizzel forgot to use @ so you get notified.
Johnny
@JohnnyBizzel
Mar 16 2018 03:09
@CyberPutty There is nothing in your code that says "dropdown". I am confused.
Michael Cordero
@CyberPutty
Mar 16 2018 03:10
at the very top. its a functional component called by the recipe component.
Michael Cordero
@CyberPutty
Mar 16 2018 03:11
@JohnnyBizzel maybe bad naming convention
Johnny
@JohnnyBizzel
Mar 16 2018 03:19
@CyberPutty is this the function doing the edit?
  update = () => {
    this.setState({ allRecipes: JSON.parse(localStorage.getItem("recipes")) });
  };
Michael Cordero
@CyberPutty
Mar 16 2018 03:22
@JohnnyBizzel update gets called when you delete an item to refresh. the same code is in hide which is what handles the add or edit it hides the edit window and runs that code at the end to refresh the recipes list and re-render.
Johnny
@JohnnyBizzel
Mar 16 2018 03:24
@CyberPutty I notice if I create a recipe with whitespace it doesn't appear but it does get saved in LocalStorage:
[{"title":" ","ingredients":"carrot"},{"title":"Cheesy toast","ingredients":"cheese, bread, brown sauce"},{"title":"Toasty cheese","ingredients":"cheese"},{"title":"Lasange","ingredients":"Pasta,beef mince, sause"},{"title":" ","ingredients":" "}]
Michael Cordero
@CyberPutty
Mar 16 2018 03:24
@JohnnyBizzel im not directly editing the state. I'm just having it check the local storage again and it updates is that wrong?
Johnny
@JohnnyBizzel
Mar 16 2018 03:27
@CyberPutty I find it really hard to follow the flow of the code. What do you think is not working?
@CyberPutty Line 136 , what does "hide" do?
Michael Cordero
@CyberPutty
Mar 16 2018 03:29
its like this Parent--editForm-->editUpdateLocalStorage-->ParentUpdate--->child-componentUpdate-->child-componentDidNotUpdate
Johnny
@JohnnyBizzel
Mar 16 2018 03:30
And where does the modal come in?
Michael Cordero
@CyberPutty
Mar 16 2018 03:31
hide hides the form and updates the localstorage and tells the state to update allRecipes from localstorage
@JohnnyBizzel sorry i should fix my naming to make it easier to follow
Johnny
@JohnnyBizzel
Mar 16 2018 03:31
@CyberPutty But hide is where the update of the ingredients is happening maybe?
Instead of on the "edit" in the modal (where ever that is???)
I can't find the modal. I searched your code for "edit recipe" (the title of the modal) and it was not found.
Michael Cordero
@CyberPutty
Mar 16 2018 03:35
the form is always present on the main component just hidden. a click to show form gets passed from the dropdown component to the recipe component then to the main App component..
@JohnnyBizzel oh i see the form is a reusable form component. it just hase recipe plus a property for the action. so its props.action +"recipe"
Johnny
@JohnnyBizzel
Mar 16 2018 03:42
@CyberPutty Why are you setting the state of the ingredients here?
 showEdit = event => {
    console.log('Changing:',event.ingredients);
    this.setState({
      hideEdit: "show",
      dim: "dim",
      recipeTitle: event.title,
      recipeIngredients: event.ingredients
    });
  };
Michael Cordero
@CyberPutty
Mar 16 2018 03:43
that just shows the form. hide edit form="show" which is the css class to show the form . @JohnnyBizzel
else if (
      event.target.id == "edit" &&
      this.state.recipeTitle &&
      this.state.recipeIngredients
    ) {
      temp.splice(this.state.selected, 1, newRecipe);
      localStorage.setItem("recipes", JSON.stringify(temp));
      this.setState({
        allRecipes: JSON.parse(localStorage.getItem("recipes"))
      });
Johnny
@JohnnyBizzel
Mar 16 2018 03:44
@CyberPutty I don't see why you need to set the state title / ingredients.
Michael Cordero
@CyberPutty
Mar 16 2018 03:45
@JohnnyBizzel so it auto populates the correct ingredients and title
Michael Cordero
@CyberPutty
Mar 16 2018 03:51
@JohnnyBizzel i changed some names to make it easier to follow. Recipe Form so you can see the Form component better and DropMenu is now DropIngredients.
Johnny
@JohnnyBizzel
Mar 16 2018 03:55
@CyberPutty I had a look with react tools and DropMenu is not getting updated by Recipe.
So Recipe has the correct ingredients in state but DropMenu does not.
Michael Cordero
@CyberPutty
Mar 16 2018 03:56
@JohnnyBizzel ya that's what I'm trying to figure out.
@JohnnyBizzel what is react tools?
Johnny
@JohnnyBizzel
Mar 16 2018 03:56
@CyberPutty So where is that getting set?
Michael Cordero
@CyberPutty
Mar 16 2018 03:56
in Recipe component
Works with Chrome
@CyberPutty Doesn't look like it
Michael Cordero
@CyberPutty
Mar 16 2018 03:57
@JohnnyBizzel so it Recipe class you can see there is handleDrop function that adds the DropMenu or DropIngredients
Johnny
@JohnnyBizzel
Mar 16 2018 03:59
@CyberPutty The only place I see DropMenu appearing is inside a setState!
if (this.state.drop === "") { ??
Michael Cordero
@CyberPutty
Mar 16 2018 04:00
@JohnnyBizzel Ya I think that's the problem but i don't really know how to add in a menu otherwise. its either the drop menu or is nothing.
Johnny
@JohnnyBizzel
Mar 16 2018 04:01
@CyberPutty IF you want to hide it / show it just toggle it's CSS class.
Michael Cordero
@CyberPutty
Mar 16 2018 04:02
@JohnnyBizzel Maybe I'm thinking about it wrong I was thinking of dynamically adding and removing it but i could add it to all components statically and hide and show it. Ill try that right now!
Johnny
@JohnnyBizzel
Mar 16 2018 04:02
@CyberPutty I think the DropMenu should be inside the render of the Recipe component. Then a re-render will update the state.
@CyberPutty I am off to bed (4am here). Good luck and let me know how you get on ;)
Michael Cordero
@CyberPutty
Mar 16 2018 04:04
@JohnnyBizzel Thanks alot man, that really helped!
CamperBot
@camperbot
Mar 16 2018 04:04
cyberputty sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1808 | @johnnybizzel |http://www.freecodecamp.org/johnnybizzel
Johnny
@JohnnyBizzel
Mar 16 2018 04:04
:+1:
@CyberPutty The react tools really help (if you haven't seen them before).
They show you the state and the props of all the components in your app.
I'm yawning now... :zzz:
Michael Cordero
@CyberPutty
Mar 16 2018 04:05
@JohnnyBizzel Ya I'm going to download them now I have been using firefox but I have chrome as well. gamechanger im sure.
Johnny
@JohnnyBizzel
Mar 16 2018 04:06
:ok_hand:
aRtoo
@artoodeeto
Mar 16 2018 04:16

hey guys need help about centering and keep on the same spot.

the refresh button wont stay in the middle. i know i should use the transform: translate thanks heres the pen https://codepen.io/artoo/pen/BrjYrp

Frosty427
@Frosty427
Mar 16 2018 06:57
@Frosty427
image.png
can someone help me with my cards?
i need them to move to the left
https://codepen.io/Frosty27/pen/rdVqJb
Sorin Ruse
@sorinr
Mar 16 2018 07:28

@Frosty427 you need this classes :

<div class="row justify-content-center">
      <div class="col-sm-6 col-md-4 col-lg-3  mt-4">
        <div class="card">
          <img class="card-img-top" src="https://s26.postimg.org/5iiyfm521/img-11.png " alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card">
          <img class="card-img-top" src="https://s26.postimg.org/5iiyfm521/img-11.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card">
          <img class="card-img-top" src="https://s26.postimg.org/5iiyfm521/img-11.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>

for the recent works section

Prince
@Mutinii
Mar 16 2018 07:29
im having trouble getting the downloaded Gitter app to work
when i click sign in with github, it just gives me a full white screen on the app
Sorin Ruse
@sorinr
Mar 16 2018 07:30
@Frosty427 mx-auto class is working for display:block; elements not for display:flex;
Prince
@Mutinii
Mar 16 2018 07:31
is anyone else using the gitter downloaded app?
Frosty427
@Frosty427
Mar 16 2018 07:38
@sorinr that made my cards to thick
image.png
Sorin Ruse
@sorinr
Mar 16 2018 07:40
@Frosty427 you mean to be centered. yes. if you want them distributed same space between you may use justify-content-space-between or justify-content-space-around. witch one you prefer
Frosty427
@Frosty427
Mar 16 2018 07:40
@sorinr can i add that to the justify-center class?
or is it one or the other
Sorin Ruse
@sorinr
Mar 16 2018 07:41
@Frosty427 no
Frosty427
@Frosty427
Mar 16 2018 07:41
so its one or the other?
Sorin Ruse
@sorinr
Mar 16 2018 07:41
eather one or the other
Frosty427
@Frosty427
Mar 16 2018 07:41
damn
coderNewby
@coderNewby
Mar 16 2018 07:44
thanks @DarrenfJ
CamperBot
@camperbot
Mar 16 2018 07:44
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2425 | @darrenfj |http://www.freecodecamp.org/darrenfj
Sorin Ruse
@sorinr
Mar 16 2018 07:45
if you want something like that you need another div that will enclose that cards with a width of lets say 80% of the parent that will be justify-content-space-around and leave the parent div class="row justify-content-center"
@Frosty427 something like:
<div class="row justify-content-center">
       <div class="row justify-content-space-around" style="width: 80%;">
               <card1>
               <card2>
       </div>
</div>
aadtyaraj01
@aadtyaraj01
Mar 16 2018 08:06
Plz check this out.....Thnx in advance!
https://codepen.io/aadtyaraj/pen/mxEzGZ
Sorin Ruse
@sorinr
Mar 16 2018 08:12
@Frosty427 sorry. it is justify-content-around or justify-content-between
Frosty427
@Frosty427
Mar 16 2018 08:13
@sorinr its fine thanks i figured it out and got it exactly as i wanted thanks
CamperBot
@camperbot
Mar 16 2018 08:13
frosty427 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1404 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Mar 16 2018 08:16
@Frosty427 :+1:
Jay Dinh
@JayDinh
Mar 16 2018 08:49
hello, is anyone here kind enough to help me out with some css?
Frosty427
@Frosty427
Mar 16 2018 08:51
image.png
how would i make a contact section like this?
i havent had much experience with contact sections
Jay Dinh
@JayDinh
Mar 16 2018 08:52
@Frosty427 you you want to make a form with textbox type inputs
Frosty427
@Frosty427
Mar 16 2018 08:53
@JayDinh ok thanks
CamperBot
@camperbot
Mar 16 2018 08:53
frosty427 sends brownie points to @jaydinh :sparkles: :thumbsup: :sparkles:
api offline
Sorin Ruse
@sorinr
Mar 16 2018 08:56
@JayDinh whats the css problem ?
Jay Dinh
@JayDinh
Mar 16 2018 08:58
I am trying to make a drop shadow like I have on the first section of my page. Although I don't know how to put a shadow on a background-color in css
Frosty427
@Frosty427
Mar 16 2018 08:59
image.png
how do i move this text area to the right under "CONTACT US"
@JayDinh you have a dope keyboard and mouse
mubaraka1
@mubaraka1
Mar 16 2018 09:29

DELIMITER $$

DROP PROCEDURE IF EXISTS school_system.FEES CALCULATION $$
CREATE PROCEDURE school_system.FEES CALCULATION (ID INT, PD FLOAT)
BEGIN

INSERT INTO FEESPAYMENT(ID,PAID)VALUES(ID,PD);
UPDATE students SET BALANCE=FEES-PAID
WHERE ID=ID;
END $$

DELIMITER ;
CALL FEESCALCULATION(2,400000.00);
help where did I mess up

Frosty427
@Frosty427
Mar 16 2018 09:33
DELIMITER $$

DROP PROCEDURE IF EXISTS school_system.FEES CALCULATION $$
CREATE PROCEDURE school_system.FEES CALCULATION (ID INT, PD FLOAT)
BEGIN

INSERT INTO FEESPAYMENT(ID,PAID)VALUES(ID,PD);
UPDATE students SET BALANCE=FEES-PAID
WHERE ID=ID;
END $$

DELIMITER ;
CALL FEESCALCULATION(2,400000.00);
@mubaraka1 here
this looks more organized
Tiago Correia
@tiagocorreiaalmeida
Mar 16 2018 09:42
@JayDinh you need to use box-shadow
Ruben Dario
@rubendmatos1985
Mar 16 2018 10:12
Hola tengo una pequena duda en una tarea
sorry english
i have a little problem
i made a task in sublime because its easier fo me
and then i wrote the same code in FCC Ide
and its not working
somebody could herlp me
??
here its the code

function diffArray(arr1, arr2) {
var newArr = [];
for(var i=0; i<arr1.length;i++){
var n = arr2.indexOf(arr1[i]);
if(n<0){
newArr.push(arr1[i]);
}

}
for(var j=0; j<arr2.length; j++){
var m = arr1.indexOf(arr2[i]);
if(m<0){
newArr.push(arr2[i]);
}
}
// Same, same; but different.
return newArr;
}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);

Markus Kiili
@Masd925
Mar 16 2018 10:22
@rubendmatos1985 Your code returns an array with holes, but I cannot see why that happens.
Ruben Dario
@rubendmatos1985
Mar 16 2018 10:22
in this example it should return 4
@Masd925 it should return 4
Markus Kiili
@Masd925
Mar 16 2018 10:24
@rubendmatos1985 You are using i on the second loop. That is the problem.
Ruben Dario
@rubendmatos1985
Mar 16 2018 10:24
okkk!!!
thanks
@Masd925 thanksssss
Markus Kiili
@Masd925
Mar 16 2018 10:25
@rubendmatos1985 So they were not holes, but elements that were undefined.
Ruben Dario
@rubendmatos1985
Mar 16 2018 10:25
@Masd925 I changed it and it works
@Masd925 thanks!!!!
CamperBot
@camperbot
Mar 16 2018 10:25
rubendmatos1985 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4732 | @masd925 |http://www.freecodecamp.org/masd925
Roman Struna
@RomchyFCC
Mar 16 2018 10:25
I've completed my portfolio; It would be awesome if any of you could share some feedback
https://www.romanstruna.com/
Ruben Dario
@rubendmatos1985
Mar 16 2018 10:27
@RomchyFCC Wow man it is awesome
Congrats
@RomchyFCC Congrats
Roman Struna
@RomchyFCC
Mar 16 2018 10:28
Thank you @rubendmatos1985 :smile:
CamperBot
@camperbot
Mar 16 2018 10:28
romchyfcc sends brownie points to @rubendmatos1985 :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @rubendmatos1985 |http://www.freecodecamp.org/rubendmatos1985
Adel
@AdelMahjoub
Mar 16 2018 10:29
@RomchyFCC nice and clean, the projects snapshots are squashed, maybe you could resize them
SoteroX
@SoteroX
Mar 16 2018 10:30
@RomchyFCC I like it, one thing I would do is make the menu slide slower when clicking on the hamburger button
Roman Struna
@RomchyFCC
Mar 16 2018 10:30
@AdelMahjoub thanks for the feedback, I was looking into that
CamperBot
@camperbot
Mar 16 2018 10:30
romchyfcc sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 678 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
Roman Struna
@RomchyFCC
Mar 16 2018 10:31
@SoteroX thanks, it's currently set at 0.2s, what number are you feeling?
CamperBot
@camperbot
Mar 16 2018 10:31
romchyfcc sends brownie points to @soterox :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @soterox |http://www.freecodecamp.org/soterox
Adel
@AdelMahjoub
Mar 16 2018 10:32
@RomchyFCC you can resize them here https://image-tools.eu/resize to any dimension, it will automatically set the aspect ratio, drag the resized image to download it
Roman Struna
@RomchyFCC
Mar 16 2018 10:34
@AdelMahjoub that set up would require the picture element correct? i'm thinking about fixed width and margin changes
Adel
@AdelMahjoub
Mar 16 2018 10:36
@RomchyFCC most of the time a resized image solves all css problems
Roman Struna
@RomchyFCC
Mar 16 2018 10:41
@AdelMahjoub thanks for the tool, doing it now
CamperBot
@camperbot
Mar 16 2018 10:41
romchyfcc sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
api offline
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 16 2018 10:46
@RomchyFCC morning :wave:
Alex Iveson
@AlexIveson_twitter
Mar 16 2018 10:48
Hey y’all!
Roman Struna
@RomchyFCC
Mar 16 2018 10:51
@MuhammedKarim hey hey :) :cake:
hey @AlexIveson_twitter
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 16 2018 10:52
hey @AlexIveson_twitter
@RomchyFCC How's it goin
Roman Struna
@RomchyFCC
Mar 16 2018 10:54
@MuhammedKarim pretty good, working on my WP theme, hbu?
Alex Iveson
@AlexIveson_twitter
Mar 16 2018 10:56
Pumped to be back on the code. Had to take a break cos I was sick. Will be here in this room for often from now on.
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 16 2018 10:56
@RomchyFCC Good too! Just began a copy of www.apple.com being challenged by someone :laughing:
Alex Iveson
@AlexIveson_twitter
Mar 16 2018 10:57
I’ve got some savings and I’m going full time on the learning train!
Roman Struna
@RomchyFCC
Mar 16 2018 10:58
@MuhammedKarim just the front page or all of it?
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 16 2018 10:58
@RomchyFCC Just the home page. It took them four days
Francis-Walsingham
@Francis-Walsingham
Mar 16 2018 11:25
hey guys - I created my first part of the portfolio page (https://codepen.io/Duftbaum/pen/qoZaVP?editors=1100) It works fine but in mobile version it messes up. I tried to fix that without results. Could you helo me?
Fabien SHAN
@X140hu4
Mar 16 2018 11:34
@Francis-Walsingham "it messes up" is very vague. What have you observed as a problem?
Francis-Walsingham
@Francis-Walsingham
Mar 16 2018 11:37
When I switch to small screen the 3 pictures move to the next part (portfolio). I want to grow the first part in height instead
Stephen James
@sjames1958gm
Mar 16 2018 11:45
@Francis-Walsingham You have fixed size containers and images, so when you go vertical the images push past the end of the container.
You need to have your container size change as well or use min-height not simply height
Francis-Walsingham
@Francis-Walsingham
Mar 16 2018 11:47
ah gotcha - Ill try min-height. Seems legit
Stephen James
@sjames1958gm
Mar 16 2018 11:47
I tried min-height didn't seem to work - maybe need media queries.
Francis-Walsingham
@Francis-Walsingham
Mar 16 2018 11:48
yah min-height does not work. Hmm
media queries? Dunno that - but now I can google it ;)
Fabien SHAN
@X140hu4
Mar 16 2018 11:49
@sjames1958gm He is using bootstrap, better use its power than trying to constrain it ^^;
@Francis-Walsingham What about leaving the height alone and let the div decide how big they are relative to their content?
You can use margin and padding to manage spacing around the elements
Francis-Walsingham
@Francis-Walsingham
Mar 16 2018 11:51
hm I`ll try that @X140hu4 thx 4 advice
CamperBot
@camperbot
Mar 16 2018 11:51
francis-walsingham sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Francis-Walsingham
@Francis-Walsingham
Mar 16 2018 11:52
without height it doesnt work
probably my divs are not in the proper order
Fabien SHAN
@X140hu4
Mar 16 2018 11:54
@Francis-Walsingham Use min-height instead of height on all your backgrounds
@Francis-Walsingham In your specific case, on the about section
background class
Francis-Walsingham
@Francis-Walsingham
Mar 16 2018 11:56
yep background was the thing that was missing :)
True the white background is also min-height not straight height
thx dudes :) thx @X140hu4
CamperBot
@camperbot
Mar 16 2018 11:56
francis-walsingham sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
api offline
Fabien SHAN
@X140hu4
Mar 16 2018 11:57
@Francis-Walsingham Don't hesitate to break your code a little to see better. I like putting a lot of abckground color to see where things go
Sujit
@sujitworx
Mar 16 2018 12:55
Hi Guys! My first post here on the freecodecamp gitter channel!
I am somewhat stuck on the tribute page project
My questions are (1) Do I need to add text-center class to each individual html element to align it to the centre?
(2) How do I add the enclosed caption white background-ed caption to my image caption in bootstrap?
Exaland Concept
@exaland
Mar 16 2018 13:04

Hi everyone , i need your advice for making an reservation planning same to this site -> https://www.albert-learning.com/planning.html

If you have any idea how i can make this and which technology use for make it

Daria Doronina
@Skidle
Mar 16 2018 13:06
@sujitmohanty hi, if you add .text-center class to your .container element, every text will be centered
Sujit
@sujitworx
Mar 16 2018 13:08
@Skidle Thank You! let me do that
CamperBot
@camperbot
Mar 16 2018 13:08
sujitmohanty sends brownie points to @skidle :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @skidle |http://www.freecodecamp.org/skidle
Sujit
@sujitworx
Mar 16 2018 13:09
@Skidle It ruined the line elements!
Daria Doronina
@Skidle
Mar 16 2018 13:10
@sujitmohanty as for your second question, you can add .figure-caption class to figcaption element and add background-color: white to CSS I think
Marianissimus
@Marianissimus
Mar 16 2018 13:10
@sujitmohanty no, it's perfect, you can 'save it' - for instance: ul li {
list-style-type: none;
}
Daria Doronina
@Skidle
Mar 16 2018 13:12
guys, I'd like to ask for help too, for some reason I wrote a pomodoro timer in vanilla JS and now my code is full of variables such as var sessionMinus = document.getElementById('sessionMinus'); Is there a way to write it less ugly?
I mean, should I change all ids to classes or just leave it like it is? I feel like it's very repetitve my way
Sujit
@sujitworx
Mar 16 2018 13:14
@Marianissimus But Quincy told to do it it using Bootstrap and no custom CSS
Marianissimus
@Marianissimus
Mar 16 2018 13:14
we should probably see a pen. but if you need to manipulate all those DOM elements, you need to turn them into variables
@sujitmohanty of, I didn't know that. ok. look for the specific bootstrap classes that do that. @Skidle told you about text-center, there are many others
Sujit
@sujitworx
Mar 16 2018 13:15
@Skidle yes that would have been possible by targeting the .figure-caption class in custom CSS but Quincy saids to do using Bootstrap
@Marianissimus ok let me check a little deeper
Thanks so much both of u! Will revert back if I don't find the appropriate tags
Daria Doronina
@Skidle
Mar 16 2018 13:18
@sujitmohanty good luck :)
Fabien SHAN
@X140hu4
Mar 16 2018 13:19
@Skidle I understand you on that haha.
Sujit
@sujitworx
Mar 16 2018 13:19
@Skidle haha thanks!
CamperBot
@camperbot
Mar 16 2018 13:19
sujitmohanty sends brownie points to @skidle :sparkles: :thumbsup: :sparkles:
api offline
Fabien SHAN
@X140hu4
Mar 16 2018 13:20
@Skidle One way is to have objects containing only the DOM variables necessary for its methods
Daria Doronina
@Skidle
Mar 16 2018 13:21
@X140hu4 ohh so like View object with all those DOM variables and Controller object?
Fabien SHAN
@X140hu4
Mar 16 2018 13:21
@Skidle One thing I did with my pomodoro is to have a generic function that would get HTML element's attributes to determine which element to target
@Skidle maybe? haha I am not very knowledgeable on these
Daria Doronina
@Skidle
Mar 16 2018 13:22
@X140hu4 alright, thank you so much, I'll try now :)
CamperBot
@camperbot
Mar 16 2018 13:22
skidle sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Fabien SHAN
@X140hu4
Mar 16 2018 13:25
@Skidle You can definitely variabilize the argument to getElementByID or equivalent
Darren
@DarrenfJ
Mar 16 2018 15:12
hey @coderNewby saw the Pm thanks for the kudos too
CamperBot
@camperbot
Mar 16 2018 15:12
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
:cookie: 84 | @codernewby |http://www.freecodecamp.org/codernewby
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 16 2018 15:20
:point_up: March 16, 2018 1:55 PM
@tiagocorreiaalmeida What are these?
niniyzni
@niniyzni
Mar 16 2018 15:25
Hi,
  • I am new to js.
  • when I add <kendo-grid-template in html I am getting below error.
  • can you tell me how to fix it.
  • providing my code below
<div id="kgrid" class="gridCheckbox fixedKgrid">
  <kendo-grid-template  [kendoCommandObj]="kendocommand" (rowDotMenuClick)="rowDotMenuClick($event)"></kendo-grid-template>
</div>
  • providing my error below

Unhandled Promise rejection: Error in app/components/scheduling-cables/downlink-bulk-update.html:19:24 caused by: Cannot read property 'model' of undefined ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in app/components/scheduling-cables/downlink-bulk-update.html:19:24 caused by: Cannot r…, originalError: TypeError: Cannot read property 'model' of undefined
    at KendoGridComponent.ngOnInit (http://loca…, context: DebugContext}context: DebugContext {_view: _View_sports0, _nodeIndex: 28, _tplRow: 19, _tplCol: 24}message: (...)name: (...)originalError: TypeError: Cannot read property 'model' of undefined
    at KendoGridComponent.ngOnInit (http://localhost:3000/app/components/grid/grid.component.js:62:47)
    at _View_sports0.detectChangesInternal (sports.ngfactory.js:148:88)
    at _View_sports0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
    at _View_sports0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9671:48)
    at _View_sports_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9592:23)
    at _View_sports_Host0.detectChangesInternal (sports_Host.ngfactory.js:31:8)
    at _View_sports_Host0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
    at _View_sports_Host0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9671:48)
    at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7668:24)
    at RouterOutlet.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:3451:46)stack: (...)_nativeError: Error: Error in app/components/scheduling-cables/downlink-bulk-update.html:19:24 caused by: Cannot read property 'model' of undefined
    at ViewWrappedError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1255:38)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1284:20)
    at new ViewWrappedError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5559:20)
    at _View_sports0.DebugAppView._rethrowWithContext (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9688:27)
    at _View_sports0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9674:22)
    at _View_sports_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9592:23)
    at _View_sports_Host0.detectChangesInternal (sports_Host.ngfactory.js:31:8)
    at _View_sports_Host0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
    at _View_sports_Host0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9671:48)
    at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7668:24)__proto__: WrappedError TypeError: Cannot read property 'model' of undefined
    at KendoGridComponent.ngOnInit (http://localhost:3000/app/components/grid/grid.component.js:62:47)
    at _View_sports0.detectChangesInternal (sports.ngfactory.js:148:88)
    at _View_sports0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
    at _View_sports0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9671:48)
    at _View_sports_Host0.AppView.detectViewChildrenChanges (http://lo

providing my error below

```

Unhandled Promise rejection: Error in app/components/scheduling-cables/downlink-bulk-update.html:19:24 caused by: Cannot read property 'model' of undefined ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in app/components/scheduling-cables/downlink-bulk-update.html:19:24 caused by: Cannot r…, originalError: TypeError: Cannot read property 'model' of undefined
at KendoGridComponent.ngOnInit (http://loca…, context: DebugContext}context: DebugContext {_view: _View_sports0, _nodeIndex: 28, _tplRow: 19, _tplCol: 24}message: (...)name: (...)originalError: TypeError: Cannot read property 'model' of undefined
at KendoGridComponent.ngOnInit (http://localhost:3000/app/components/grid/grid.component.js:62:47)
at _View_sports0.detectChangesInternal (sports.ngfactory.js:148:88)
at _View_sports0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
at _View_sports0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9671:48)
at _View_sports_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9592:23)
at _View_sports_Host0.detectChangesInternal (sports_Host.ngfactory.js:31:8)
at _View_sports_Host0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
at _View_sports_Host0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9671:48)
at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7668:24)
at RouterOutlet.activate (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:3451:46)stack: (...)_nativeError: Error: Error in app/components/scheduling-cables/downlink-bulk-update.html:19:24 caused by: Cannot read property 'model' of undefined
at ViewWrappedError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1255:38)
at ViewWrappedError.WrappedError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1284:20)
at new ViewWrappedError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5559:20)
at _View_sports0.DebugAppView._rethrowWithContext (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9688:27)
at _View_sports0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9674:22)
at _View_sports_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9592:23)
at _View_sports_Host0.detectChangesInternal (sports_Host.ngfactory.js:31:8)
at _View_sports_Host0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
at _View_sports_Host0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9671:48)
at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7668:24)__proto__: WrappedError TypeError: Cannot read property 'model' of undefined
at KendoGridComponent.ngOnInit (http://localhost:3000/app/components/grid/grid.component.js:62:47)
at _View_sports0.detectChangesInternal (sports.ngfactory.js:148:88)
at _View_sports0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
at _View_sports0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9671:48)
at _View_sports_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9592:23)
at _View_sports_Host0.detectChangesInternal (sports_Host.ngfactory.js:31:8)
at _View_sports_Host0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
at _View_sports_Host0.DebugAppView.detectChanges (http://loc

 Uncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at console.window.console.error (<anonymous>:36:101)
    at consoleError (zone.js:355)
    at _loop_1 (zone.js:382)
    at drainMicroTaskQueue (zone.js:386)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:308)
Tiago Correia
@tiagocorreiaalmeida
Mar 16 2018 15:32
@MuhammedKarim code fights tournaments
mikirob
@mikirob
Mar 16 2018 15:33
hi guys
need some help
in developing a web based application for linking people
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 16 2018 15:35
@tiagocorreiaalmeida Which languages?
mikirob
@mikirob
Mar 16 2018 15:36
php
still not an expert but a beginner,need help on the best language to start the project with
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 16 2018 15:40
@mikirob Sorry i don't know any PHP, try the PHP room
mikirob
@mikirob
Mar 16 2018 15:41
thnks @MuhammedKarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 16 2018 15:45
if you had but the 'a' in there i could've got a brownie point :laughing: jk
Tiago Correia
@tiagocorreiaalmeida
Mar 16 2018 15:57
@MuhammedKarim any you want to use
javascripy pythong c
and others
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 16 2018 15:59
@tiagocorreiaalmeida Oh cool!
Tiago Correia
@tiagocorreiaalmeida
Mar 16 2018 16:02
if you wanna try out I can make a new one
Matej Bošnjak
@mbosnjak01
Mar 16 2018 16:42
there's no best language to start the project with
cause you can do that kind of a project in multiple ways
if there were "best" languages, most of the stuff wouldn't even exist probably
Sujit
@sujitworx
Mar 16 2018 17:25
How do I get the ul/li elements to align in the centre for this tribute project? https://codepen.io/sujitmohanty/full/ZxOPgP/
Gulsvi
@gulsvi
Mar 16 2018 17:34
@sujitmohanty Use the bootstrap grid system: https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
That example of .col-md-6 .offset-md-3 shows how to center a grid item - you can adjust the numbers based on how wide you want the centered list for mobile/tablet/laptop/desktop
There are some non-bootstrap approaches here: https://stackoverflow.com/questions/5347833/centering-bullets-on-a-centered-list
Also, I see you are using some Bootstrap 3 classes in your code - but you have bootstrap 4 set up in your codepen. They use different class names sometimes!
Sujit
@sujitworx
Mar 16 2018 17:42
@gulsvi Thank u so much! I will have a look
CamperBot
@camperbot
Mar 16 2018 17:42
sujitmohanty sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2677 | @gulsvi |http://www.freecodecamp.org/gulsvi
Andres Tijera
@android094x
Mar 16 2018 18:17
Hello, anyone here can help me with a webpack issue?
Christopher McCormack
@cmccormack
Mar 16 2018 18:22
@android094x what's the issue?
markclynch
@markclynch
Mar 16 2018 18:40
I can't get my buttons to line up correctly. Not sure what I'm missing here. Grrrr
aRtoo
@artoodeeto
Mar 16 2018 18:42
hey guys need help about centering a absolute position. every time i change the width the waves will move. tried transforming, translate, margin, top, left. nothing worked. maybe you could help. https://codepen.io/artoo/pen/BrjYrp?editors=0100
ill be going to gym so if i dont reply ill read it later.thanks guys
Andres Tijera
@android094x
Mar 16 2018 18:42
@cmccormack i'm using a pug template a pug-html-loader and file-loader i know how to put my images when the html is generate with the path I put in the loader.... img(src='logo.png') with .esj the file is requiere but I don't know how to do it with pug
Gulsvi
@gulsvi
Mar 16 2018 19:05
@markclynch Your button and input elements are all inline elements, just like text. Not necessary to use floats to align them properly. Center them inside your .timerContainer and use margins to give spacing you want.
Use block elements (<div>) to separate each line of input + buttons + images
https://s.codepen.io/anon/pen/YaGGbe?editors=1100
Morchid Chellali
@Morched23MJ
Mar 16 2018 19:19
@tiagocorreiaalmeida, hey man. Remember meh? Just here to say hi. Busy with studies, and life. :D
Sorin Ruse
@sorinr
Mar 16 2018 19:23

@artoodeeto you just need to add in css:

.wave_holder{
  display: flex;
  justify-content: center;
}

and comment out left: -18%; in your wave class

Tiago Correia
@tiagocorreiaalmeida
Mar 16 2018 19:24
I think I do 😊 all good?
aRtoo
@artoodeeto
Mar 16 2018 19:26
@sorinr hey sir. let me try thanks
CamperBot
@camperbot
Mar 16 2018 19:26
artoodeeto sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1405 | @sorinr |http://www.freecodecamp.org/sorinr
Morchid Chellali
@Morched23MJ
Mar 16 2018 19:26
@tiagocorreiaalmeida, very good. :) Have a great day.
aRtoo
@artoodeeto
Mar 16 2018 19:28
@sorinr got it thank you. i did that on the window class i wonder why it didnt work. its the parent of those divs. hmm
CamperBot
@camperbot
Mar 16 2018 19:28
artoodeeto sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
api offline
HansGrubername
@HansGrubername
Mar 16 2018 19:35
Hi I’m attempting the DNA challenge can anyone tell me why none of these switch cases get called?
function pairElement(str) {
  let strandArray = str.split("");
  for (i = 0; i < strandArray.length; i++) {
    switch (strandArray[i]) {
      case strandArray[i] === "G": {
        strandArray.splice(i + 1, 0, "C");
      }
      case strandArray[i] === "C": {
        strandArray.splice(i + 1, 0, "G");
      }
      case strandArray[i] === "A": {
        strandArray.splice(i + 1, 0, "T");
      }
      case strandArray[i] === "T": {
        strandArray.splice(i + 1, 0, "A");
      }
      default:
    }
  }
  console.log(strandArray);
}
Stephen James
@sjames1958gm
Mar 16 2018 19:47
@HansGrubername That is not how you code a switch.
The === part is done for you
@HansGrubername
switch (val) {
    case 1:
       console.log("val is 1");
 }
HansGrubername
@HansGrubername
Mar 16 2018 19:49
@sjames1958gm Ahh I get it, i tried like that originally but I’ve just remember I put case G, I’m guessing I have to put case “G”?
Stephen James
@sjames1958gm
Mar 16 2018 19:49
@HansGrubername Why it doesn't work is that
strandArray is a string and
all of the cases are booleans
strandArray[i] === "G"
@HansGrubername yes
HansGrubername
@HansGrubername
Mar 16 2018 19:52
@sjames1958gm when I console log strandArray it returns an array because of the str.split(“”) statement though?
Frosty427
@Frosty427
Mar 16 2018 19:54
image.png
why is my text being pushed down??
image.png
image.png
Stephen James
@sjames1958gm
Mar 16 2018 19:55
@HansGrubername I am sorry I meant strandArray[i] is a string
HansGrubername
@HansGrubername
Mar 16 2018 19:57
@sjames1958gm I get you. It’s still being weird though, when I run it my console.log(strandArray) isn’t returning anything
Stephen James
@sjames1958gm
Mar 16 2018 19:58
@HansGrubername I am not a big fan of splice, I would create a new array from the values.
Jonathan Tey
@jontey
Mar 16 2018 20:00
@Frosty427 you should put your p before all the images
@Frosty427 and then put a float: right on it
Frosty427
@Frosty427
Mar 16 2018 20:01
@jontey thats not how it looks on the template
@jontey WAIT
I GET IT
image.png
HansGrubername
@HansGrubername
Mar 16 2018 20:03
@sjames1958gm I think this is an issue with using a switch statement, inside a for loop, i removed the splice statement and set it to console.log(“Working”) every time it hit case “G” then set my string to”GGG” and i only got one console.log rather than the expected three. So it must terminate the loop
Stephen James
@sjames1958gm
Mar 16 2018 20:04
@HansGrubername You are also missing, break; between each case
Sorin Ruse
@sorinr
Mar 16 2018 20:05
@Frosty427 try to set a line-height or use vertical-align for the that text
Stephen James
@sjames1958gm
Mar 16 2018 20:05
@HansGrubername In and of itself there is no problem with the switch inside the loop
Frosty427
@Frosty427
Mar 16 2018 20:05
@sorinr @jontey thanks so much i figured it out
CamperBot
@camperbot
Mar 16 2018 20:05
frosty427 sends brownie points to @sorinr and @jontey :sparkles: :thumbsup: :sparkles:
:star2: 1406 | @sorinr |http://www.freecodecamp.org/sorinr
:cookie: 82 | @jontey |http://www.freecodecamp.org/jontey
Jonathan Tey
@jontey
Mar 16 2018 20:10
@HansGrubername i don't think the break statement in switch breaks the for loop
simple test case
for (i = 0; i < 3; i++) {
    switch(i){   
        default:
            console.log("Hi");
            break;
    }
}
HansGrubername
@HansGrubername
Mar 16 2018 20:12
@sjames1958gm @jontey cheers guys, I took the splice statement out and I’ve decided to push everything into a new array and figure out a way to join them which seems to be working
Sorin Ruse
@sorinr
Mar 16 2018 20:33
@Frosty427 you may also want to add overflow-x: hidden; to body in css
geoffrymichael
@geoffrymichael
Mar 16 2018 22:12

Hello, I am trying to use jquery to create a sort of toggle button between two states. When one button is clicked I want the background color to change(to indicate active) and then that color is removed from the other button. However I want the "active" button not to be able to be clicked and vice versa. I found this code online but the button remains active.

$('.button').click(function() {
$('.button').not(this).removeClass('buttonactive');
$(this).toggleClass('buttonactive');
});

I also tried creating two different statements one for each button in an attempt to have the button deactivate itself and active the other button. But this does not seem to work either.

$(".button-online").click(function() {
// remove buttonactive from the others
$(".button-online").toggleClass("button-selected").off("click");
$(".button-all").toggleClass("button-selected").on("click");
});

$(".button-all").click(function() {
$(".button-all").toggleClass("button-selected").off("click");
$(".button-online").toggleClass("button-selected").on("click");
});

And finally, I also tried to use an if statement because even if the above worked, it does not account for the first case of one button being active on load.

Matej Bošnjak
@mbosnjak01
Mar 16 2018 22:14
@geoffrymichael so do you buttonactive class defined in your css?
or somewhere where you added properties to it?
do you have jquery library called in your html file?
you should provide us full code in codepen or something similar
geoffrymichael
@geoffrymichael
Mar 16 2018 22:15
@mbosnjak01 Oops, those line comments are from copying the code from a forum
Matej Bošnjak
@mbosnjak01
Mar 16 2018 22:16
I might have something similar in my pocket
I made itthis way (code) -> Preview
geoffrymichael
@geoffrymichael
Mar 16 2018 22:18
@mbosnjak01 I have been using cloud 9 so no codepen. Can just make the workspace public and share a link to it. I find codepen sluggish but of course now I realize why it is good to be able to share code easily when asking questions
Matej Bošnjak
@mbosnjak01
Mar 16 2018 22:20
It's always good to show full code in codepen or something similar so we can test it, or see if you're missing some key elements
geoffrymichael
@geoffrymichael
Mar 16 2018 22:23
@mbosnjak01 okay. I may transfer it over to codepen or throw it into a github pages and come back and ask it again. Your code is exactly what I want to happen though so I will take a look. I am actually trying to implement it for the twitch app to emulate the example where there are buttons for showing all, online, etc.
Matej Bošnjak
@mbosnjak01
Mar 16 2018 22:23
That part of the code is in the first link I provided, on the bottom
so you can just add more stuff there like changing colors and stuff :)
it's very simple ... when you click #button1, do code stuff and also target #button2 and make changes on it
geoffrymichael
@geoffrymichael
Mar 16 2018 22:28
@mbosnjak01 I think I am getting it. The disabled attribute is being added and removed ?
Matej Bošnjak
@mbosnjak01
Mar 16 2018 22:28
Yes
so, when you click one button, it get's disabled while other button becomes active
or something else becomes disabled and active, you get the point :)
geoffrymichael
@geoffrymichael
Mar 16 2018 22:30
@mbosnjak01 I do I do. I 'll give it a whirl. Thanks for your help.
CamperBot
@camperbot
Mar 16 2018 22:30
geoffrymichael sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 249 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Matej Bošnjak
@mbosnjak01
Mar 16 2018 22:30
but instead of just copy-pasting stuff from forums or other sources, I suggest you to see what exactly do you need to do with buttons ... if you need to change a color on click, search for that particular piece of documentation, read it and implement it after you know how it works. For example, you need to change a color of a button on a click of another button -> you have .css method in jQuery. target an element like $("#button1) and then do .css("background-color", "red"); just for an example
but if you have more css stuff to do with a button, just create classes inside .css file with desired attributes and do .addClass or .removeClass methods
geoffrymichael
@geoffrymichael
Mar 16 2018 22:32
@mbosnjak01 Yeah i I had a simple single button working that just used toggleClass, but wanted to split it into two buttons just to try. And I got that working, but it was just the deactivating and activating the buttons I could not figure out.
salwame
@salwame
Mar 16 2018 22:38
somebody please help!..my pen https://codepen.io/salwame/pen/mxrmKo
i just want to just apply styles on a <section id="quote"> but when i do my styles get applied up to the <section class="work">..why?
Joab Torreys
@joabtorreys
Mar 16 2018 23:09
hey guys am working on the twitch tv challenge and i can't seem to get the request to the server to work anyone has an example they could show to me ?
Stephen James
@sjames1958gm
Mar 16 2018 23:59
@joabtorreys Are you using the FCC provided twitch URLs?
@HansGrubername :+1: