├── README.md ├── app.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-JS 2 | 3 | This project is mainly about creating personal portfolio by HTML5, CSS3 and JS. 4 | 5 | ## Built With 6 | 7 | - Major languages: HTML5,CSS3,JS 8 | 9 | ## Getting Started 10 | 11 | To access a local copy up and runn follow these simple steps. 12 | 13 | ### Prerequisites 14 | 15 | - web browser 16 | 17 | ### Usage 18 | 19 | - clone this repository into your local machine 20 | - unzip it 21 | - open the 'index.html' file with your browser 22 | 23 | ## Authors 24 | 25 | 👤 **Kumilachew Getie** 26 | 27 | - GitHub: [@githubhandle](https://github.com/Kumilachew-g/) 28 | - Twitter: [@twitterhandle](https://twitter.com/Getie_Haddis) 29 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/kumilachew-getie-0356bb157/) 30 | 31 | ## 🤝 Contributing 32 | 33 | Contributions, issues, and feature requests are welcome! 34 | 35 | Feel free to check the [issues page](https://github.com/Kumilachew-g/Personal-Portfolio/issues). 36 | 37 | ## Show your support 38 | 39 | Give a ⭐ if you like this project! 40 | 41 | ## Acknowledgments 42 | 43 | - To team microverse and those who wrote the readme template 44 | 45 | ## 📝 License 46 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | setInterval(setClock, 1000); 2 | 3 | const hourHand = document.querySelector("[data-hour-hand]"); 4 | const minuteHand = document.querySelector("[data-minute-hand]"); 5 | const secondHand = document.querySelector("[data-second-hand]"); 6 | 7 | function setClock() { 8 | const currentDate = new Date(); 9 | const secondsRatio = currentDate.getSeconds() / 60; 10 | const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60; 11 | const hoursRatio = (minutesRatio + currentDate.getHours()) / 12; 12 | setRotation(secondHand, secondsRatio); 13 | setRotation(minuteHand, minutesRatio); 14 | setRotation(hourHand, hoursRatio); 15 | } 16 | 17 | function setRotation(element, rotationRatio) { 18 | element.style.setProperty("--rotation", rotationRatio * 360); 19 | } 20 | 21 | setClock(); 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Clock With Ethiopian Number 9 | 10 | 11 |
12 |
13 |
14 |
15 |
፩
16 |
፪
17 |
፫
18 |
፬
19 |
፭
20 |
፮
21 |
፯
22 |
፰
23 |
፱
24 |
፲
25 |
፲፩
26 |
፲፪
27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | font-family: Gotham Rounded, sans-serif; 6 | } 7 | 8 | body { 9 | background: linear-gradient( 10 | to right, 11 | hsl(200, 100%, 50%), 12 | hsl(175, 100%, 60%) 13 | ); 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | min-height: 100vh; 18 | overflow: hidden; 19 | } 20 | 21 | .clock { 22 | width: 300px; 23 | height: 300px; 24 | background-color: rgba(255, 255, 255, 0.8); 25 | border-radius: 50%; 26 | border: 2px solid black; 27 | position: relative; 28 | } 29 | 30 | .clock .number { 31 | --rotation: 0; 32 | position: absolute; 33 | width: 100%; 34 | height: 100%; 35 | text-align: center; 36 | transform: rotate(var(--rotation)); 37 | font-size: 1.5rem; 38 | } 39 | 40 | .clock .number1 { 41 | --rotation: 30deg; 42 | } 43 | .clock .number2 { 44 | --rotation: 60deg; 45 | } 46 | .clock .number3 { 47 | --rotation: 90deg; 48 | } 49 | .clock .number4 { 50 | --rotation: 120deg; 51 | } 52 | .clock .number5 { 53 | --rotation: 150deg; 54 | } 55 | .clock .number6 { 56 | --rotation: 180deg; 57 | } 58 | .clock .number7 { 59 | --rotation: 210deg; 60 | } 61 | .clock .number8 { 62 | --rotation: 240deg; 63 | } 64 | .clock .number9 { 65 | --rotation: 270deg; 66 | } 67 | .clock .number10 { 68 | --rotation: 300deg; 69 | } 70 | .clock .number11 { 71 | --rotation: 330deg; 72 | } 73 | 74 | .clock .hand { 75 | --rotation: 0; 76 | position: absolute; 77 | bottom: 50%; 78 | left: 50%; 79 | border: 1px solid white; 80 | border-top-left-radius: 10px; 81 | border-top-right-radius: 10px; 82 | transform-origin: bottom; 83 | z-index: 10; 84 | transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg)); 85 | } 86 | 87 | .clock::after { 88 | content: ""; 89 | position: absolute; 90 | background-color: black; 91 | z-index: 11; 92 | width: 15px; 93 | height: 15px; 94 | top: 50%; 95 | left: 50%; 96 | transform: translate(-50%, -50%); 97 | border-radius: 50%; 98 | } 99 | 100 | .clock .hand.second { 101 | width: 3px; 102 | height: 45%; 103 | background-color: red; 104 | } 105 | 106 | .clock .hand.minute { 107 | width: 7px; 108 | height: 40%; 109 | background-color: black; 110 | } 111 | 112 | .clock .hand.hour { 113 | width: 10px; 114 | height: 35%; 115 | background-color: black; 116 | } 117 | --------------------------------------------------------------------------------