These are chat archives for FreeCodeCamp/Help

4th
May 2018
Daniyal
@danyalasif
May 04 2018 00:04
Any Software Testers here who could help me? I am in dire need of help. :(
Kingsley
@Kingwindie
May 04 2018 01:36
please someone help me out,my form validationis not working

let name = document.getElementById("name");

let errorP = document.getElementById("nameError");

let submitBtn = document.getElementById("submitButton");

let form = document.getElementsByTagName("form")[0];

name.addEventListener("input", function (event) {
    if (name.validity.valid) {
        errorP.innerHTML = "";
        // errorP.className = "errorP";

    }
}, false);

form.addEventListener("submit", function (event) {
    if (!name.validity.valid) {
        errorP.innerHTML = "<p>The name field cannot be empty!</p>";
        // errorP.className = "errorP active";

        event.preventDefault();
    }
}, false);
 <body>

        <form novalidate>
            <label for="name">Full name:</label>
            <input type="text" name="name" id="name">
            <p id="nameError"></p>
            <label for="message">Message</label>
            <textarea name="message" id="message" cols="30" rows="10"></textarea>

            <button id="submitButton">Submit Button</button>
        </form>


        <script src="./js/main.js"></script>
Stephen James
@sjames1958gm
May 04 2018 01:53
@Kingwindie Do you need to add required to a field to make empty invalid?
Kingsley
@Kingwindie
May 04 2018 01:54
@sjames1958gm i did not want to use html
but i found a way to validate the form
Stephen James
@sjames1958gm
May 04 2018 01:55
@Kingwindie I think with novalidate and required you will still do it javascript
Kingsley
@Kingwindie
May 04 2018 01:58
oh ok,i thought required can be done with html and js is not needed
Stephen James
@sjames1958gm
May 04 2018 02:00
@Kingwindie If you want empty to show as invalid you may have to use required
Kingsley
@Kingwindie
May 04 2018 02:02
@sjames1958gm ok thanks
CamperBot
@camperbot
May 04 2018 02:02
kingwindie sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9228 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Mark Alaniz
@Digald
May 04 2018 03:27
Okay I feel silly asking this but does anyone know why my "required" input is not working? Also my type="email" is not validating the input correctly? I should mention I am using handlebars for templating
<form>
        <div class="row">
            <div class="col-md">
                <input type="text" class="form-control left-forms" id="nameInput" placeholder="Name*" required>
                <input type="email" class="form-control left-forms" id="emailInput" placeholder="Email*" required>
                <input type="text" class="form-control left-forms" id="subjectInput" placeholder="Subject*" required>
            </div>
            <div class="col-md">
                <textarea class="form-control" id="messageInput" rows="5" placeholder="Message*" required></textarea>
            </div>
        </div>
        <div class="row">
            <div class="col-md">
                <input id="submit-form" type="submit" class="btn btn-secondary float-right">
            </div>
        </div>
    </form>
Mark Alaniz
@Digald
May 04 2018 04:12
Nvm I figured out the html attributes are working just fine but jQuery is submitting on click so it just sends the information over
Fernando L. Estuesta
@champolot
May 04 2018 07:24
 </div>
    </div>
</form>
jeezcalmdown
@jeezcalmdown
May 04 2018 07:49
Yow, peeps!
aayushsingh1497
@aayushsingh1497
May 04 2018 08:15
how can i solve this? browser and text zoom should be at 100%
Nadia
@nadiaschutz
May 04 2018 08:45
does anyone know how to show data of one item on ionic 3...when the data is not an array
i get this error "ERROR Error: Cannot find a differ supporting object '100' of type 'number'. NgFor only supports binding to Iterables such as Arrays."
May Kittens Devour Your Soul
@diomed
May 04 2018 08:54
@aayushsingh1497 u cant
Akhil Kaithoju
@akhilkaithoju_twitter
May 04 2018 10:42

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>

<p>Things cats love:</p>

<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>

<p>Top 3 things cats hate:</p>

<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>

<input type="text" placeholder="https://bit.ly/fcc-relaxing-cat">

this is my code
could you find the error
where i can Set the value of placeholder attribute to "cat photo URL
Marco Oliva
@marcooliva
May 04 2018 11:01

Hi,
I am doing the https://beta.freecodecamp.org/en/challenges/redux/handle-an-action-in-the-store exercise, and i have the following code:

const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
  // change code below this line
  if(action.type == "LOGIN"){
    return state.login = true;
  }

  else{
    return state;
  }
  // change code above this line
};

const store = Redux.createStore(reducer);

