How to create social media Dashboard with dark mode in html css javascript
Social media dashboard with Html Css and Javascript
In this video we are gonna see
1.How to create social media dashboard with html css and javascript
2.Also we are gonna make feature of dark mode
3.This dashboard also gonna be responsive.
So here is the code
HTML CSS
<!Doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<style>
*{
box-sizing:border-box;
margin:0;
padding:0;
font-family: 'Raleway', sans-serif;
}
#body{
padding:10px 0;
}
.container{
width:90%;
margin:auto;
text-transform:capitalize;
}
.top{
display:flex;
justify-content:space-between;
text-transform:capitalize;
margin-bottom: 13px ;
}
button#mode {
height: 40px;
width:30px;
margin-left:10px;
}
.modes img{
width:100%;
}
.modes{
display:flex;
align-items: center;
}
#upperDash
{
display:grid;
grid-template-columns:repeat(4,1fr);
align-items:center;
grid-gap: 15px;
}
#upfb{
border-top: 2px solid #0072ff;
}
#upin{
border-top:2px solid #ff0081;
}
#uptw{
border-top:2px solid #0072ff;
}
#upyt{
border-top:2px solid red;
}
#upperDash h1
{
font-size: 50px;
}
#upperDash h3
{
color:green;
margin: 15px 0;
}
#upperDash h5{
color: #bbbbbb;
text-transform: uppercase;
}
#upperDash a
{
color: #878787;
text-decoration: none;
font-size: 15px;
}
.up
{
display: flex;
align-items: center;
margin: 10px 0;
height: 20px;
}
#upperDash .img{
width:40px;
}
#upperDash img
{
display:block;
width:100%;
}
.upperContent
{
display:flex;
flex-direction:column;
align-items:center;
padding: 25px 0;
background: #f3f3f3;
}
.lowerTop{
margin: 13px 0;
}
#lowerDash
{
display:grid;
grid-template-columns:repeat(4,1fr);
align-items:center;
grid-gap: 10px 15px;
}
#lowerDash h4
{
color:green;
margin: 15px 0;
}
#lowerDash h3{
color: #bbbbbb;
}
#lowerDash .img{
width:40px;
}
#lowerDash img
{
display:block;
width:100%;
}
.lowerup{
display:flex;
justify-content:space-between;
height: 40px;
margin-bottom: 20px;
align-items: center;
}
.lowerContent
{
display:flex;
flex-direction:column;
background: #f3f3f3;
padding: 15px;
}
.lowerDashDes{
display:flex;
justify-content:space-between;
align-items: baseline;
}
.darkMode{
background:#252b43;
color:white;
}
.darkModeBody{
color:white;
background:black;
}
@media screen and (max-width:768px){
#upperDash
{
grid-template-columns:1fr 1fr;
}
#lowerDash
{
grid-template-columns:repeat(2,1fr);
}
.top{
flex-direction: column;
}
.modes{
justify-content: space-between;
}
}
@media screen and (max-width:430px){
#upperDash
{
grid-template-columns:1fr;
}
#lowerDash
{
grid-template-columns:1fr;
}
}
</style>
</head>
<body>
<div id="body">
<div class="container">
<div class="top">
<div><h1>social media dashboard</h1>
<h3>total followers:4396</h3></div>
<div class="modes"><h5 id="modeName">dark mode</h5>
<button id="mode"><img src="dark_mode.png"></button></div>
</div>
</div>
<div id="dashboard">
<div class="container">
<div id="upperDash">
<div id="upfb" class="upperContent">
<div class="up"><div class="img"><img src="socialicons/fb.png" alt="facebook"></div><a href="">@smartxweb</a></div>
<h1>1099</h1><h5>followers</h5>
<h3>+12 today</h3>
</div>
<div id="uptw" class="upperContent">
<div class="up"><div class="img"><img src="socialicons/tw.png" alt="twitter"></div><a href="">@smartxweb</a></div>
<h1>1099</h1><h5>followers</h5>
<h3>+12 today</h3>
</div>
<div id="upin" class="upperContent">
<div class="up"><div class="img"><img src="socialicons/in.png" alt="instagram"></div><a href="">@smartxweb</a></div>
<h1>1099</h1><h5>followers</h5>
<h3>+12 today</h3>
</div>
<div id="upyt" class="upperContent">
<div class="up"><div class="img"><img src="socialicons/yt.png" alt="youtube"></div><a href="">smartxweb</a></div>
<h1>1099</h1><h5>Subscriber</h5>
<h3>+12 today</h3>
</div>
</div>
</div>
</div>
<div class="container">
<div class="lowerTop">
<h1>overview-today</h1>
</div>
</div>
<div class="container">
<div id="lowerDash">
<div class="lowerContent">
<div class="lowerup"><h3>page views</h3><div class="img"><img src="socialicons/fb.png" alt="facebook"></div></div>
<div class="lowerDashDes"><h1>1099</h1><h4>+12 today</h4></div>
</div>
<div class="lowerContent">
<div class="lowerup"><h3>likes</h3><div class="img"><img src="socialicons/fb.png" alt="facebook"></div></div>
<div class="lowerDashDes"><h1>1099</h1><h4>+12 today</h4></div>
</div>
<div class="lowerContent">
<div class="lowerup"><h3>likes</h3><div class="img"><img src="socialicons/tw.png" alt="twitter"></div></div>
<div class="lowerDashDes"><h1>1099</h1><h4>+12 today</h4></div>
</div>
<div class="lowerContent">
<div class="lowerup"><h3>profile views</h3><div class="img"><img src="socialicons/tw.png" alt="twitter"></div></div>
<div class="lowerDashDes"><h1>1099</h1><h4>+12 today</h4></div>
</div>
<div class="lowerContent">
<div class="lowerup"><h3>retweet</h3><div class="img"><img src="socialicons/in.png" alt="instagram"></div></div>
<div class="lowerDashDes"><h1>1099</h1><h4>+12 today</h4></div>
</div>
<div class="lowerContent">
<div class="lowerup"><h3>likes</h3><div class="img"><img src="socialicons/in.png" alt="instagram"></div></div>
<div class="lowerDashDes"><h1>1099</h1><h4>+12 today</h4></div>
</div>
<div class="lowerContent">
<div class="lowerup"><h3>likes</h3><div class="img"><img src="socialicons/yt.png" alt="youtube"></div></div>
<div class="lowerDashDes"><h1>1099</h1><h4>+12 today</h4></div>
</div>
<div class="lowerContent">
<div class="lowerup"><h3>total views</h3><div class="img"><img src="socialicons/yt.png" alt="youtube"></div></div>
<div class="lowerDashDes"><h1>1099</h1><h4>+12 today</h4></div>
</div>
</div>
</div>
</div>
<script src="dash.js"></script>
</body>
</html>
JAVASCRIPT
let btn=document.getElementById('mode');
let body=document.getElementById('body');
let mode=document.getElementById('modeName');
let upper=document.querySelectorAll('.upperContent');
let lower=document.querySelectorAll('.lowerContent');
console.log(upper);
let n=2;
btn.addEventListener('click',()=>{
for(i=0;i<upper.length;i++){
upper[i].classList.toggle('darkMode');
}
for(i=0;i<lower.length;i++){
lower[i].classList.toggle('darkMode');
}
body.classList.toggle('darkModeBody');
if(n%2!=0){
btn.innerHTML=`<img src="dark_mode.png">`;
mode.innerText="dark mode";
}
else{
btn.innerHTML=`<img src="light_mode.png">`;
mode.innerText="light mode";
}
n++;
})
To use this code you just have to change the image url's
if you want the full explaination please comment
This project was from frontend mentor