Coding with Rumaysa

Phone Simulator

<!DOCTYPE HTML>
<html>
<head>
  <title>Page Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="phone">
 <div id="screen" class="screen">
  <div id="settingsApp" class="appData">
   <h3>Change Theme</h3>
   <div class="themeChange" onclick="changeTheme('candy')">Switch to 'Candy' theme</div>
   <div class="themeChange" onclick="changeTheme('dark_sky')">Switch to 'Dark Sky' theme</div>
   <div class="themeChange lastChange" onclick="changeTheme('sunset')">Switch to 'Sunset' theme</div>
  </div>
  <div id="weatherApp" class="appData">
   <h1 class="weatherHeading">London</h3>
   <h3 class="weatherTitle">Clear</h3>
   <h1 class="weatherNumber">26&#176;</h1>
  </div>
 </div>

<div id="dataRow" class="data row">
  <img src="https://justcodaborate.org/project_assets/wifi-img.png" class="wifi">
  <span id="clock" class="time"></span>
 </div>
 <div id="apps" class="apps row">
  <div onclick="openApp('settings')" class="app" id="settings">
   <img class="app-icon" src="https://justcodaborate.org/project_assets/settings-icon.png">
   <span class="app-title">Settings</span>
  </div>
  <div onclick="openApp('weather')" class="app" id="weather">
   <img class="app-icon" src="https://justcodaborate.org/project_assets/weather-icon.png">
   <span class="app-title">Weather</span>
  </div>
 </div>

</body>
</html>

body {
 background-color: #a3a3a3;
 font-family: arial;
}

.phone {
 border: 30px solid #ca75ff;
 border-bottom: 55px solid #ca75ff;
 border-radius: 10px;
 width: 27%;
 height: 73%;
 position: absolute;
 left: 50%;
 transform: translate(-50%);
}

.screen { 
 background-color: black;
 width: 100%;
 height: 100%;
}

.home-btn {
 position: absolute;
 border-radius: 50%;
 border: 1px solid #b76e79;
 left: 40%;
 margin-top: 5px;
 width: 18%;
 height: 10%;
 cursor: pointer;
}

.row {
 display: flex;
 flex-wrap: wrap;
}

.apps {
 display: none;
 top: 10%;
 width: 96.7%;
 z-index: 0;
 padding: 5px;
 position: absolute;
}

.data {
 background-color: #4d4d4d;
 width: 94.99%;
 z-index: 0;
 padding: 5px;
 position: absolute;
 top: 0%;
 display: none;
}

.time {
 color: white;
 text-align: center;
 margin-top: 5px;
 margin-left: 50px;
}

.app {
 width: 60px;
 height: 60px;
 border-radius: 10px;
 margin-right: 10px;
 cursor: pointer;
}

.app-title {
 color: white;
 position: absolute;
 top: 105%;
}

#settings {
 background: linear-gradient(to top, #7a7a7a, #595959);
}

#weather {
 background: linear-gradient(to bottom, #3579e6, #428bff);
}

#settings img {
 width: 50px;
 height: 50px;
}

#weather img {
 width: 50px;
 height: 50px;
 margin-left: 6px;
}

.app-icon {
 position: absolute;
 top: 15%;
 margin-left: 5px;
}

.appData {
 display: none;
 position: absolute;
 top: 6%;
}

#settingsApp h3 {
 margin-left: 10px;
}

.themeChange {
 cursor: pointer;
 font-weight: bold;
 width: 94.99%;
 padding: 5px;
 background-color: #fcfcfc;
 border-top: 1px solid #b5b5b5;
}

.lastChange {
 border-bottom: 1px solid #b5b5b5;
}

.weatherHeading {
 color: white;
 text-align: center;
 font-weight: 100;
 margin-left: 50px;
}

.weatherTitle {
 color: white;
 text-align: center;
 font-weight: 100;
 margin-left: 47px;
}

.weatherNumber {
 color: white;
 text-align: center;
 font-weight: 100;
 font-size: 50px;
 margin-left: 65px;
}

function currentTime() {
  var date = new Date();
  var hour = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
  hour = updateTime(hour);
  min = updateTime(min);
  sec = updateTime(sec);
  document.getElementById("clock").innerText = hour + ":" + min;
  var t = setTimeout(function(){ currentTime() }, 1000);
}

function updateTime(x) {
  if (x < 10) {
    return "0" + x;
  }
  else {
    return x;
  }
}

currentTime();

var candy_theme = "linear-gradient(to bottom, #fd85ff, #ffe96b)";
var dark_sky_theme = "linear-gradient(to top, #0a003d, #000000)";
var sunset_theme = "linear-gradient(to bottom, #ffb657, #ffb8b5)";

var current_theme = candy_theme;

var settingsScreen = "white";
var weatherScreen = "linear-gradient(to top, #5891ed, #5b8fe3)";

var screen = document.getElementById("screen");
var homeBtn = document.getElementById("homeBtn");
var appsRow = document.getElementById("apps");
var dataRow = document.getElementById("dataRow");
var settingsApp = document.getElementById("settingsApp");
var weatherApp = document.getElementById("weatherApp");

var phoneOn = false;
var inApp = false;
var homeBtnShow = false;

function openApp(appName) {
 inApp = true;
 homeBtnShow = true;
 homeBtn.setAttribute("onclick","homeScreen()");
 appsRow.style.display = "none";

if(appName=="settings") {
  screen.style.background = settingsScreen;
  settingsApp.style.display = "block";
 } else if(appName=="weather") {
  screen.style.background = weatherScreen;
  weatherApp.style.display = "block";
 }
}

function homeScreen() {
 if(inApp==true) {
  homeBtnShow = false;
  screen.style.background = current_theme;
  homeBtn.setAttribute("onclick","turnOff()");
  appsRow.style.display = "flex"; 
  settingsApp.style.display = "none";
  weatherApp.style.display = "none";
 }
}