Html, CSS 및 Javascript를 사용한 간단한 피드백 양식

6103 단어 csswebdevprogrammingjavascript
안녕하세요 여러분, 오늘 이 게시물에서는 Simple Feedback Form using CSS and HTML을 만드는 방법을 배웁니다. 이를 만들기 위해 간단한 CSS, HTML 및 Javascript를 사용할 것입니다. 이 게시물을 즐기시기 바랍니다.

피드백 양식은 일반적으로 웹 사이트 및 비즈니스에서 개선 방법을 파악하는 데 사용되며 사용자 경험을 개선하는 데 도움이 됩니다. 고객은 회사의 서비스에 대해 어떻게 생각하는지 밝힙니다. 이것은 회사와 사용자 모두를 연결하여 더 나은 이해를 얻습니다. 회사는 다양한 이모지를 사용하여 평가를 받아 쉽게 피드백을 얻을 수 있습니다. 사용자가 편안함을 느끼도록 합니다. 보내기 버튼을 눌렀을 때 무언가를 작성하면 응답을 제공하는 웹 사이트의 사용자를 서명합니다. 창의력을 발휘하고 피드백 양식을 대화식으로 만들어 사용자에게 좋은 경험을 추가하십시오.

데모



Click 데모 보기!

간단한 피드백 양식 Html Javascript(소스 코드)



HTML 코드

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="feedback" class="feedback-container">
    <strong>How satisfied are you with our <br/> customer support service?</strong>
      <div class="ratings-container">
        <div class="rating">
          <img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-17.png" alt="">
          <small>Happy</small>
        </div>
        <div class="rating"><img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-3.png" alt=""/>
          <small>Neutral</small>
        </div>
        <div class="rating active"><img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-30.png" alt=""/>
          <small>unsatisfied</small>
        </div>
      </div>

      <button class="btn" id="send">Send Review</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>


CSS 코드
그런 다음 피드백 양식에 CSS를 추가하세요. 외부 CSS를 사용하여 HTML과 연결했으므로 파일 이름을 (style).css로 지정해야 합니다. 내부 CSS를 사용할 수도 있습니다.

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
  box-sizing: border-box;
}
body {
  background-color: #000;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; margin: 0;
  overflow: hidden;
}
.feedback-container {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-size: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  padding: 30px; max-width: 400px;
}
.feedback-container strong {
  line-height: 20px;
}
.ratings-container {
  display: flex;
  margin: 20px 0;
}   
.rating {
  flex: 1;
  cursor: pointer;
  padding: 20px;
  margin: 10px 5px;
}
.rating:hover, .rating.active {
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.rating img {
  width: 40px;
}
.rating small {
  color: #555;
  display: inline-block;
  margin: 10px 0 0;
}
.rating:hover small,.rating.active small {
  color: #111;
}
.btn {
  background-color: #302d2b;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 12px 30px;
  cursor: pointer;
}
.btn:focus {
outline: 0;
}
.btn:active {
transform: scale(0.98);
}
.fa-heart {
  color: red;
  font-size: 30px;
  margin-bottom: 10px;
}


자바스크립트 코드
Javascript가 주요 작업을 수행하고 피드백 양식의 모든 기능을 처리하게 됩니다. 외부 JavaScript를 사용하여 연결했으므로 파일 이름을 (script).js로 지정해야 합니다. Script 태그에 소스 코드를 붙여넣을 수도 있습니다.

const ratings = document.querySelectorAll('.rating')
const ratingsContainer = document.querySelector('.ratings-container')
const sendBtn = document.querySelector('#send')
const feedback = document.querySelector('#feedback')
let selectedRating = 'Satisfied'
ratingsContainer.addEventListener('click', (e) => {
    if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) {
        removeActive()
        e.target.parentNode.classList.add('active')
        selectedRating = e.target.nextElementSibling.innerHTML
    } else if(
        e.target.parentNode.classList.contains('rating') &&
        e.target.previousSibling &&
        e.target.previousElementSibling.nodeName === 'IMG'
    ) {
        removeActive()
        e.target.parentNode.classList.add('active')
        selectedRating = e.target.innerHTML
    }
})
sendBtn.addEventListener('click', (e) => {
    feedback.innerHTML = `
        <i class="fas fa-heart"></i>
        <strong>Thank You!</strong>
        <br>
        <strong>Feedback: ${selectedRating}</strong>
<p>We'll use your feedback to improve our customer support</p
})
function removeActive() {
    for(let i = 0; i < ratings.length; i++) {
        ratings[i].classList.remove('active')
    }
}


축하합니다! 이제 Html 및 Javascript를 사용하여 간단한 피드백 양식을 성공적으로 만들었습니다.

내 웹사이트: codewithayan , 내 놀라운 자습서를 모두 확인하려면 여기를 참조하십시오.
처음부터 시작 - 사용자 입력 읽기
스로틀이란 무엇이며 스로틀 용도는 무엇이며 스로틀을 만드는 방법은 무엇입니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage