/molly-haughey.github.io

Primary LanguageCSS

molly-haughey.github.io

Intializing repository.

//////Approach

  1. Write out process and deadlines in a notepad.
  2. Wireframe app.
  3. Set up boilerplate, link CSS and JS files, link jQuery, set up website skeleteton structure for the main page.
  4. Add styling via CSS.
  5. Link Pokemon API and set up linked index.html page.
  6. Set up carousel. Achieve functionality.
  7. Style carousel.
  8. Set up index2.html, including boilerplate and appropriate links.
  9. Set up header text for index2.html and style it.
  10. Style the button that will generate the info on the Pokemon (to be grabbed from API).
  11. Write down //

    // tags for the Pokemon attributes you want to grab from Ditto.

  12. Style the //

    // tags.

  13. Use JQuery to append the appropriate objects from the API to the appropriate

    tag.

  14. Get the button to generate the data from the API that will populate the //

    // tags.

  15. Add image (Ditto's Pokemon card) and text information about ditto with fade-in css animation.
  16. Add responsiveness on mobile, tablet, and browser. (Note: I should have done this first, but forgot).
  17. Add navigation bar on index2.html so that user can get back to main page.
  18. Last-touches, styling.
  19. Commit!
  20. Remove Trivia link.
  21. Add inputs for Pokemon attribute and name.

/////////Technologies Used

Spectacle: This app allows you to move and resize windows on your computer, either by selecting the commands with a mouse, or, preferably, by utilizing keyboard commands. VSCode: This is a downloadable code-editing software featuring debugging support, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Source: https://techcrunch.com/2015/04/29/microsoft-shocks-the-world-with-visual-studio-code-a-free-code-editor-for-os-x-linux-and-windows/ JQuery: JQuery is a Javascript website whose purpose it is to make using Javascript easier on your website. https://www.w3schools.com/jquery/jquery_intro.asp#:~:text=jQuery%20is%20a%20lightweight%2C%20%22write,a%20single%20line%20of%20code. Javascript: This is a programming langauge that some describe as "vanilla coding."

///////////Live Site Link

https://molly-haughey.github.io

///////////Installation Instructions I designed this site so that somebody with a latent interest in Pokemon could scroll forwards and backwards through some pictures of Pokemon (on the main page) and then visit a link to discover the Pokedex for Ditto.

To use the carousel on the main page: Click "Next" on the bottom of the carousel to move fowards through the images and "Previous" on the top of the carousel to move backwards through the images.

To access the Pokedex:

  1. From the main page, scroll to the bottom navigation bar and click "Pokemon."
  2. And image and info on Ditto will slowly appear automatically (an animation). To access the Pokedex for Ditto, click the button "Generate Pokedex".

////////////Unsolved Problems Resizing the "Generate Pokedex" button. It never became the size I wanted it do be.