DEV Community: Kiana

Javascript and Rails API!

Kiana — Thu, 06 Oct 2022 18:05:03 +0000

For my fourth project with Flatiron I was tasked with building
a Single Page Application. A javascript/CSS/HTML frontend that will communicate with a backend API built with Ruby and Rails.

I work as a Nanny and the kids favorite game is a memory matching card game! we spend our time drawing small matching pictures, cutting them into card sizes, flipping them picture side down and timing each other with how fast we can flip them all over.
I knew pretty quickly creating a memory match game for my project would be a good way to meet all my requirements and challenge myself with building a game.

I brainstormed the backend would house all my stored data for a user and their score through a gameplay. I assumed I would just display the top 3 scores but I also liked the idea of displaying users and their best score(I don't want to be the reason for a 5 and 6 year old fighting because their name keeps getting bumped off the board...)

While the front end Javascript would encapsulate related data and behavior, HTML/CSS would be used to created the cards and buttons.
I have really enjoyed learning all the ways to use CSS and wanted to challenge my knowledge and skills and implement some CSS animation on the cards which I knew I would be creating with stacking DIVs. I have been so impressed with all the hover, flip and unique features css can bring to a project.

I started this project with setting up 2 repos on git hub.
One for my frontend and one for my backend.

I went through all the usual steps of creating a rails app.
Backend (Ruby on Rails):

-Create models and relationships
-Create the database tables and seed
-Create controllers
-Run Rails s for starting the server

Frontend (JavaScript):

-setting up index.html
-index.js
-css file.

I created the basic layout of the cards which were stacked divs that I applied photos to each and would apply a front and back class I could use in css(and later in my index.js) to orient the cards how I wanted.

index.html


<div class="board">

            <div class="card">
                <div class=" front facing"> 
                    <img class="face" src="css/images/apple.png">
                </div>
                <div class="back facing">
                     <img class="brain" src="css/images/brain.png">
                </div>
            </div>

I repeated this for each card making sure each photo had two for a match.

css (only relevant code shown)


.board {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 10px;
  margin: 5px;
  perspective: 500px;
}

.card {
  position: relative;
  width: 120px;
  height: 125px;

}
.facing {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
  border-width: 1px;
  transition: transform 500ms ease-in-out;
}

.card.visible .back {
  transform: rotateY(-180deg);
}

.card.visible .front {
  transform: rotateY(0);
}
.back {
  position: absolute;
  height: 100%;
  width: 100%;
}
.brain {
  align-self: flex-start;
  transform: translateY(-10px);
  transition: transform 100ms ease-in-out;
  display: center;
  position: absolute;
  width: 108px;
  height: 108px;
  overflow: hidden;
}

In my index.js I added an event listener to be able to flip a card when clicked!

let cards = Array.from(document.getElementsByClassName("card"));

let game = new Match(150, cards);

   cards.forEach(card => {
        card.addEventListener('click',() => {
            game.flipCard(card);
        });
    });

I created a Match class to start with some of the basic logic for flipping cards based on if they were a match. I used the class name of "face" to compare if they were a matching photo and then by removing the visible classList to show the front of the card rather than the back if they were. This all together made it seem as though the card was being flipped!
I loved the challenge of using css and javascript together in this as one smooth event for a user.

class Match {
constructor(cards){
        this.cardsArray = cards;
}

...
      getCard(card) {
        return card.getElementsByClassName('face')[0].src;
    }

   flipCard(card) {
        if(this.canFlipCard(card)){
            card.classList.add('visible');
            if(this.cardToCheck)
            this.checkForCardMatch(card);
            else
            this.cardToCheck = card;  
        }
    }

      checkForCardMatch(card) {
        if(this.getCard(card) === this.getCard(this.cardToCheck))
            this.cardMatch(card, this.cardToCheck);
        else 
            this.cardMisMatch(card, this.cardToCheck);

        this.cardToCheck = null;
    }
     cardMatch(card1, card2) {
        this.matchedCards.push(card1);
        this.matchedCards.push(card2);
        if(this.matchedCards.length === this.cardsArray.length)
            this.win(); 
    }
       cardMisMatch(card1, card2) {
        this.busy = true;
        setTimeout(() => {
            card1.classList.remove('visible');
            card2.classList.remove('visible');
            this.busy = false;
        }, 1000);
    }

}

To make all of this make sense I needed to check if a card was
even able to be flipped.

  canFlipCard(card){
     return !this.busy && !this.matchedCards.includes(card) && card !== this.cardToCheck
    }

These 3 conditions are what needed to be meet in order to allow a card to be flipped(clicked).

If a card was not busy(ex. a click event... a user already clicked that card)
if the card clicked is not already a matched card
and if the card is not the current card being checked.

The return of all these conditions would be a boolean value of true or false... If all 3 of those conditions are false the value of canFlipCard would return true and the card would be able to be clicked and therefore flipped!

In the startGame function is where the card to check starts as null because nothing has been clicked yet and also set matchedCards to an empty array so they could be easily compared and stored for the scoring logic.

startGame(){
        this.cardToCheck = null;
        this.matchedCards = []
        this.hideCards();
    }

From there I created the scoring logic for the flip count,
and timer counting down.

index.js


constructor(totalTime, cards){
        this.cardsArray = cards;
        this.totalTime = totalTime;
        this.timeRemaining = totalTime;
        this.timer = document.getElementById('timer');
        this.ticker = document.getElementById('flips');
    }
 startGame()
        this.cardToCheck = null;
        this.totalClicks = 0;
        this.timeRemaining = this.totalTime;
        this.matchedCards = [];
        this.busy = true;
        setTimeout(() => {
            this.countDown = this.startCountDown();
            this.busy = false;
        }, 500);
        this.hideCards();
        this.timer.innerText = this.timeRemaining;
        this.ticker.innerText = this.totalClicks;
    }
   hideCards(){
         this.cardsArray.forEach(card => {
             card.classList.remove('visible');
         });
     }
     startCountDown(){

         return setInterval(() => {
             this.timeRemaining--;
             this.timer.innerText = this.timeRemaining;
             if
             (this.timeRemaining === 0)
             this.gameOver();
         }, 1000);

     }

index.html

<div class="info">
            Timer: <span id="timer">150</span>
 </div>
        <div class="info">
            Flips: <span id="flips">0</span>
        </div

From here, in the API I created some data to fetch and display a user and their scores. In order to get all of this is display properly in the frontend I had to add the render json line so the data could be readable.

class UsersController < ApplicationController
def index
    @users = User.all
    render json: @users
end


class GamesController < ApplicationController
def index
    @games = Game.all
    render json: @games
end
end

seed.rb
User.create(username: "KJL")
User.create(username: "Kiana")
User.create(username: "K2")

Game.create(user_id: 1, score: 23, time: 67)
Game.create(user_id: 2, score: 14, time: 45)
Game.create(user_id: 3, score: 19, time: 84)

and in the frontend,

api.js

   function callUsers(){
    return fetch('http://127.0.0.1:3000/users')
    .then(res => res.json())
    .then(json => renderUsers(json))
}

  function  callGames() {
  return fetch('http://127.0.0.1:3000/games')
    .then(resp => resp.json())
    .then(json => renderGames(json))

}
function renderUsers(users){
 const usersshow = document.getElementById("user-display")
  users.forEach(user => {
    const h2 = document.createElement('h2')
    h2.innerHTML = user.username
    usersshow.appendChild(h2)
  })
}

index.html

 <h1 class="info">Highscores</h1>
            <div id="user-display"> </div>

I later decided to add a "login to play" form.
This would have a user create a username, once they submit it, the game would start. The score would be stored in localstorage and if a user completes the game without time running out they it would be persisted to the database.

index.html

   <h2 class="rules">Submit a username to play!</h2>
            <div class="layout" id="login-form">
                <form autocomplete="off" id="username" class="layout" action="http://127.0.0.1:3000/users" method="post">
                    <input class="rules" id="login-field" type="text" name="username" value="" placeholder="username">
                    <br><br>
                    <input class="startOver" type="submit" value="Lets Play!">
                    <br><br>
                </form>

            </div>

index.js
let loginForm = (document.getElementById("login-form"))

loginForm.addEventListener('submit',e => {
        e.preventDefault()
      let user = player.value
      let body = {username: user}
         createUser(body)
          if(!body.null)
           { overlays.forEach(overlay =>
       overlay.classList.remove('visible'));
       game.startGame()}
       else {
        alert("please enter a username")
       }
        }
        )


api.js
 function createUser(username){
        return fetch('http://127.0.0.1:3000/users',{
        method: 'POST',
        headers: {
         "Content-Type": "application/json",
         "Accept": "application/json"
         },
        body: JSON.stringify(username)
    })
}
   function  createGame(result){
    return fetch('http://127.0.0.1:3000/games',{
        method: 'POST',
        headers: {
         "Content-Type": "application/json",
         "Accept": "application/json"},
        body: JSON.stringify(result)
    })
}

index.js

    win() {
            localStorage.setItem("score", this.totalClicks)
            localStorage.setItem("time", this.timeRemaining)
            document.getElementById('win-text').classList.add('visible')
            let flipResult = localStorage.getItem("score")     
            let timeResult = localStorage.getItem("time") 
            const result = {score: flipResult, time: timeResult}
                 createGame(result)
            document.getElementById("flip-form").innerHTML = flipResult
            document.getElementById("time-form").innerHTML = timeResult

        }

And in the backend updated the controllers, routes and models

controllers

class UsersController < ApplicationController
def create 
    @user = User.find_or_create_by(username: params[:username])
end


  private

  def user_params
    params.require(:username).permit(:id)
  end
end

class GamesController < ApplicationController
def create
    @user = User.find_by(username: params[:username])
    Game.create(score: params[:score], time: params[:time])
  end
end

models

class User < ApplicationRecord
      has_many :games
end
class Game < ApplicationRecord
    belongs_to :user
end

routes.rb

Rails.application.routes.draw do
  resources :games, only: [:index, :create]

  resources :users, only: [:index, :show, :create]

end

I followed this same pattern to add a "leave a review" feature at the end of the game, these reviews were displayed in the game play window.

index.html

<h3 class="rules"> Leave a review! </h3>
            <form autocomplete="off" id="comment-form" class="layout" action="index.html" method="post">
                <input class="rules" id="user-field" type="text" name="" value="" placeholder="username">
                <br><br>
                <input class="rules" id="comment-field" type="text" name="" value="" placeholder="comment">
                <br><br>
                <input class="startOver" type="submit" value="submit">
                <br><br>
            </form>


api.js

    function  createComment(rrr, rrrr){
    return fetch('http://127.0.0.1:3000/comments',{
        method: 'POST',
        headers: {
         "Content-Type": "application/json",
         "Accept": "application/json"},
        body: JSON.stringify(rrr, rrrr)
    })
    .then(res => res.json())
}

 function renderComments(comments){
 const reviews = document.getElementById("comments")
//  const userreviews = document.getElementById("user-comments")
  comments.forEach(comment => {
    const h2 = document.createElement('h2')
    const h3 = document.createElement('h3')
    h2.innerHTML = comment.comment
    h3.innerHTML = comment.username
    reviews.appendChild(h2)
    reviews.appendChild(h3)

  })
}

In the backend I updated the routes.rb and created a new comments table with a username and a score.

controller 

class CommentsController < ApplicationController
def index
   @comments = Comment.all
   render json: @comments
end
def create 
    @comment = Comment.create(username: params[:username], comment: params[:comment])
    render json: @comment
end
def show
    @comment = Comment.find(params[:comment])
    render json: @comment
end
end

To get all of these pieces working together I wrapped my index.js with a

