These are chat archives for FreeCodeCamp/HelpFrontEnd

15th
Mar 2018
Unknown
@Unknownhezipaz
Mar 15 2018 00:28
my header tag is working but the echo is not showing

if(isset($_POST['register'])){

if (!empty($User_FName) AND !empty($User_SName) AND !empty($User_Address) AND !empty($User_Postcode) AND !empty($User_telNo) AND !empty($User_Email) AND !empty($User_Password) AND !empty($User_confirmPassword))
{
    header('Location:reg.php');

exit();
echo"success";

}else{


    echo "Please fill in all fields";




}

header('Location:Reg.php');
exit();

}

if(isset($_POST['register'])){

if (!empty($User_FName) AND !empty($User_SName) AND !empty($User_Address) AND !empty($User_Postcode) AND !empty($User_telNo) AND !empty($User_Email) AND !empty($User_Password) AND !empty($User_confirmPassword))
{
header('Location:Reg.php');
exit();
echo"success";

}else{

echo "Please fill in all fields";

}
header('Location:Reg.php');
exit();
}

_
my header works but echo does not show

Keggatron
@Keggatron
Mar 15 2018 00:42
Hey guys, I'm having some issues with my redux application. I'm trying to create a pizza order/delivery app. I had initially set it up so that it used a Wizard form style of redux-form. However I noticed that peopple wouldn't be able to order more than one pizza. So i refactored one of my wizard form pages to be a fieldArray form that way I would be able to add extra pizzas. Anyway things have somewhat worked out. I just have an issue with the toppings component. I have it set it up so that it renders in a separate component then it's called from wizard form container. Now with the fieldArray form, I'm trying to get it so that each pizza's toppings are included in the pizza array. However the way it's working now, the toppings array comes over separately as it did before. Any help would be appreciated. Code to follow:
Here's the field array form code
import React, { Component } from 'react';
import validate from '../validate';
import { Field, FieldArray, reduxForm } from 'redux-form';

import Toppings from '../components/Toppings';
import SpecialtyPizzas from '../components/Specialty';

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div>
      <input type={type} {...input} />
      <label>{label}</label>
      {touched && error && <span>{error}</span>}
    </div>
  )

const renderPizzas = ({ fields, meta: { touched, error, submitFailed } }) => (
    <ul>
      <li>
        <button type="button" onClick={() => fields.push({})}> Add Pizza </button>
        {(touched || submitFailed) && error && <span>{error}</span>}
      </li>
      {fields.map((pizza, index) => (
        <li key={index}>
          <button 
            type="button"
            title="Remove Pizza"
            onClick={() => fields.remove(index)}
          >Remove</button>

          <h4>Pizza #{index + 1}</h4>
          <Field name={`${pizza}.size`} type="radio" value="small" label="Small" component={renderField} />
          <Field name={`${pizza}.size`} type="radio" value="medium" label="Medium" component={renderField} />
          <Field name={`${pizza}.size`} type="radio" value="Large" label="Large" component={renderField} />
          <Field name={`${pizza}.toppings`} component={Toppings} /> 

        </li>
      ))}
    </ul>
  )

const OrderChoices = props => {
  const { handleSubmit, pristine, reset, submitting, previousPage } = props;
  return (
    <form onSubmit={handleSubmit}>
      <label>Select the type of order to make:</label>
      <div>
        <Field name="order" component={renderField} type="radio" value='delivery' label="Delivery" />
        <Field name="order" component={renderField} type="radio" value='takeout' label="Takeout" />
      </div>
      <FieldArray name="pizzas" component={renderPizzas} />
      <div>
        <button type="button" className="previous" onClick={previousPage}>
          Previous
        </button>
        <button type="submit" className="next">Next</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'wizard',
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true,
  validate
})(
  OrderChoices
);
Here is the Toppings component:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { fetchToppings } from '../actions/index';
import validate from '../validate';
import _ from 'lodash';
import CheckBoxGroup from '../checkBoxGroup';


class Toppings extends Component {
   constructor(props) {
      super(props);
  }

  componentDidMount() {
    this.props.fetchToppings();
  }



  render() {
    let options = [];
    console.log(options)
    _.map(this.props.toppings, topping=> {
      return options.push({label:topping.toppingName , value:topping.toppingName});
      });

    return (
      <div>
        <form>
          <CheckBoxGroup options={options} name="toppings" />
        </form>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
      toppings: state.toppings
  };
}

export default 
    connect(mapStateToProps, { fetchToppings })(Toppings)
DarkxPunk
@DarkxPunk
Mar 15 2018 05:29
Howdy whomever is awake
Supra01
@Supra01
Mar 15 2018 06:04
Hello I hope everyone is doing well. I'm working on the twitch API project and I need some help adding a second callback function to my getData function. I know I can use promises for this but I want to better understand callbacks before I move on.
~~``
var demo = document.getElementById('demo');
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var urlStreams = "https://wind-bow.glitch.me/twitch-api/streams/";
var urlUsers = "https://wind-bow.glitch.me/twitch-api/users/";
var channelName = [];
var notOnline = [];

/* Make Get Requests */
getData = function (url, callback) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(this.responseText);
      callback(response);
/* I would Like to put another callback here that is called after the first callback without using promises */
    }
  };
  xhttp.open('GET', url, true);
  xhttp.send();
}


/* Use channels array to make URLs to get streaming data */
function getStreams() {
  var stream = '';
  for (var i = 0; i < channels.length; i++) {
    stream = urlStreams + channels[i];
    getData(stream, checkOnline);
  }

}
/* Use URLs to get which users that are online */
function checkOnline(data) {
  if (data.stream !== null) {
    demo.innerHTML += '<h3>' + data.stream.channel.display_name + '</h3><div><img src="' + data.stream.channel.logo + '"><p>Online</p><p>' + data.stream.channel.status + '</p>';
  }
}

