목록javascript (248)

비전공자 개발일기

PHONE NUMBER VAILDATION

Phone Number Validation With Simple Javascript CHECK body { border: 2px solid #007BFF; background-color: #EFEFEF; } .container { margin: 250px 0; } .container h1 { color: #007BFF; } .container .input-group input { border-color: #007BFF; border-width: 3px; border-radius: 25px 0 0 25px !important; } .container .input-group .input-group-btn button { border-radius: 0 25px 25px 0 !important; } $(docu..
JQuery 2022. 5. 21. 00:07
Height Converter

Height Converter Cm .container { width: 375px; height: 280px; margin: 65px 0 0 350px; background-color: #000; padding-left: 30px; color: #FFF; } h1 { padding: 25px 0 0 15px; } #cm{ width: 150px; height: 25px; margin: 30px 0 0 15px; } #result_alert { width: 100%; float: left; font-size: 35px; margin-top: 5px; text-align: center; color: #CC3333; } #result_feet, #result_inches { width: 50%; float: ..
Javascript 2022. 5. 17. 00:18
Random Color Generator

Welcome to Random Color Generator Click on the HexCode to Copy Generate #967b28 #df9d4f #af704f #97013b #14ae2e * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(to right, #967b28 0%, #967b28 20%, #df9d4f 20%, #df9d4f 40%, #af704f 40%, #af704f 60%, #97013b 60%, #97013b 80%, #14ae2e 80%, #14ae2e 100%); } #pallete1, #pallete2, #pallete3,#pallete..
Javascript 2022. 5. 15. 01:02
3D Gallery

* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; perspective: 800px; overflow: hidden; display: grid; place-items: center; background:linear-gradient(#3a4149, #111722); } main { position: relative; transform-style: preserve-3d; width: 50vmin; height: 75vmin; transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1); } img { width: 100%; height: 100%; object-fit: cover; transit..
Javascript 2022. 5. 14. 00:26
Draggable DIV

DRAG ME body { margin: 0; height: 100vh; background-image: radial-gradient(#e0dada, #dcefb6); font-family: Arial, Helvetica, sans-serif; } .box { position: fixed; top: 35%; left: 40%; background: #eee; box-shadow: #999 0px 8px 20px 0px; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; user-select: none; } (() => { class Box { constructor() { this.box = do..
Javascript 2022. 5. 12. 00:50
Nine Dots Menu

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #10131c; } .navigation { position: relative; width: 70px; height: 70px; background: #212532; border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: .5s; transition-delay: .8s; } .navigation...
HTML _CSS 2022. 5. 11. 00:42
Animated Submit BUTTON

SUBMIT body { background: #1d1f20; } main { width: 100vw; height: 100vh; } .button { background: #2b2d2f; width: 200px; height: 80px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; cursor: pointer; border-radius: 4px; } .text { font: bold 1.25rem/1 poppins; color: #71dfbe; position: absolute; top: 50%; transform: translateY(-52%)..
Javascript 2022. 5. 10. 00:59
Read More & Read Less Button

TITLE Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia ullam nemo officiis ipsam laborum quos unde maxime dolore, voluptates eveniet laboriosam consequuntur nesciunt voluptatum rem recusandae id iure, aliquam atque. Cum possimus odit nobis quas quasi sunt, nemo dolorum excepturi labore error aut hic. Ratione quod id ipsum. Ipsam magnam animi tempora eligendi nihil eum. Nisi dolor..
JQuery 2022. 5. 8. 01:38
이전 Prev 1 ··· 15 16 17 18 19 20 21 ··· 31 Next 다음