index.js
window.addEventListener('DOMContentLoaded', e => { 

}

and my index.html file with an onload function to make my fetch calls

index.html
<body onload="loadpage()">
    <script>
        function loadpage() {
            callUsers(), callComments(), callGames()
        }
    </script>

with async defined in my index.html I could use all of this to leverage asynchronous functions for a smoother user game play(or impatient children)

index.html
  <script src="src/index.js" async></script>
    <script src="src/api.js" async></script>

One of the most important things I learned while working through this project was the attention I needed to have with spelling errors and exactly what I was passing as data.
things like calling user_params vs. params when creating a user...insert eyeroll... or calling HTTP vs HTTPS in get/post requests...insert bigger eyeroll...
Overall I really enjoyed building out this project and learning how to make many things come together with Javascript, an API and css.

Ruby on Rails, MVC architecture & data modeling

Kiana — Fri, 23 Sep 2022 04:34:27 +0000

For my 3rd project with Flatiron I was tasked with building a complete Ruby on Rails application that manages related data through complex forms and RESTful routes.
This was a real opportunity to put together all my knowledge about Ruby on rails, MVC architecture and data modeling.
The idea was to build a content management system.
After some brainstorming I decided to build a Task manager app.
This would serve as a place to start with my table associations in an easy way. A lists would belong to a user and a list would have many tasks.
I started with a new rails app and began on the backend.
I started with my tables for and everything I assumed a task would need.

create_table "lists", force: :cascade do |t|
    t.string "name"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.string "task"
  end

  create_table "tasks", force: :cascade do |t|
    t.string "task"
    t.boolean "completed"
    t.date "due_date"
    t.text "details"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "users", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.index ["email"], name: "index_users_on_email", unique: true
    t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
  end

From there I set up my controllers and basic model associations.

class List < ActiveRecord::Base
  has_many :tasks, dependent: :destroy
  accepts_nested_attributes_for :tasks
end

class Task < ActiveRecord::Base
  belongs_to :list
end

class User < ApplicationRecord
end

Within the list model I had to specify

"accepts_nested_attributes_for :tasks"

this would be how rails would know how to find the nested attributes for a list.

I then installed the Devise gem to add user authentication.
I have used the devise gem before and I love how straight forward the implementaion is.
It does all the heavy lifting of setting up sign up/log in functionalities along with validations.
I followed the rails docs to add it,
"https://guides.railsgirls.com/devise"

Moving onto the (V)iews part of my MVC pattern I set up the corresponding folders.
list
-index.html.erb
-show.html.erb
task
-index.html.erb
-show.html.erb

I begin with creating some dummy data in my seed.rb, This would allow me to set up functionalities on the browser and display them how I liked.


 Task.create(task: "Roadtrip", details: "Rent car") 
 Task.create(task: "Wedding", details: "In mexico")
 Task.create(task: "Eye appt", details: "Mon at 11am")

List.create(name: "Trips")
List.create(name: "Appointments")

User.create(email: "kianajade42@gmail.com", password: "password")
User.create(email: "kjl@gmail.com", password: "pass")

On the list/index.html.erb I set up some basic displaying of the data along with a link_to helper that would take a user to a partial form to create a list that accepted nested attributes for tasks.

 <h3 class='title'> Currently To Do:</h3>
  <h3><%= link_to "Add New", new_list_path  %></h3>
      <% @lists.each do |list| %>
      <h4 class="list-item"> <%=list.name%> </h4>
      <% end %>

Being new at routing a rails I ran rails routes in my console which provided me with the correct link to the new/create methods in my lists_controller.
I had to specify in my routes.rb the exact route.

routes.rb 

post '/lists/:id/tasks/new', to: 'tasks#create'

This is telling rails that when the specified /new route is called to look for the new/create methods in the controller and post it to the database.

 def new
   @user = User.find_by(@current_user)
    @list = List.new
    @list.tasks.build
   end


  def create
    @list = List.new(list_params)
    @list.task = @current_user
    if @list.save
      redirect_to @list
    else
      render :new
    end

  end

The new is responsible for rendering the form and the create is what is responsible for creating/storing the data.
I created a partial form within my list folder.
to display this logic.


_list.html.erb

<%= form_for(@list) do |list_form| %>
   <%# %= list_form.hidden_field :list_id %>
   <ul> <h4>List Name: <%= list_form.text_field :name, placeholder: "Create a List" %></h4>
     <%= list_form.fields_for :tasks, @list.tasks do |task_field| %>
        <h4> Task: <%= task_field.text_field :task, placeholder: "Create a Task" %></h4>
        <h4> Details: <%= task_field.text_field :details, placeholder: "Details" %></h4> 
        <h4> Confirm user id: <%= task_field.text_field :user_id, placeholder: @user.email %> 
      <% end %>

      <h4><%= list_form.submit %></h4>
    <% end %>
  </ul>
</ul>

From there I created the edit/adding a new single task to a list with the same pattern.

routes.rb 
get 'tasks/:id/edit', to: 'tasks#edit', as: :edit_task
patch 'tasks/:id', to: 'tasks#update'

the 'as: edit_task' appended to the route is a helper to create custom route to be called on in a link_to.

lists_controller.rb

def edit
        @list = List.find_by(id: params[:id])

    end

    def update
        @list = List.find(params[:id])
        @list.update(list_params)
        redirect_to list_path(@list)
    end

tasks_controller.rb

 def edit
    @task = Task.find(params[:id])
  end

def update 
    @task = Task.find(params[:id])
    @task.update(task_params)
    redirect_to list_tasks_path(@task)
end

within the views I used link_to helpers again.

<h4><%= link_to "edit", edit_task_path %></h4>

To practice a DRY code, because my new/edit forms were working with the same fields I called upon the form in both folders.

lists/new.html.erb

<h4><%= link_to "view all lists", lists_path %></h4>
<ul><h2>Create New</h2>

<%= render 'list' %>

lists/edit.html.erb

<h2>Editing:</h2>
<h3><%= @list.name %></h3>
 <%= render 'list' %>

Another requirement of this project was to creating validations on my form, this was an easy add.
Within the controllers/models I specified what needed to be in the params and what to validate.

list.rb
 validates_presence_of :name, uniqueness: true

task.rb
validates_presence_of :task, :details, presence: true

list_controller.rb
def list_params
    params.require(:list).permit(:name, :task, tasks_attributes: [:task, :completed, :due_date, :details])
  end

tasks_controller.rb
def task_params
     params.require(:task).permit(:task, :completed, :due_date, :details)
  end

From there I created an _errors file that could be used within the form.

lists/_errors.html.erb

<% if @list.errors.any? %>
    <div>
    <h2>
        <%= pluralize(@list.errors.count, "error") %>
        prohibited this from being saved:
    </h2>

    <ul>
        <% @list.errors.full_messages.each do |msg| %>
         <li><%= msg %></li>
        <% end %>
    </ul>
    </div>
<% end %>

and placed

<%= render 'errors' %>

at the top of my _list.html.erb form.

This would render an error message if a user tried to create a list without a name.
I followed this pattern again within the tasks folder and replaced the necessary instance variables.

I had an idea that I wanted a user to be able to see the most recently created tasks with a little quick view feature on the homepage. This was mostly done with CSS and I enjoyed figuring out how to use it to my advantage to create a unique feature.
At the end of the day it was a pretty basic stacking of div's that I displayed different data on using a scope method within my task model.
I set a hidden hover effect on the top div which would would then show the recently created tasks.
I felt this feature really made it possible to show the MVC pattern in a simple way.

class Task < ActiveRecord::Base

scope :most_recent, -> {order(created_at: :desc).limit(2)}

end

This was a most_recent method that can be used in the controller telling it to show the tasks displayed by the most recent in descending order(last two created) but only the last 2.

lists_controller.rb

  def index
    @list = Task.most_recent
  end

lists/index.html.erb

<div class=out>
<h2> Recently added </h2>
<ul>
<div class=quick>

 <% @list.each do |l| %>
 <div class= "list-item">
    <h4> <%= l.task %> </h4>
         </div>
      <% end %> 

       </div>
      </ul>

<div class="innerquick">
<h3> Quick view </h3>
      </div>
</div>

For sake of space only the relevant css is below.

application.sccs

.out {
  position: relative;
  margin-top: 2px;
  margin-right: 150px;
  margin-left: 150px;
  padding: 15px;
  height: 300px;
}

.quick {

  display: grid;
  grid-template: 1fr / 1fr;
  font-size: 1.5em;
  padding: 5px;
  text-align: center;
  position: absolute;
  width: fit-content;
  block-size: fit-content;
  margin-left: 20px;
  line-height: 200px;
}

.innerquick {
  display: grid;
  font-size: 1.5em;
  padding: 75px;
  text-align: center;
  position: absolute;
  width: fit-content;
  block-size: fit-content;
  line-height: 500px;
}
.innerquick:hover {
  opacity: 0;
  transition-delay: 0.3s;
}

As a final requirement I has to create a join table for a has_many through association which includes a user submittable attribute other than its foreign keys.
I thought of expanding the app past a single user creating their own list and tasks and make it so an admin could assign certain tasks to a user and the could see what tasks were theirs to complete. I updated my model associations.

class List < ActiveRecord::Base
  has_many :tasks, dependent: :destroy
  has_many :users, through: :tasks
end

class Task < ActiveRecord::Base
belongs_to :list
belongs_to :user 
end

class User < ApplicationRecord
  has_many :tasks
  has_many :lists, through: :tasks
end

and adding a new users folder along with index and show pages so i could display all the users and their associated tasks.

users/index.html.erb
<h1> All Users: </h1>
  <div>
    <ul class="tasks-list">
      <% @user.each do |t| %>
          <li class="list-item">
          <h3><%= link_to t.email, show_path(t)%></h3> 
          </li>
          <%end%>
    </ul>
  </div>

users/show.html.erb
 <h2> All tasks for </h2>
 <h1><%= @user.email%>: </h1>

<div>
  <div>
    <ul class="tasks-list">
    <div class="list-item">
    <% if !@user.tasks.nil? %>
      <% @user.tasks.each do |t| %>
          <h3><%=t.task %></h3>
          <h4><%= t.details %></h4>
          <%end%>
       <%else%>
            <h3> This user has no tasks to complete</h3>
         <%end%>
       </div> 
    </ul>
  </div>
  </div>

setting up the has_many through: allowed me to chain logic onto instances of the User model that now would respond to a 'tasks' method.

I also was able to use this within my tasks index and show page to display the same association.

tasks/show.html.erb

<h3  class="tasks-header"> <%= @task.task %></h3>
 <div class="tasks-item"> 
 <div>
<h4>Details:</h4>
<p><%= @task.details %></p> 

</div>

</div>
 <h5>this task belongs to: 
     <%=@task.user.email %> </h5>
<%= button_to "Delete", tasks_path(@task), :method => :delete %>

tasks/index.html.erb

 <ul class="tasks-list">
      <% @tasks.each do |t| %>
          <li class="list-item">
          <h3><%=t.task %></h3>
            <div>
             <h4><%= t.details %></h4>

            </div>
            <h5>belongs to <%=t.user.email%> </h5>
          </li>
          <%end%>
    </ul>

In my index page I had to remember I was mapping over the data and therefore had to append t.user.email instead of defining the instance of task itself.

I had plenty of other features in this project that generally fit the same pattern. Thats what I find so great about Ruby on Rails, MVC architecture & data modeling, it provides an opportunity for repetition. There is no better way than building out a project and the executing all details that allow these concepts to fully be grasped.

On to the next project!

Sinatra&Active Record

Kiana — Sat, 12 Feb 2022 22:56:08 +0000

For my 2nd project at Flatiron school I had to create an app using Sinatra and active record. I started with mapping out the project I wanted to create, one of the main requirements for this project was to set up an authentication for a user using the Bcrypt gem. That was a place to start! I needed to create the ability for a user to login & sign up.

After having an idea of creating a tattoo artist online portfolio for this project, I created my project folder and sub-folders.
I ran bundle init in the command line which created a Gemfile where i added the gems I would need for this project.
Gemfile

`source 'http://rubygems.org'
gem 'sinatra'
gem 'activerecord', '~> 6.0.1', :require => 'active_record'
gem 'sinatra-activerecord', :require => 'sinatra/activerecord'
gem 'rake'
gem 'require_all'
gem 'sqlite3'
gem 'thin'
gem 'shotgun'
gem 'pry'
gem "tux"
gem "bcrypt", "~> 3.1"

group :test do

gem 'rspec'
gem 'capybara'
gem 'rack-test'
gem 'database_cleaner'
end`

I then needed to create the config folder and environment file.
This is a very important file; it's where your database connection is made and will connect your app folder with the rest of the files that require it.
When I initially set this up I had an error of my database/environment not being configured. I spent some time searching for answers which lead me to learn that I had to set and specify my database.

`ENV['SINATRA_ENV'] ||= "development"

require 'bundler/setup'
require 'capybara/dsl'
Bundler.require(:default, ENV['SINATRA_ENV'])

set :database, {adapter: "sqlite3", database: "development.db"}
require_all 'app'`

In the config.ru is where I loaded the environment and mounted the application controller. As my app grew I would include the other controllers here as well.

config.ru

require_relative './config/environment' if ActiveRecord::Migrator.needs_migration? raise 'Migrations are pending. Runrake db:migrateto resolve the issue.' end use Rack::MethodOverride run ApplicationController

In app/controllers folder I created an application_controller.rb file

`class ApplicationController < Sinatra::Base
configure do
set :public_folder, 'public'
set :views, 'app/views' enable :sessions
set :session_secret, 'password_security'
end

get '/' do
'Hello, World!'
end`

from here I could run shotgun and the browser at the local host address was up and running!

Since I needed to use activerecord, I set up my Rakefile.
this specified tasks and actions I would need, I loaded the environment and required 'sinatra/activerecord/rake'.
Rakefile
require_relative './config/environment' require 'sinatra/activerecord/rake'

From there I added my Models for the corresponding database table, it will inherit from the ActiveRecord::Base class, which means that it has access to a number of methods for working with the database.

class User < ActiveRecord::Base has_secure_password has_many :tattoos end

has_secure_password is specified so i could set up authentication with Bcrypt.

I then create a Database folder (db) and ran migrations to create a users tables.

I had to type rake db:create_migration NAME=create_users, to create the table and populate it with my columns, then run rake db:migrate for all of this to create a schema file.Then rake:create to create the database for my app.

user table

class CreateUsers < ActiveRecord::Migration[6.0] def change create_table :users do |t| t.string :username t.string :password_digest t.timestamps null: false end end end
From here I had to also create a tattoos table and controller and model. This was wall generally set up the same way as the user.
I then moved onto my views and started with the users to create a sign up/login page which I would then in my users_controller use to correlate to the appropriate CRUD action.
users_controller.rb
`class UsersController < ApplicationController

get "/signup" do
    erb :"users/new"
end 

post "/signup" do
    user = User.new(params[:user])
    if user.save
        session[:user_id] = user.id 
        redirect "/users/#{user.id}"
    else 
        @errors = user.errors.full_messages.join(" - ")
        erb :'/users/new'
    end
end

get "/login" do
    erb :"users/login"
end 

post "/login" do
    user = User.find_by(username: params[:user][:username])
    if user && user.authenticate(params[:user][:password])
        session[:user_id] = user.id 
        redirect "/users/#{user.id}"
    else 
        redirect "/login"
    end
end

get "/users/:id" do
    @user = User.find_by(id: params[:id])
    erb :"/users/show"
end 

get "/logout" do
    session.clear
    redirect '/'
end

end `

After all of this logic was set up I again followed the same process for setting up the tattoos MVC.

The set up of this project was perhaps the most challenging and yet most simple! Its rather straight forward but it takes working out set by step in each folder to fully understand what you need to specify for the database and how it all works together. This project was certainly a great stepping stone in my knowledge as developer.

First react app creation.

Kiana — Thu, 16 Sep 2021 21:43:57 +0000

When I started brainstorming what to build for my first React project I wanted something that would keep me motivated through the errors I knew I would run into. I decided on a simple quiz app themed after The Office since it's my favorite show.
This quiz would display quotes that a user has to select who they believe said it, At the end the user is redirected to a page that displays their score. I felt this would keep me motivated and excited because it's a quiz I wanted to be able to take myself!

The main building requirements I had to meet were,
1.Fetching Rails API backend to persist data.
2.using Redux and redux-thunk middleware to modify state.
3.Using React-router.

I started building this project by creating my backend. I followed a walk through of creating a rails API where the data would be pulled from. I wrote out all the data myself rather than finding an open-source API to build a front end to pair with because I was building a very specific project that needed direct quotes and specific characters as answers.
This was certainly the most tedious part and of course as a developer I don't want to be responsible for creating and hardcoding all my data but I felt for the project I was doing I wanted to really focus on creating what I wanted and not relaying on finding an open-source api to fit. Maybe later down the road when I have a firmer understanding Id love to challenge myself to extract nested data or manipulate data to fit my ideas.

From there I started building the frontend with 'create-react-app', another walk through that made the set up of this project very easy. I started with mapping out the lifecycle of the components and where/how they would be displayed and updated.
At the top layer, in my App component React router made a painless set up of wrapping my components so they could be easily navigated to. React-Router allows changing the browser URL while staying in sync with the UI as the user(or developer) navigates. React router really made debugging and setting up each page a breeze.
Since it uses component structure to call components, I could display the appropriate information without the page refreshing while I was in the middle of working on a component.

Home would be a presentational component to introduce the user to the quiz and the option to link a user to other pages in the app.
The Quiz component would be a container component that would have all the logic for the app along with rendering JSX.
The Result page would simply update the state of 'score' and display it while also posting to the API. Finally, Highscores would be a leaderboard to compare different users scores.

App.js
return (
  <div className="App">
     <Router>
      <Switch >
        <Route exact path="/">
          <Home />
        </Route>
         <Route exact path="/quiz"> 
             <quiz/>
        </Route>
        <Route exact path="/results">
          <Results />
        </Route>
         <Route exact path="/highscore">
          <Highscore/>
        </Route>
      </Switch>
      </Router>
    </div> 
  );

I had to create a store using thunk-middleware. I created a separate store folder with action, reducer and selector files.
The action folder is where I fetched data from my backend, the reducer provided access to that data for the store and in my selector file I used the react hook of useState which allowed me to extract data from the Redux store state and pass it to my Quiz component.

Setting up my action to fetch the API data certainly took a bit of preplanning for how I wanted to work with the data. I decided on a promise.all because I needed two sources of data from my API, getting the questions as well as the highscores that were stored. I could have also separated out fetching these but seeing as promise.all returns an array I could easily map over the data, render it to json, store it in state in my reducer to be passed through a selector and call on the index throughout my app, Keeping it DRY.

action.js

export function fetchQuestions(){
  console.log("c")
  return function(dispatch){
  Promise.all([
    fetch("http://127.0.0.1:3000/questions"),
    fetch("http://127.0.0.1:3000/scores",
  { method:"GET",
headers:{ "Content-Type":"application/json",
          "Accept":"application/json"
}
})
]).then(function (responses) {
    return Promise.all(responses.map(function (response) {
    return response.json();
    }));
}).then(data => {
   dispatch({ type: fetchSuccess, payload: data })
    console.log(data);
}).catch(function (error) {
    console.log(error);
})}};

Because this was the first time I worked with a promise.all I had some console.logs just to follow what was being executed.

reducer.js

const quizReducer = (state = {}, action) => {
    switch (action.type){
        case fetchRequest:
             return state
        case fetchSuccess:
        return {...state, data:action.payload}
        default:
        return state    
    }    
}

selector.js
import { useSelector } from "react-redux";
export const getData = (state) => {
    return state.data
}
export default function useData(){
    const data = useSelector(getData) 
    return{data}}

Back in my app file I used react hooks to pass this new data to my app.
of course more Console.logs to follow all my data around...

App.js
const dispatch = useDispatch();
const data = useSelector(getData)
useEffect (() => {
  console.log("a")
    dispatch(fetchQuestions());
  console.log("b")
},
 [dispatch]);
console.log(data)

Now I had an easy array of data to work with that I could pass as a prop throughout my app and call in the specific index.
All of this made possible and easy by middleware! Of course for all of this to work within my index file I had to wrap my app component in Provider, define the store and give my app access to it.

index.js
const store = createStore(quizReducer,applyMiddleware(thunk))
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
  </React.StrictMode>,
document.getElementById('root')
)