getStreams();

/* If the user is online then knock that user's channel off the channels array*/
/* With new array make URLs to get offline user's data */
/* Display data on the page */
/* Problems: Data is asnyc = can control how the data comes in */
Darren
@DarrenfJ
Mar 15 2018 06:14
hey @coderNewby thanks back atcha for keeping me on my toes
CamperBot
@camperbot
Mar 15 2018 06:14
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
:cookie: 83 | @codernewby |http://www.freecodecamp.org/codernewby
Heathercoraje
@Heathercoraje
Mar 15 2018 06:14
Hey all.
Can anyone help me out with this confusion?
const todoObj = {
    today: [
        {
            id: 0,
            todo: 'drink a cafeLatte',
            isDone: false
        }
    ],
    tonight: [
        {
            id: 0,
            todo: '4miles run',
            inDone: false
        }
    ],
    dummy0: [],
    dummy1: []
};

const newObj = Object.assign(todoObj);
const array = ['today', 'tonight'];

function isIn(newObj) {
    for (var key in newObj) {
        console.log(key);
        if (array.indexOf(key) < 0) {
            console.log('deleting', key);
            delete newObj.key; // this does not work
            delete newObj[key]; // this works
            // delete newObj.today; // but why this works???
        }
        continue;
    }
    console.log(newObj);
}
isIn(newObj);
coderNewby
@coderNewby
Mar 15 2018 06:15
no thanks to you @DarrenfJ for all the help :D
CamperBot
@camperbot
Mar 15 2018 06:15
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2424 | @darrenfj |http://www.freecodecamp.org/darrenfj
Sweet Coding :)
@SweetCodingInc
Mar 15 2018 06:17
@Heathercoraje Run 4 miles and then drink cafeLatte... net effect 0 :P
what's the confusion here?
I see, you added you question in the comments.
the key in your for loop contains the name of the actual key
there is not such property called key on your newObj
newObj.key will work if your new object has a property called key like
const newObj = {
  //rest of the properties
  key: 'some key value'
}
console.log(newObj.key); // some key value
console.log(newObj['key']); // some key value
const keyName = 'key';
console.log(newObj[keyName]); // some key value

console.log(newObj.keyName); // error: there is no such property with a name keyName in newObj
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 15 2018 06:23
Is this JS?
Sweet Coding :)
@SweetCodingInc
Mar 15 2018 06:24
Yes
Markus Kiili
@Masd925
Mar 15 2018 06:27
@Heathercoraje In other words, .key looks for property key "key", and [key] looks for property key stored in variable key.
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 15 2018 06:29
cool
Heathercoraje
@Heathercoraje
Mar 15 2018 06:39
@Masd925 as in looking for a property a string 'key'
@Masd925 @SweetCodingInc Thanks friends!
CamperBot
@camperbot
Mar 15 2018 06:39
:cookie: 374 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
heathercoraje sends brownie points to @masd925 and @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:star2: 4729 | @masd925 |http://www.freecodecamp.org/masd925
Heathercoraje
@Heathercoraje
Mar 15 2018 06:40
@SweetCodingInc Oh yeah in fact net would be +200 kcal due to lots of syrup
Onyango☥Arnold
@Onyeezus__twitter
Mar 15 2018 10:34
So i need to design a newsletter to send out to emails am new to WordPress and not able to pay for a new template so I need any finished newsletter template or code to help me move smoothly
Screen Shot 0030-03-15 at 1.24.50 PM.png
Ghost
@ghost~5928d90bd73408ce4f629b9e
Mar 15 2018 12:26

can u guys tell me if im on the right place here im doing the fcc poll and im on authentication.. i am using cookie-session only since this is my first take to authentication i am using react in the front-end and express as server

this is a method on my client basically sends data to server and server validates it and return a boolean or a message if its true then i get redirected to /home if its valid

    onAuth = (e) => {
        e.preventDefault();
        const email = e.target.email.value;
        const password = e.target.password.value;
        fetch('/login', {
            method: 'POST',
            credentials: 'same-origin',
            body: JSON.stringify({email: email , password: password}),
            headers: {"Content-Type": "application/json"}
        }).then(res => res.json())
        .then(res => {
            if(res.authed){
                this.props.history.push("/home")
            } else {
                this.setState({
                    validate: {
                        message: res.message
                    }
                })
            }

            return res;
        }).catch(err => console.log(err));
    }

heres my server

server.post('/login', (req, res) => {
    db.collection('users').findOne({
        email: req.body.email
    }, (err, succ) => {
        if(err) throw err;
        if(succ && succ.email == req.body.email && succ.password == req.body.password){
            req.session.id = succ._id;
            res.json({
                authed: true
            })
        } else {
            res.json({
                message: 'Invalid Email or Password'
            })
        }
    })
})

i certainly dont want to use jwt/passport yet and want to do this without it but do you think am i doing it right