const loginAction = () => {
  return {
    type: 'LOGIN'
  }
};

I don't know what is wrong, i call action.type but do not works.
Can anyone help me, please?
Thanks.

Stephen James
@sjames1958gm
May 04 2018 11:28
@marcooliva You don't modify the state in the reducer - you return a new state object
May Kittens Devour Your Soul
@diomed
May 04 2018 11:32
@akhilkaithoju_twitter did u solve it?
Marco Oliva
@marcooliva
May 04 2018 11:32

@sjames1958gm
Thanks.
To return a new state object in this case, how i can do that, please?
i modified the if() part of the code to:

if(action == "LOGIN"){
    dispatch(action);
  }

The only problem i have is that the dispatch(action) do not works.

CamperBot
@camperbot
May 04 2018 11:32
marcooliva sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9230 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
May 04 2018 11:33
@marcooliva return a new object
return { 
   login: true
};
Claudio Restifo
@Marmiz
May 04 2018 11:34
or
Object.assign({}, state, {login: true})
@marcooliva also you don't dispatch action into the reducer function. But in your app when you want your store to trigger a change.
In this case it's not needed
Marco Oliva
@marcooliva
May 04 2018 11:41

@sjames1958gm , @Marmiz

I update the code (if() part) to:

const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
  // change code below this line
  if(action == "LOGIN"){
    return {
      login: true
    };
  }

  else{
    return state;
  }
  // change code above this line
};

const store = Redux.createStore(reducer);

const loginAction = () => {
  return {
    type: 'LOGIN'
  }
};

But it gives the error: "Dispatching loginAction should update the login property in the store state to true."
https://beta.freecodecamp.org/en/challenges/redux/handle-an-action-in-the-store

Stephen James
@sjames1958gm
May 04 2018 11:42
@marcooliva action.type == "LOGIN"
Claudio Restifo
@Marmiz
May 04 2018 11:43
rember kids, all types matters. Except long long
Marco Oliva
@marcooliva
May 04 2018 11:43
@sjames1958gm , @Marmiz
It is working now with action.type .
Thanks both for the help. :-)
CamperBot
@camperbot
May 04 2018 11:43
marcooliva sends brownie points to @sjames1958gm and @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1219 | @marmiz |http://www.freecodecamp.org/marmiz
api offline
Stephen James
@sjames1958gm
May 04 2018 11:43
@marcooliva :+1:
Claudio Restifo
@Marmiz
May 04 2018 11:44
@marcooliva well, redux works by objects, action is an object so you have to access its property
Kranti Nebhwani
@darkphotonKN
May 04 2018 11:48
guys im trying to make a button appear with "display: block" when I make the page smaller in width when it was "display: none" to start with. At the same time my navigation is to disappear, so originally it's display: block but when making page smaller it goes to display: none and disappears. The nav disappears when I make the screen smaller but the display: block doesnt seem to make the button show up.
does this not work with buttons?
To clear things up:
Kranti Nebhwani
@darkphotonKN
May 04 2018 11:53

My navigation is:

display: block

My button

display: none

I get them to have the opposite with javascript when the screen is smaller, and the display: none works for the nav it does disappear, but the display: block doesn't work for the button it doesn't appear. I checked the button by putting it on display: block by default and it appears, it just doesnt appear if changing the display on the fly but its weird why it works for the nav