I also updated my App.js to be able to pass the data through as props to each route.

return (

  <div className="App">
     <Router>
      <Switch >
        <Route exact path="/">
          <Home />
        </Route>
         <Route exact path="/quiz"> 
           <Quiz quotes={data}/> 
        </Route>
        <Route 
        path='/Result'
        render={(props) => (
        <Result {...props}/>)}
          />
         <Route exact path="/highscore">
          <Highscore highscore={data}/>
        </Route>
      </Switch>
      </Router>
    </div> 
  );

}

After my App file was set up with the routes to each component, and my index file was wrapping App with
the Provider component making the Redux store available to these components, I started to build out the Quiz class which would be all of the main logic for the app.

class Quiz extends Component {
    state = {
        questionBank: [],
        score: 0,
        responses: 0
    };

    getQuestions = () => {
        quiz().then(question => {
            this.setState({
                questionBank: question
            });

        });
    };
    computeAnswer =
    (answer, correctAnswer) => {
        if (answer === correctAnswer) {
      this.setState({
     score: this.state.score + 1
});
        }
      this.setState({
            responses: this.state.responses < 5 ? this.state.responses + 1 : 5
        })
    }
    componentDidMount(){
        this.getQuestions();
    }
    render() {
        return (
        <div className="container">
        <div className="title">IT IS THE OFFICE QUIZ.</div>
        <div className="intro"> WHO SAID IT?</div>
        {this.state.questionBank.length > 0 && 
        this.state.responses < 5 &&
        this.state.questionBank.map(
            ({question, answers, correct, questionId}) => (
        <QuestionBox question={question} options={answers} key={questionId} 
        selected={answer => this.computeAnswer(answer,correct)}
        /> ) 
        )}
        {this.state.responses === 5 ? (<Result score={this.state.score}/>) : null}
        </div> 
    )
}
}
ReactDom.render(<Quiz />, document.getElementById("root"));

