Skip to content

Recreation of a popular slider UI. JavaScript Objects: use of Object Literal Syntax and Dot Notation. Image element src through JS

Notifications You must be signed in to change notification settings

KristaCalleja/testimonials-slider-master

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Coding bootcamp testimonials slider solution

This is a solution to the Coding bootcamp testimonials slider challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the component depending on their device's screen size
  • Navigate the slider using either their mouse/trackpad or keyboard

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • Vanilla JavaScript

What I learned

I learned how in JavaScript Objects are used for collection of data. Since I first learned Ruby first I was looking for something which contained data the same way that a Ruby Hash does. I then iterated through that using dot notation.

Another important detail I worked with is JavaScript escaping, since the paragraph text contained a lot of quotation marks and appostrophes. I managed to go around that by using back-lashes.

Since the button controls run through the Objects, I had to use the onload property as an event handler to load the first slide.

I am also happy that I finally had the opportunity to use the "Not" selector Pseudo-Class in CSS, as seen below:

img:first-of-type:not(.controls img){
    opacity: .3;
    position: absolute;
    width: 100%;
}

Continued development

I still need to figure out how to re-size the curve in the pseudo-element (see commented out line 86 of style.css), and also how to improve on the opacity image without affecting background.

Useful resources

  • Codepen Drawing board - This helped me reason out my workflow, and how the data would be loaded dynamically through JavaScript.

Author

About

Recreation of a popular slider UI. JavaScript Objects: use of Object Literal Syntax and Dot Notation. Image element src through JS

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published