Peter N
@pmnord
Mar 15 2018 12:59
I'm on the very first front-end development project. I noticed that the sample view, and the lessons about bootstrap, have been using Bootstrap 3.3.7. Should I be learning Bootstrap 4 instead and teaching myself to use Flexbox?
Ken Haduch
@khaduch
Mar 15 2018 13:24
@pmnord - I think that you can do either one, Bootstrap 3 is probably more pervasive if you would expect to be supporting an older site, but Bootstrap 4 is now officially released. There are significant differences between the two. Flexbox is good to know, too, it simplifies some tasks that used to be harder to achieve. But again, you might support a site that was using older techniques, so it's good to understand those, too. It might be best to spend your time on the newest techniques, though, and just watch for the bootstrap differences so you understand them... there is a migration document for going from bootstrap 3 to 4, it highlights the important differences. And there are many resources for learning flexbox.
I think that the freeCodeCamp beta site has lessons on flexbox, and I understand that bootstrap 4 lessons are either there or in beta testing themselves?
Peter N
@pmnord
Mar 15 2018 13:32
@khaduch Thanks! Looks like the beta site has a much more up to date curriculum and I'll probably just switch over to that course.
CamperBot
@camperbot
Mar 15 2018 13:32
pmnord sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3796 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Mar 15 2018 13:35
@pmnord - I haven't done anything significant on the beta site other than look at some lessons when folks ask for help. It does look like a lot of great work went into it!
DarkxPunk
@DarkxPunk
Mar 15 2018 14:05
Beta site?
Supra01
@Supra01
Mar 15 2018 14:18
DarkxPunk
@DarkxPunk
Mar 15 2018 14:19
XD doesn’t even work on mobile XD
Frosty427
@Frosty427
Mar 15 2018 14:30
image.png
im using a container how do i get it to take up all of the space?
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 15 2018 14:31
Have you learnt bootstrap yet?
NikolaNbgd
@NikolaNbgd
Mar 15 2018 14:47
Hello folks. I'm trying to create an animation on scroll, here is the code https://codepen.io/anon/pen/yvmRjJ?editors=1111, so my idea is to turn that damn circle on scroll and each section has own angle and color of that circle. That error has been torturing me for days. Any help? Advice? Many thanks!
Murage
@ErickMurage
Mar 15 2018 14:48

Hi all, I'm having trouble with this bit of code. I don't see anything wrong with it, but the image is showing up on Chrome, but not on Opera and Firefox.

<div class="main-image">
      <img src="https://i.imgur.com/01uCBIr.jpg" class="img-fluid" alt="Photo of Dedan Kimathi during his trial">
    </div>

Here's a link to the entire pen
https://codepen.io/egarum/full/YaqJEb/

NikolaNbgd
@NikolaNbgd
Mar 15 2018 14:49
@ErickMurage remove 's' from 'https'
Murage
@ErickMurage
Mar 15 2018 14:52
@NikolaNbgd I just tried that and it did not work.
Frosty427
@Frosty427
Mar 15 2018 14:53
image.png
how do i move recent works to the top of the cards?
NikolaNbgd
@NikolaNbgd
Mar 15 2018 14:54
@Frosty427 send code
Murage
@ErickMurage
Mar 15 2018 14:58
@NikolaNbgd here's the pen without the 's' https://codepen.io/egarum/full/YaqJEb/
German Gamboa Gonzalez
@germangamboa95
Mar 15 2018 14:58
I have an issue. When I try to load all the images in my local server they work fine but on codepen I get an error
Brandon Blackwell
@Radlerz1
Mar 15 2018 14:58
@ErickMurage just try using a different img or find a different location to the img
I the img doesn't show for me on chrome either
Murage
@ErickMurage
Mar 15 2018 15:01
@Radlerz1 I have already tried a different location. Let me try a different image.
NikolaNbgd
@NikolaNbgd
Mar 15 2018 15:03
@ErickMurage I can see the image
Brandon Blackwell
@Radlerz1
Mar 15 2018 15:04
yep works for me too now. Must of been just the img
Murage
@ErickMurage
Mar 15 2018 15:04
@NikolaNbgd @Radlerz1 I just tried with a new image and now it works. What on earth could be causing the other image not to show?
h1tag
@h1tag
Mar 15 2018 15:05
@germangamboa95 after a bit of googling, it seems this is your problem
I basically just googled the error message
Brandon Blackwell
@Radlerz1
Mar 15 2018 15:05
or possibly something to do with codepen and the src of the img. I honestly have no clue
Murage
@ErickMurage
Mar 15 2018 15:06
Thanks for your responses @NikolaNbgd and @Radlerz1 !
CamperBot
@camperbot
Mar 15 2018 15:06
erickmurage sends brownie points to @nikolanbgd and @radlerz1 :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 331 | @radlerz1 |http://www.freecodecamp.org/radlerz1
niniyzni
@niniyzni
Mar 15 2018 15:08

Hi,

  • I am new to js.
  • I am trying to fetch the values from local storage.
  • I am getting an error at this line
    var users = JSON.parse(localStorage.getItem("someVarName") || "[]");
  • can you tell me how to fix it.
  • providing my error below.

http://jsfiddle.net/65k4s300/


Uncaught SyntaxError: Unexpected token M in JSON at position 0
    at JSON.parse (<anonymous>)
    at HTMLInputElement.<anonymous> ((index):145)
    at HTMLInputElement.dispatch (VM6720 jquery.min.js:3)
    at HTMLInputElement.v.handle (VM6720 jquery.min.js:3)
  • providing my code below.

 var user = {
       id: Math.floor(Math.random() * 1000000)
     };

     //var users = JSON.parse(localStorage.getItem("users") || "[]");
     var users = JSON.parse(localStorage.getItem("someVarName") || "[]");

     users.push(user);
     console.log("Added user #" + user.id);

     console.log("# of users: " + users.length);

     users.forEach(function(user, index){
         console.log("[" + index + "]" + user.id);

     });

     // Saving
      localStorage.setItem("users", JSON.stringify(users));
