비전공자 개발일기

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..

Word Counter Characters: 0 Words: 0 Sentences: 0 Paragraphs: 0 Reading Time: 0 Show readability score. Top keywords: /* border box */ html { box-sizing: border-box; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ } *, *:before, *:after { box-sizing: inherit; } b { font-we..

Someone Famous Hero I'm IRONMAN * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .card { position: relative; width: 350px; height: 85px; background-color: #F00; border-radius: 20px; filter: drop-shadow(-20px 20px 40px #398CC055); transition: .5s ease-in-out; } .card.active { height: 420px; } .card.active..

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..

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..

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..

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..

First Name Last Name * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; flex-direction: column; gap: 30px; background-color: #1D2B3A; } .inputBox { position: relative; width: 250px; } .inputBox input { width: 100%; padding: 10px; border: 1px solid rgba(255, 255, 255, .25); background-color: #1D2B3A; border-r..