Coder Social home page Coder Social logo

stopwatch's Introduction

Stop Watch

Web link - https://avinash201199.github.io/stopwatch/

  • Time is the most essential part of everyone's life and keeping track of this time is equally important.
  • A clock helps us in our quest to utilize our time efficiently. To assist you to excel in this quest we are building a digital stopwatch.
  • This stopwatch represents the time in DD:HH:MM: SS (day:hour:minute: second) format, making it easy to keep track of our time.
  • The functionalities of Start, Stop, Reset, Lap, and Clear Lap are accessible with a click of a button.
  • To enhance the visual appearance it can be viewed in both dark and light modes, making it easier to access at all times, along with having a responsive website to maximize the user experience.

Untitled design

Tech Stack

Untitled design (1)

  • Html
  • Css
  • Javascript
  • Note: First create an issue then make a pull request :)

    How to be a contributor to the project ๐Ÿ˜Ž

    1. Star The Repo ๐ŸŒŸ

    • Star this repository by pressing the top-rightmost button to start your incredible journey.
    • Create an issue describing how you want to contribute to this project.

    2. Fork it ๐Ÿด

    • Then fork this repository by using the Fork button on top-right of your screen.

    • In the forked repository add your changes.

    3. Clone it ๐Ÿ‘ฅ

    NOTE: commands are to be executed on Linux, Mac, and Windows(using Powershell)

    • You need to clone (download) it to a local machine using
    $ git clone https://github.com/Your_Username/stopwatch.git

    This makes a local copy of the repository in your machine.

    • Then make a pull request with the issue number.
    • Once you have cloned the stopwatch repository in Github, move to that folder first using the change directory command on Linux, Mac, and Windows(PowerShell to be used).
    # This will change the directory to a folder stopwatch
    $ cd stopwatch

    Move to this folder for all other commands.

    4. Set it up โฌ†๏ธ

    • Run the following commands to see that your local copy has a reference to your forked remote repository in Github :octocat:
    $ git remote -v
    origin  https://github.com/Your_Username/stopwatch.git (fetch)
    origin  https://github.com/Your_Username/stopwatch.git (push)

    Now, let's add a reference to the original stopwatch repository using

    $ git remote add upstream https://github.com/avinash201199/stopwatch.git

    This adds a new remote named upstream.

    See the changes using

    $ git remote -v
    origin    https://github.com/Your_Username/stopwatch.git (fetch)
    origin    https://github.com/Your_Username/stopwatch.git (push)
    upstream  https://github.com/Remote_Username/stopwatch.git (fetch)
    upstream  https://github.com/Remote_Username/stopwatch.git (push)

    In your case, you will see

    $ git remote -V
    origin    https://github.com/Your_Username/stopwatch.git (fetch)
    origin    https://github.com/Your_Username/stopwatch.git(push)
    upstream  https://github.com/ietebitmesra/stopwatch.git (fetch)
    upstream  https://github.com/ietebitmesra/stopwatch.git (push)

    5. Sync it โ™ป๏ธ

    • Always keep your local copy of the repository updated with the original repository. Before making any changes and/or in an appropriate interval, run the following commands carefully to update your local repository.
    # Fetch all remote repositories and delete any deleted remote branches ``
    $ git fetch --all --prune
    # Switch to `master` branch
    $ git checkout master
    # Reset local `master` branch to match the `upstream` repository's `master` branch
    $ git reset --hard upstream/master
    # Push changes to your forked `stopwatch` repo
    $ git push origin master

    6. Ready Steady Go... ๐Ÿข ๐Ÿ‡

    • Once you have completed these steps, you are ready to start contributing by checking our Help Wanted Issues and creating pull requests.

    7. Create a new branch โ€ผ๏ธ

    • Whenever you are going to contribute. Please create a separate branch using command and keep your master branch clean (i.e. synced with remote branch).
    # It will create a new branch with name Branch_Name and switch to branch Folder_Name
    $ git checkout -b BranchName
    • Create a separate branch for contribution and try to use the same name of the branch as of folder.

    To switch to the desired branch

    # To switch from one folder to other
    $ git checkout BranchName
    To add the changes to the branch. Use
    # To add all files to branch Folder_Name
    $ git add .
    Type in a message relevant for the code reviewer using
    # This message gets associated with all files you have changed
    $ git commit -m 'relevant message'

    Now, Push your awesome work to your remote repository using

    # To push your work to your remote repository
    $ git push -u origin BranchName
    • Finally, go to your repository in the browser and click on compare and pull requests. Then add a title and description to your pull request that explains your precious efforts

    8. Pull requests should have screenshots of the changes you have made.

    9. Wait for review. โค๏ธ


    Project

    - https://avinash201199.github.io/stopwatch/

    Screenshots

    Interface of the StopWatch

    image

    StopWatch Started

    image

    If you want this project then go ahead. Fork and clone it, and make changes according to you. After that, you can host it on Github using Github pages. For any help reach me on social media link in profile readme. https://www.instagram.com/lets__code/

    Connect with me


    Thank you for your valuable contribution!

    Our Contributors

    stopwatch's People

    Contributors

    17moons avatar akanksha29122002 avatar and-rahul avatar arjun-khanduri avatar arora1mayank avatar arunsingh009 avatar aswinikalyan30 avatar avinash201199 avatar bhavesh1129 avatar bprathamesh20 avatar chiragraghu avatar gaurav147-star avatar heny742 avatar himanshukoshti avatar iqrafirdose avatar ishneet890 avatar kkartik07 avatar kubikill avatar meixinchoy avatar mohamed-ayaan358 avatar parzival272000 avatar pratibha2001 avatar rockingrohit9639 avatar sagarparmar881 avatar sardarshubham avatar tarunverma504 avatar ujjwalgupta9125 avatar umang-singla avatar utsavmehta19 avatar xrealneon avatar

    Stargazers

     avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

    Watchers

     avatar  avatar

    stopwatch's Issues

    responsiveness

    It is not reponsive if this is valid issue then please assign this issue to me
    responsive

    Improve the file structure

    Can I improve the file structure the files are not kind of organized , I can add them In the meaning full folders

    Enable dark theme on load if user prefers dark color schemes

    Right now, the page will load using the theme set by user, unless it was never changed then it will load in light theme by default.
    I'd like to change it, so instead of loading light theme by default, the page will use the "prefers-color-scheme" media query to set dark or light mode accordingly until the user manually changes the theme on the page. Please assign me to this issue.

    Change the button

    Hey, I want to change the button UI according to the UI of website.

    "Alter Mode" button is not attractive

    The "Alter Mode" button is not attractive as it should be.
    It should be a toggle button instead of a simple button.

    I would love to change it and make it a toggle button if you can allow me.

    Issue in time

    Time is not updating every second, to update the time we have to reload the page.

    Lap record being displayed unnecessarily

    Description

    While exploring this web app I found some minor issues which I've fixed

    • Lap Record section was visible even when it wasn't required
    • Clicking upon a button created an rectangular outline around it which didn't matched with button's shape

    Relevant Screenshots

    issue

    A proper readme.md file

    Could I work on updating the readme file, in order to give a detailed insight on the project under the Hacktoberfest 2021

    Add social media icons at the footer

    The web app currently lacks any links to the social media handles or the GitHub repo of the project. I would be happy to add those! Happy Hacktoberfest!

    Improve responsiveness

    Right now, the margins set on the #record-container element cause it to display off-center and overflow the main body on mobile/tablet resolutions. Please assign me to this issue, I'd like to fix it.

    Add White noise to pomodoro

    Since the pomodoro timer is for helping to do a concentrated work, Shall I add a new option to add white noise in the background , Could you assign me this task?

    fixing the stopwatch button

    @avinash201199 I want to fix the stopwatch Button on the home page because its not linked/redirected to the same page and just showing # in the url.....Can you plzz tell should I remove the click option from that....or I must redirect it to same page? And plzzz assign this task to me

    create a function named $

    My prorpose is to create a function named $ to create a shortcut to getElementById that could be verbose if the project growlet me know if can i add this.

    color scheming can be improved

    We can color code our buttons and also make them more appealing by giving them 3d look and curve edges and also color coding each button. We can also color code the hour and minutes for better readability by the user. and overall UI aspcet can be improved and some animations can be added too.

    Create proper div for laps

    Currently the laps overflows the div and destroys the counter.
    Can I create a scrollable container for laps ?
    Something like this:
    image

    Display Start/Pause Icon

    I think displaying Start/Pause Icon on the button is better than a fixed stop icon. If you want I can work on it.

    Adjust Stopwatch format

    Hi, I would like to work on the following issues:

    1. add ms behind the last 00:
      image

    2. adjust the size of Hr, Min, Sec and Ms in mobile view
      image

    Feature: Background change on click

    I have added stopwatch icon and background change on every button click.
    can i create pr and wiil you add under hacktoberfest

    for start
    This is an image

    stop button
    This is an image

    for reset default

    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.