Brandon Blackwell
@Radlerz1
Mar 15 2018 15:10
what error are you getting?
niniyzni
@niniyzni
Mar 15 2018 15:36
@Radlerz1 Uncaught SyntaxError: Unexpected token M in JSON at position 0
Amal Shukla
@amal1994
Mar 15 2018 15:38
@niniyzni - This is a very common issue.
please check your json object
you can cross check the issue here - https://stackoverflow.com/questions/14432165/uncaught-syntaxerror-unexpected-token-with-json-parse
niniyzni
@niniyzni
Mar 15 2018 15:44
@amal1994 hey I am getting another error now ----> Uncaught TypeError: users.push is not a function ....any idea http://jsfiddle.net/h54esp3d/
Amal Shukla
@amal1994
Mar 15 2018 15:49
@niniyzni - i am not able to see any error?
Brandon Blackwell
@Radlerz1
Mar 15 2018 15:54
 var user = {
       id: Math.floor(Math.random() * 1000000)
     };

   var array  = [];

     array.push(user);

     console.log("# of users: " + array.length);

     array.forEach(function(user, index){
         console.log("[" + index + "]" + array.id);

     });

     // Saving
      localStorage.setItem("users", JSON.stringify(array));

//in order to access the users in local storage use
 var users = JSON.parse(localStorage.getItem("users"));
Brandon Blackwell
@Radlerz1
Mar 15 2018 16:02

or suppose if you wanted to use your old array in localstroage

     var users = JSON.parse(localStorage.getItem("users")) || [];

     users.push(user);

not sure if this helps or you are using someVarName to actually access the users array in local storage. If you are that's your problem.

Russ Wilkie
@RussWilkie
Mar 15 2018 16:12
So I have a general question. When it comes to things like: margin, padding, width, height I found giving that using a percentage has always been problematic. It usually results in adding a lot of unneeded space when changing the browser's window size or just recently I found that setting an image's width to 50% shrunk the image, but gave all the text right to right of it the same amount space as if the image was at 100%. I have just been changing these things by exact pixels now, but I wonder, when is the percentage ever ideal to have when adjusting the styling?
niniyzni
@niniyzni
Mar 15 2018 16:23
@amal1994 hey sorry I gave you wrong fiddle...you should enter some value and hit click me button http://jsfiddle.net/mv90kdxy/
Brandon Blackwell
@Radlerz1
Mar 15 2018 16:25
Percentages are responsive on mobile platforms. Using px has a fixed size. For example you have an img at width 50% this will take up 50% of the screen width or div container. This allows the img to shrink on smaller screens as it takes up 50% width of the screen size. If you have img 250px this will always be 250px not matter what device you are using. So to have a more responsive design on mobile or tablets you would mostly use percentages.
@RussWilkie
depending on your use case either or could be ideal for styling
Rodrigo De Carvalho
@decarvalhorodrigo
Mar 15 2018 17:24
Hi Folks,
I finished the HTML+CSS here though I feel I need to dive deeper before passing to the JS part.
Would have recommendations, please?
Thanks in advance(:
Clark Weckmann
@clarkhacks
Mar 15 2018 17:35
@decarvalhorodrigo What do you need to do with the javascript?
if you scroll down to recent works
youll see that the recent works is to the left of the cards and not on the top
which is what im tryin to achieve
Clark Weckmann
@clarkhacks
Mar 15 2018 17:44
@Frosty427 so to be clear you want the words to left not above?
Frosty427
@Frosty427
Mar 15 2018 17:45
no i want the words on the top not to the left
@clarkhacks
scroll down to the pink part of the page
Clark Weckmann
@clarkhacks
Mar 15 2018 17:47
@Frosty427 change container-fluid to container
Frosty427
@Frosty427
Mar 15 2018 17:47
@clarkhacks no that will mess it up
Keggatron
@Keggatron
Mar 15 2018 17:47
Can anyone help me with getting the values out of a redux-form
I have this so far:
const FetchValues = connect(state => ({
    values: getFormValues('wizard')(state),
  }))(({ values }) => {
    const orderValues = values
    return orderValues
  });
I can't call that from anywhere else though. I'm just looking for a way to set the form values to an object so that I can actually submit them
sorry I mean I can't call orderValues and when I log FetchValues I don't actually get what I want
Clark Weckmann
@clarkhacks
Mar 15 2018 17:48
@Frosty427 You could try using the bootstrap grid to place the two cards in a 6x6 and the text in a row above them.
Frosty427
@Frosty427
Mar 15 2018 17:49
@clarkhacks thats a good idead
image.png
:shit:
Clark Weckmann
@clarkhacks
Mar 15 2018 17:53
div.container-fluid.mt-5.pt-5 {
  display: flex;  
}
remove this and the layout should fly back how you want it to be
@Frosty427
display: flex is laying the divs in a horizontal pattern rather than the normal vertical.
Frosty427
@Frosty427
Mar 15 2018 17:55
@clarkhacks well now it solved one problem and brought up another
but i think i have an idea
Gulsvi
@gulsvi
Mar 15 2018 18:15
@clarkhacks @Frosty427 If you place your cards in a row, they will have display: flex https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L596
This is the css for the row class in Bootstrap 4:
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
niniyzni
@niniyzni
Mar 15 2018 18:17

Hi,

  • I am new to js.
  • when I select clear prefrence it should delete particular value from the drop down menu.
  • so I used clear method but its not deleting the value localStorage.clear();
  • providing my code below.
  • can you tell me how to fix it.

clear prefrence
http://jsfiddle.net/mpdoq1zf/


$("#clearPrefrence").click(function() {
     alert("clearPrefrence");
     localStorage.clear();

   });
Gulsvi
@gulsvi
Mar 15 2018 18:20
@Frosty427 Give this HTML a try, it uses the grid system -> container -> row -> col:
  <div class="container-fluid" style="background-color: pink">
    <div class="row">
      <div class="col">
        <h1 class="mt-4 mb-2 text-center text-white text-capitalize">RECENT WORKS</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3 offset-md-2 offset-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>
  </div>
Frosty427
@Frosty427
Mar 15 2018 18:21
@gulsvi ok thanks
CamperBot
@camperbot
Mar 15 2018 18:21
frosty427 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2674 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Mar 15 2018 18:22
@niniyzni I don't have a lot of experience with jsfiddle, but there's an error that access to localStorage is denied. Maybe a security limitation? I will try in codepen and see if I get the same
Daniel Watson
@itsdanwatson
Mar 15 2018 18:25
Hello peeps, going through the blackjack challenge
Argh nm
It's still not working, but in a new way now that I havn't properly looked at
return console.log (count) + " " + "Hold" ; } else if (count >= 1) { return console.log (count) + " " + "Bet"; }
This was giving the error "Undefined Hold"
Which is because I didn't need to use console.log at all!
niniyzni
@niniyzni
Mar 15 2018 18:32
@gulsvi hey any luck?
Gulsvi
@gulsvi
Mar 15 2018 18:34
@niniyzni It looks like you're using a 3rd party library that can only be served over the HTTP location it is currently in. Codepen doesn't let us run external resources over HTTP (only HTTPS)
The access denied setting I was getting was because of 3rd party cookie settings in chrome
@niniyzni Maybe the cookie issue is what you're hitting? After clearing that up, your click function successfully clears localStorage
Gulsvi
@gulsvi
Mar 15 2018 18:39
  1. Select "Saab" from the dropdown
  2. Click "Click Me"
    (local storage = {someVarName: "Mickey", length: 1})
  3. Click "Clear prefrence" [sic]
    local storage is now empty {length: 0}
