Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 25, 2021 10:19 am GMT

Feedback UI Design | HTML, CSS & JavaScript

Create from scratch a Responsive Login and Registration Form using just html, css and JavaScript
Were also going to use @media queries to make it responsive in whatever screen you want display it.

Its a quite simple project to do, but at the same time it will teach you a lot of cool thing on css like animation, grid and how to make it responsive.

Content Layer
.html file

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"    integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="    crossorigin="anonymous" referrerpolicy="no-referrer" />  <title>Feedback Ui Design</title>  <link rel="stylesheet" href="style.css"></head><body>  <div id="panel" class="panel-container">    <strong>How satisfied are you with our <br>      Customer Support Performace</strong>    <div class="ratings-container">      <div class="rating">        <img src="https://image.flaticon.com/icons/svg/187/187150.svg" alt="">        <small>Unhappy</small>      </div>      <div class="rating">        <img src="https://image.flaticon.com/icons/svg/187/187136.svg" alt="">        <small>Neutral</small>      </div>      <div class="rating active">        <img src="https://image.flaticon.com/icons/svg/187/187133.svg" alt="">        <small>Satisfied</small>      </div>    </div>    <button class="btn" id="send">Send Review</button>  </div>  <script src="app.js"></script></body></html>

Presentation Layer
.css file

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {    box-sizing: border-box;}body {    background-color: #f2f9f2;    font-family: 'Montserrat', sans-serif;    display: flex;    justify-content: center;    align-items: center;    height: 100vh;    overflow: hidden;    margin: 0;}.panel-container {    background-color: #fff;    box-shadow: 0 0 10px rgba(0, 0, 0, .3);    border-radius: 4px;    font-size: 90%;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    padding: 30px;    max-width: 400px;}.panel-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 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: none;}.btn:active {    transform: scale(.98);}.fa-heart {    color: red;    font-size: 30px;    margin-bottom: 10px;}

Behavior Layer
.JS file

const ratings = document.querySelectorAll('.rating');const rContainer = document.querySelector('.ratings-container');const sendBtn = document.querySelector('#send');const panel = document.querySelector('#panel');let selectedRating = 'Satisfied';rContainer.addEventListener('click', (e) => {    if (e.target.parentNode.classList.contains('rating')) {        removeActive();        e.target.parentNode.classList.add('active');        selectedRating = e.target.nextElementSibling.innerHTML;    }});sendBtn.addEventListener('click', (e) => {    panel.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');    }}

Original Link: https://dev.to/robsonmuniz16/feedback-ui-design-html-css-javascript-1ncc

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To