목록javascript (248)

비전공자 개발일기

Emoji Cursor Trail Effect

realtime on display EMOJI CURSOR TRAIL EFFECT * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #111; overflow: hidden; } span { position: absolute; pointer-events: none; width: 10px; height: 10px; animation: animate 1s linear infinite; } @keyframes animate { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 90% { translate: 0 100px; opacity: 1..
Javascript 2022. 12. 24. 00:59
Quiz App new Version

Start 1 of 3 questions 10s Next Demo Score Restart * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #0a69ed; } .start-screen, .score-container { position: absolute; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } button { border: none; outline: none; cursor: ..
Javascript 2022. 12. 23. 00:37
Number Trivia

Numbers API http://numbersapi.com/ Numbers API NumbersAPI An API for interesting facts about numbers Bring meaning to your metrics and stories to your dates An API for interesting facts about numbers Bring your metrics and dates to life Let your metrics tell tales with our API of number facts What tale numbersapi.com Get Fact Get Random Fact * { padding: 0; margin: 0; box-sizing: border-box; fon..
Javascript 2022. 12. 20. 10:37
Detect Battery Status

* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; } .container { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } #battery { box-sizing: content-box; height: 7.8em; width: 17.5em; border: 0.6em solid #246aed; margin: auto; border-radius: 0.6em; position: relative; display: grid; place-items: center; } #battery:before { position:..
Javascript 2022. 12. 17. 00:17
Recipe App

Search * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #f4c531; } .container { background-color: #ffffff; font-size: 16px; padding: 3em 2.8em; width: 90vw; max-width: 32em; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 0.6em; } .search-container { width: 100%; display: grid; grid-templat..
Javascript 2022. 12. 15. 08:36
Interest calcalator

Principal($): Rate: Time: Year Month Calculate * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient(#01e26e, #72ffb4); } .container { background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 80vw; max-width: 600px; min-width: 350px; padding: 60px 30px; border-..
Javascript 2022. 12. 14. 16:01
Quote Generator

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, magni. Lorem, ipsum. Get Quote * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #f43543; } .wrapper { width: 400px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .container { width: 100%; background-color: #f43543; padding: 50px 40px;..
Javascript 2022. 12. 13. 00:11
Get User Location

Click on the 'Get Location' Button Get Location * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient(45deg, #0076ec, #42a1ff); } .container { width: 80vw; max-width: 37.5em; background-color: #ffffff; padding: 3em 1.8em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 0..
Javascript 2022. 12. 11. 00:35
이전 Prev 1 2 3 4 5 6 7 ··· 31 Next 다음