within this class I called my QuestionBox component and passed through the question, answers and selected props which would then allow the the answer to be selected and determine if it was correct!

const QuestionBox = ({question, options, selected}) => {
  const [answer, setAnswer] = useState(options);
  return (
    <div className="questionBox">
      <div className="question">"{question}"</div>
      {answer.map((text, index) => (
        <button
          key={index}
          className="answerBtn"
          onClick={() => {
              setAnswer([text]);
              selected(text);
          }}
        >
          {text}
        </button>
      ))}
    </div>
  );
};

Once I had this working how I wanted by pushing the selected answer into its own array, I built out some CSS and logic for the home page and result page since this was primarily what was being displayed.

home.js

const Home = (props) => {

    return (
        <div className="container">
            <div className="welcome">
            <div className="title">
              <h1>IT IS THE OFFICE QUIZ.</h1>
            </div>
             <div className="intro">
               <h2> Think you know who said it?</h2>
                <h4>Test your 'The Office' quotes knowledge</h4>
             </div>
            <div className="home">
               <h3> Its harder than you think... </h3>
                <small>(that's what she said)</small>
               </div> 
                <button className="start">
                    <Link to="/quiz">Lets Play!</Link>
                    </button>
                    <button className="homescoreBtn"
                    onClick={props.highscore}>
                  <Link to="/highscore">Highscores</Link>
        </button>
        </div>
        </div>
    )
    }

The results page showed the users score from setState and also rendered a PopUp component for a user to submit their name. I decided on a pop up as a challenge for myself, Pop up windows are every where in every day life and I wanted to take an opportunity to learn the basics!

Results.js 
const [showPopup, setShowPopup] = useState(false);
  useEffect(() => {
    setTimeout(() => setShowPopup(true), 2000);
}, []);

    return( 
         <div className="container">
             { showPopup ? <PopUp highscore={`${props.location.state}`} /> : null }

              <div className="intro">IT IS THE OFFICE QUIZ.</div>
             <div className="home">
               <h3> That wasn't so hard... </h3>
                <small>(that's what she said)</small>
               </div> 
  <div>


      </div>

        <div className="score-board">
        <div className="score">{`You answered ${props.location.state}/ 5 correct!`}</div>
        <div className="gif">
        <iframe className="gif" src="https://giphy.com/embed/8VrtCswiLDNnO" width="580" height="450" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/the-office-nbc-8VrtCswiLDNnO"></a></p>
        </div>
        <div className="tryagain">“Fool me once, strike one. Fool me twice, strike three.” -Michael Scott</div>
        <button className="playBtn"
         onClick={props.playAgain}>
             <Link to="/quiz">Play again?</Link>
        </button>
        <button className="scoreBtn">
        <Link to="/">Home</Link>
         </button>

    </div>
    </div>
    )
    }



Popup.js
const PopUp = (props) => {

  const [open, setOpen] = useState(false);

  const initialFormData = {name: " ", highscore: props.highscore}
  const [formData, updateFormData] = useState(initialFormData);

  const handleChange = (e) => {
    updateFormData({
      ...formData,
      [e.target.name]: e.target.value.trim()
    });
  };



    const handleSubmit = () => {
    console.log(formData);
    fetch( "http://localhost:3000/scores", 
                    {
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData),
                    method: "post",
                     })
                     .then (console.log);

}

    return  (
        <nav className={open ? "open" : null}>
          <div className="popup">
          <div className="popupform"> identity theft is not a joke.</div> 
          <form className="formBtn" >
              <label> Name:
          <input type="text" name="name" id="name" onChange={handleChange} />
             </label>
            </form>
                      <button className="formsubmit" value="submit"
        onClick={() => {
        setOpen(!open);
        handleSubmit();
        }}
      >
          Submit
        </button>


    </div>
   </nav>
    );
}

