목록Javascript (176)

비전공자 개발일기

Blob Maker

Height Width Copy *{ padding: 0; margin: 0; box-sizing: border-box; outline: none; font-family: "Roboto Mono",monospace; font-weight: 400; color: #010120; } body{ background-color: #008dff; } .wrapper{ background-color: #ffffff; width: 45%; min-width: 550px; padding: 30px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 8px; } .output{ background-color: #..
Javascript 2022. 11. 25. 00:40
Flip a Coin

Heads: 0 Tails: 0 Flip Coin Reset *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik",sans-serif; } body{ height: 100%; background: linear-gradient( to right, #575ce5 50%, #f9fbfc 50% ) fixed; } .container{ background-color: #ffffff; width: 400px; padding: 50px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; box-shadow: 15px 30px 35px rgba(0,0,0,0.1)..
Javascript 2022. 11. 24. 07:50
RGB - HEX Converter

RGB HEX *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins",sans-serif; } body{ width: 100%; background-color: #976efa; } .container{ background-color: #ffffff; width: 80vmin; min-width: 250px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 50px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; padding: 50px 10px; ..
Javascript 2022. 11. 19. 11:35
Palindrome Checker

Check *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #b156fe; } .container{ width: 35%; min-width: 450px; background-color: #ffffff; padding: 50px 30px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; border-radius: 8px; box-shadow: 0 20px 25px rgba(0,0,0,0.18); } .container *{ font-family: "DM Sans", sans-serif; outline: ..
Javascript 2022. 11. 16. 15:37
Temperature Convertor

Celsius Fahrenheit *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; font-size: 18px; } body{ background-color: red; } .wrapper{ width: 450px; background-color: #ffffff; padding: 70px 40px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; box-shadow: 0 20px 25px rgba(0,0,0,0.25); border-radius: 8px; display: flex;..
Javascript 2022. 11. 14. 14:04
Number Guessing Game

I am thinking of a number between 1-100. Can you guess it? GUESS No. Of Guesses: 0 Guessed Numbers are: None *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; background: linear-gradient( to right, #7f53ac, #657ced ); } .container{ position: absolute; width: 50%; min-width: 580px; transform: translate(-50%,-50%); top: 50%; left: 50%; background-color: #f..
Javascript 2022. 11. 13. 18:01
Right Click Menu

You can right click anywhere to change the background. Blue Orange Green This website is going to look better if you turn on the backdrop-filter property : -In the address bar, type "about:config". -Click on "Accept the risk and continue". -Type "backdrop-filter" in the search bar. -If it's written "false", double click on it to turn it on. This website is going to look better on Google Chrome, ..
Javascript 2022. 11. 12. 12:14
Spin Wheel

Spin Click On The Spin Button To Start * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient(135deg, #c3a3f1, #6414e9); } .wrapper { width: 90%; max-width: 34.37em; max-height: 90vh; background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 3em; border-radius:..
Javascript 2022. 11. 9. 00:52
이전 Prev 1 2 3 4 5 6 7 8 ··· 22 Next 다음