niniyzni
@niniyzni
Mar 15 2018 18:50
@gulsvi yeah in developer tools I see the local storage value getting cleared but how to remove it from the drop down menu?
@gulsvi like how to update in ui side
Gulsvi
@gulsvi
Mar 15 2018 18:52
@niniyzni Is the clear preference link supposed to clear the last item added to the menu, or always supposed to clear "mickey"?
Or does it clear everything and set it back to a default set of values?
I'm not sure what that link is supposed to do - but I can show how to add/remove items from a list if that's the question
niniyzni
@niniyzni
Mar 15 2018 18:59
@gulsvi the selected item should be cleared
Rodrigo De Carvalho
@decarvalhorodrigo
Mar 15 2018 19:06
@clarkhacks I might have expressed myself bad. I meant I'd like to study CSS more before getting to the JS part and asked about resources :)
Amit Patel
@AmitP88
Mar 15 2018 19:10
hey guys, I'm working on the pomodoro timer and I need a little help. I'm trying to get the timer to countdown when the user clicks on the timer, but it won't work. I've checked the console and there are no relevant errors (besides the CORS error that is default to codepen)
https://codepen.io/AmitP88/pen/ZxWRmx?editors=1010
Gulsvi
@gulsvi
Mar 15 2018 19:12
@niniyzni Sorry, stepped away. To remove the currently selected option from a dropdown, you can use:
$("#cars option:selected").remove();
And to remove a specific item from localStorage, refer to the key name used. In your case, you use the key "someVarName", so:
localStorage.removeItem("someVarName");
niniyzni
@niniyzni
Mar 15 2018 19:17
@gulsvi thanks...even I googled got it
CamperBot
@camperbot
Mar 15 2018 19:17
niniyzni sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2675 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Mar 15 2018 19:17
@AmitP88 When you click the timer, you're only decrementing the seconds variable. You also need to update the innerHTML for the countdown element
Ian Lee
@asparism
Mar 15 2018 19:17
@AmitP88 even though the timer() function is decrementing the seconds variable, the innerHTML of the page is not being reset on each tick, so on the DOM it's not changing
Amit Patel
@AmitP88
Mar 15 2018 19:20

ok, I adjusted my code, but now it's acting weird

https://codepen.io/AmitP88/pen/ZxWRmx?editors=1010

when the countdown seconds go down to zero, the seconds go up to 90 instead of 59 like in my if statement
and, it seems to be counting down faster than 1 second
Gulsvi
@gulsvi
Mar 15 2018 19:24
@AmitP88 You'll need to devise a way to convert minutes + seconds into seconds and then convert that into a formatted time.
For example: 24:20 = 1460 seconds
Involves some math, dividing by 60
getting the remainder, etc
Amit Patel
@AmitP88
Mar 15 2018 19:26
@gulsvi I see. damn, I thought this was simpler, but yeah, I can see that. ok, i'll see if I can do that. thank you
CamperBot
@camperbot
Mar 15 2018 19:26
amitp88 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2676 | @gulsvi |http://www.freecodecamp.org/gulsvi
Ian Lee
@asparism
Mar 15 2018 19:27
@AmitP88 try to console.log(seconds) at the end of your timer() function
Gulsvi
@gulsvi
Mar 15 2018 19:27
@AmitP88 Also, you may be seeing it count down more quickly because if you click on the time a second (or third) time, it will fire off your setInterval again. A flag to determine if the clock is running will also be needed
niniyzni
@niniyzni
Mar 15 2018 19:27

Hi,

  • I am new to js.
  • when i add this line $("#cars option:selected").remove(); I getting unknown text in the dropdown
  • can you tell me how to fix it.
  • providing my code below.

http://jsfiddle.net/b1uajk38/

$("#clearPrefrence").click(function() {
     alert("clearPrefrence");
     localStorage.clear();
     //$("#cars option[value=volvo]").remove();
     $("#cars option:selected").remove();

   });