Kranti Nebhwani
@darkphotonKN
May 04 2018 12:34
I tried replicating the show and hiding a button using display: block and display: none on codepen and it works but still weird that it doesnt work on the first click
does anyone know why it doesnt run on the first click? if you rerun / refresh its always the first click that does nothing
after the first click it correctly shows and hides the button on every click
Akhil Kaithoju
@akhilkaithoju_twitter
May 04 2018 13:57
@diomed No
@diomed can you tell me?
Ene Catalin
@EneCatalin
May 04 2018 14:12
@akhilkaithoju_twitter cat is afk
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<input type="text" placeholder="https://bit.ly/fcc-relaxing-cat">
what did you say the problem was ?
Akhil Kaithoju
@akhilkaithoju_twitter
May 04 2018 14:20
@EneCatalin I solved just now
Ene Catalin
@EneCatalin
May 04 2018 14:21
gj
Akhil Kaithoju
@akhilkaithoju_twitter
May 04 2018 14:21
@EneCatalin Thank you for asking
CamperBot
@camperbot
May 04 2018 14:21
akhilkaithoju_twitter sends brownie points to @enecatalin :sparkles: :thumbsup: :sparkles:
:cookie: 454 | @enecatalin |http://www.freecodecamp.org/enecatalin
Kyle Holm
@thekholm80
May 04 2018 14:21
truly the emu we need
Ene Catalin
@EneCatalin
May 04 2018 14:26
OSTRICH
ostrich has about 3 days to finish an app
ostrich is effed
Kyle Holm
@thekholm80
May 04 2018 14:26
what kind of app?
Ene Catalin
@EneCatalin
May 04 2018 14:27
simple android note-taking app
Kyle Holm
@thekholm80
May 04 2018 14:27
ah
Ene Catalin
@EneCatalin
May 04 2018 14:27
problem is ostrich is retarded
Kyle Holm
@thekholm80
May 04 2018 14:27
using Java?
Ene Catalin
@EneCatalin
May 04 2018 14:28
ofc
bestest way
Kyle Holm
@thekholm80
May 04 2018 14:28
you'll get it
you're not dumb
Ene Catalin
@EneCatalin
May 04 2018 14:29
you greatly overestimate ostrich
Kyle Holm
@thekholm80
May 04 2018 14:30
umm ... you're just smart enough to figure it out?
Ene Catalin
@EneCatalin
May 04 2018 14:30
hopefully
I can never keep up with the app
soon as It gets complex I am stumped
Kyle Holm
@thekholm80
May 04 2018 14:32
i know what you mean. it's a lot to try to keep in your head all at once
too many pieces
that's pretty much how I hope it will look like
and at that pink point I want to make a + to add notes
note sure if ima be able to make them swipe deletable though
Kyle Holm
@thekholm80
May 04 2018 14:33
kind of like the google keep app
oh, wait ... now that i look at it it's not the same at all lol
Ene Catalin
@EneCatalin
May 04 2018 14:35
it won't really have the upper blue part either
Kyle Holm
@thekholm80
May 04 2018 14:36
i've been thinking about trying out react native - dunno if i want to learn java
Ene Catalin
@EneCatalin
May 04 2018 14:37
I like java
surprisingly enough
Ene Catalin
@EneCatalin
May 04 2018 14:43
thing about it is it seems to hold your hand
Aditya
@ezioda004
May 04 2018 14:47
Did someone say Java?
Ene Catalin
@EneCatalin
May 04 2018 14:49
ostrich doesn't get it
Ken Haduch
@khaduch
May 04 2018 14:52
:smile:
Ene Catalin
@EneCatalin
May 04 2018 14:58
well, I managed to add a floating button in all this time lol
it sort of just floats around
Kyle Holm
@thekholm80
May 04 2018 17:20
@ezioda004 lol that's pretty good
Ene Catalin
@EneCatalin
May 04 2018 18:09
is that manish ?
Manish Giri
@Manish-Giri
May 04 2018 18:22
@EneCatalin i haz faith in ostrich
rock java :fire:
Ene Catalin
@EneCatalin
May 04 2018 18:22
yeah java is nice
I found a library for the db
Manish Giri
@Manish-Giri
May 04 2018 18:23
which one
Ene Catalin
@EneCatalin
May 04 2018 18:28
realm
still trying to get the hang of it so I can connect it to a recyclerView
Manish Giri
@Manish-Giri
May 04 2018 18:30
cool
i like their syntax
RealmResults<Dog> pups = realm.where(Dog.class)
                               .lessThan("age", 2)
                               .findAll();
very much like the Stream API
Ene Catalin
@EneCatalin
May 04 2018 18:30
apparently it's nosql
apparently it has a special recyclerView implementation so you don't have to hit your head against the wall too many times
Manish Giri
@Manish-Giri
May 04 2018 18:34
i remember cursing so much when I would do the Layout back in the day
not to much Android Studio's emulator would take ages to fire up
Ene Catalin
@EneCatalin
May 04 2018 18:36
I am using both my phone and the emulator
I had some pretty horrible experiences with emulators
except for the one running the latest android version for some reason
public class Person extends RealmObject {
    @PrimaryKey
    private long id;
    private String name;
    private RealmList<Dog> dogs; // Declare one-to-many relationships

    // ... Generated getters and setters ...
}

// Use them like regular java objects
Dog dog = new Dog();
dog.setName("Rex");
dog.setAge(1);
XD
Manish Giri
@Manish-Giri
May 04 2018 18:38
make an object for Cat
@diomed would be happy
Ene Catalin
@EneCatalin
May 04 2018 18:39
public class Cat extends RealmObject {
    private String name;
    private int age;

