Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More
Home
css
frontend

Weather App UI design in HTML, CSS and JS

7 min read

 


Hello readers! Today I'll be sharing a design for web based weather app. This blog is just about desiging the UI of this app. I'll also share a blog related to it's backend implimentation also, after which this project will become fully functional. But for today let's only focus on it's interface.


This interface has been created using HTML, CSS and JS. I have used neumorphism elements for designing this interface. There are two versions of this app, one is light version and another is dark version. I have provided an one click toggle button to quickly shift between these two versions.
Furthermore, I have used font awesome icons to beautify it more.


Watch the video below to know how exactly it looks.






I hope you have liked the design and wanted to create it. I have provided the whole source code with proper steps in this tutorial.

I have also provided a download button in end of this tutorial using which you may get all the required files of codes.✌


Process to develop this interface:

Follow the steps below to create this Interface:
  1. Create three files namely index.html, style.css and script.js , you'll have to save these three files in same directory.
  2. Copy the code below into index.html file

 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--copy inside index.html-->


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Neumorphism Weather App Design</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>
<link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
  <div class="app-container" id="contain" data-theme="light">
    <div class="app-top-bar">
      <button class="button button-small">
        <i class="fas fa-chevron-left"></i>
      </button>
      
      <h1 class="app-heading">Weather Guy</h1>
      <button class="button button-small" id="toogler">
        <i class="fas fa-light fa-moon" id="toogler-icon"></i>
      </button>
    </div>
    <div class="app-content">
      <button class="button button-block">
        <span class="subtle">Period</span> <span>Today</span> <div class="button button-small"><i class="fas fa-chevron-right"></i></div>
      </button>
      <div class="button button-dial">
        
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        
        <div class="button-dial-top"></div>
        <div class="button-dial-label">
          <i class="fas fa-light fa-temperature-half"></i>
          24&deg;C
        </div>
      </div>
      <div class="flex-button-container">
        <button class="button button-large">
          <i class="fas fa-light fa-cloud-rain fa-2xl" style="color: #1885ffe3;"></i>
          13%
        </button>
        <button class="button button-large">
          <i class="fas fa-light fa-wind fa-2xl" style="color: #0f345fe3;" id="wind"></i>
          6 Km/h
        </button>
      </div>
      
      
    </div>
  </div>
  
</div>
<!-- partial -->
  <script  src="./script.js"></script>
 
</body>
</html>



Then copy the code below into style.css file 

:root {
  --font-color: #222;
  --bg-color: #f2f3f7;
  --button-bg-color: #f2f3f7;
  --button-shadow:
    -6px -6px 8px rgba(255, 255, 255, 0.9),
    5px 5px 8px rgba(0, 0, 0, 0.07);
}

[data-theme=dark] {
  --font-color: #fff;
  --bg-color: #181818;
  --button-bg-color: #121212;
  --button-shadow:
    -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 0 10px 10px rgba(255, 255, 255, 0.005),
    2px 2px 8px rgba(60, 60, 60, 0.1);
}

html {
  box-sizing: border-box;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: var(--font-color);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #cecece;
}

.color-cool {
  color: #077dfe;
}

.color-warm {
  color: #ff7a00;
}

.container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 25px;
  align-items: center;
  flex-direction: column;
}

@media screen and (min-width: 800px) {
  .container {
    flex-direction: row;
  }
}
.app-container {
  background-color: var(--bg-color);
  border-radius: 40px;
  box-shadow: -2px -2px 4px 0px #ffffff, 50px 50px 50px 0px rgba(0, 0, 0, 0.25);
  display: block;
  flex: 1;
  min-height: 500px;
  max-width: 350px;
  margin-bottom: 25px;
  overflow: hidden;
  padding: 30px;
}

.app-top-bar {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.app-heading {
  color: var(--font-color);
  display: block;
  flex: 1;
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  text-align: center;
}

button {
  border: 0;
}
button:focus {
  border: none;
  outline: 0 !important;
  outline-style: none;
}

.button {
  color: var(--font-color);
  position: relative;
  border-radius: 15px;
  background: var(--button-bg-color);
  font-weight: 700;
  transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: var(--button-shadow);
  cursor: pointer;
}
.button.button-link {
  color: #067CF8;
  display: block;
  font-size: 17px;
  margin: 30px 0 0;
  padding: 20px 0;
  width: 100%;
}
.button.button-small {
  color: #6D6E74;
  font-size: 22px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}
.button.button-large {
  display: flex;
  font-size: 20px;
  flex-direction: column;
  padding: 15px;
  text-align: left;
  width: 45%;
}

.button.button-large i {
  margin-bottom: 40px;
  margin-top: 25px;
  width: 30px;
  height: auto;

}



.button-dial {
  border-radius: 50%;
  display: flex;
  height: 270px;
  margin: 35px auto;
  align-items: center;
  justify-content: center;
  width: 270px;
}

.button-dial-top {
  background: var(--button-bg-color);
  box-shadow: var(--button-shadow);
  border-radius: 50%;
  width: 70%;
  height: 70%;
  margin: 0 auto;
  position: absolute;
  top: 15%;
  left: 15%;
  text-align: center;
  z-index: 5;
}

.button-dial-label {
  color: #067CF8;
  font-size: 28px;
  fill: #067CF8;
  position: relative;
  z-index: 10;
}

.button-dial-spoke {
  background-color: rgba(96, 171, 254, 0.6);
  display: block;
  height: 2px;
  width: 83%;
  position: absolute;
  margin: 0 auto;
  z-index: 5;
  top: 50%;
}
.button-dial-spoke:nth-child(2) {
  transform: rotate(30deg);
}
.button-dial-spoke:nth-child(3) {
  transform: rotate(60deg);
}
.button-dial-spoke:nth-child(4) {
  transform: rotate(90deg);
}
.button-dial-spoke:nth-child(5) {
  transform: rotate(120deg);
}
.button-dial-spoke:nth-child(6) {
  transform: rotate(150deg);
}

.button-block {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 15px 24px;
  width: 100%;
}
.button-block span {
  font-size: 16px;
}

.subtle {
  color: #6D6E74;
}

.flex-button-container {
  display: flex;
  justify-content: space-between;
}



Then copy the code below into script.js file 

// Design from https://dribbble.com/shots/9799486-Weather-App-Neumorphism-Soft-UI-Design
const btn = document.getElementById("toogler");
const btn_icon =  document.getElementById("toogler-icon");
const contain = document.getElementById("contain");
const wind = document.getElementById("wind")
btn.onclick = function() {
	if(contain.getAttribute("data-theme")!="dark"){
		contain.setAttribute("data-theme","dark");
		btn_icon.setAttribute("class","fas fa-solid fa-sun");
		wind.setAttribute("style","color: orange;")
      }
	else{
		contain.setAttribute("data-theme","");
		wind.setAttribute("style","color: #0f345fe3;")
		btn_icon.setAttribute("class","fas fa-solid fa-moon");
      }
      
    }


And done, now you can review your work by double clicking on the index.html file, it will get open up into your working browser.
If you are facing any problem or error related to topic you can ask in the comment box.✌


License
___________________________________________________________________________________

The MIT License (MIT)

Copyright (c) 2022 by Aaditya1612 (https://codepen.io/aaditya1612/pen/wvyYRzj)
Fork of an original work Neumorphism Weather App (https://codepen.io/travisw/pen/JjoaadE

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

___________________________________________________________________________________
Labels : #css ,#frontend ,#html ,#javascript ,#web dev ,

Post a Comment