Amit Patel
@AmitP88
Mar 15 2018 19:29
@asparism the console.log seconds is 1 second faster than in the div
@gulsvi ah ok, so i'll have to make a clearInterval function for a second click, im guessing
Ian Lee
@asparism
Mar 15 2018 19:29
@niniyzni on line 3 of your code, you are settting the option text to 'unknown' if 'someVarName' isn't found in local storage
@AmitP88 i see something weird happen when the seconds in the console goes from 10 to 9
Gulsvi
@gulsvi
Mar 15 2018 19:30
@AmitP88 You'll want to check if the clock is running when you click it - if so, return; early and don't run your click function
Amit Patel
@AmitP88
Mar 15 2018 19:32
@asparism oh yeah, I see it too. it goes from 9 to 89. weird
I think I need to redo my whole approach and do the math like @gulsvi said.
I'll clear my code and start again. thanks @gulsvi @asparism for your help :)
CamperBot
@camperbot
Mar 15 2018 19:33
amitp88 sends brownie points to @gulsvi and @asparism :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 341 | @asparism |http://www.freecodecamp.org/asparism
Stephen James
@sjames1958gm
Mar 15 2018 19:33
@AmitP88 What are you trying to do here? You are assigning to a parameter which has no impact outside the function.
function myFunction(interval){
  interval = setInterval(timer, 1000);
}
Amit Patel
@AmitP88
Mar 15 2018 19:34
@sjames1958gm now that I look at it, you're right. I was following some documentation example on setInterval
Stephen James
@sjames1958gm
Mar 15 2018 19:35
@AmitP88
It also look like you are converting seconds to a string when seconds < 10
Try and keep your counting variables and your display variables separate.
Amit Patel
@AmitP88
Mar 15 2018 19:36
@sjames1958gm I see. so an if statement to control one variable based on another variable type situation?
Stephen James
@sjames1958gm
Mar 15 2018 19:36
seconds = seconds + "0" this converts seconds to a string
And I would think it would be
dispSecond = "0" + seconds; (put the extra 0 before the number)
Don't add the "0" until you are putting it on the screen - not when you are manipulating the values
So you have
10
9 -> which becomes "90"
89
Amit Patel
@AmitP88
Mar 15 2018 19:39
oh
hmmm, ok, I know what to do now. I'll first do the math setup for converting between minutes and seconds, then I'll do the "0" + seconds in an if statement only for the display
@sjames1958gm thank you :)
CamperBot
@camperbot
Mar 15 2018 19:41
amitp88 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9100 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 15 2018 19:41
@AmitP88 :+1:
And what I did was to only store seconds and then you only need minutes when you are displaying.
Then no need to rollover seconds to minutes.
Amit Patel
@AmitP88
Mar 15 2018 19:42
@sjames1958gm so we don't have to display it like this? 25:00
Frosty427
@Frosty427
Mar 15 2018 19:43
@Frosty427
image.png
how can i move these cards to the center?
Gulsvi
@gulsvi
Mar 15 2018 19:45
@Frosty427 use mx-auto on the parent row or use an offset on the first column for the first card
Frosty427
@Frosty427
Mar 15 2018 19:53
@gulsvi didnt work
Tiago Correia
@tiagocorreiaalmeida
Mar 15 2018 19:58
are you using bootstrap @Frosty427 ?
Frosty427
@Frosty427
Mar 15 2018 19:58
@tiagocorreiaalmeida yes
4
Tiago Correia
@tiagocorreiaalmeida
Mar 15 2018 19:58
are you using a container and a row?
can I see the html?
Tiago Correia
@tiagocorreiaalmeida
Mar 15 2018 20:01
remove the mx class
you are using bootstrap 4
also search on their docs there's a class that does this
justify-content: center;
or you can do it directly on the code
in this case place this on the row
niniyzni
@niniyzni
Mar 15 2018 20:02

Hi,

  • I am new to js.
  • when i add this line $("#cars option:selected").remove(); I getting unknown text in the dropdown
  • can you tell me how to fix it.
  • providing my code below.

http://jsfiddle.net/b1uajk38/

$("#clearPrefrence").click(function() {
     alert("clearPrefrence");
     localStorage.clear();
     //$("#cars option[value=volvo]").remove();
     $("#cars option:selected").remove();

   });
