Hello, is it allowed to ask advice for on my own creation that I have made? The codes work perfectly, but the whole thing is not completely responsive. If I may, I can upload my HTML, CSS, and JS files, right? I think it has something to do with the JS animations…
You can absolutely post your own projects. Just note that most users here are following the challenges provided by FCC. So responses may come slower for those asking about personal project questions. This is the html and css section. If you feel like its more of a javascript problem then feel free to post in the javascript section of the forum.
Hi, Cody, thanks for this very quick answer. I think it’s a problem in combination with the three codes (HTML, CSS, and JS). The JS elements are not responsive…
If you want you can post the code here, and if it needs to be moved then I can move it to the right section. When you add code to the forum you can use the format button that looks like </> when you reply. Note that you will need to use the button once for your html, once for your css, and then once for your js
And is there a limit on available words?
HTML file:
<!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>World Clock</title>
<link rel="stylesheet" href="./test4.css">
</head>
<body>
<div class="container">
<div class="header"><p>Some world cities with their local time zone based on UTC</p></div>
<div class="wrapper clearfix">
<div class="clock-container">
<div class="clo">
<div class="clf" id="div1">
<div class="cap">Brussels,Belgium</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD1"></div>
<div class="diISO" id="tDISO1"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div2">
<div class="cap">Seattle,WA,USA</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD2"></div>
<div class="diISO" id="tDISO2"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div3">
<div class="cap">Ottawa,Canada</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD3"></div>
<div class="diISO" id="tDISO3"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div4">
<div class="cap">Sydney,Australia</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD4"></div>
<div class="diISO" id="tDISO4"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div5">
<div class="cap">Beijing Munic.,China</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD5"></div>
<div class="diISO" id="tDISO5"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div6">
<div class="cap">Tokyo,Japan</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD6"></div>
<div class="diISO" id="tDISO6"></div>
</div>
</div>
</div>
</div>
<div class="wrapper clearfix"><br><br><br><br><br>
<div class="clock-container">
<div class="clo">
<div class="clf" id="div7">
<div class="cap">Dhaka,Bangladesh</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD7"></div>
<div class="diISO" id="tDISO7"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div8">
<div class="cap">London,England,UK</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD8"></div>
<div class="diISO" id="tDISO8"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div9">
<div class="cap">Yerevan,Armenia</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD9"></div>
<div class="diISO" id="tDISO9"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div10">
<div class="cap">Male,Maldives</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD10"></div>
<div class="diISO" id="tDISO10"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div11">
<div class="cap">Antananarivo,Madagasc.</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD11"></div>
<div class="diISO" id="tDISO11"></div>
</div>
</div>
<div class="clo">
<div class="clf" id="div12">
<div class="cap">Belmopan,Belize</div><div class="dot">●</div><div class="ho ho-ha"></div>
<div class="mi mi-ha"></div><div class="se se-ha"></div><div class="di" id="tD12"></div>
<div class="diISO" id="tDISO12"></div>
</div>
</div>
</div>
</div>
</div>
<script src="./test4.js"></script>
</body>
</html>
CSS code:
body{font:1.5rem Arial,sans-serif;padding-top:1.8rem;
background-image:url('https://topfishinggadgets.com/wp-content/uploads/2023/06/time1.webp');overflow:hidden;
background-repeat:no-repeat;background-position:center;background-size:cover;max-width:100%;height:100vh}
.header{width:100%;margin-top:-4rem;text-align:center;color:#faff00;background-color:grey;opacity:0.8}
.header p{font-size:2.5rem}
.container{display:flex;flex-wrap:wrap;justify-content:center}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.wrapper{display:flex;flex-direction:column;align-items:center;text-align:center}
.heading{color:white;font-size:1.5rem;width:100%}
.clock-container{display:flex;justify-content:center}
.clo{margin:0.6rem;
width:6rem;height:6rem;border:0.5rem solid white;border-radius:50%;position:relative;padding:2rem;
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
box-shadow:0 0 0 0.25rem rgba(0,0,0,0.1),inset 0 0 0 3.8rem #00008b,inset 0 0 0.6rem black,0 0 0.6rem rgba(0,0,0,0.2);
}
.clock-container:before,.clock-container:after{content:"";flex-grow:1;width:100%}
.dot{position:absolute;top:1.4rem;padding-left:2.1rem;color:#235be8;z-index:999;font-size:3.1rem}
.clf{position:relative;background:#00008a;border-radius:50%;width:100%;height:100%;transform:translateY(-0.2rem)}
.ho-ha{width:40%;height:0.2rem;background:#ffff00;position:absolute;top:51%;transform-origin:120%;transform:rotate(90deg);
transition:all 0.05s;transition-timing-function:cubic-bezier(0.1,2.7,0.58,1)}
.mi-ha{width:50%;height:0.2rem;background:#ffff00;position:absolute;top:49%;transform-origin:98%;transform:rotate(90deg);
transition:all 0.05s;transition-timing-function:cubic-bezier(0.1,2.7,0.58,1)}
.se-ha{width:55%;height:0.2rem;background:#ef4ccc;position:absolute;top:50%;transform-origin:91%;transform:rotate(90deg);
transition:all 0.05s;transition-timing-function:cubic-bezier(0.1,2.7,0.58,1)}
.di{position:relative;top:7.5rem;background-color:#c3ef13;margin-left:-1.4rem;width:9.4rem;font-size:1.3rem;font-weight:bold;
border:0.1rem solid black;border-radius:1.3rem}
.diISO{position:relative;top:7.5rem;background-color:#c3ef13;margin-left:-1.4rem;width:9.4rem;font-size:1.3rem;font-weight:bold;
border:0.1rem solid black;border-radius:1.3rem}
.cap{position:relative;top:-3.1rem;background-color:#c3ef13;margin-left:-3.1rem;width:11.7rem;font-size:1rem;font-weight:bold;
border:0.1rem solid black;border-radius:1.3rem}
/* @media only screen and (max-width:767px)
{
body{
background-color:red;
}
}
@media only screen and (min-width:767px)
{
body{
background-color:blue;
}
}
/* @media only screen and (min-width: 100px) and (max-width: 1080px) {
.container,.clock-container,.header,.wrapper,.clearfix,.clo,.clf,.cap,.mi,.mi-ha,.ho,.ho-ha,.se,.se-ha,.di,.dot,
.diISO {
width: 100%;
}
}
JS code:
function setDate(clockDiv, hoursToSuborAdd, tD, tDISO) {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
let hour = now.getHours() + hoursToSuborAdd; // alert('typeof(hour) = '+typeof(hour));
if (hour < 0){
hour=hour+24}
if (hour >= 24){hour=hour-24}
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
const secondHand = clockDiv.querySelector('.se-ha');
const minsHand = clockDiv.querySelector('.mi-ha');
const hourHand = clockDiv.querySelector('.ho-ha');
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
const timeString = formatTimeString(hour, mins, seconds);
const timeStringISO = formatTimeStringISO(hour, mins, seconds);
tD.textContent = timeString;
tDISO.textContent = timeStringISO;
}
function formatTimeString(hour, mins, seconds) {
const hourStr = String(hour).padStart(2, "0");
const minsStr = String(mins).padStart(2, "0");
const secondsStr = String(seconds).padStart(2, "0");
return `${hourStr}:${minsStr}:${secondsStr}`;
}
function formatTimeStringISO(hour, mins, seconds) {
const hourStr = String(hour % 12 || 12).padStart(2, "0");
const minsStr = String(mins).padStart(2, "0");
const secondsStr = String(seconds).padStart(2, "0");
const ampm = hour >= 12 ? "PM" : "AM";
return `${ampm}: ${hourStr}:${minsStr}:${secondsStr}`;
}
setInterval(() => {
const div1=document.getElementById("div1");const tD1=document.getElementById("tD1");
const tDISO1=document.getElementById("tDISO1");setDate(div1,0,tD1,tDISO1);
const div2=document.getElementById("div2");const tD2=document.getElementById("tD2");
const tDISO2=document.getElementById("tDISO2");setDate(div2,-9,tD2,tDISO2);
const div3=document.getElementById("div3");const tD3=document.getElementById("tD3");
const tDISO3=document.getElementById("tDISO3");setDate(div3,-6,tD3,tDISO3);
const div4=document.getElementById("div4");const tD4=document.getElementById("tD4");
const tDISO4=document.getElementById("tDISO4");setDate(div4,8,tD4,tDISO4);
const div5=document.getElementById("div5");const tD5=document.getElementById("tD5");
const tDISO5=document.getElementById("tDISO5");setDate(div5,6,tD5,tDISO5);
const div6=document.getElementById("div6");const tD6=document.getElementById("tD6");
const tDISO6=document.getElementById("tDISO6");setDate(div6,7,tD6,tDISO6);
const div7=document.getElementById("div7");const tD7=document.getElementById("tD7");
const tDISO7=document.getElementById("tDISO7");setDate(div7,4,tD7,tDISO7);
const div8=document.getElementById("div8");const tD8=document.getElementById("tD8");
const tDISO8=document.getElementById("tDISO8");setDate(div8,-1,tD8,tDISO8);
const div9=document.getElementById("div9");const tD9=document.getElementById("tD9");
const tDISO9=document.getElementById("tDISO9");setDate(div9,2,tD9,tDISO9);
const div10=document.getElementById("div10");const tD10=document.getElementById("tD10");
const tDISO10=document.getElementById("tDISO10");setDate(div10,3,tD10,tDISO10);
const div11=document.getElementById("div11");const tD11=document.getElementById("tD11");
const tDISO11=document.getElementById("tDISO11");setDate(div11,1,tD11,tDISO11);
const div12=document.getElementById("div12");const tD12=document.getElementById("tD12");
const tDISO12=document.getElementById("tDISO12");setDate(div12,-8,tD12,tDISO12);
}, 1000);
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.