    // ... Generated getters and setters ...
}
ostrich just noticed this has no PK, wtf ???
also, doesn't cat only love php/vue ?
Manish Giri
@Manish-Giri
May 04 2018 18:42
maybe the ID is autogenerated at the DB end, and incremented as you insert records
like in SQL
Ene Catalin
@EneCatalin
May 04 2018 18:44
do nosql dbs even need a PK though ?
don't remember ever using one
Manish Giri
@Manish-Giri
May 04 2018 18:45
i don't think so, there's hardly any need for specific PK-FK combinations across tables, in NoSQL
if you have a key-value store like Mongo, you can just store all related data in one document, or if it's more than 16 MB, you split it into different docs and embed the ID
Ene Catalin
@EneCatalin
May 04 2018 18:47
ima need to google that one of those days
Manish Giri
@Manish-Giri
May 04 2018 18:47
not sure what type of NoSQL Realm is
Ene Catalin
@EneCatalin
May 04 2018 18:47
object based ?
no idea what that means
can you translate this in stupid language ? "A Realm is an instance of a Realm Mobile Database container. Realms can be local or synchronized. A synchronized Realm uses the Realm Object Server to transparently synchronize its contents with other devices."
does that mean some sort of cloud ? So if I have two devices with the same account it syncs the data ?
Manish Giri
@Manish-Giri
May 04 2018 18:49
yup
exactly
since it uses Threads, that's where the synchronized Realm comes in handy
its like you and me using your ToDo App at the same time, and the changes persist in real time
Ene Catalin
@EneCatalin
May 04 2018 18:51
Threads are gonna eff ostrich up
Manish Giri
@Manish-Giri
May 04 2018 18:51
Work across threads
To start work on a new thread, just get a new reference to your Realm, and everything else just works. Each thread always has a consistent view of the data, which means illegal states are impossible.
Ene Catalin
@EneCatalin
May 04 2018 18:51
never used them
Manish Giri
@Manish-Giri
May 04 2018 18:51
haha
there's a kata on codewars about threads
Ene Catalin
@EneCatalin
May 04 2018 18:51
I just hope android can manage them without ostrich interference
Manish Giri
@Manish-Giri
May 04 2018 18:52
it requires you to create 4 threads and have you print certain numbers from 1 to 1000, with each thread printing every 20th number
such a pain
Ene Catalin
@EneCatalin
May 04 2018 18:53
it legit sounds miserable
Manish Giri
@Manish-Giri
May 04 2018 18:56
it is
Ene Catalin
@EneCatalin
May 04 2018 19:07
I assume you really need to understand threads in order to make that ?
Manish Giri
@Manish-Giri
May 04 2018 19:12
yup
just printing numbers using multiple threads is easy
getting the threads to interact with one another tho..
nightmare
Ene Catalin
@EneCatalin
May 04 2018 19:15
fun times
May Kittens Devour Your Soul
@diomed
May 04 2018 19:39
sounds like proper job for our AI overlords
Ene Catalin
@EneCatalin
May 04 2018 19:40
did cat like the song ?
May Kittens Devour Your Soul
@diomed
May 04 2018 19:42
:cat: is under stormy weather
Ene Catalin
@EneCatalin
May 04 2018 19:42
again ?
May Kittens Devour Your Soul
@diomed
May 04 2018 19:42
until moment ago PC was off. now I'm basically risking it
yeah. again. damnit
Ene Catalin
@EneCatalin
May 04 2018 19:43
well ostrich is trudging trough documentation
like halfway done with the docs :D
also don't you guys have some of the strongest winds in europe ?
May Kittens Devour Your Soul
@diomed
May 04 2018 19:46
yeah we do
wind makes a lot of mess
Ene Catalin
@EneCatalin
May 04 2018 20:42
yeah it's great
except I've no idea how to use it with a recyclerView
Joe Breal
@fwdawg74
May 04 2018 21:57
Working the Tribute project. New to Codepen. Added an image but do not see the image in the preview. Suggestions? Thanks
Ene Catalin
@EneCatalin
May 04 2018 21:59
link ?
also may ostrich recommend doing it locally and just uploading it to github ? A lot less effort than dealing with that site
Kyle Holm
@thekholm80
May 04 2018 22:23
well, i've done 2 things this week that i said i'd never do - and both have made life better
create-react-app and bootstrap are not the evil i've previously said they are
maybe next week i'll start using jQuery lol
Gulsvi
@gulsvi
May 04 2018 23:09
@fwdawg74 The link to your image needs to start with https:// when used in codepen. For example:
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/0/00/Eagles.jpg" alt="The Eagles">
Also, some image hosting sites like imgur.com block requests from codepen because they don't allow image hosting for websites. If you have an image you need to upload somewhere, many people use https://postimages.org/