Gulsvi
@gulsvi
Mar 15 2018 20:03
@Frosty427 How do you want your cards to behave on Mobile, Tablet, Laptop, Desktop?
Frosty427
@Frosty427
Mar 15 2018 20:03
give me one second
Gulsvi
@gulsvi
Mar 15 2018 20:03
And, how many cards do you expect to have? Important to figure this stuff out when using the grid system - that way you don't have to modify the classes used every time you add a new card
Frosty427
@Frosty427
Mar 15 2018 20:04
@gulsvi 3
screenshot incoming
image.png
Gulsvi
@gulsvi
Mar 15 2018 20:06
@Frosty427 3 cards per row - on mobile/tablet/laptop/desktop?
Brad
@bradtaniguchi
Mar 15 2018 20:07
@niniyzni Your getting unknown cuse you have this code:
dropdown.options = function(data) {
     var self = this;
     var newOptions = "";  //create one objec to save new options
     $.each(data, function(ix, val) {
       newOptions += '<option value="'+val+'">'+val+'</option>';
       //data.push(option);
     });
     self.html(newOptions);
I'm not sure what your doing there, or what this code does, but the val's are what makes you see "unknown"
niniyzni
@niniyzni
Mar 15 2018 20:18
@bradtaniguchi hey i need to update drop down when ever I enter something in the text box
Stephen James
@sjames1958gm
Mar 15 2018 21:47
@AmitP88 You can store it as seconds and then just before you display it then figure out the display minutes and seconds
Amit Patel
@AmitP88
Mar 15 2018 21:49

@sjames1958gm I've been working on it and I'm getting my countdown to work (I'm only using 25 mins converted to seconds for now as 1500 seconds), but now i'm trying to get "time's up" to display in the countdown div when the seconds countdown to 0

https://codepen.io/AmitP88/pen/ZxWRmx?editors=0010

Francis-Walsingham
@Francis-Walsingham
Mar 15 2018 21:50
Hi everybody - I´m new to fCC (about 4 days) and I`m working on my portfolio page. Could you guys help me out with a thing I dont understand? :)
German Gamboa Gonzalez
@germangamboa95
Mar 15 2018 21:50
@Francis-Walsingham what do you need help with?
Stephen James
@sjames1958gm
Mar 15 2018 21:51
@AmitP88 That test is only going to happen on click, you need to have the test inside the timer function
Oops, never mind on that you are using second-- (my bad)
Francis-Walsingham
@Francis-Walsingham
Mar 15 2018 21:53
This is my start: https://codepen.io/Duftbaum/pen/qoZaVP?editors=1100
When I move to small I have to problem that the background is too small and it is not „growing“. I hope you guys understand what I mean - just make it small ;)
Amit Patel
@AmitP88
Mar 15 2018 21:54
@sjames1958gm I tried placing the if statement inside the setInterval function that's inside timer, but it still doesn't work :(
Francis-Walsingham
@Francis-Walsingham
Mar 15 2018 21:54
the question is: Where can I fix / configurate that?
Stephen James
@sjames1958gm
Mar 15 2018 21:56
@AmitP88 compare seconds to 0 not innerHTML - as one is a string and the other is a number and you are using ===
@AmitP88 Use a smaller number and a faster timer while you are testing, or you will be waiting a long time :)
Amit Patel
@AmitP88
Mar 15 2018 21:56
@sjames1958gm for sure, i'm finding that out the hard way lol
Stephen James
@sjames1958gm
Mar 15 2018 21:57
@AmitP88 ;)
Amit Patel
@AmitP88
Mar 15 2018 21:59

@sjames1958gm ok, I've simplified things a bit. however, I'm trying to get the timer to simply stop when seconds reach 0, but it's not working. I thought I was supposed to use clearInterval

https://codepen.io/AmitP88/pen/ZxWRmx?editors=0010

Stephen James
@sjames1958gm
Mar 15 2018 22:00
@AmitP88 if (seconds === 0) has to be in the same function as seconds--
Amit Patel
@AmitP88
Mar 15 2018 22:01
@sjames1958gm thanks! I got it to work :)
CamperBot
@camperbot
Mar 15 2018 22:01
amitp88 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9101 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 15 2018 22:01
@AmitP88 :checkered_flag:
Amit Patel
@AmitP88
Mar 15 2018 22:07
@sjames1958gm hey, I noticed that when the timer runs out and is on zero, on a second click, it will go -1 then stop, -2 then stop, etc. Would it be appropriate to add seconds = 0 after the clearInterval call?
I noticed that it works and that on second and third clicks after timer runs out that it remains zero, but I'm wondering if this will cause issues later on
Stephen James
@sjames1958gm
Mar 15 2018 22:09
@AmitP88 Depends on what you want to do? Do you want the next click to reset the counter back to 1500 and count down again.
Or when it runs out it resets itself back to 1500 so they start it over again. You are moving from getting it to work to getting it to work like you want.
Amit Patel
@AmitP88
Mar 15 2018 22:10
well, I was thinking of just letting it remain at zero when it runs out. then it will only reset back to 1500 when the user clicks on the reset button
Stephen James
@sjames1958gm
Mar 15 2018 22:10
@AmitP88 Then just ignore the click if seconds is zero. You probably will need something that doesn't allow double starting as well.
Amit Patel
@AmitP88
Mar 15 2018 22:11
ah ok, so don't include seconds = 0?
var countdown = document.getElementById("countdown");
var reset = document.getElementById("reset");
var seconds = 5;
countdown.innerHTML = seconds;

var interval;

countdown.onclick = function timer(){
      interval = setInterval(function(){
      countdown.innerHTML = seconds--;
      console.log(seconds);

      if(seconds < 0){
        clearInterval(interval);
        seconds = 0;
      }
  },1000);
Francis-Walsingham
@Francis-Walsingham
Mar 15 2018 22:11
I dont wanna spam but does anybody know what I can do? (posted some minutes ago)
Amit Patel
@AmitP88
Mar 15 2018 22:12
@sjames1958gm for sure, I need something that will instead pause the interval rather than double starting
I've heard of using a boolean value stored in a variable, then using toggle to check clicks, but I'm still tinkering with that
Stephen James
@sjames1958gm
Mar 15 2018 22:20
@AmitP88 This is where you start thinking about clock states.
Possibly - Stopped, Running, Paused, Expired.
Eric Weiss
@eweiss17
Mar 15 2018 22:21
@Francis-Walsingham your images are too small?
Amit Patel
@AmitP88
Mar 15 2018 22:25
@sjames1958gm ah ok, so maybe I can have a function for each of those states?
then maybe use a switch statement to run each function based on the number of clicks (using remainder operator)?
Gulsvi
@gulsvi
Mar 15 2018 22:26
@Francis-Walsingham If you use a different size background image, it will change in size the same as your other image. For example:
background-image: url("https://s3.amazonaws.com/kajabi-storefronts-production/blogs/1097/images/9po7JLSfQ524zJcDo2iz_blog-series.jpg");
(best to use your an image host for that, like postimage.org, but it's an example)
Many responsive sites have different sized background images for mobile/tablet/laptop/desktop
Stephen James
@sjames1958gm
Mar 15 2018 22:52
@AmitP88 Using a remainder might work, but might be a bit confusing. Maybe just store a state variable.
You could have constants defined for each state.
const STOPPED = 1;
const STARTED = 2;
and so on.
Then advance a state variable through these states using a switch statement in your click handler
Amit Patel
@AmitP88
Mar 15 2018 23:17
@sjames1958gm I got it to work :)
https://codepen.io/AmitP88/pen/ZxWRmx?editors=0010
@sjames1958gm I did check out the article you sent me though. thanks for that ;)
CamperBot
@camperbot
Mar 15 2018 23:17
amitp88 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9102 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Kingsley
@Kingwindie
Mar 15 2018 23:19
when creating a menu styled navigation how can i get the a ttribute nested inside the li to change color when i hover over the one li,and not the a text?
link text not a text
also is this an acceptable way to build a navihgation bar?
```
<div class="navBar">

    <li><a href="">One</a></li>
    <li><a href="">One</a></li>
    <li><a href="">One</a></li>
    <li><a href="">One</a></li>
    <li><a href="">One</a></li>
    <li><a href="">Six</a></li>

</div>
body{
  margin:0;
  padding:0;
}

.navBar{
  background-color:teal;
  display:grid;
  grid-template-rows:repeat(7,1fr);
  grid-template-columns:1fr;
  width:220px;

}

li{
  list-style-type:none;
  margin:3px 0px;
  padding:0px 5px;
  text-align:center;
  width:100%;
  height:50px;
}

a{
  text-align:center;
 text-decoration:none;
  font-size:22px;
  color:white;
}

li:hover{
  color:teal;
  background-color:white;
}

a:hover{
  color:teal;
}
Stephen James
@sjames1958gm
Mar 15 2018 23:27
@AmitP88 :+1: state behavior is quite prevalent in S/W so it is something that would be good to have in your arsenal
Amit Patel
@AmitP88
Mar 15 2018 23:27
@sjames1958gm definitely. the more I'm digging into this project, the more I'm starting to see that lol ;)
Stephen James
@sjames1958gm
Mar 15 2018 23:28
@AmitP88 :)
Amit Patel
@AmitP88
Mar 15 2018 23:29
and now the reset function is complete :)

