Phase-1 Project
Tags: beginners
Published: 2023-04-18 08:22:48

Hey, I'm on my coding journey and finished my first web application I would like to share some interesting things while I have been at Flatiron. The first would have to be the course structure. Starting with Javascript I've tried another coding cohort in the past and the problem I have run into is Javascript. The way Flatiron teaches Javascript is simplistic and straightforward. Another thing Flatiron did well was the way they introduced JSON. 

I do flex and most of everything is done on my own with access to help at all times. The people in my cohort also reach out to me as a new topic is introduced to help each other. Overall really happy with Flatiron. One thing I would tell people before going into code or are new at code is to work on time management skills and being consistent. Let's now get into a project I did for Flatiron to give you an idea of what I learned.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zznt6ncvmghpaf7vdv80.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb4r6ydtmhv84u3bvypw.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyy9nxtz57itu3lxslwf.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd6xgj089pyl4baholtc.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ae9wnrk2aplpn9ae89n.png)

I made a web application called "Find The One" It's a dating application that allows you to choose boys or girls as your interest. After selecting boys or girls you click submit and It'll give you a list of four people to like or dislike. I ended up using anime/cartoon photos because random people felt weird to use. I'll be breaking down the code in the project.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ub5xylyrdncqy813ba3x.png)

In this photo, we'll be looking at the HTML. Nothing too crazy with this just inside my body I put a header containing Find The One at the top of the page. My section is just holding my form, now inside the form I have the p tag saying interest as we keep going just labels, inputs, and a submit. The next section is holding my ul tag which later we'll be putting li's into it with Javascript.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsjq5jfylgzfo3biwclf.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3ng96e4xyprkhxgci1g.png)

In my db.json made eight people four females and four males. I'll be taking all of this info and putting it into the cards that I'm making which will be in the li tags I told you about earlier. The main key that we'll be using to break up each one is Gender everything else is just used for HTML.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/615zixfqyw459wv90hya.png)

Finally getting to the Javascript, I'm returning a promise from our JSON server and then calling what we got back into our global scope. also calling initialize to make sure our function that has our fetch is running. You don't have to use initialize you could just call getAllPeople I just like doing this for my fetch function. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyapervsmb57ixmdkdgc.png)

The document.querySelctor('form') is selecting the form and putting the submit and running the function selectedRadioButton.

The selectedRadioButton function is doing a couple of things here. It's targeting the input tags in HTML by their ids. The if and else if statement is seeing if the girls or boys are selected. The code running after that is turning the JSON into an array it checks for the key of Gender has a value of female or male. Lastly, it's running the function getDate on each of the targeted arrays. 

The getDate function is making a card which is a li and class name card. We're also giving the cards each time selectedRadioButton runs a id so num is the I in the foreach i. card.innerHTML is making the HTML for the li and also inserting all key values in the HTML. then we are appending the card onto the ul. card.addEventListner at the end is when we click anywhere on the card on the page and go to our console it shows us the id of the card were selecting. The buttons in the inner HTML have an onclick running the function colorLike. Which we'll talk about next.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcryq9w95578gnpj6qfs.png)

The function colorLike is creating a class which in our case is green and red on a card by clicking like or dislike. How we target each card is by the card_id. The querySelector('.header') adds the mouseover and mouseout to create a cool effect on the header when your mouse is over it sets the background to #f81894 then when the mouse leaves the header it changes its style to '' which just brings it back to the original color.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp0ew69zfa5f4dk6fmw7.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh3qjzgye2pxcwxa1mkp.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ienpf6ehg02xllm45pn2.png)

The CSS is pretty simple not going to go too deep into it just the main details. I use Flexbox to position mostly everything. The body's background image put too fixed. Used borders with border-radius to curve some border outlines. The main one I want to talk about is green boxes and red boxes. the green and red are the classes being added to the li's when the button like or dislike is clicked. Just like to highlight this since you're not seeing this CSS until the classes are added to the HTML from the button.