Code Monkey home page Code Monkey logo

cdanderson76 / interactiveratingcomponent Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 45 KB

This is the desktop solution for the Frontend Mentor Interactive Rating Component Project

Home Page: https://cdanderson76.github.io/interactiveRatingComponent/

HTML 17.79% CSS 62.62% JavaScript 19.59%
css frontend frontenddeveloper frontenddevelopment frontendmentor frontendmentor-challenge html interactive-rating-component javascript javascriptdeveloper

interactiveratingcomponent's Introduction

This is my solution for the Interactive Rating Component

This is an HTML, CSS, and JavaScript challenge in which I practiced the basics (Flexbox, responsiveness, and JavaScript with light DOM manipulation. With this challenge, you can click on any of the rating elements, and it simply renders a 'Thank You' page notifying you of what rating that you had given.

Interactive Rating Component

What are you most proud of, and what would you do differently next time?

Not sure what I'd do differently next time. This was my first project implementing JavaScript, and I think I did ok. I did take the time to plan my approach on this project, as I was nervous about going into it and getting stuck. And while I DID get stuck, I learned a very valuable lesson about the developer tools in Chrome.

I can say that I'm most proud of the animations that I was able to include in this one. I just wanted to find a way to make this my own unique version. 'I' think it looks pretty cool :) .

What challenges did you encounter, and how did you overcome them?

GETTING THE VALUES FROM THE LIST OF ELEMENTS. I'm sure it was very easy for some, but everything that I had tried was amounting to errors and lots of repetitive 'undefined' alerts being thrown in my face. But then it occurred to me that maybe I should make sure that I'm grabbing the list elements the appropriate way in JavaScript. I opened my dev tools and 'console-logged' what I was grabbing. Once I got something back, I took a deeper look inside to see if I could find what I wanted, and I found the values that I was trying to get. After so many challenges and lessons with objects, it was smooth sailing from there. I also had to google search how to highlight one of the list elements while 'un-highlighting' any other selections. Did some digging in stack overflow and found what I was missing. AND, I actually could understand what the code was doing...

What specific areas of your project would you like help with?

I think I got most of my answers that I had researched, but by all means, any productive input on how I can improve this is more than acceptable.

interactiveratingcomponent's People

Contributors

cdanderson76 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.