{"info":{"_postman_id":"e62e7ea2-3ae4-4614-a0d6-ef0deaf23bbc","name":"Share Pear Example","description":"

Pass in a blob of markdown encoded as a URI component (hint, throw markdown in `encodeURIComponent` in JavaScript) to the URL, and boom, it'll exist!

\n","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json","toc":[],"owner":"24192581","collectionId":"e62e7ea2-3ae4-4614-a0d6-ef0deaf23bbc","publishedId":"2s93RNyEfq","public":true,"customColor":{"top-bar":"FFFFFF","right-sidebar":"303030","highlight":"6CE385"},"publishDate":"2023-03-25T07:45:34.000Z"},"item":[{"name":"https://share.contenda.co/blog/example","id":"59b3e592-1a48-4b81-8a6d-1d327d4f430e","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[{"key":"markdown","value":"%23%20How%20I%20built%20%22clock%20with%20a%20background%20gradient%22%20on%20CodePen%0A%0A%23%23%20Building%20a%20Gradient%20Clock%20with%20HTML%2C%20CSS%2C%20and%20JavaScript%0A%0ACreate%20a%20clock%20with%20a%20background%20gradient%20using%20simple%20HTML%2C%20CSS%2C%20and%20JavaScript.%20The%20HTML%20structure%20consists%20of%20an%20outer%20div%20called%20%60clock%60%2C%20containing%20three%20divs%20for%20the%20hour%2C%20minute%2C%20and%20second%20hands.%0A%0A%60%60%60html%0A%3Cdiv%20class%3D%22clock%22%3E%0A%20%20%3Cdiv%20class%3D%22hands%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22hour%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22minute%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22second%22%3E%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%60%60%60%0A%0AThe%20reason%20for%20having%20the%20%60hands%60%20div%20is%20to%20facilitate%20styling%2C%20which%20will%20be%20explained%20later.%0A%0AIn%20JavaScript%2C%20get%20the%20divs%20for%20the%20hour%2C%20minute%2C%20and%20second%20hands%20and%20set%20a%20rotation%20for%20the%20transform%20based%20on%20the%20degrees%20they%20should%20be%20at.%20Create%20a%20date%20object%20and%20get%20the%20hours%2C%20minutes%2C%20and%20seconds%20of%20that%20date.%20Set%20an%20interval%20to%20call%20a%20function%20every%20second%20to%20change%20the%20hour%2C%20minute%2C%20and%20second%20hands.%0A%0A%60%60%60javascript%0Afunction%20updateClock()%20%7B%0A%20%20%2F%2F%20Get%20the%20divs%20and%20set%20rotation%0A%7D%0A%0AsetInterval(updateClock%2C%201000)%3B%0A%60%60%60%0A%0ATo%20make%20the%20clock%20smoother%2C%20you%20can%20change%20the%20interval%20to%20200%20milliseconds%20instead%20of%201%20second.%20However%2C%20this%20might%20cause%20unnecessary%20performance%20overhead.%0A%0ATo%20create%20a%20clock%20with%20a%20background%20gradient%2C%20follow%20these%20steps%3A%0A%0A1.%20**Style%20the%20clock%20container%3A**%0A%20%20%20-%20Set%20the%20background%20color%20to%20white.%0A%20%20%20-%20Reset%20margins%20and%20padding%20to%20zero.%0A%20%20%20-%20Set%20width%20and%20height%20to%20100%25%20to%20fill%20up%20the%20entire%20screen.%0A%0A2.%20**Position%20the%20clock%3A**%0A%20%20%20-%20Use%20%60position%3A%20absolute%60%20to%20set%20a%20fixed%20position%20on%20the%20page.%0A%20%20%20-%20Set%20%60top%60%20and%20%60left%60%20to%2050%25%2C%20placing%20the%20top%20left%20corner%20of%20the%20clock%20div%20in%20the%20center.%0A%20%20%20-%20Use%20%60transform%3A%20translate(-50%25%2C%20-50%25)%60%20to%20center%20the%20clock%20on%20the%20page.%0A%20%20%20-%20Set%20the%20clock%20color%20and%20size%20(e.g.%2C%20black%2C%20250px%20circle).%0A%0A3.%20**Style%20the%20clock%20hands%3A**%0A%20%20%20-%20Set%20the%20position%20of%20the%20hands%20div%20to%20relative%20and%20make%20it%20the%20same%20size%20as%20the%20clock.%0A%20%20%20-%20Position%20the%20hour%2C%20minute%2C%20and%20second%20hands%20in%20the%20same%20way%20and%20set%20their%20transform%20origin%20to%20the%20bottom%20center.%0A%20%20%20-%20Set%20the%20rotation%20to%200%20degrees%20initially%20(rotation%20will%20be%20changed%20in%20JavaScript%20later).%0A%20%20%20-%20Style%20the%20individual%20hands%20(e.g.%2C%20color%2C%20width%2C%20height).%0A%0A4.%20**Position%20the%20hands%3A**%0A%20%20%20-%20Calculate%20the%20top%20position%20for%20each%20hand%20based%20on%20its%20height%20and%20the%20clock's%20height%20(e.g.%2C%2050%2F250%2C%2090%2F250%2C%2080%2F250).%0A%20%20%20-%20Set%20the%20top%20position%20to%20the%20negative%20percentage%20calculated.%0A%0A5.%20**Add%20a%20background%20gradient%3A**%0A%20%20%20-%20Create%20a%20pseudo%20element%20using%20%60%3A%3Abefore%60%20and%20set%20its%20content%20to%20an%20empty%20string.%0A%20%20%20-%20Set%20the%20z-index%20to%20-1%20and%20adjust%20positioning%20to%20place%20it%20beneath%20the%20clock.%0A%20%20%20-%20Apply%20a%20linear-gradient%20with%20desired%20colors%20and%20direction%20(e.g.%2C%20-45%20degrees%2C%20pink-orange).%0A%20%20%20-%20Tweak%20the%20transform%2C%20filter%2C%20and%20opacity%20until%20the%20desired%20look%20is%20achieved.%0A%0A6.%20**Animate%20the%20background%20gradient%3A**%0A%20%20%20-%20Create%20a%20keyframes%20animation%20and%20apply%20it%20to%20the%20pseudo%20element.%0A%20%20%20-%20Adjust%20the%20transform%2C%20translate%2C%20and%20scale%20properties%20within%20the%20animation.%0A%20%20%20-%20Set%20the%20animation%20to%20infinite%20and%20choose%20the%20desired%20duration%20(e.g.%2C%205%20seconds).%0A%0AThese%20steps%20will%20help%20you%20create%20a%20clock%20with%20a%20pulsing%20background%20gradient.%20Note%20that%20there%20might%20be%20more%20efficient%20ways%20to%20achieve%20this%20effect%2C%20but%20this%20approach%20gets%20the%20job%20done.","type":"text"}],"body":{"mode":"formdata","formdata":[]},"url":"https://share.contenda.co/blog/example","urlObject":{"protocol":"https","path":["blog","example"],"host":["share","contenda","co"],"query":[],"variable":[]}},"response":[],"_postman_id":"59b3e592-1a48-4b81-8a6d-1d327d4f430e"}]}