Giter VIP home page Giter VIP logo

codewars-showcase's Introduction

brela's codewars showcase

This site is collection my coding challenges
The purpose of this is to track my journey of learning JavaScript.
Some of my coding challenges appear on this site, while the less interesting ones are in the repository "coding-challenges" without a User Interface

codewars showcase website pic

tech used

HTML, CSS, JavaScript, jQuery

notes

  • the JS/codingChallenges-with-userInput.js file - JavaScript code to make the coding challenges work with user input (these are designated with stars ⭐ on the GUI)
  • the JS/siteOperations.js file - JavaScript/ jQuery code to make the whole page and layout work - a user can click a list item on left and it's content displays in main section

highlights

✔️used jQuery to make 'hover item shows preview' and to work only on device width > 1000px
✔️used JS to create click events for each list item (see JS/siteOperation.js)
✔️practiced keeping a large html file clean and organized

todo

  • refactor siteOperations file to use event delegation
    • this will make code slightly cleaner and more efficient because then only one event listener will be used on parent vs all of the child events having their own even listener

codewars-showcase's People

Contributors

brela avatar

Watchers

 avatar

codewars-showcase's Issues

Mouseenter item-preview doesn't work on some items

If an item from the nav on left is selected, the mouseenter to show preview on each item will work in that kyu section but not the other kyu sections. For example if an item in 6kyu is selected, the items in the above kyu section's (7kyu, 8kyu) previews don't work.

With a similar problem I was a able to fix it by changing the z-index of the css class that is activated on mouseenter.

Mobile Doesn't work

Mobile page worked before then stopped after I changed the hover effect form CSS to JS

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.