마카로닉스

2306 No

js 추천 비추천 만들기, 좋아요 만들기

2024-11-02 17:20:00 By 라이트 0 389 댓글수 0 포스트 하기

5월 2025
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trust Score Thermometer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>


    <div class="trust-score-thermometer">
    <div class="thermometer-container">
        <div class="thermometer">
            <span class="label">첫 온도 36.5°</span>
            <div class="track">
                <div class="progress">
                    <div class="mercury"></div>
                </div>                
                <div class="ticks">
                    <span>0°</span><span>25°</span><span>50°</span><span>75°</span><span>100°</span>
                </div>
                <div class="ruler">
                    <div class="tick"></div>
                    <div class="tick"></div>
                    <div class="tick"></div>
                    <div class="tick"></div>
                    <div class="tick"></div>
                    <div class="tick"></div>
                    <div class="tick"></div>
                    <div class="tick"></div>
                    <div class="tick"></div>
                    <div class="tick"></div>
                </div>                                
            </div>
            <div class="temperature-display">
                <span id="temperature">36.5°C</span>
                <span id="face" class="face">????</span>
            </div>
        </div>
  
    </div>

        <div class="controls">
            <button onclick="adjustTrustScore(2)">추천 (+2)</button>
            <button onclick="adjustTrustScore(-1)">비추천 (-1)</button>
            <button onclick="adjustTrustScore(5)">게시글 작성 (+5)</button>
        </div>
    </div>



    <script src="script.js"></script>
</body>
</html>

style.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
}

.thermometer-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.thermometer-container .thermometer {
    width: 400px;
}

.thermometer-container .label {
    font-size: 14px;
    margin-bottom: 5px;
    display: inline-block;
}

.thermometer-container .track {
    position: relative;
    height: 25px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.thermometer-container .progress {
    width: 100%;
    position: absolute;
    height: 100%;
}

.thermometer-container .mercury {
    height: 100%;
    background-color: #36c;
    width: 36.5%; /* 초기 온도 */
    transition: width 0.5s ease;  
}

.thermometer-container  .ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.thermometer-container  .ticks span {
    font-size: 12px;
    z-index:1;
    top: 5px;
    position: relative;
}

/* 눈금자 스타일  */
.thermometer-container .ruler {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.thermometer-container .ruler .tick {
    width: 1px;
    height: 10px;
    background-color: #000;
    position: relative;
}

/* 36.5도 눈금 강조 (36.5% 위치) */
.thermometer-container  .ruler::before {
    content: '';
    position: absolute;
    left: 36.5%;
    width: 2px; /* 강조된 눈금 굵기 */
    height: 15px; /* 강조된 눈금 길이 */
    background-color: red; /* 강조된 눈금 색상 */
}



.thermometer-container .temperature-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px; /* track 밑으로 이동 */
}

.thermometer-container  .face {
    font-size: 30px;
}

.thermometer-container  .controls {
    margin-top: 20px;
}

.trust-score-thermometer button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #ff9800;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.trust-score-thermometer button:hover {
    background-color: #e68900;
}

script.js

let baseTemperature = 36.5;
let trustScore = 0;



function adjustTrustScore(scoreChange) {
    trustScore += scoreChange;
    const newTemperature = baseTemperature + (trustScore * 0.1);
    updateThermometer(newTemperature);
}

function updateThermometer(temp) {
    const mercuryElement = document.querySelector('.mercury');
    const temperatureLabel = document.getElementById('temperature');
    const faceElement = document.getElementById('face');

    // 체온 범위 설정 (0 ~ 100도)
    const minTemp = 0.0;
    const maxTemp = 100.0;

    // 체온이 최소 및 최대값을 넘지 않도록 설정
    const clampedTemp = Math.max(minTemp, Math.min(maxTemp, temp));

    // 온도에 맞는 프로그레스 바의 너비 계산
    const widthPercentage = ((clampedTemp - minTemp) / (maxTemp - minTemp)) * 100;
    mercuryElement.style.width = `${widthPercentage}%`;

    // 온도에 맞는 색상 설정 (8단계 색상)
    let color = '#36c'; // 기본 파란색
    if (clampedTemp >= 87.5) {
        color = '#f44336'; // 빨간색
    } else if (clampedTemp >= 75) {
        color = '#ff5722'; // 진한 주황색
    } else if (clampedTemp >= 62.5) {
        color = '#ff9800'; // 주황색
    } else if (clampedTemp >= 50) {
        color = '#ffeb3b'; // 노란색
    } else if (clampedTemp >= 37.5) {
        color = '#8bc34a'; // 연한 녹색
    } else if (clampedTemp >= 25) {
        color = '#4caf50'; // 녹색
    } else if (clampedTemp >= 12.5) {
        color = '#2196f3'; // 연한 파랑
    }
    mercuryElement.style.backgroundColor = color;
    
    // 표정 설정 (8단계 표정)
    let face = '????'; // 기본 웃는 얼굴
    if (clampedTemp >= 100) {
        face = '????'; // 하트 얼굴
    }else if (clampedTemp >= 87.5) {
        face = '????'; // 시원한 얼굴
    } else if (clampedTemp >= 75) {
        face = '????'; // 활짝 웃는 얼굴
    } else if (clampedTemp >= 62.5) {
        face = '????'; // 환하게 웃는 얼굴
    } else if (clampedTemp >= 50) {
        face = '????'; // 약간 미소
    } else if (clampedTemp >= 36.5) {
        face = '????'; // 무표정
    } else if (clampedTemp >= 30) {
        face = '????'; // 약간 실망한 얼굴
    } else if (clampedTemp >= 25) {
        face = '????'; // 걱정하는 얼굴
    } else if (clampedTemp >= 15) {
        face = '????'; // 불안한 얼굴
    } else if (clampedTemp >= 10) {
        face = '????'; // 불안한 얼굴
    }else if (clampedTemp > 0){
        face = '????‍????'; // 죽을상 얼굴
    }else if (clampedTemp <= 0){
        face = '????'; // 사망
    }
    faceElement.textContent = face;

    // 온도 라벨 업데이트
    temperatureLabel.textContent = `${clampedTemp.toFixed(1)}°C`;
}

   <div class="vote-container">
	        <button type="button" class="btn upvote" id="upvote-btn">
	            <span class="material-icons">thumb_up</span> 추천 <span id="upvote-count">0</span>
	        </button>
	        <button type="button" class="btn downvote" id="downvote-btn">
	            <span class="material-icons">thumb_down</span> 비추천 <span id="downvote-count">0</span>
	        </button>
	        <inpu type="hidden" id="bno" value="288">
	    	</inpu>
        </div>

like.css

.vote-container {
    display: flex;
    gap: 20px;
    align-items: center;
    text-align: center;
    margin-top: 20px;
    justify-content: center;
}

.vote-container .btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background-color: #e0e0e0;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    vertical-align: middle;


}

.vote-container .btn span.material-icons {
    font-size: 24px;
}

.vote-container .btn:hover {
    background-color: #d4d4d4;
}

.vote-container .btn.active {
    background-color: #4caf50 !important;
    color: #fff !important;
}

.vote-container .btn.downvote.active {
    background-color: #f44336;
}

#upvote-count, #downvote-count {
    font-weight: bold;
}


/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}