Scribd
Upload
66 views18 pages

Weather App Res

This document contains the HTML and CSS code for a Google clone homepage. The HTML includes sections for the header menu, option icons, search bar, social media links, clock, and weather widget. The CSS styles these sections and elements, setting colors, sizes, positions, and other properties.

Uploaded by

williams oreoluwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
66 views18 pages

Weather App Res

This document contains the HTML and CSS code for a Google clone homepage. The HTML includes sections for the header menu, option icons, search bar, social media links, clock, and weather widget. The CSS styles these sections and elements, setting colors, sizes, positions, and other properties.

Uploaded by

williams oreoluwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

<!

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">
    <title>GOOGLE CLONE</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
   
</head>
<body>
    <div class="container" id="container">
        <div class="menu">
            <li><a href="#" class="img">Gmail</a></li>
            <li><a href="#" class="img">Images</a></li>
            <li><a href="#"><i class='bx bxs-grid' id="icon"></i></a></li>
            <li><a href="#" class="name">W</a></li>
        </div>
    </div>
    <div class="options">
        <div class="options-container">
            <div class="data">
                <li><div class="google">
                    <a href="#"><i class='bx bxl-google'></i></a>
                    <h6>Search</h6>
                </div></li>
                <li><div class="YouTube">
                    <a href="#"><i class='bx bxl-youtube'></i></a>
                    <h6>YouTube</h6>
                </div></li>
                <li><div class="mongo">
                    <a href="#"><i class='bx bxl-mongodb'></i></a>
                    <h6>Mongodb</h6>
                </div></li>
               
            </div>
            <div class="data">
                <li><div class="meta">
                    <a href="#"><i class='bx bxl-meta'></i></a>
                    <h6>Meta</h6>
                </div></li>
                <li><div class="twitter">
                    <a href="#"><i class='bx bxl-twitter'></i></a>
                    <h6>twitter</h6>
                </div></li>
                <li><div class="snapchat">
                    <a href="#"><i class='bx bxl-snapchat'></i></a>
                    <h6>Snapchat</h6>
                </div></li>
         
            </div>
            <div class="data">
                <li><div class="tiktok">
                    <a href="#"><i class='bx bxl-tiktok'></i></a>
                    <h6>tiktok</h6>
                </div></li>
                <li><div class="venmo">
                    <a href="#"><i class='bx bxl-venmo'></i></a>
                    <h6>Venmo</h6>
                </div></li>
                <li><div class="xing">
                    <a href="#"><i class='bx bxl-xing'></i><a>
                    <h6>Xing</h6>
                </div></li>
               
            </div>    
           
        </div>
     
    </div>
    <div class="logo">
        <h2><span class="G">G</span><span class="o1">o</span><span
class="o">o</span><span class="g">g</span><span class="l">l</span><span
class="e">e</span></h2>
        <div class="search-box">
            <button class="search-btn"><a href="#"><i class='bx bx-
search'></i></a></button>
            <input type="search" class="srch" placeholder="Search Google Or Type
URL">
            <button class="mic"><a href="#"><i class='bx bxs-
microphone'></i></a></button>
        </div>
    </div>
    <div class="socials">
        <div class="socials-container">
                <a href="#"><i class='bx bxl-youtube'></i></a>      <span><i
class='bx bx-dots-vertical-rounded'></i></span>
                <h3>YouTube</h3>
        </div>
        <div class="socials-container">
            <a href="#"><i class='bx bxl-github'></i></a>      <span><i
class='bx bx-dots-vertical-rounded'></i></span>
            <h3>Github</h3>
        </div>
        <div class="socials-container">
            <a href="#"><i class='bx bxl-facebook-circle'></i></a>      <span><i
class='bx bx-dots-vertical-rounded'></i></span>
            <h3>Facebook</h3>
        </div>
        <div class="socials-container">
            <a href="#"><i class='bx bxl-whatsapp' ></i></a>      <span><i
class='bx bx-dots-vertical-rounded'></i></span>
            <h3>Whatsapp</h3>
        </div>
       
    </div>
    <div class="time">
        <span id="hours">00</span>
        <span>:</span>
        <span id="minutes">00</span>
        <span>:</span>
        <span id="seconds">00</span>
        <span id="session">AM</span>
    </div>
    <div class=""background-cover></div>

    <section class="weather-app" id="weather-app">


        <div class="weather-wrapper">
           
            <div class="weather-container">
                <div class="app-title">
                    <p>Today's Weather Forecast</p>

                </div>
                <div class="cancel-icon" id="cancel-icon">
                    <i class='bx bx-x'></i>
                </div>
                <div class="notification"></div>
                <div class="weather-container">
                  <div class="weather-icon">
                    <img src="icons/unknown.png" alt="" />
                  </div>
                  <div class="temperature-value">
                    <p>- °<span>C</span></p>
                  </div>
                  <div class="temperature-description">
                    <p>-</p>
                  </div>
                  <div class="location">
                    <p>-</p>
                  </div>
                </div>
            </div>

        </div>
       
    </section>
    <script src="app.js"></script>

   
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}
.container {
  position: absolute;
  padding: 20px 10px;
  margin: 10px 10px;
  right: 0;
  display: flex;
  column-gap: 1rem;
}
.container.active {
  right: 1rem;
}
.container .menu {
  display: flex;
  column-gap: 1rem;
  list-style: none;
  text-decoration: none;
}
.container .menu li {
  text-decoration: none;
  font-size: 16px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: grey;
}
.container .menu li a {
  text-decoration: none;
}
.container .menu li a .menu {
  margin-top: 44px;
}
.container .menu li .name {
  padding: 8px 8px;
  background: rgb(36, 160, 36);
  border-radius: 50%;
  color: white;
  font-size: 12px;
}
.container .menu li .bxs-grid {
  font-size: 22px;
  margin-left: 5px;
  color: black;
  padding: 8px 8px;
  margin-top: -11px;
  border-radius: 50%;
}
.container .menu li .img {
  color: grey;
}
.container .menu li .img:hover {
  list-style: armenian;
}
.container .menu li .bxs-grid:hover {
  background: rgb(204, 199, 199);
}
.options {
  padding: 1px 1px;
  margin: 1px 1px;
  row-gap: 1rem;
}
.options {
  padding: 1px 1px;
  column-gap: 0.65rem;
}

.options .options-container li {
  column-gap: 0.1rem;
  row-gap: 0.1rem;
  margin: 3px 3px;
  font-size: 21px;
  padding: 19px 19px;
  border-radius: 5%;
}
.options .options-container li:hover {
  background: rgb(216, 216, 216);
}
.options .options-container .data li .google h6 {
  margin-top: 13px;
  color: black;
  font-family: myFont;
}
.options .options-container .data li .YouTube h6 {
  margin-top: 13px;
  color: black;
  font-family: myFont;
}
.options .options-container .data li .meta h6 {
  margin-top: 13px;
  color: black;
  font-family: myFont;
}
.options .options-container .data li .twitter h6 {
  margin-top: 13px;
  color: black;
  font-family: myFont;
}
.options .options-container .data li .facebook h6 {
  margin-top: 13px;
  color: black;
  font-family: myFont;
}
.options .options-container .data li .mongo h6 {
  margin-top: 13px;
  color: black;
  font-family: myFont;
}
.options .options-container .data li .snapchat h6 {
  margin-top: 13px;
  color: black;
  font-family: myFont;
}
.options .options-container .data li .venmo h6 {
  margin-top: 13px;
  color: black;
  font-family: myFont;
}
.options .options-container .data li .xing h6 {
  margin-top: 13px;
  color: black;
  font-family: myFont;
}
.options .options-container .data li .tiktok h6 {
  margin-top: 13px;
  color: black;
  font-family: "Sofia", sans-serif;
}
.options .options-container .data li .google a {
  text-align: center;
  padding: 8px 13px;
  border-radius: 5px;
  color: blue;
}

.options .options-container .data li .YouTube a {


  text-align: center;
  padding: 4px 9px;
  border-radius: 5px;
  color: red;
}

.options .options-container .data li .meta {


  text-align: center;
  padding: 8px 13px;
  border-radius: 5px;
  color: aqua;
}

.options .options-container .data li .xing a {


  text-align: center;
  padding: 8px 13px;
  border-radius: 5px;
  color: brown;
}

.options .options-container .data li .venmo a {


  text-align: center;
  padding: 8px 13px;
  border-radius: 5px;
  color: coral;
}

.options .options-container .data li .twitter a {


  text-align: center;
  padding: 4px 9px;
  border-radius: 5px;
  color: blue;
}

.options .options-container .data li .snapchat a {


  text-align: center;
  padding: 8px 13px;
  border-radius: 5px;
  color: yellow;
}
.options .options-container .data li .mongo a {
  text-align: center;
  padding: 8px 13px;
  border-radius: 5px;
  color: green;
}

.options .options-container .data li .tiktok a {


  text-align: center;
  padding: 8px 13px;
  border-radius: 5px;
  color: black;
}

