Jim's
Tutorials

In sliderjs I had to change code I had from a button that made the picture shift, to an arrow. This was not too hard, and then I needed to have two arrows and so made a LeftArrow and RightArrow component each with the following code

import React from 'react';
import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const LeftArrow = (props) => {
  return (
      <div className="prevArrow">
      <FontAwesomeIcon icon= {faAngleLeft} size='l' color='red' onClick={props.goToPrevSlide} />

      </div>
  );
}


export default LeftArrow;

import React from 'react';
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'


const RightArrow = (props) => {
  return (


    <div className="nextArrow">
    <FontAwesomeIcon  icon= {faAngleRight}  color='gray' onClick={props.goToNextSlide} />

    </div>


  );
}

export default RightArrow;

And I had some styling issues getting fontawesome to show up so I read this about fontawesome and package managers because I was thinking I wasn't importing the right thing as compared to the yarn package I'd actually downloaded. There are free versions and pro versions and dev versions, each using their own prefix fa or fas or fa-fa whatever, so I had a lot of playing around with different combinations to do before I realized I needed to learn about react (jsx) specific font awesome syntax and had to read about how it works for javascript and here's another tutorial for font-awesome 5 with react

again here's the code that actually worked for fontawesome:

<div className="nextArrow">
    <FontAwesomeIcon  icon= {faAngleRight}  color='gray' onClick={props.goToNextSlide} />

and the matching import statements- finally got the right combination:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'

I had to change how text was coming into the slider. before I was doing this;

[insert old code here]

and now I have this, and I'll explain it below;

import React from 'react'

const CircusDescription = (props) => {
  const styles = {visibility: props.visibility}
  return(
  <div>
  <h1>HIIII</h1>
  <h2>well  then</h2>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>


  </div>
    )
    }



export default CircusDescription;

See PICTURE 1 and PICTURE 2 for examples of what I have it looking like with this code, and what it's supposed to look like.

Essentially I was passing text into the slider component, so that every time you clicked the arrow you'd get a new picture and a new batch of text. Everything was working fine until I realized that each page in the slider is going to look different: I can't just pass different text in and pass different images in and expect that one slide won't have more images or smaller images or less/more text. Since each page represents a project, I can't expect that the visual necessities and display of each project will be the same. So that was a mistake. The 'circusdescription' above illustrates my new efforts at having to manually create each webpage I'll end up having. see the third picture below to see what the different pages are probably going to look like. so it is clear that I can't have things passing or some kind of template that would work for all of them.

before, I had a text.js component that kept all the data of the text I'd need when I was thinking I'd be able to make a template like this. I have an example pic below.

then I just called this.props.text and called the info that way, so had to totally change the architecture to simply call the element circusdescription as in my 5th picture. And so this is what my slider component looked like at the end of it:

render() {
     return (
         <div>
            <div className="slider">
                <div className="slider-wrapper"

                  style={{
                    transform: `translateX(${this.state.translateValue}px)`,
                    transition: 'transform ease-out 2s'}}>
                  {this.state.slides.map((slide, i) => (<Slide key={i} image={slide.image}/>))}
        </div>



        <RightArrow goToNextSlide={this.goToNextSlide}/>
        <LeftArrow goToPrevSlide={this.goToPrevSlide} />
        </div>
<CircusDescription />
        </div>
        );
      }
    }

attachments

		last modified	size
	Screen_Shot_2019-03-03_at_2.54.55_PM.png	Mon Apr 29 2024 10:14 pm	4.7M
	Screen_Shot_2019-03-03_at_2.55.37_PM.png	Mon Apr 29 2024 10:14 pm	3.6M
	Screen_Shot_2019-03-03_at_3.01.54_PM.png	Mon Apr 29 2024 10:14 pm	1.2M
	Screen_Shot_2019-03-03_at_3.02.37_PM.png	Mon Apr 29 2024 10:14 pm	65K
	Screen_Shot_2019-03-03_at_3.06.41_PM.png	Mon Apr 29 2024 10:14 pm	241K