Devs on philipjkim

Devs on philipjkimhttps://philipjkim.cc/dev/Recent content in Devs on philipjkimHugoen-US<link>https://philipjkim.cc/dev/hoola-calculator/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://philipjkim.cc/dev/hoola-calculator/</guid><description><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>훌라 카드 합계 계산기</title> <style> body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; } h1 { margin-bottom: 20px; font-size: 24px; } .card-buttons { /* 수정된 부분: 3개씩 한 줄에 표시되도록 설정 */ display: grid; grid-template-columns: repeat(3, 1fr); /* 항상 3개의 열 */ gap: 10px; margin-bottom: 20px; width: 100%; /* 부모 너비에 맞춤 */ max-width: 600px; /* 최대 너비 유지 */ box-sizing: border-box; /* 패딩과 보더가 너비에 포함되도록 */ padding: 0 10px; /* 좌우 잘림 방지를 위해 약간의 패딩 추가 */ } .card-button { padding: 15px; border: 1px solid #ccc; border-radius: 8px; /* background-color: #f0f0f0; */ text-align: center; cursor: pointer; font-size: 18px; box-sizing: border-box; /* 최소 너비 제한을 없애고 1fr로만 관리하여 유연하게 */ min-width: 0; /* flex/grid 아이템의 기본 min-width를 재정의 */ } .card-button.selected { background-color: #ddd; } .selected-cards { margin-bottom: 15px; font-size: 16px; } .result { font-weight: bold; font-size: 20px; margin-bottom: 20px; } button { padding: 12px 25px; border: none; border-radius: 8px; background-color: #7d601c; /* color: white; */ cursor: pointer; font-size: 18px; } button:hover { background-color: #4f3d12; } /* 추가: 화면이 매우 좁을 경우를 위한 미디어 쿼리 (필요시) */ @media (max-width: 380px) { /* 더 좁은 화면 (예: 아이폰 SE1) */ .card-buttons { gap: 5px; /* 버튼 간격 줄이기 */ padding: 0 5px; /* 패딩도 줄이기 */ } .card-button { font-size: 16px; /* 폰트 사이즈 줄이기 */ padding: 10px; /* 패딩 줄이기 */ } } </style> </head> <body> <h1>훌라 카드 합계 계산기</h1> <div class="card-buttons"> <button class="card-button" data-value="1" data-alt-value="14">A</button> <button class="card-button" data-value="2">2</button> <button class="card-button" data-value="3">3</button> <button class="card-button" data-value="4">4</button> <button class="card-button" data-value="5">5</button> <button class="card-button" data-value="6">6</button> <button class="card-button" data-value="7">7</button> <button class="card-button" data-value="8">8</button> <button class="card-button" data-value="9">9</button> <button class="card-button" data-value="10">10</button> <button class="card-button" data-value="11">J</button> <button class="card-button" data-value="12">Q</button> <button class="card-button" data-value="13">K</button> </div> <div class="selected-cards">선택한 카드: </div> <div class="result">총합: </div> <button id="reset-button">초기화</button> <script> const cardButtons = document.querySelectorAll('.card-button'); const selectedCardsDiv = document.querySelector('.selected-cards'); const resultDiv = document.querySelector('.result'); const resetButton = document.getElementById('reset-button'); let selectedCards = []; cardButtons.forEach(button => { button.addEventListener('click', function() { const value = parseInt(this.dataset.value); const altValue = this.dataset.altValue ? parseInt(this.dataset.altValue) : null; selectedCards.push({ value: value, altValue: altValue, display: this.textContent }); this.classList.add('selected'); updateDisplay(); calculateSum(); }); }); resetButton.addEventListener('click', function() { selectedCards = []; cardButtons.forEach(button => button.classList.remove('selected')); updateDisplay(); calculateSum(); }); function updateDisplay() { selectedCardsDiv.textContent = '선택한 카드: ' + selectedCards.map(card => card.display).join(', '); } function calculateSum() { if (selectedCards.length === 0) { resultDiv.textContent = '총합: '; return; } const hasAce = selectedCards.some(card => card.display === 'A'); if (hasAce) { let sumWithAas1 = 0; let sumWithAas14 = 0; selectedCards.forEach(card => { sumWithAas1 += (card.display === 'A' ? 1 : card.value); sumWithAas14 += (card.display === 'A' ? 14 : card.value); }); resultDiv.textContent = '총합: ' + sumWithAas1 + ' / ' + sumWithAas14; } else { const totalSum = selectedCards.reduce((sum, card) => sum + card.value, 0); resultDiv.textContent = '총합: ' + totalSum; } } </script> </body> </html></description></item><item><title/><link>https://philipjkim.cc/dev/polymer-image-slider/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://philipjkim.cc/dev/polymer-image-slider/</guid><description><!doctype html> <html> <head> <title>polymer-image-slider demo</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="shortcut icon" href="./favicon.ico"> <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="bower_components/iron-demo-helpers/demo-snippet.html"> <link rel="import" href="bower_components/iron-demo-helpers/demo-pages-shared-styles.html"> <link rel="import" href="bower_components/paper-styles/color.html"> <link rel="import" href="bower_components/polymer-image-slider/polymer-image-slider.html"> <style is="custom-style" include="demo-pages-shared-styles"> .centered:not([style-scope]):not(.style-scope) { max-width: 100%; } </style> </head> <body unresolved> <div class="vertical-section-container centered"> <h3>paper-sliders have <code>images</code> attribute, and dynamically change images by modifying the attribute value.</h3> <demo-snippet> <template>  <style is="custom-style"> #slider { --image-slider-max-width: 300px; } </style>  <image-slider id="slider" images='["1.jpg","2.jpg"]'></image-slider>  <button id="btn-change" onclick="changeImages();">Change images</button> <button id="btn-bullet" onclick="toggleBullet();">Show/hide bullets</button> <script> function changeImages() { var imageSet1 = ["1.jpg","2.jpg"]; var imageSet2 = ["3.jpg","4.jpg","5.jpg"]; var images = document.querySelector('#slider').images; if (images.length == 2) { document.querySelector('#slider').images = imageSet2; } else { document.querySelector('#slider').images = imageSet1; } } function toggleBullet() { var noBullets = document.querySelector('#slider').noBullets; document.querySelector('#slider').noBullets = !noBullets; } </script> </template> </demo-snippet> <h3>If you want to show images in actual size, set <code>--image-slider-max-width</code> to <code>none</code>.</h3> <demo-snippet> <template> <style is="custom-style"> #slider2 { --image-slider-max-width: none; } </style> <image-slider id="slider2" images='["1.jpg","2.jpg"]'></image-slider> </template> </demo-snippet> </div> </body> </html></description></item><item><title/><link>https://philipjkim.cc/dev/vue2-flip-countdown/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://philipjkim.cc/dev/vue2-flip-countdown/</guid><description><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="icon" href="./favicon.ico" /> <title>Demo: vue2-flip-countdown</title> <link href="./css/app.30f70602.css" rel="preload" as="style" /> <link href="./js/app.4cf28f45.js" rel="preload" as="script" /> <link href="./js/chunk-vendors.0e314190.js" rel="preload" as="script" /> <link href="./css/app.30f70602.css" rel="stylesheet" /> </head> <body> <noscript ><strong >We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong ></noscript > <div id="app"></div> <script src="./js/chunk-vendors.0e314190.js"></script> <script src="./js/app.4cf28f45.js"></script> </body> </html></description></item></channel></rss>