Creating the pop up component was also an easy way I could get the username data and score data together and post to the database.

Finally to make sure all of these components had access to each other and the data I had to make sure all the files had the proper imports defined

App.js

import React from "react";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import "./assets/style.css";
import Quiz from "./components/quiz";
import Home from "./components/home";
import Highscore from "./components/highscore";
import Result from "./components/Result";
import { useEffect} from "react";
import {fetchQuestions} from './store/actions/action';
import {useDispatch, useSelector} from "react-redux"; 
import {getData} from "./store/selectors/selector";

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import quizReducer from './store/reducers/reducer'
import "./assets/style.css";
import App from "./App";

reducer.js

import { fetchSuccess, fetchRequest, fetchQuestions} from "../actions/action"
import useData from "../selectors/selector"

And so on throughout the rest of the components!
The biggest challenge I faced during this project was passing data through props properly! It took some react doc reading to fully understand breaking down my project into thin vertical slices and working one problem at a time vs. wanting to just find a single solution to fix all my problems! taking the time to uncomment and console.log small things and to work at a slower pace to really grasp the flow of what parts of the data needed to be where and what state needed to be changed and updated is something that can only be learned from actually going through step by step on a project. I do love the ease and flexibility the React library provides.

React: easy as "create-react-app"

Kiana — Wed, 30 Jun 2021 16:25:37 +0000