.options .options-container {
  position: absolute;
  margin: 0 12px;
  font-size: 27px;
  right: 101%;
  margin-top: 70px;
  margin-right: 5px;
  column-gap: 2rem;
  row-gap: 2rem;
  padding: 5px 5px;
  background: white;
  border: 2px rgb(44, 44, 44) solid;
  border-radius: 5%;
  transition: ease-in-out 2%;
  border: 1px solid rgb(54, 54, 54);
  box-shadow: -3px -3px 3px 3px rgba(192, 192, 192, 0.74);
}
.options .options-container .bxl-google {
  color: rgb(90, 26, 207);
}
.options .options-container .bx-map {
  color: green;
}
.options .options-container.active {
  right: 1rem;
  transition: 0.002s ease-in-out;
}
.options .options-container .data {
  display: flex;
}
.options .options-container .data li {
  margin: 30px 10px;
}
.options .options-container .data li {
  list-style: none;
  text-decoration: none;
}
.options .options-container .data .account {
  text-decoration: none;
  font-size: 19px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  padding: 10px 10px;
  border-radius: 50%;
  background: rgb(36, 160, 36);
  color: white;
}
.options .options-container .data .account span {
  background: none;
}
.logo {
  font-family: myfont;
}
@font-face {
  font-family: myfont;
  src: url(Product-Sans-Bold-Italic.ttf);
}
.logo {
  align-items: center;
  text-align: center;
  margin-top: 200px;
  row-gap: 2rem;
}
.logo .search-box {
  margin-top: 30px;
  display: inline-flex;
  border-left: none;
  border-right: none;
}
.logo h2 {
  font-family: myfont;
  font-size: 80px;
}
.logo h2 .G {
  color: rgb(62, 161, 201);
}
.logo h2 .o1 {
  color: rgb(224, 46, 46);
}
.logo h2 .o {
  color: rgb(236, 236, 62);
}
.logo h2 .g {
  color: skyblue;
}
.logo h2 .l {
  color: rgb(57, 228, 57);
}
.logo h2 .e {
  color: rgb(224, 46, 46);
}

.search-box input {
  width: 450px;
  height: 50px;
}

.search-box {
  color: 2px solid red;
}
.logo .search-box .srch::placeholder {
  font-size: 16px;
}
.logo .search-box .srch:focus {
  border: none;
}
.logo .search-box .search-btn {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-right: transparent;
  background: none;
  margin-left: -60px;
}
.logo .search-box .srch {
  width: 450px;
  height: 50px;
  border: 1px solid black;
  border-left: none;
  border-right: none;
  padding-left: 33px;
  padding-right: 33px;

}
.logo.search.srch:focus {
  border: black;
  outline: none;
}

.logo .search-box .mic {


  width: 50px;
  height: 50px;

  border: 1px solid black;


  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-left: none;
  background: none;
  margin-right: -60px;
  font-size: 20px;
  color: red;
}
.logo .search-box .mic:focus {
  outline: none;
}
.logo .search-box .bx-search {
  font-size: 20px;
  color: grey;
}
.logo .search-box .bxs-microphone {
  color: blue;
}
.socials {
  display: flex;
  text-align: center;
  align-items: center;
  margin-left: 120px;
  padding: 5px 140;
  padding-right: 130px;
  justify-content: center;
  z-index: 10;
  left: 50%;
  cursor: pointer;
}
.socials .socials-container {
  text-align: center;
  margin-left: 34px;
  margin-top: 35px;
  height: 100px;
  padding-top: 18px;
  width: 110px;
  border-radius: 5%;
}
.socials .socials-container .bx-dots-vertical-rounded {
  display: none;
}
.socials
  .socials-container:hover.socials
  .socials-container
  .bx-dots-vertical-rounded {
  display: block;
  margin-top: 32px;
}
.socials .socials-container:hover {
  background: rgb(199, 197, 197);
}
.socials .socials-container .bxl-youtube {
  font-size: 26px;
  color: red;
  padding: 10px 10px;
  border-radius: 50%;
  background: rgb(255, 244, 244);
}
.socials .socials-container h3 {
  margin-top: 17px;
  font-weight: lighter;
  font-family: myfont;
  font-size: 16px;
}
.socials .socials-container .bxl-github {
  color: black;
  font-size: 26px;
  padding: 10px 10px;
  border-radius: 50%;
  background: rgb(255, 244, 244);
}
.socials .socials-container .bxl-facebook-circle {
  color: rgb(66, 66, 250);
  font-size: 26px;
  padding: 10px 10px;
  border-radius: 50%;
  background: rgb(255, 244, 244);
}
.socials .socials-container .bxl-whatsapp {
  color: lightgreen;
  font-size: 26px;
  padding: 10px 10px;
  border-radius: 50%;
  background: rgb(255, 244, 244);
}
.time {
  font-family: myFont;
  color: black;
  font-weight: lighter;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 20px;
  margin: 30px 30px;
  font: 30px;
}
/* .weather-app{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2233;
} */
body {
  background: linear-gradient(to right, #667db6);
  font-family: sans-serif;
}

.weather-app {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.363);
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 3;
  transition: 1s ease-in-out;
}

