To add more interest to the website JavaScript was going to be included to add animations at through the portfolio. From looking back at the final wire frame for the website the idea was to include a slideshow at the beginning of the site allowing for interest at the first user interaction with the site. As I have previous experience working with CSS animations to develop slideshows using pure CSS, I wanted to challenge myself to develop a slideshow using JavaScript, providing more options for animation styles and what elements could be animated.

After working on learning JavaScript for the past few weeks, my knowledge of the language has grown, although applying the knowledge which has been taken to the elements which were going to be styled was still very difficult for me. To aid the process of applying the JavaScript to the elements which were going to be styled, test images were used as the final images had not yet been developed and were placed into the HTML code inside two divs which would hold the content and also allow for styling to be applied to those specific elements along with the animation styling which could be applied using both JavaScript and CSS.

Once the HTML was developed the CSS was then moved onto which stated the dimensions of the container of which each of the images are contained within, allowing for the images to be constrained to a certain size to make it easier to work into the CSS grid. After defining the sizes and positions the animations were then defined within the CSS by selecting the inner div just containing the image and defining the type and duration time of animation.

Moving on with the animation, after defining the CSS the next step of the process was to add JavaScript, of which to start with I was confused as to how to layout the script which I wanted to define, so using sites including w3schools and code pen to view other examples of slideshows the layout was determined by defining the function and giving it a name which relates to that animation. After defining the function, the function was then entered by connecting to the actual element within the HTML and creating an array in which would show the slides over a period of time. After defining the array with the display being set to none a new array was created to state that if the number of slides is more than 0 than increase that number by one to the defined element (the image) to replace that side and show the new element which would be the new image. After this the time frames were defined to show that the images would be changed every five seconds, allowing the user time to view the image before it disappears.

Overall the development of this section of the site has been the most challenging element yet as I have never worked with JavaScript in this way before and it took a large amount of time working on the understanding of code and how to piece together each separate section to allow the code to work in turn with the HTML and CSS which had been created separately. With the use of many online tutorials and viewing other’s code online really aided the process of development, although  more research and practise with JavaScript will be needed to understand the language more than what I currently do.

Bibliography:

SitePoint. Pure CSS Image Slider. [ONLINE] Available at: https://codepen.io/SitePoint/pen/qiAyo. [Accessed 22 April 2019]

SvenGehring. SImple CSS Slider. [ONLINE] Available at: https://codepen.io/cybrox/pen/cyiJI. [Accessed 22 April 2019]

Tryit Editor v3.6. 2019. Tryit Editor v3.6. [ONLINE] Available at: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto. [Accessed 22 April 2019]

YouTube. 2019. JavaScript in 7 minutes | Create Interactive Websites | Code in 5 – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=LFa9fnQGb3g. [Accessed 22 April 2019]