목록javascript (248)

비전공자 개발일기

Background color picker

Background Color Picker Click me! # .center { padding-top: 70px; margin: auto; text-align: center; } .btn { margin: auto; text-align: center; } function getHex() { let letters = "0123456789ABCDEF"; let color = "#"; for(let i = 0; i < 6; i++) { color += letters[(Math.floor(Math.random() * 16))]; } return color; } function changeColor() { let hex = getHex(); document.getElementById("hex").innerHTM..
Javascript 2022. 6. 18. 00:59
Scroll Animation

Scroll to see the animation Content Content Content Content Content Content Content Content Content Content * { box-sizing: border-box; } body { background-color: #EFEDD6; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; overflow-x: hidden; } h1 { margin: 10px; } .box { background-color: #9535F0; color: #FFF; display: flex; align-items: center; just..
HTML _CSS 2022. 6. 17. 00:46
Mobile Battery percentage Check

Your battery Perctenage is I am Daily Make new content For You ,hope you like this post body { margin: 1rem; padding: 2rem; background-color: #eee; } .battry { font-size: 2rem; color: cornflowerblue; } const BattryLevel = document.querySelector(".battry"); navigator.getBattery().then(function (battery) { const level = battery.level; const status = level * 100 + "%"; BattryLevel.innerHTML = statu..
HTML _CSS 2022. 6. 16. 00:31
Date Calculator

DATE CALCULATOR How many days are there between two dates? (Change a date to automatically calculate the difference) Start date End date Time elapsed: h1 { font-size: 2.5em; font-weight: 700; text-align: center; } header > p { text-align: center; font-size: 1.5rem; font-weight: 700; } div { text-align: center; border: .1em solid #000; } p { font-size: 1.4rem; font-weight: 700; } body { backgroun..
Javascript 2022. 6. 15. 01:30
Lamp On Off Animation

body { background-color: #2598EB; } .lamp-item { position: absolute; left: 0; right: 0; margin: 0 auto; } .lamp-top { background-color: #2D2D2D; width: 10px; height: 100px; top: 0; } .lamp-middle { background-color: #2D2D2D; border-radius: 50px 50px 0 0; width: 50px; height: 30px; top: 100px; } .lamp-bottom { background-color: #2D2D2D; border-radius: 100px 100px 0 0; width: 150px; height: 80px; ..
HTML _CSS 2022. 6. 9. 00:06
Javascript Modal Popup Box

modal project open modal modal content @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); /* =============== Variables =============== */ :root { /* dark shades of primary color*/ --clr-primary-1: hsl(205, 86%, 17%); --clr-primary-2: hsl(205, 77%, 27%); --clr-primary-3: hsl(205, 72%, 37%); --clr-primary-4: hsl(205, 63%, 48%); /* primary/main color */ --..
Javascript 2022. 6. 7. 00:18
Simple Image Comparison Slider

Crowded Quiet Image Comparison Slider /* -------------------------------- Primary style -------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 100%; font-family: "Roboto Slab", sans-serif; color: #445b7c; background-color: #363636; padding: 1rem .5rem; } a { color: #dc717d; text-decoratio..
JQuery 2022. 6. 4. 00:53
Virtual Keyboard

body { margin: 25px; text-align: center; background: #000; } h1 { color: #26abde; } .virtual-keyboard .row { text-align: center; margin: 0 0 15px; } .virtual-keyboard .row.spacebar input { padding: 10px 150px; } .virtual-keyboard input[type='button'] { padding: 10px 20px; border-radius: 30px; border: 3px solid #202c2b; background: #667ABA; color: #fff; text-transform: uppercase; } .virtual-keybo..
JQuery 2022. 6. 1. 00:02
이전 Prev 1 ··· 13 14 15 16 17 18 19 ··· 31 Next 다음