Giter VIP home page Giter VIP logo

onlinetime's Introduction

OnlineTime

Online clock that tells the time.

onlinetime's People

Contributors

godenisgo avatar

Watchers

 avatar

onlinetime's Issues

:magic_wand: code review

In no particular order

  • lines, especially comments are a bit long sometimes, maybe add a custom linter rule https://eslint.org/docs/latest/rules/max-len
  • srvr.js would probably be better as server.js (or index.js but I prefer server.js)
  • as times.js has only a single export consider using a default export https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
  • in srvr.js get the port number from the environment variables const port = process.env.PORT || 8080
  • in CustomClock.js the way CSS is handled looks like it could cause issues, it would be better to have separate CSS files. However I'm not experienced enough with custom components to say how I think this should be done
  • index.js appears empty

Overall, the code looks good but following some of the comments above will improve things a bit. Other things to consider

  • host this on github pages so other people can see it, this is a great way to link things to host things like a portfolio so well worth getting to grips with
  • consider building this into a docker image

Try unscopable methods on CustomClocks

Example:

with (elem) {
        append("Text");
        randomStylings();
        randomMethods();
}

Just to see what happens. May or may not work. Point is to make things simpler.

Inconsistent Styling

The website uses dynamic units for calculating element dimensions.

As the website is currently, the design is inconsistent among different aspect ratios. The experience is worst on Mobile devices where the screens are very tall and not very wide.

  • The clocks are visible but cut-off (clip with the Window's borders) when the Window width is too small.
  • The clocks clip with the SVG borders every ninety degrees. This makes the clocks not perfectly round.
  • The clocks are hard to interpret unless the user hovers their mouse over each SVG to read their Titles and learn their timezones.
  • The Clip Path on the countertop bell sometimes clips the sides of the bell when the page is very tall and not very wide.
  • The text does not resize or adjust when the Window shrinks. This makes the page more unreadable.

This needs to be fixed. These changes are important as they affect the user experience.

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.