Developers who have used React know how strong of a framework it is because of its flexibility and simplicity to
improve performance. React is capable of handling DOM updates by grouping efficiently to provide less rendering and more specifically what needs to update and how.

One of the most impressive features to me about React is its ability to behave so efficiently with minimal coding.
The reusable components can really keep even the most dynamic projects lightweight. To use React in its full entirety making sure you’re working in the most up to date version is the first and most important step. Of course this has been made easy for devs with the simple command of "create-react-app". Even though its tempting to just re-use old code for functionalities you may want to have in new projects it can work against you when trying to use newer react features.

Another reason I think working in React is so enjoyable is the fact that for the most part we as people think in more "declarative programing" terms.

when ordering a coffee you easily could say to the barista,

grab a cup

place the cup under the coffee spout

Fill the cup

add milk and sugar

hand me the cup of coffee

This isn’t how we tend to think though!
instead you just say, "Coffee with milk and sugar!"; a simple declarative world!

React offers a declarative approach which makes it easy to use. When code is simple, elegant and easy to read it makes it easier to maintain with less to de-bug. Listing all the steps will work, but there is no need to with React, just like a barista, it’s capable of all the steps in between without explicitly specifying.

Before you decide on adding a Gem

Kiana — Wed, 30 Jun 2021 16:25:05 +0000

2 things to remember when searching for gems to execute your projects are...

Security
To me this is probably the most important. As Im working on a project and doing my best to write efficient re-usable code I don’t want to waste time with ineffective gems! If a gem is not kept up to date with security features or has bugs those issues will be reflected in projects. you could potentially spend more time than anticipated restructuring or de-bugging simply because of a gem hasn't been kept up to date. There are plenty of resources on google to figure out what issues a gem might have as well as solutions from others on how they managed to fix gem issues.It’s always a good idea to check on how maintained a gem is before adding it to your project.
1. Is it really needed? I think about the concept that "gems are shiny"... there are plenty of gems that have amazing abilities and its easy to get caught up in the "bells" and "whistles" of dynamic gems. When faced with a problem it's sometimes so much easier to search for gems that can bundle and execute what you’re trying to accomplish, when really all it would take is a little extra effort to figure out a way to write better code. Part of the fun of creating dynamic applications or projects is the tinkering and re-writing and collaborating with others to solve an issue. Sometimes those gems are absolutely needed and the functionaries have been created for a reason, that doesn’t mean certain gems need to always be depended on.

Seeing code in everyday life

Kiana — Wed, 30 Jun 2021 16:24:29 +0000

“Once you know some things, you can't unknow them. It's a burden that can never be given away.” -Alice Hoffman

This concept has never felt so true since learning to program. Once you know how things work, you will always see whats going on "behind the scenes". Being interested in what makes the applications and technology I use in my everyday life is in no way a burden but very exciting and pushes me to want to expand my knowledge and learn how to create robust tech.

I find myself always curious about if I could create the functionalities Im using on a website or a mobile app and if I can't think of it right away, I find myself running over potential solutions in my head and pushing myself to figure out how to create it or maybe spending some time searching stack overflow or other dev blogs about how they created something similar.

Even something as mundane as driving from my home to the carwash can challenge my programming knowledge in multiple ways like the code behind...
1. The tech in my car
2. The stoplights regulating traffic (and a red-light cam I probably triggered)
3. Selecting the type of carwash I want on an automated screen when I arrive.
4. promptings on the screens around me telling me when to "stop", "go","place car in park"
5. The automated functions in the carwash controlling lights and other various functions

In just 10 minutes out of my day Ive challenged myself to think about many functionalities I would have never previously in life even thought about existing.

CSS fundamentals

Kiana — Wed, 30 Jun 2021 16:23:43 +0000

CSS is my favorite programming blackhole to find myself in. It's easy to get lost for hours in the backend of a project that by the end of the day leaves you feeling tired and mentally drained. CSS is something I could easily
sit and mess around with all day and still be excited about. I think it has to do with the fact there is an immediate result to see and can make your projects feel real and ready to launch even if there isn’t a single line written in the
backend. I love the fact I can create the smallest color, font, layout, or margins/padding changes on something simple like a button and create a completely different feel for the user.

On one of my first experiences with using CSS was in a coding workshop that I had a challenge to showcase what I had learned over the course. Things like linking sites, rendering photos, hover functions and more HTML and CSS. When working on this challenge I was definitely more focused on making sure I was executing the functionalities rather than using CSS properties to my full advantage. Since my time at Flatiron and actually learning the full benefits of CSS, looking back on that project I realized there were so many advantages that I could have implicated.

Rather than just using CSS as a styling option for font sizes and colors, which I did at the time, I've learned about using classes to render less code in my HTML and making it lightweight and easier to maintain and update. The accessibility of CSS gives more consistency in design elements like formatting and layout. Going forward in other projects I try to use CSS to my full advantage in the presentation and structure of my projects.

Object Oriented Programming

Kiana — Wed, 30 Jun 2021 16:22:42 +0000

"As humans, we’re constantly faced with myriad facts and impressions that we must make sense of. To do so, we must abstract underlying structure away from surface details and discover the fundamental relations at work. Abstractions reveal causes and effects, expose patterns and frameworks, and separate what’s important from what’s not. Object orientation provides an abstraction of the data on which you operate; moreover, it provides a concrete grouping between the data and the operations you can perform with the data—in effect giving the data behavior."
—Object-Oriented Programming with Objective-C, Apple Inc.

