Forem: CalebMcCoy04

Modal Box

CalebMcCoy04 — Thu, 05 Jan 2023 17:31:49 +0000

A modal box is a dialog box or window that appears on top of the current page, and requires the user to interact with it before they can return to the underlying page. Modal boxes are often used to display important content or to prompt the user for a specific action, such as filling out a form or making a decision.

There are several types of modal boxes, including:

Alerts: These are modal boxes that display a message and require the user to click a button to acknowledge the message and close the box.

Confirmations: These are modal boxes that prompt the user to confirm or cancel an action.

Prompts: These are modal boxes that request input from the user, such as a name or email address.

Modal boxes can be triggered by various events, such as clicking a button or link, hovering over an element, or loading a page. They can also be triggered programmatically using JavaScript.

Here is just an example in react for its use:
import React, { useState } from 'react';

import React, { useState } from 'react';

function ModalExample() {
  // State to track whether the modal is open or closed
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <>
      {/* Button that triggers the modal */}
      <button onClick={() => setModalOpen(true)}>Open Modal</button>

      {/* Modal component */}
      {modalOpen && (
        <div className="modal">
          <div className="modal-content">
            <button onClick={() => setModalOpen(false)}>Close</button>
            <p>Modal content goes here</p>
          </div>
        </div>
      )}
    </>
  );
}

This code will create a modal box with a close button and some content. The modal is hidden by default, and is displayed when the user clicks the "Open Modal" button. The user can close the modal by clicking the close button.

Modal boxes are a useful tool for web developers because they allow them to display important content or prompts to the user without requiring a new page load. This helps to improve the user experience and keep the user on the current page.

That's a brief overview of modal boxes! I hope it was helpful.

all the CRUD

CalebMcCoy04 — Tue, 13 Dec 2022 17:09:59 +0000

CRUD is a common acronym in the world of programming. It stands for Create, Read, Update, and Delete, and it refers to the four basic operations that can be performed on a database.

In this post, we'll take a look at how to implement CRUD using Ruby on Rails and JSON. Here's an example of a controller that performs CRUD operations on a Product model:

# Create a new record in the database
def create
  product = Product.new(product_params)

  if product.save
    render json: product, status: :created
  else
    render json: product.errors, status: :unprocessable_entity
  end
end

# Read a record from the database
def show
  product = Product.find(params[:id])

  render json: product
end

# Update an existing record in the database
def update
  product = Product.find(params[:id])

  if product.update(product_params)
    render json: product
  else
    render json: product.errors, status: :unprocessable_entity
  end
end

# Delete a record from the database
def destroy
  product = Product.find(params[:id])
  product.destroy

  head :no_content
end

private

# Strong parameters
def product_params
  params.require(:product).permit(:name, :price, :description)
end

In this example, the controller methods return JSON data instead of rendering views. JSON (JavaScript Object Notation) is a lightweight data interchange format that is often used to exchange data between web applications and servers. In this case, the controller methods return a JSON representation of the Product object that is being created, retrieved, updated, or deleted. This allows a client application to access the data and use it however it needs to.

That's it! You can use this simple example as a starting point for implementing CRUD in your own Rails applications.

Switch vs Routes in React V5 vs. V6

CalebMcCoy04 — Wed, 07 Dec 2022 15:46:14 +0000

Hello today I am going to be talking about using Switch vs. Routes hook in react and the basic setup. to get started first run this command in your terminal to install the react router.
npm install react-router-dom
add @5 at the end to install version 5

Switch and Routes is just a special version of the tag
Next lets go over what the syntax will look like this will be version dependent!

first we will show the version 6

import {Routes, Route} from 'react-router-dom'

function App(){
  return (
    <Routes>
      <Route path="/" element={Component/>}/>
    <Routes>

now we will show version 5

import {Switch, Route} from 'react-router-dom'

function App(){
  return (
    <Switch>
      <Route exact path="/">
        <Component/>
      </Route
    <Switch>

side note exact sometimes cause an error so try deleting it if this happens.

sources:

Hoisting

CalebMcCoy04 — Tue, 22 Nov 2022 16:11:42 +0000

Hello, Just wanted to chat about a topic that confused me in the beginning, hoisting.
Hoisting refers to setting variables, functions, or classes to the top level of their scope.

const hoistedVariable = 1
//this is hoisted 
function something(){
return hoistedVAriable + 1
}

const and let both can be hoisted but are not initialized.

Where as if we had some variable declared within a function it would not be hoisted.

function Something(){
const notHoisted = 2
// not hoisted
return notHoisted + 4
}

the above examples show hoisted vs not hoisted.
there is some interesting stuff with var but for me best practice its not to use var so that wont be covered here.

Functions

CalebMcCoy04 — Sat, 12 Nov 2022 02:51:47 +0000

Hello, today I just want to chat about functions and how useful they are. Functions are tool that we can use that make our code more dynamic and are like the a swiss army knife of coding. Functions are fun to set up and reusing them is satisfying especially when you can just slot them in and everything flows. Functions are very good tool to learn and understand. Here is the function syntax to get you started:
function someFunction(parameter){ return something }
Function even have their own scope and you can write code that only deploys when that function is invoked. This tool can save you a ton of time when coding if you know that you will be reusing that code. have to pull something from the DOM write a function for that process! Functions also return something so there is an input and an output. Over all just want to gush about functions for a bit since they are so neat and handy!