Giters

fork-commit-merge / fork-commit-merge

Fork, Commit, Merge. A project designed to help you familiarize yourself with the open source contribution workflow on GitHub!

Home Page:https://forkcommitmerge.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fork, Commit, Merge - Hard Issue (HTML/CSS/JavaScript)

nikohoffren opened this issue · comments

commented

Fork, Commit, Merge - Hard Issue (HTML/CSS/JavaScript)

Create a Functional Clock using HTML, CSS and JavaScript

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

Issue created by krishvsoni.

How to Get Started:

Open the tasks/html/hard/clock directory from the root of your project.
Then open the index.html, index.js and style.css files and start implementing your solution!

Objective:

In this task you have to implement clock functionality for HTML/CSS/JavaScript clock project.
The project is missing the implementation of clock functionality. This involves creating clock hands, numbers, and making sure they function in real-time.

Files:

  • tasks/html/hard/clock/index.html
  • tasks/html/hard/clock/index.js
  • tasks/html/hard/clock/style.css

Tasks:

HTML (index.html)

  • Add code for clock hands (Hour, Minute, and Second hands) using div elements with appropriate class names and data attributes.

CSS (style.css)

  • Define styles for the minute and hour hands to distinguish them from the second hand.
  • Define rotations for the clock numbers (1 to 12).

JavaScript (index.js)

  • Implement setRotation function to update the rotation of a DOM element based on the provided rotationRatio.
  • Calculate the current time and update the clock hands' positions based on that.
  • Call the setClock function to initialize the clock's position when the page loads.

Notes:

  • Please follow code style guides and best practices for HTML, CSS, and JavaScript.
  • Make sure to test your changes locally before submitting a pull request.

If you are using VS Code and have for example Live Server extension, you can simply open index.html with the server and check how the clock looks. If the clock looks to work as expected, you are ready to make a pull request!
If you do not have Live Server extension, you'll find information about installing and how to use it here.

Check out README.md for more instructions and how to make a pull request.

Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!

commented

Hi @nikohoffren Thanks for creating this issue . I am currently working on it and would creating a pr once completed

commented

Hi @nikohoffren Thanks for creating this issue . I am currently working on it and would creating a pr once completed

Sure, sounds good!

commented

Thanks for the acknowledgement , @nikohoffren I have completed the tasks , tested the clock and opened a pull request . I request you to please check it . Thank you

commented

@nikohoffren pls review it and merge it