Index.html

We start off by defining the head in which we import some custom fonts from the Google Fonts API and link our CSS stylesheet and JS file.

In the body section, we first write the code for our heading, followed by the code for the quote generator and weather app.

If you are clear with basic html,all of the code would be self explanatory for you.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
  <script src="script.js" defer></script>

</head>

<body>
    <div class="container">
        <a class="post" href="#">
                <h2 class="post-title">A Wholesome JS Project</h2>
        </a>
    </div>
  <br> <br> <br> <br> <br> <br> <br> <br>
  <script src="script.js" defer></script>
  <div id="container">
      <button id="btn">Press for a new Quote!</button>
      <div id="output">New Quote coming up right away!</div>
  </div>
  <div class="content">
    <div class="text"></div>
  </div><br>
  <div class="card">
    <div class="search">
      <input type="text" class="search-bar" placeholder="Search">
      <button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
          width="1.5em" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
          </path>
        </svg></button>
    </div>
    <div class="weather loading">
      <h2 class="city">Weather in Denver</h2>
      <h1 class="temp">51°C</h1>
      <div class="flex">
        <img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
        <div class="description">Cloudy</div>
      </div>
      <div class="humidity">Humidity: 60%</div>
      <div class="wind">Wind speed: 6.2 km/h</div>
    </div>
  </div>
  <br><br><br><br><br>
  
</body>
<br><br><br>

</div>
</html>
let weather = {
    apiKey: "99e545d54b48657d77407380c737740f",
    fetchWeather: function (city) {
      fetch(
        "https://api.openweathermap.org/data/2.5/weather?q=" +
          city +
          "&units=metric&appid=" +
          this.apiKey
      )
        .then((response) => {
          if (!response.ok) {
            alert("No weather found.");
            throw new Error("No weather found.");
          }
          return response.json();
        })
        .then((data) => this.displayWeather(data));
    },
    displayWeather: function (data) {
      const { name } = data;
      const { icon, description } = data.weather[0];
      const { temp, humidity } = data.main;
      const { speed } = data.wind;
      document.querySelector(".city").innerText = "Weather in " + name;
      document.querySelector(".icon").src =
        "https://openweathermap.org/img/wn/" + icon + ".png";
      document.querySelector(".description").innerText = description;
      document.querySelector(".temp").innerText = temp + "°C";
      document.querySelector(".humidity").innerText =
        "Humidity: " + humidity + "%";
      document.querySelector(".wind").innerText =
        "Wind speed: " + speed + " km/h";
      document.querySelector(".weather").classList.remove("loading");
      document.body.style.backgroundImage =
        "url('https://source.unsplash.com/1600x900/?" + name + "')";
    },
    search: function () {
      this.fetchWeather(document.querySelector(".search-bar").value);
    },
  };
  
  document.querySelector(".search button").addEventListener("click", function () {
    weather.search();
  });
  
  document
    .querySelector(".search-bar")
    .addEventListener("keyup", function (event) {
      if (event.key == "Enter") {
        weather.search();
      }
    });
  
  weather.fetchWeather("Denver");
  var TxtRotate = function(el, toRotate, period) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.tick();
    this.isDeleting = false;
  };
  
  TxtRotate.prototype.tick = function() {
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];
  
    if (this.isDeleting) {
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }
  
    this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
  
    var that = this;
    var delta = 300 - Math.random() * 100;
  
    if (this.isDeleting) { delta /= 2; }
  
    if (!this.isDeleting && this.txt === fullTxt) {
      delta = this.period;
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === '') {
      this.isDeleting = false;
      this.loopNum++;
      delta = 500;
    }
  
    setTimeout(function() {
      that.tick();
    }, delta);
  };
  
  window.onload = function() {
    var elements = document.getElementsByClassName('txt-rotate');
    for (var i=0; i<elements.length; i++) {
      var toRotate = elements[i].getAttribute('data-rotate');
      var period = elements[i].getAttribute('data-period');
      if (toRotate) {
        new TxtRotate(elements[i], JSON.parse(toRotate), period);
      }
    }
    // INJECT CSS
    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
    document.body.appendChild(css);
  };
  let btn = document.getElementById('btn');
  let output = document.getElementById('output');
  let quotes = [
      '"The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.” – Winston Churchill', 
      '“Don’t Let Yesterday Take Up Too Much Of Today.” – Will Rogers',
      '“You Learn More From Failure Than From Success. Don’t Let It Stop You. Failure Builds Character.” – Unknown',
      '“It’s Not Whether You Get Knocked Down, It’s Whether You Get Up.” – Inspirational Quote By Vince Lombardi',
      '“If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.” – Steve Jobs',
      '“People Who Are Crazy Enough To Think They Can Change The World, Are The Ones Who Do.” – Rob Siltanen',
      '“Failure Will Never Overtake Me If My Determination To Succeed Is Strong Enough.” – Og Mandino',
      '“Entrepreneurs Are Great At Dealing With Uncertainty And Also Very Good At Minimizing Risk. That’s The Classic Entrepreneur.” – Mohnish Pabrai',
      '“We May Encounter Many Defeats But We Must Not Be Defeated.” – Maya Angelou',
      '“Knowing Is Not Enough; We Must Apply. Wishing Is Not Enough; We Must Do.” – Johann Wolfgang Von Goethe',
  ];
  
  btn.addEventListener('click', function(){
      var randomQuote = quotes[Math.floor(Math.random() * quotes.length)]
      output.innerHTML = randomQuote;
  })