.notification {
  color: black;
  position: absolute;
  left: 0;
  background-color: rgb(218, 134, 134);
  width: 100%;
  align-items: center;
  font-size: 2rem;
}
.weather-wrapper {
  position: absolute;
  top: 4rem;
  left: 19rem;
}
.app-title {
  font-size: 3rem;
  font-family: myfont;
}
.weather-container {
  font-size: 2.8rem;
  background-color: white;
  padding: 2rem 5rem;
  place-items: center;
  align-items: center;
  border-radius: 3px;
  border-radius: 2rem;
  z-index: 234;
  text-align: center;
}
.cancel-icon {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 23;
  cursor: pointer;
}
.weather-container-icon {
  font-size: 5rem;
  text-align: center;
}

@media screen and (max-width:566px){


  .search-box{
    max-width: 16rem;
  }
  .time{
    display: absolute;
    top: -1rem;
  }
  .options{
    max-width: 4rem;
  }
  .weather-app{
    padding: 2rem 2rem;
    object-fit: contain;
    place-items: center;
  }

 
}

@media screen and (max-width:358px){


  .time{
    display: none;
  }
  .search-box{
    max-width: 10rem;
  }
  .socials{
    display: none;
  }

JS

let menu = document.querySelector(".options-container");


document.querySelector("#icon").onclick = () => {
  menu.classList.toggle("active");
};
function displayTime() {
  let dateTime = new Date();
  let hrs = dateTime.getHours();
  let min = dateTime.getMinutes();
  let sec = dateTime.getSeconds();
  let session = document.getElementById("session");
  if (hrs >= 12) {
    session.innerHTML = "PM";
  } else {
    session.innerHTML = "AM";
  }
  if (hrs > 12) {
    hrs = hrs - 12;
  }

  document.getElementById("hours").innerHTML = hrs;
  document.getElementById("minutes").innerHTML = min;
  document.getElementById("seconds").innerHTML = sec;
}
setInterval(displayTime, 10);

// Tutorial by http://youtube.com/CodeExplained
// api key : 82005d27a116c2880c8f0fcb866998a0

// SELECT ELEMENTS
const iconElement = document.querySelector(".weather-icon");
const tempElement = document.querySelector(".temperature-value p");
const descElement = document.querySelector(".temperature-description p");
const locationElement = document.querySelector(".location p");
const notificationElement = document.querySelector(".notification");

const weather = {};

weather.temperature = {
  unit: "celsius",
};

KELVIN = 273;

const key = "82005d27a116c2880c8f0fcb866998a0";

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(setPosition, showError);
} else {
  notificationElement.style.display = "block";
  notificationElement.innerHTML = `<p> Browser does not support geolocation`;
}

function setPosition(position) {
  let latitude = position.coords.latitude;
  let longitude = position.coords.longitude;

  getWeather(latitude, longitude);
}

function showError(error) {
  notificationElement.style.display = "block";
  notificationElement.innerHTML = `<p> ${error.message} </p>`;
}

function getWeather(latitude, longitude) {


  const api = `http://api.openweathermap.org/data/2.5/weather?lat=$
{latitude}&lon=${longitude}&appid=${key}`;
  console.log(api)

  fetch(api)
    .then(function (response) {
      let data = response.json();
      return data;
    })
    .then(function (data) {
      weather.temperature.value = Math.floor(data.main.temp - KELVIN);
      weather.description = data.weather[0].description;
      weather.iconId = data.weather[0].icon;
      weather.city = data.name;
      weather.country = data.sys.country;
    })
    .then(function () {
      displayWeather();
    });
}

function displayWeather() {
  iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
  tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
  descElement.innerHTML = weather.description;
  locationElement.innerHTML = `${weather.city}, ${weather.country}`;
}

const weatherApp = document.getElementById("weather-app");


const cancelIcon = document.getElementById("cancel-icon")
console.log(cancelIcon)

window.addEventListener("DOMContentLoaded", function(){
  setTimeout(function(){
    weatherApp.style.opacity = 1
  }, 3000)
});
cancelIcon.addEventListener("click", function(){
  weatherApp.style.display = "none"
})

You might also like