@sjames1958gm however, I'm noticing one thing, whenever I start the countdown there's a 1-2 second delay before it starts counting down on the div, whereas the countdown happens immediately in console. In other words, the console countdown ends up being about 1 second ahead than the div countdown

https://codepen.io/AmitP88/pen/ZxWRmx?editors=1010

Stephen James
@sjames1958gm
Mar 15 2018 23:33
@AmitP88 Tell me how count-- works?
Amit Patel
@AmitP88
Mar 15 2018 23:34
@sjames1958gm oh you mean seconds? it decrements by 1 each time the function is fired (which due to setInterval being set to 1000ms, every 1 second). so basically it goes down by second - 1 each interval
Stephen James
@sjames1958gm
Mar 15 2018 23:35
var count = 10;
console.log(count--);
what is the console output here?
Amit Patel
@AmitP88
Mar 15 2018 23:35
9
since it's not in a loop or interval
Stephen James
@sjames1958gm
Mar 15 2018 23:36
how about
var count = 10;
console.log(--count);
Amit Patel
@AmitP88
Mar 15 2018 23:36
undefined
Stephen James
@sjames1958gm
Mar 15 2018 23:37
The first one is 10 and the second one is 9
The first one is post-decrement so it will output 10 and then count will be 9
@AmitP88 change your code to --count and see what happens
seconds starts at 5
      countdown.innerHTML = seconds--; // innerHTML gets 5, then seconds is set to 4
      console.log(seconds); // seconds output is 4
Amit Patel
@AmitP88
Mar 15 2018 23:39
it works :) man, I can't believe I overlooked something as simple as that
Stephen James
@sjames1958gm
Mar 15 2018 23:39
@AmitP88 The simple things trip us up, because we don't look for them
Amit Patel
@AmitP88
Mar 15 2018 23:40
however, I still don't quite understand why the first one is 10 and second one is 9. first one is count--, so wouldn't it be count = count - 1? the --count doesn't make much sense to me, which is why I thought it would be undefined
Stephen James
@sjames1958gm
Mar 15 2018 23:43
@AmitP88
count-- and --count are both expressions, that have a value. The difference is that for count-- the value of the expression is count before the - 1 and
--count the value is count after the - 1
console.log(count--)
same as 
console.log(count)
count = count - 1;
console.log(--count)
same as 
count = count - 1;
console.log(count)
Amit Patel
@AmitP88
Mar 15 2018 23:44
that sort of makes sense. I guess it's because I'm not used to seeing --count, similar to how we use i++ in for loops
I'm definitely screenshoting that though for later study :)
Stephen James
@sjames1958gm
Mar 15 2018 23:45
@AmitP88 since i++ is by itself it doesn't matter post or pre increment
Amit Patel
@AmitP88
Mar 15 2018 23:46
for sure. looks like I still have a lot to master when it comes to the basics ;P
do pros get tripped up by this stuff too?
Stephen James
@sjames1958gm
Mar 15 2018 23:50
@AmitP88 Yes, but having seen these kinds of things a lot they detect them more quickly.
Just from you description of what was happening I kind of knew where to look and what to look for.
But, I have been doing this a long time
I can assure you that more than once a day I will call myself a "dumbass" for making a "simple" mistake
Amit Patel
@AmitP88
Mar 15 2018 23:52
lol I just need to practice more then. sometimes it's frustrating because it'll take me a while to get going. like for instance, I've been trying to figure out how to approach this project for the past few days, and I've made more progress today than I have the past 3+ days
I guess that's what they call resistance