OOP is exactly what an inexperienced programmer might guess...programming structure that is oriented around objects. smaller functionalities(objects) that can have specific behaviors(methods/attributes) bundle up in a way that executes a larger logical functionality(classes). Each object has values defined in its class resulting in a simple structure with less duplicate code.

                     Basic structure of OOP:

Classes --> the top structure of methods/attributes
Objects--> instances of a class with specific data

3.Methods--> behaviors/actions performed on data

4.Attributes--> information that is stored via the class
```
                   Four pillars of OOP:
```
Inheritance-->child classes getting data from a parent class
Encapsulation-->displaying specific info from an object
Abstraction--> accessing a specific object
Polymorphism--> shared behavior of methods

Object Oriented programming really just means to think about the structure of the program at the beginning of your projects. Planning ahead of how to create simple objects and reusable classes will help with maintaining an easier flow of logic when working on a project. OOP is just one way to build an efficient data structure with reusability.

Data structures

Kiana — Wed, 30 Jun 2021 16:22:01 +0000

what is it?

Data structure at its most basic concept is just organization and storing information.
However, there are a lot of ways to organize and not everyone prefers to organize the same.

For my personal approach on grasping these concepts early on, I read blogs on how others developed concepts I was trying to accomplish. I quickly learned there was different approaches to storing data in efficient and easy to modify code.

To familiarize myself with different data structures I read different source material and took notes in way that helped me understand and remember basic terms. The best way to learn was to actual "do". I had a better understanding of effective data structures in one of the first projects at flatiron which was to build a CLI tic-tac-toe game. The curriculum of flatiron was easy to understand and very "user-friendly" for a beginner. However, I was interested in other ways to accomplish organizing different structures. From there going back and forth with refactoring and changing how to store arrays and objects really helped me understand how versatile data structures can be.

Why software engineering?

Kiana — Wed, 30 Jun 2021 16:20:57 +0000

why not software engineering... with the world changing and becoming more "tech-based" everyday the opportunity to learn and create seem endless.

         - My top 3 reasons-

           1.Opportunity

From Medtech, security, creating new applications or webpages or really anything that utilizes technology there is an opportunity to explore many different areas. I think about how my career-oriented interests might grow and change within the span of my career and how being a developer has the potential to provide me with the ability to adapt and explore different areas within the field.

      2. Job security

From a tech perspective, the world is not changing. As technology develops there will always be a demand for people who know how to program it all! Even if working for a tech corporation isn't the desire, having the knowledge to create webpages, apps or programs that are desired by entrepreneurs can always be an option.

Somewhere between creativity & knowledge Maybe it's where creativity and knowledge meet...From a personal perspective I have always been a strong artist and in academics. When thinking about a career path I always struggled to find a way to keep and develop both of these strengths. The more I learned about different languages and about the ways different developers approach situations I begin to appreciate how much creativity along with a devs knowledge can (literally) make or break what is trying to be accomplished. From the front-end and back-end the creativity and knowledge needed to bring it all together is an exciting field to find yourself in.

A Simple CLI

Kiana — Wed, 30 Jun 2021 15:46:41 +0000

For my first project in Flatiron Software Engineering program, I had to create a command line application in Ruby. My application would be bundled into a package known as gem. My CLI uses Nokogiri to scrape facts about plants from a website and allows the user to choose a number to display a random fact.
One of the main requirements for this projects was for a user to be able to go one level deep (a user can make a choice and based on that, make another selection and so on).

This being my first CLI I wanted to keep it as simple as possible to make sure I understood the flow of creating and developing the environment. After creating a repository on github(github has plenty of information and resources on this), I created a gem by following the walkthrough on https://guides.rubygems.org/make-your-own-gem/.

From there I ran bundler and connected my repo. In the gemspec file had to add development dependencies for bundler, rake, rspec, and pry, and a general dependency for nokogiri.
gemfile
gem "nokogiri" gem "pry" gem "rake", "~> 13.0" gem "rspec", "~> 3.0"

gemspec
Gem::Specification.new do |spec| spec.name = "plantfacts"

Even with so many ideas of creating different features, the ability to create the start of the interface was the most important foundation to understand. Making sure I was solid on setting up and creating my gem and scraping the exact information is where I wanted my focus. After all of this foundation laid there is the ability to add features, separate concerns and provide more interactive functions for this CLI.

I started with a basic flow diagram on the absolute minimum.

1.prompting a user with a question
2.receiving that input
3.doing something with that input

I decided to do a simple test of my ability to create a logical flow of the basic classes and methods I would be needing. These would just be objects calling on other objects in direct flow of events. The first being located in the bin folder under a file I created called plant.
bin/plant
require ./lib/plantfacts/cli.rb Plantfacts::CLI.new.start

In this folder I am requiring my cli.rb file which holds my class with all my app logic defined in it.
cli.rb
class Plantfacts::CLI end
Between these two files our connection for the logic of the app is made.
The :: operator allows constants, instance methods and class methods defined within a class or module, to be accessed from anywhere outside the class or module.
With this file I am also allowing the next event to happen,

cli.rb
require_relative '../plantfacts' require_relative 'scraper'

Just these two lines of code are essential to operating.
The first line points to the environment holding all my files.
The second points directly to file of where my scraping is taking place, defining the .rb isn't necessary since the files its being called in is in the same folder. I still decided to separate this logic out so it was easier to work with in the future for debugging as I built out my project. Within this folder I had to give access to two very important things...
scraper.rb
require 'nokogiri' require 'open-uri'

Nokogiri to be able to scrape the webpage of my choosing as well as 'open-uri' to directly call on the url.
This small amount of code wouldn't work without requiring them both.
scraper.rb
def facts array=[] doc = Nokogiri::HTML(URI.open("https://www.funfactsabout.net/plant-facts/")) doc.css("ul.facts-list li").each do |list| array.push(list.text) end return array end

With the basics of my app environment flow set up I could start writing out exactly what I wanted to happen in my cli.
Thinking back to the flow of the user experience,
I wanted to prompt a user with a question(if they wanted to learn about plants)
receiving that input, which would then envoke a case statement deciding what to do with that input.
These functions were all defined within the plantfacts class.
cli.rb
def start puts "Hi! do you like plants?[yes/no]:" input=gets.strip case input when "no" puts goodbye when "yes" puts plant end end
from there my 'goodbye' and 'plant' methods allow the user to continue on with their experience until they are ready to exit the app.

Although I don't intend to develop this basic cli any further or reuse the website/update the information later on, I wanted to execute good practices of creating re-able and re-usable code and understanding creating an environment within an app.