Script.js

Firstly, we define the code for generating the weather app. You will have to go to openweathermap.org and create an account to generate your own API key. Our code fetches the weather data from Openweathermap.org’s API for the inputted city and gives utility to our weather app.

We won’t be diving deep into the explanation of the code here as you most probably aren’t aware of the basics of OOP/Functional programming.

The code also renders a new background every time you check the weather of a new city.

Next, we give functionality to a button that displays a random quote out of our predefined roster.

Style.css

Next, we define the layout of the various components that we have used in our html file. You are encouraged to play around with this part to give our web app a much better UI. We have not done anything fancy here.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background: #222;
    background-image: url('https://source.unsplash.com/1600x900/?landscape');
    font-size: 120%;
  }
  
  .card {
    background: #000000d0;
    color: white;
    padding: 2em;
    border-radius: 30px;
    width: 100%;
    max-width: 420px;
    margin: 1em;
  }
  
  .search {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  button {
    margin: 0.5em;
    border-radius: 50%;
    border: none;
    height: 44px;
    width: 44px;
    outline: none;
    background: #f80f0ffd;
    color: white;
    cursor: pointer;
    transition: 0.2s ease-in-out;
  }
  
  input.search-bar {
    border: none;
    outline: none;
    padding: 0.4em 1em;
    border-radius: 24px;
    background: #7c7c7c2b;
    color: white;
    font-family: inherit;
    font-size: 105%;
    width: calc(100% - 100px);
  }
  
  button:hover {
    background: #eedf076b;
  }
  
  h1.temp {
    margin: 0;
    margin-bottom: 0.4em;
  }
  
  .flex {
    display: flex;
    align-items: center;
  }
  
  .description {
    text-transform: capitalize;
    margin-left: 8px;
  }
  
  .weather.loading {
    visibility: hidden;
    max-height: 20px;
    position: relative;
  }
  
  .weather.loading:after {
    visibility: visible;
    content: "Loading...";
    color: white;
    position: absolute;
    top: 0;
    left: 20px;
  }
  html,body {
    font-family: 'Raleway', sans-serif;
    padding: 1em 2em;
    font-size: 18px;
    background: #222;
    color: #aaa
  }
  
  h1,h2 {
    font-weight: 200;
    margin: 0.4em 0;
  }
  h1 { font-size: 3.5em; }
  h2 {
    color: rgb(165, 47, 47);
    font-size: 2em;
  }
  .container {
    width: 360px;
}

#inputField {
    width: 300px;
    height: 46px;
    border-width: 0;
    border: 1px solid black;
    outline: none;
    font-size: 25px;
    vertical-align: middle;
}

#addToDo {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    vertical-align: middle;
    font-size: 30px;
}

.paragraph-styling {
    margin: 0;
    cursor: pointer;
    font-size: 20px;
}
#container {
  background-color: #0E2431;
  border: 5px solid #F5E4C3;
  height: 275px;
  width: 750px;
  margin: auto;
  text-align: center;
}

h1 {
  text-align: center;
  color: white;
}

#btn {
  margin: 50px auto;
  height: 50px;
  width: 250px;
  font-size: 22px;
  background-color: rgb(192, 191, 191);

}

#output {
  margin: 25px auto;
  font-size: 26px;
  color: white;
}
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: black;
  height: 100vh; 
  display: grid;
  grid-template: 100% / 3fr repeat(54, 1fr) 3fr;
  overflow: hidden;
}

.cell {
  width: 100%;
  height: 100%;
  border: 1px solid #fff1;
  z-index: 2;
}

h4::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

h4:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

h4::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(200 100% 80%);
  z-index: -1;
  transition: transform .3s ease;
}

h4 {
  position: relative;
  font-size: 5rem;
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui, sans-serif;
}

@media (orientation: landscape) {
  body {
    grid-auto-flow: column;
  }
}
.post {
	display: flex;
	text-decoration: none;
	color: inherit;
	max-width: 400px;
	position: relative;
	padding: 2rem;
	box-shadow: inset 0 0 0 4px #000, inset -4px -4px 0 6px #CCC;
	background-color: #FFF;
	cursor: pointer; 
}
.post:before {
		position: absolute; 
		left: 0;
		bottom: 0;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #000;
		transform-origin: 0 bottom 0;
		transform: scaleY(0);
		transition: .4s ease-out;
}


	


.post-title {
	position: relative;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.333;
	transition: .4s ease-out;
}

Deploying Your Web Application

Create an account on netlify.com. Upload the files that you have used in the project into a Github repository and clone it(Using create a new site from Git).Your project should look somewhat like this. If you wish to run your web-app locally,you can simply click on Run->Run without Debugging on Visual Studio Code while index.html file is active.

Made some rectifications?

Submit the link to your web-app below. The student having the best web-app will receive a exclusive gift hamper from Codevita Live.